/* Theme Lab: isolated visual skins for future tenant theming. Default Pro layout stays untouched. */
.theme-lab-switcher{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
  margin:14px 0 0 auto;
  padding:8px;
  border:1px solid rgba(8,32,68,.14);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 42px rgba(8,32,68,.16);
  backdrop-filter:blur(14px);
}
body.theme-lab-switcher-hidden .theme-lab-switcher{
  display:none!important;
}
.theme-lab-switcher span{
  padding:0 6px;
  color:#52657D;
  font-size:10px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.theme-lab-switcher em{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  border-radius:999px;
  padding:5px 8px;
  font-style:normal;
  font-size:9px;
  font-weight:950;
  letter-spacing:.10em;
  white-space:nowrap;
}
.theme-lab-switcher em.on{
  color:#065F46;
  background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.22);
}
.theme-lab-switcher em.off{
  color:#92400E;
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.24);
}
.theme-lab-switcher button{
  min-width:44px;
  border:1px solid rgba(33,150,243,.18);
  border-radius:12px;
  padding:8px 10px;
  color:#0A4EA3;
  background:#fff;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
}
.theme-lab-switcher button.active{
  color:#fff;
  background:#0A4EA3;
  border-color:#0A4EA3;
}
.theme-lab-switcher button[data-theme="fun"].active{background:#F97316;border-color:#F97316}
.theme-lab-switcher button[data-theme="cookies"].active{background:#B45309;border-color:#B45309}
.theme-lab-switcher button[data-theme="jelly"].active{background:#7C3AED;border-color:#7C3AED}
.theme-lab-switcher button[data-theme="lollipop"].active{background:#DB2777;border-color:#DB2777}
.theme-lab-switcher .show-btn{
  color:#fff;
  background:linear-gradient(135deg,#0A4EA3,#E11D8A);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(10,78,163,.22);
}

body.theme-fun,
body.theme-teen{
  --blue:#0EA5E9;
  --blue-dark:#7C3AED;
  --cyan:#22D3EE;
  --green:#10B981;
  --red:#F43F5E;
  --gold:#FACC15;
  --ink:#10172A;
  background:
    radial-gradient(circle at 10% 8%,rgba(250,204,21,.30),transparent 26%),
    radial-gradient(circle at 82% 12%,rgba(34,211,238,.28),transparent 28%),
    radial-gradient(circle at 88% 82%,rgba(244,63,94,.20),transparent 30%),
    linear-gradient(135deg,#F8FBFF,#FFF7AD 34%,#D7FFF7 66%,#FFE4F3);
}
body.theme-fun .hero,
body.theme-fun .panel,
body.theme-fun .hero-spotlight,
body.theme-fun .top-card,
body.theme-fun .insight-card,
body.theme-teen .hero,
body.theme-teen .panel,
body.theme-teen .hero-spotlight,
body.theme-teen .top-card,
body.theme-teen .insight-card{
  border-color:rgba(249,115,22,.22)!important;
  box-shadow:0 18px 48px rgba(124,58,237,.13),0 0 0 1px rgba(34,211,238,.10)!important;
}
body.theme-fun .hero:after,
body.theme-teen .hero:after{
  background:
    linear-gradient(115deg,transparent 0 40%,rgba(249,115,22,.15) 40% 54%,transparent 54%),
    radial-gradient(circle at 80% 34%,rgba(250,204,21,.26),transparent 18%),
    radial-gradient(circle at 87% 52%,rgba(34,211,238,.22),transparent 24%)!important;
}
body.theme-fun .h1 span,
body.theme-fun .rank-num,
body.theme-fun .impact,
body.theme-teen .h1 span,
body.theme-teen .rank-num,
body.theme-teen .impact{
  color:#F97316!important;
}
body.theme-fun .live,
body.theme-fun .pill.gold,
body.theme-fun .btn.gold,
body.theme-teen .live,
body.theme-teen .pill.gold,
body.theme-teen .btn.gold{
  background:linear-gradient(135deg,#F97316,#FACC15 46%,#22D3EE)!important;
  color:white!important;
  border-color:transparent!important;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card,
body.theme-teen #top10.top3-strip > .top-card.pro-card{
  overflow:hidden;
  isolation:isolate;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card > .fun-smoke,
body.theme-teen #top10.top3-strip > .top-card.pro-card > .fun-smoke{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card.rank-2 > .fun-smoke,
body.theme-teen #top10.top3-strip > .top-card.pro-card.rank-2 > .fun-smoke{
  z-index:0;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card.rank-1 > .fun-smoke,
body.theme-fun #top10.top3-strip > .top-card.pro-card.rank-3 > .fun-smoke,
body.theme-teen #top10.top3-strip > .top-card.pro-card.rank-1 > .fun-smoke,
body.theme-teen #top10.top3-strip > .top-card.pro-card.rank-3 > .fun-smoke{
  z-index:1;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card > .fun-smoke::before,
body.theme-teen #top10.top3-strip > .top-card.pro-card > .fun-smoke::before{
  content:"";
  position:absolute;
  inset:-38%;
  border-radius:42%;
  opacity:0;
  filter:blur(22px) saturate(1.35);
  background:
    radial-gradient(circle at 34% 42%,rgba(250,204,21,.55),transparent 24%),
    radial-gradient(circle at 64% 38%,rgba(34,211,238,.45),transparent 28%),
    radial-gradient(circle at 52% 67%,rgba(244,63,94,.32),transparent 26%),
    radial-gradient(circle at 76% 66%,rgba(124,58,237,.24),transparent 24%);
  animation:none;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card > .rank-badge,
body.theme-fun #top10.top3-strip > .top-card.pro-card > .name,
body.theme-fun #top10.top3-strip > .top-card.pro-card > .meta,
body.theme-fun #top10.top3-strip > .top-card.pro-card > .top-stats,
body.theme-teen #top10.top3-strip > .top-card.pro-card > .rank-badge,
body.theme-teen #top10.top3-strip > .top-card.pro-card > .name,
body.theme-teen #top10.top3-strip > .top-card.pro-card > .meta,
body.theme-teen #top10.top3-strip > .top-card.pro-card > .top-stats{
  position:relative;
  z-index:2;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card > .avatar,
body.theme-teen #top10.top3-strip > .top-card.pro-card > .avatar{
  position:absolute;
  z-index:3;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card.theme-lab-pop,
body.theme-fun #top10.top3-strip > .top-card.pro-card.theme-lab-show,
body.theme-teen #top10.top3-strip > .top-card.pro-card.theme-lab-pop,
body.theme-teen #top10.top3-strip > .top-card.pro-card.theme-lab-show{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
}
body.theme-fun #top10.top3-strip > .top-card.pro-card.rank-1 > .fun-smoke::before,
body.theme-fun #top10.top3-strip > .top-card.pro-card.rank-2 > .fun-smoke::before,
body.theme-fun #top10.top3-strip > .top-card.pro-card.rank-3 > .fun-smoke::before,
body.theme-teen #top10.top3-strip > .top-card.pro-card.rank-1 > .fun-smoke::before,
body.theme-teen #top10.top3-strip > .top-card.pro-card.rank-2 > .fun-smoke::before,
body.theme-teen #top10.top3-strip > .top-card.pro-card.rank-3 > .fun-smoke::before{
  animation:funTopSmokeSync 18s cubic-bezier(.42,0,.18,1) infinite both!important;
}
@keyframes funTopSmokeSync{
  0%{transform:translate3d(-46%,4%,0) rotate(-6deg) scale(1.04);opacity:0}
  7%{transform:translate3d(-32%,2%,0) rotate(-3deg) scale(1.08);opacity:.28}
  15%{transform:translate3d(0%,0%,0) rotate(1deg) scale(1.13);opacity:.76}
  23%{transform:translate3d(28%,-2%,0) rotate(5deg) scale(1.16);opacity:.66}
  31%{transform:translate3d(56%,2%,0) rotate(8deg) scale(1.10);opacity:0}
  100%{transform:translate3d(56%,2%,0) rotate(8deg) scale(1.10);opacity:0}
}
body.theme-fun .player-name,
body.theme-fun .top-card .name,
body.theme-teen .player-name,
body.theme-teen .top-card .name{
  letter-spacing:-.035em;
}

body.theme-cookies{
  --blue:#1D4ED8;
  --blue-dark:#123A8C;
  --cyan:#0F766E;
  --green:#047857;
  --red:#BE123C;
  --gold:#A16207;
  --ink:#24160E;
  background:
    radial-gradient(circle at 12% 16%,rgba(146,64,14,.18) 0 8px,transparent 9px),
    radial-gradient(circle at 82% 10%,rgba(67,36,20,.16) 0 5px,transparent 6px),
    radial-gradient(circle at 72% 78%,rgba(180,83,9,.14) 0 10px,transparent 11px),
    repeating-linear-gradient(135deg,rgba(161,98,7,.055) 0 10px,transparent 10px 30px),
    linear-gradient(135deg,#FFFDF8,#F2F7FF 46%,#FFF3DF);
}
body.theme-cookies .hero,
body.theme-cookies .panel,
body.theme-cookies .hero-spotlight,
body.theme-cookies .top-card,
body.theme-cookies .insight-card{
  background:
    radial-gradient(circle at 15% 18%,rgba(120,53,15,.18) 0 4px,transparent 5px),
    radial-gradient(circle at 86% 28%,rgba(69,26,3,.16) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 82%,rgba(180,83,9,.13) 0 5px,transparent 6px),
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,247,237,.80) 52%,rgba(239,246,255,.78))!important;
  border-color:rgba(146,64,14,.28)!important;
  border-radius:24px!important;
  box-shadow:0 20px 46px rgba(120,53,15,.12),0 8px 0 rgba(146,64,14,.07),inset 0 1px 0 rgba(255,255,255,.86)!important;
}
body.theme-cookies .hero:after{
  background:
    radial-gradient(circle at 83% 24%,rgba(120,53,15,.18) 0 5px,transparent 6px),
    radial-gradient(circle at 90% 40%,rgba(69,26,3,.16) 0 3px,transparent 4px),
    radial-gradient(circle at 76% 54%,rgba(180,83,9,.15) 0 4px,transparent 5px),
    radial-gradient(circle at 82% 42%,rgba(245,158,11,.19) 0 58px,rgba(180,83,9,.08) 59px 86px,transparent 88px),
    linear-gradient(115deg,transparent 0 41%,rgba(146,64,14,.12) 41% 54%,transparent 54%)!important;
}
body.theme-cookies .h1 span,
body.theme-cookies .rank-num,
body.theme-cookies .impact{
  color:#92400E!important;
}
body.theme-cookies .live,
body.theme-cookies .pill.gold,
body.theme-cookies .btn.gold{
  background:linear-gradient(135deg,#92400E,#C47A1C 52%,#1D4ED8)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.theme-cookies .top-card:first-child{
  background:
    radial-gradient(circle at 82% 24%,rgba(69,26,3,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 66%,rgba(120,53,15,.14) 0 4px,transparent 5px),
    linear-gradient(135deg,#FFFFFF,#FFF4E2 48%,#EAF4FF)!important;
}
body.theme-cookies .top-card:before{
  background:
    radial-gradient(circle at 36% 34%,rgba(69,26,3,.36) 0 4px,transparent 5px),
    radial-gradient(circle at 63% 58%,rgba(120,53,15,.26) 0 5px,transparent 6px),
    radial-gradient(circle,rgba(217,119,6,.24),rgba(245,158,11,.15) 62%,transparent 64%)!important;
}
body.theme-jelly{
  --blue:#0891B2;
  --blue-dark:#6D28D9;
  --cyan:#0D9488;
  --green:#0F766E;
  --red:#E11D48;
  --gold:#8B5CF6;
  --ink:#151B35;
  background:
    radial-gradient(ellipse at 14% 18%,rgba(236,72,153,.16) 0 24px,transparent 25px),
    radial-gradient(ellipse at 86% 16%,rgba(20,184,166,.17) 0 30px,transparent 31px),
    radial-gradient(ellipse at 75% 82%,rgba(124,58,237,.16) 0 28px,transparent 29px),
    repeating-linear-gradient(90deg,rgba(124,58,237,.055) 0 12px,rgba(6,182,212,.05) 12px 24px,transparent 24px 42px),
    linear-gradient(135deg,#FBFDFF,#F5F0FF 44%,#E9FFFB);
}
body.theme-jelly .hero,
body.theme-jelly .panel,
body.theme-jelly .hero-spotlight,
body.theme-jelly .top-card,
body.theme-jelly .insight-card{
  background:
    radial-gradient(ellipse at 18% 20%,rgba(20,184,166,.18) 0 18px,transparent 19px),
    radial-gradient(ellipse at 82% 22%,rgba(236,72,153,.15) 0 15px,transparent 16px),
    radial-gradient(ellipse at 70% 82%,rgba(124,58,237,.14) 0 20px,transparent 21px),
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(245,243,255,.78) 50%,rgba(236,254,255,.78))!important;
  border-color:rgba(124,58,237,.24)!important;
  border-radius:28px!important;
  box-shadow:0 24px 56px rgba(109,40,217,.14),0 12px 30px rgba(13,148,136,.08),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
body.theme-jelly .hero:after{
  background:
    radial-gradient(ellipse at 82% 28%,rgba(45,212,191,.24) 0 24px,transparent 25px),
    radial-gradient(ellipse at 91% 44%,rgba(244,114,182,.21) 0 18px,transparent 19px),
    radial-gradient(ellipse at 76% 58%,rgba(139,92,246,.20) 0 28px,transparent 29px),
    radial-gradient(circle at 80% 42%,rgba(255,255,255,.30),transparent 19%),
    linear-gradient(115deg,transparent 0 40%,rgba(124,58,237,.12) 40% 54%,transparent 54%)!important;
}
body.theme-jelly .h1 span,
body.theme-jelly .rank-num,
body.theme-jelly .impact{
  color:#6D28D9!important;
}
body.theme-jelly .live,
body.theme-jelly .pill.gold,
body.theme-jelly .btn.gold{
  background:linear-gradient(135deg,#7C3AED,#EC4899 48%,#0891B2)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.theme-jelly .top-card:first-child{
  background:
    radial-gradient(ellipse at 80% 30%,rgba(45,212,191,.22) 0 16px,transparent 17px),
    radial-gradient(ellipse at 67% 70%,rgba(244,114,182,.17) 0 14px,transparent 15px),
    linear-gradient(135deg,#FFFFFF,#F5F3FF 48%,#E8FFFB)!important;
}
body.theme-jelly .top-card:before{
  background:
    radial-gradient(ellipse at 34% 38%,rgba(255,255,255,.45) 0 15px,transparent 16px),
    radial-gradient(ellipse,rgba(45,212,191,.25),rgba(124,58,237,.18) 62%,transparent 64%)!important;
}
body.theme-lollipop{
  --blue:#0284C7;
  --blue-dark:#BE185D;
  --cyan:#06B6D4;
  --green:#65A30D;
  --red:#E11D48;
  --gold:#EAB308;
  --ink:#18213A;
  background:
    repeating-linear-gradient(45deg,rgba(219,39,119,.08) 0 10px,rgba(255,255,255,.36) 10px 20px,rgba(14,165,233,.08) 20px 30px,rgba(255,255,255,.34) 30px 40px),
    radial-gradient(circle at 86% 16%,rgba(250,204,21,.18),transparent 28%),
    linear-gradient(135deg,#FFFFFF,#EFF9FF 50%,#FFF1F6);
}
body.theme-lollipop .hero,
body.theme-lollipop .panel,
body.theme-lollipop .hero-spotlight,
body.theme-lollipop .top-card,
body.theme-lollipop .insight-card{
  background:
    repeating-linear-gradient(45deg,rgba(219,39,119,.055) 0 8px,transparent 8px 18px,rgba(14,165,233,.05) 18px 26px,transparent 26px 38px),
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(240,249,255,.80) 50%,rgba(253,242,248,.80))!important;
  border-color:rgba(219,39,119,.24)!important;
  border-radius:30px!important;
  box-shadow:0 20px 50px rgba(2,132,199,.14),0 0 0 1px rgba(234,179,8,.12),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
body.theme-lollipop .hero:after{
  background:
    repeating-conic-gradient(from -18deg at 83% 42%,rgba(219,39,119,.18) 0deg 18deg,rgba(255,255,255,.30) 18deg 36deg,rgba(14,165,233,.16) 36deg 54deg,rgba(255,255,255,.30) 54deg 72deg),
    radial-gradient(circle at 83% 42%,rgba(255,255,255,.58) 0 28px,rgba(250,204,21,.18) 29px 70px,transparent 72px),
    linear-gradient(115deg,transparent 0 41%,rgba(219,39,119,.11) 41% 54%,transparent 54%)!important;
  opacity:.86;
}
body.theme-lollipop .h1 span,
body.theme-lollipop .rank-num,
body.theme-lollipop .impact{
  color:#BE185D!important;
}
body.theme-lollipop .live,
body.theme-lollipop .pill.gold,
body.theme-lollipop .btn.gold{
  background:linear-gradient(135deg,#DB2777,#0EA5E9 66%,#EAB308)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.theme-lollipop .top-card:first-child{
  background:
    repeating-linear-gradient(45deg,rgba(219,39,119,.07) 0 7px,transparent 7px 16px,rgba(14,165,233,.06) 16px 23px,transparent 23px 32px),
    linear-gradient(135deg,#FFFFFF,#FDF2F8 45%,#F0F9FF)!important;
}
body.theme-lollipop .top-card:before{
  background:
    repeating-conic-gradient(from 12deg,rgba(219,39,119,.28) 0deg 28deg,rgba(255,255,255,.45) 28deg 56deg,rgba(14,165,233,.22) 56deg 84deg,rgba(255,255,255,.45) 84deg 112deg),
    radial-gradient(circle,rgba(250,204,21,.22),transparent 64%)!important;
}
body.theme-cookies .top-card,
body.theme-cookies .stat,
body.theme-cookies .spotlight-stat,
body.theme-jelly .top-card,
body.theme-jelly .stat,
body.theme-jelly .spotlight-stat,
body.theme-lollipop .top-card,
body.theme-lollipop .stat,
body.theme-lollipop .spotlight-stat{
  border-radius:20px!important;
}
body.theme-cookies .player-name,
body.theme-cookies .top-card .name,
body.theme-jelly .player-name,
body.theme-jelly .top-card .name,
body.theme-lollipop .player-name,
body.theme-lollipop .top-card .name{
  font-weight:950;
}

.theme-lab-pop{
  animation:themeLabPop .38s cubic-bezier(.2,.8,.2,1);
}
.theme-lab-show{
  animation:themeLabShow .92s cubic-bezier(.18,.9,.22,1);
}
@keyframes themeLabPop{
  from{transform:translateY(8px) scale(.985);opacity:.78}
  to{transform:translateY(0) scale(1);opacity:1}
}
@keyframes themeLabShow{
  0%{transform:translateY(28px) scale(.94);opacity:.25;filter:saturate(1)}
  55%{transform:translateY(-4px) scale(1.025);opacity:1;filter:saturate(1.25)}
  100%{transform:translateY(0) scale(1);opacity:1;filter:saturate(1)}
}

@media(max-width:760px){
  .theme-lab-switcher{
    justify-content:center;
    margin-top:12px;
  }
  .theme-lab-switcher span{display:none}
  .theme-lab-switcher em{display:none}
  .theme-lab-switcher button{flex:1}
}