/* ============================================================================================
   Glass Stage — a public site theme (2.4). The Stage layout, re-skinned with frosted glass,
   a soft aurora background and floating stat / step / FAQ cards. Activate in Admin → Appearance.
   ============================================================================================ */
.theme-glass {
  --gl-glass: rgba(255,255,255,.55); --gl-glass2: rgba(255,255,255,.75); --gl-rim: rgba(255,255,255,.85);
  --gl-blur: blur(20px) saturate(180%);
  --gl-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 24px 60px -34px rgba(60,20,140,.45);
  --st-bg: #F5F2FC;
  background: #F5F2FC !important;
  background-image:
    radial-gradient(42rem 34rem at -5% 15%, rgba(167,139,250,.32), transparent 70%),
    radial-gradient(36rem 30rem at 105% 35%, rgba(244,114,182,.26), transparent 70%),
    radial-gradient(40rem 32rem at 30% 75%, rgba(103,232,249,.22), transparent 70%),
    radial-gradient(34rem 28rem at 90% 95%, rgba(253,224,71,.18), transparent 70%) !important;
  background-attachment: fixed !important;
}
html[data-mode="dark"] .theme-glass {
  --gl-glass: rgba(28,22,56,.55); --gl-glass2: rgba(36,30,70,.72); --gl-rim: rgba(255,255,255,.12);
  --gl-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px -36px rgba(0,0,0,.9);
  background: #08061A !important;
  background-image:
    radial-gradient(42rem 34rem at -5% 15%, rgba(124,58,237,.35), transparent 70%),
    radial-gradient(36rem 30rem at 105% 35%, rgba(236,72,153,.26), transparent 70%),
    radial-gradient(40rem 32rem at 30% 75%, rgba(6,182,212,.2), transparent 70%) !important;
}

/* header: deep frosted glass that lets the aurora glow through */
.theme-glass .site-header { background: linear-gradient(120deg, rgba(30,12,70,.72), rgba(60,16,90,.62)) !important; border-block-end: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 14px 40px -22px rgba(60,20,140,.6); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }

/* hero: softer, glassy CTA row */
.theme-glass .stg-hero__shade { background: linear-gradient(180deg, rgba(20,8,50,.1) 0%, rgba(20,8,50,.0) 35%, rgba(30,10,70,.72) 100%) !important; }
.theme-glass .stg-hero__cta .stg-btn--glass, .theme-glass .stg-pill { background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.45) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.theme-glass .stg-ribbon { background: linear-gradient(90deg, rgba(124,58,237,.9), rgba(236,72,153,.9), rgba(6,182,212,.9)); }

/* stats: a floating glass strip */
.theme-glass .stg-stats { background: transparent !important; color: var(--st-ink); padding-inline: 16px; }
.theme-glass .stg-stats__in { margin-top: 22px; position: relative; z-index: 3; border-radius: 28px; background: var(--gl-glass2); border: 1px solid var(--gl-rim); box-shadow: var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.theme-glass .stg-stat + .stg-stat { border-inline-start-color: rgba(60,20,140,.1) !important; }
.theme-glass .stg-stat > span:last-child { color: var(--st-ink-2) !important; }
.theme-glass .stg-stat b { background: linear-gradient(120deg, #7C3AED, #EC4899) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html[data-mode="dark"] .theme-glass .stg-stat b { background: linear-gradient(120deg, #C4B5FD, #F9A8D4) !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* sections float on the aurora */
.theme-glass .stg-sec:not(.stg-sec--dark) { background: transparent !important; }
.theme-glass .stg-cat { border: 1px solid rgba(255,255,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 26px 50px -26px color-mix(in srgb, var(--c1) 70%, transparent); }
.theme-glass .stg-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 45%); pointer-events: none; }
.theme-glass .stg-steps li { padding: 1.4rem .8rem 1.2rem; border-radius: 24px; background: var(--gl-glass); border: 1px solid var(--gl-rim); box-shadow: var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.theme-glass .stg-steps li:hover { transform: translateY(-6px); }
.theme-glass .stg-steps::before { display: none; }
.theme-glass .g-qa { background: var(--gl-glass) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.theme-glass .g-qa[open] { box-shadow: inset 0 0 0 2px rgba(236,72,153,.35), 0 18px 40px -22px rgba(236,72,153,.6) !important; }
.theme-glass .spn { background: transparent !important; }
.theme-glass .spn__card { background: var(--gl-glass2) !important; border: 1px solid var(--gl-rim) !important; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }

/* dark bands keep their night colours but gain a glow edge */
.theme-glass .stg-sec--dark, .theme-glass .stg-vote, .theme-glass .stg-final { margin-inline: clamp(0px, 2vw, 24px); border-radius: clamp(0px, 3vw, 40px); box-shadow: 0 40px 80px -40px rgba(76,29,149,.7); }
.theme-glass .stg-top__item .stg-top__ph { border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 22px 40px -22px rgba(0,0,0,.7); }

/* inner pages (contestants, rules, contact …) */
.theme-glass .panel, .theme-glass .card, .theme-glass .g-card { background: var(--gl-glass) !important; border: 1px solid var(--gl-rim) !important; box-shadow: var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border-radius: 24px !important; }

@media (max-width: 720px) {
  .theme-glass .stg-stats__in { margin-top: 14px; border-radius: 22px; }
  .theme-glass .stg-steps li { flex-direction: row; text-align: start; }
}