/* ═══════════════════════════════════════════════════════════════════
   StemLab Header  v4.0.0 — Nuclear Layout Fix
   ═══════════════════════════════════════════════════════════════════
   Sections:
     1. NUCLEAR RESET        — kill all WP / theme / Elementor chrome
     2. BODY & PAGE FOUNDATION
     3. HEADER BAR           — .slh-header  (position:fixed)
     4. HEADER COMPONENTS    — logo, buttons, hamburger
     5. SIDEBAR NAV          — mobile slide-out
     6. RESPONSIVE           — breakpoints 320 → 2560
     7. PREMIUM ENHANCEMENTS — frosted glass, glow, transitions
     8. AUTH FORMS           — login / register card and fields
     9. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   § 1  NUCLEAR RESET
   Kill every WordPress / Hello-Elementor / Elementor container that
   produces unwanted black bars.  IDs beat classes; !important beats
   inline styles; display:none + height:0 + overflow:hidden is triple-
   redundant to catch JS-toggled visibility tricks.
   ─────────────────────────────────────────────────────────────────── */

/* 1a — Theme chrome: header, footer, breadcrumbs, page header */
#site-header,
#site-footer,
.site-header,
.site-footer,
body .site-header,
body .site-footer,
body #site-header,
body #site-footer,
body footer#site-footer,
body footer.site-footer,
body footer.dynamic-footer,
body footer:not(.slf-footer),        /* catch any unnamed footer */
body .page-header,
body .entry-header,
body header.entry-header,
body .hfe-header,
body .hfe-footer,
body .elementor-location-header,
body .elementor-location-footer,
body .ast-breadcrumbs-wrapper,
body .ast-footer-overlay,
body .site-above-footer-wrap,
body .site-below-footer-wrap,
.page-title-section,
.page-header,
.entry-header {
    display:     none       !important;
    height:      0          !important;
    max-height:  0          !important;
    overflow:    hidden     !important;
    visibility:  hidden     !important;
    margin:      0          !important;
    padding:     0          !important;
    border:      none       !important;
    opacity:     0          !important;
    pointer-events: none    !important;
}

/* 1b — Prevent accidental text highlighting on tap/click.
   Intentional drag-to-select still works. Inputs/textareas remain selectable. */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input, textarea, select,
[contenteditable="true"],
pre, code,
.slh-login-card input,
.slsc-field input {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* 1b — WordPress block-layout gap between direct children */
.wp-site-blocks,
:where(.wp-site-blocks) {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}

.wp-site-blocks > *,
:where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
    margin-block-end:   0 !important;
    margin-top:         0 !important;
    margin-bottom:      0 !important;
}

/* 1c — Main content wrappers — zero all spacing */
main,
#main,
#content,
.site-main,
.site-content,
.content-area,
.page-content,
article,
body main,
body #main,
body .site-main,
body .site-content,
body .content-area,
body .entry-content,
main.site-main {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
    gap:            0 !important;
}

/* 1d — Theme container wrappers inside site-content */
body .site-content > .ast-container,
body .site-content > .container {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}

/* 1e — Elementor containers, every nesting level */
.e-con,
.e-con-inner,
.e-con-boxed,
.e-con > .e-con-inner,
.elementor-section,
.elementor-section-wrap,
.elementor-inner,
.elementor-widget-wrap,
.elementor-widget-container,
.elementor-shortcode,
.elementor-element.e-con {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
    gap:            0 !important;
}

/* 1f — Old-style boxed section container */
.elementor-section.elementor-section-boxed > .elementor-container {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

/* 1g — Prevent Elementor transforms breaking our fixed header */
.elementor-shortcode:has(> .slh-header),
.elementor-widget-shortcode:has(.slh-header) {
    position:  static    !important;
    transform: none      !important;
}

.elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .slh-header) {
    transform:   none    !important;
    will-change: auto    !important;
}

/* 1h — Collapse empty shortcode placeholders */
.elementor-widget-shortcode .elementor-shortcode:empty {
    display: none !important;
}

.elementor-element:has(> .e-con-inner > .elementor-widget-shortcode .elementor-shortcode:empty) {
    display: none !important;
}

/* 1i — Zero the last article/Elementor root bottom gap */
.site-main > article,
.site-main > .elementor {
    margin-bottom:  0 !important;
    padding-bottom: 0 !important;
}

/* 1j — Kill decorative Elementor shape dividers */
.elementor-shape-bottom,
.elementor-shape-top {
    display: none !important;
}

/* 1k — Accessibility widget suppression */
.acsb-trigger,
#acsb-trigger,
[data-acsb-trigger],
.acsb-widget,
#accessibilityWidget,
button[class*="acsb"],
.userway_buttons_wrapper,
#userwayAccessibilityIcon,
[class*="ea11y"],
[id*="ea11y"],
button[aria-label*="Accessibility"],
.ea11y-skip-to-content,
aside[class*="ea11y"],
.elementor-widget-ally-widget {
    display:        none      !important;
    visibility:     hidden    !important;
    opacity:        0         !important;
    pointer-events: none      !important;
    width:          0         !important;
    height:         0         !important;
    overflow:       hidden    !important;
    position:       absolute  !important;
    clip:           rect(0,0,0,0) !important;
}

/* 1l — Termly legal embeds */
[name="termly-embed"] {
    background: transparent !important;
}

[name="termly-embed"] iframe {
    filter:         invert(1) hue-rotate(180deg) !important;
    -webkit-filter: invert(1) hue-rotate(180deg) !important;
}


/* ───────────────────────────────────────────────────────────────────
   § 2  BODY & PAGE FOUNDATION
   Dark background injection + padding-top for the fixed header.
   ─────────────────────────────────────────────────────────────────── */

html,
body,
html body {
    background:       var(--color-bg-base, #111118) !important;
    background-color: var(--color-bg-base, #111118) !important;
    min-height:       100vh !important;
    margin:           0     !important;
}

body {
    /* 56 px = default header height */
    padding-top:              56px !important;
    padding-left:             0    !important;
    padding-right:            0    !important;
    padding-bottom:           0    !important;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif);
}

/* Admin-bar offsets */
body.admin-bar {
    /* 56 header + 32 admin bar */
    padding-top: 88px !important;
}

/* Force transparent background on every Elementor / theme inner wrapper
   so the html/body dark colour shows through without black ghost layers */
body .site-content,
body .page .site-content,
body .entry-content,
body .elementor,
body .elementor-section,
body .elementor-widget-wrap,
body .elementor-element,
body .elementor-inner,
body .elementor-section-wrap,
body .elementor-widget-container,
body .elementor-element.e-con,
body .elementor-element.e-con.e-parent,
.elementor-page,
.elementor-page body {
    background:       transparent !important;
    background-color: transparent !important;
}

/* Catch any remaining Elementor parent container that shows the base bg */
.elementor-element.e-con,
.elementor-element.e-con.e-parent {
    background-color: var(--color-bg-base, #111118) !important;
}

/* Disable user-select on interactive UI */
.slh-header,
.slh-sidebar,
.slh-btn,
.slh-nav-link,
.slh-hamburger,
.slf-footer,
.slhome-btn,
.slhome-step,
.slhome-feature-card,
.slhome-stat,
.slhome-roadmap-item,
.slhome-price-card,
.slhome-stem-row,
.ss-btn-primary,
.ss-btn-secondary,
.ss-upload-zone,
.ss-stem-card,
.slt-btn,
.slt-card {
    -webkit-user-select: none;
    user-select: none;
}


/* ───────────────────────────────────────────────────────────────────
   § 3  HEADER BAR
   Fixed to viewport top; overlays page content; z-index king.
   ─────────────────────────────────────────────────────────────────── */

.slh-header {
    position:   fixed   !important;
    top:        0       !important;
    left:       0       !important;
    width:      100%    !important;
    max-width:  100%    !important;
    margin:     0       !important;
    z-index:    99999   !important;
    box-sizing: border-box !important;

    /* Frosted glass — overridden by § 7 with enhanced values */
    background:           rgba(17, 17, 24, 0.82)  !important;
    backdrop-filter:      blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border-bottom:        none !important;

    font-family: var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif);
    transition:  background 150ms var(--ease-standard, ease),
                 border-color 150ms var(--ease-standard, ease);
}

/* Admin bar: push header down so it sits below the WP admin bar */
body.admin-bar .slh-header {
    top: 32px !important;
}

.slh-header-inner {
    width:           100%;
    padding:         0 var(--space-6, 1.5rem);
    height:          56px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    box-sizing:      border-box;
}


/* ───────────────────────────────────────────────────────────────────
   § 4  HEADER COMPONENTS — logo, buttons, hamburger
   ─────────────────────────────────────────────────────────────────── */

/* ── Left cluster ── */
.slh-header-left {
    display:     flex;
    align-items: center;
    gap:         var(--space-3, 0.75rem);
}

/* ── Hamburger ── */
.slh-hamburger {
    display:        flex;
    justify-content: center;
    align-items:    center;
    width:          40px;
    height:         40px;
    background:     transparent !important;
    border:         1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius:  8px;
    cursor:         pointer;
    padding:        0;
    margin:         0;
    flex-shrink:    0;
    color:          rgba(255, 255, 255, 0.5);
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    outline:        none;
    box-shadow:     none;
    transition:     background 150ms ease,
                    border-color 150ms ease,
                    color 150ms ease !important;
}
.slh-hamburger:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.8);
}
.slh-hamburger svg {
    flex-shrink: 0;
}

/* Legacy span bars — hidden (SVG icon replaces them) */
.slh-hamburger span {
    display: none;
}

/* Open state colouring — handled in § 7 */

/* ── Logo ── */
.slh-logo-link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2, 0.5rem);
    text-decoration: none;
    color:           var(--color-text-primary, #FFFFFF);
    transition:      opacity 150ms var(--ease-standard, ease),
                     filter  150ms var(--ease-standard, ease) !important;
}

.slh-logo-link:hover {
    opacity: 1 !important;
    filter:  drop-shadow(0 0 8px rgba(240, 23, 111, 0.35));
    color:   var(--color-text-primary, #FFFFFF);
}

.slh-logo-icon {
    flex-shrink: 0;
}

.slh-logo-text {
    font-size:      var(--text-body, 1rem);
    font-weight:    var(--weight-regular, 400);
    color:          var(--color-text-primary, #FFFFFF);
    letter-spacing: -0.01em;
}

.slh-logo-text strong {
    font-weight: var(--weight-bold, 700);
    color:       var(--color-accent, #F0176F);
}

/* ── Right cluster ── */
.slh-header-right {
    display:     flex;
    align-items: center;
    gap:         var(--space-2, 0.5rem);
}

/* ── Base button ── */
.slh-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2, 0.5rem);
    padding:         7px var(--space-4, 1rem);
    border-radius:   var(--radius-sm, 4px);
    font-size:       var(--text-body-sm, 0.875rem);
    font-weight:     var(--weight-semibold, 600);
    text-decoration: none;
    white-space:     nowrap;
    font-family:     inherit;
    transition:      all 150ms var(--ease-standard, ease);
}

.slh-btn svg {
    flex-shrink: 0;
}

/* Log In — ghost text */
.slh-btn-login {
    color:      var(--color-text-subdued, #8A8AA0);
    border:     none;
    background: transparent;
    border-radius: var(--radius-sm, 4px) !important;
    padding:    7px var(--space-3, 0.75rem) !important;
    transition: all 150ms var(--ease-standard, ease) !important;
}

.slh-btn-login:hover {
    color:      var(--color-text-primary, #FFFFFF) !important;
    background: var(--color-bg-elevated, #222230) !important;
}

/* Icon-only buttons (Account, Dashboard) — clean ghost circles */
.slh-btn-icon-only {
    color:         rgba(255, 255, 255, 0.5);
    border:        none;
    background:    transparent;
    border-radius: 50% !important;
    width:         36px;
    height:        36px;
    padding:       0 !important;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    transition:    all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor:        pointer;
    flex-shrink:   0;
}

.slh-btn-icon-only:hover {
    color:         #fff !important;
    background:    rgba(255, 255, 255, 0.08) !important;
}

.slh-btn-icon-only svg {
    width:  18px;
    height: 18px;
}

/* Fullscreen — premium icon-only button */
.slh-btn-fullscreen {
    color:            rgba(255, 255, 255, 0.5);
    border:           1px solid rgba(255, 255, 255, 0.06);
    background:       rgba(255, 255, 255, 0.03);
    border-radius:    50% !important;
    width:            36px;
    height:           36px;
    padding:          0 !important;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    transition:       all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor:           pointer;
    flex-shrink:      0;
}

.slh-btn-fullscreen svg {
    width:  17px;
    height: 17px;
}

.slh-btn-fullscreen:hover {
    color:            #fff !important;
    background:       rgba(240, 23, 111, 0.12) !important;
    border-color:     rgba(240, 23, 111, 0.3) !important;
    box-shadow:       0 0 14px rgba(240, 23, 111, 0.12);
}

.slh-btn-fullscreen.slh-fs-active {
    color:            #fff;
    background:       rgba(240, 23, 111, 0.14);
    border-color:     rgba(240, 23, 111, 0.3);
    box-shadow:       0 0 10px rgba(240, 23, 111, 0.1);
}

.slh-btn-fullscreen.slh-fs-active:hover {
    background:       rgba(255, 255, 255, 0.08) !important;
    border-color:     rgba(255, 255, 255, 0.12) !important;
    box-shadow:       none;
}


/* ── Logout Confirmation Modal ── */
.slh-logout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300000;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.slh-logout-overlay.slh-logout-visible {
    opacity: 1;
    visibility: visible;
}

.slh-logout-modal {
    background: var(--color-bg-overlay, #1A1A22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 36px 32px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    transform: scale(0.95) translateY(8px);
    transition: transform 0.25s ease;
}

.slh-logout-visible .slh-logout-modal {
    transform: scale(1) translateY(0);
}

.slh-logout-icon {
    color: var(--color-text-subdued, #8A8AA0);
    margin-bottom: 16px;
}

.slh-logout-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary, #F5F5F7);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.slh-logout-desc {
    color: var(--color-text-subdued, #8A8AA0);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 28px;
    font-weight: 400;
}

.slh-logout-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slh-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    line-height: 1;
    font-family: inherit;
}

.slh-logout-btn--cancel {
    background: var(--color-accent, #F0176F);
    color: #fff;
    box-shadow: 0 4px 20px rgba(240, 23, 111, 0.25);
}

.slh-logout-btn--cancel:hover {
    background: var(--color-accent-hover, #D01363);
    box-shadow: 0 6px 28px rgba(240, 23, 111, 0.35);
    transform: translateY(-1px);
}

.slh-logout-btn--confirm {
    background: transparent;
    color: var(--color-text-subdued, #8A8AA0);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slh-logout-btn--confirm:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-text-primary, #fff);
    text-decoration: none;
}

/* Sign Up — accent fill with glow; enhanced in § 7 */
.slh-btn-signup {
    color:         var(--color-text-on-accent, #FFFFFF);
    background:    var(--color-accent, #F0176F);
    border:        none;
    border-radius: var(--radius-md, 6px);
    box-shadow:    0 0 16px var(--color-accent-glow, rgba(240, 23, 111, 0.35));
    position:      relative;
    overflow:      hidden;
    transition:    all 150ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) !important;
}

.slh-btn-signup:hover {
    background: var(--color-accent-hover, #FF2E86);
    transform:  translateY(-1px) !important;
    color:      var(--color-text-on-accent, #FFFFFF);
}

.slh-btn-signup:active {
    transform:  translateY(0) scale(0.98) !important;
}


/* ───────────────────────────────────────────────────────────────────
   § 5  SIDEBAR NAV — mobile slide-out
   ─────────────────────────────────────────────────────────────────── */

/* Dimming overlay — BELOW sidebar, ABOVE page content */
.slh-sidebar-overlay {
    position:   fixed;
    inset:      0;
    z-index:    100000;
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity:    0;
    visibility: hidden;
    transition: opacity    300ms var(--ease-standard, ease),
                visibility 300ms var(--ease-standard, ease) !important;
}

.slh-sidebar-overlay.slh-visible {
    opacity:    1;
    visibility: visible;
}

/* Sidebar panel */
.slh-sidebar {
    position:    fixed;
    top:         0;
    left:        0;
    z-index:     100001;                /* above overlay */
    width:       288px;
    max-width:   85vw;
    height:      100vh;
    height:      100dvh;
    display:     flex;
    flex-direction: column;
    overflow-y:  auto;
    -webkit-overflow-scrolling: touch;
    transform:   translateX(-100%);
    transition:  transform 0.35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) !important;
    font-family: var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif);
    color:       var(--color-text-primary, #FFFFFF);

    /* Premium glass — enhanced in § 7 */
    background:           rgba(18, 18, 28, 0.97) !important;
    backdrop-filter:      blur(24px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
    border-right:         1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow:           16px 0 80px rgba(0, 0, 0, 0.75),
                          4px  0 24px rgba(240, 23, 111, 0.05) !important;
}

.slh-sidebar.slh-open {
    transform: translateX(0);
}

/* Sidebar top bar (logo + close button) */
.slh-sidebar-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-5, 1.25rem);
    border-bottom:   1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink:     0;
    position:        relative;
}

/* Accent glow line below top bar */
.slh-sidebar-top::after {
    content:    '';
    position:   absolute;
    bottom:     -1px;
    left:       15%;
    right:      15%;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(240, 23, 111, 0.25), transparent);
    pointer-events: none;
}

.slh-sidebar-logo {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2, 0.5rem);
    text-decoration: none;
    color:           var(--color-text-primary, #FFFFFF);
}

.slh-sidebar-logo .slh-logo-text {
    font-size: var(--text-body-sm, 0.875rem);
}

/* Close button */
.slh-sidebar-close {
    width:         36px;
    height:        36px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    transparent;
    border:        none;
    border-radius: var(--radius-sm, 4px);
    color:         var(--color-text-disabled, #555570);
    cursor:        pointer;
    padding:       0;
    transition:    color      150ms var(--ease-standard, ease),
                   background 150ms var(--ease-standard, ease);
}

.slh-sidebar-close:hover {
    color:      var(--color-text-primary, #FFFFFF);
    background: var(--color-bg-overlay, rgba(255,255,255,0.06));
}

/* Nav scroll area */
.slh-sidebar-nav {
    flex:       1;
    padding:    var(--space-4, 1rem) 0;
    overflow-y: auto;
}

.slh-nav-group {
    padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem) var(--space-4, 1rem);
}

.slh-nav-group + .slh-nav-group {
    border-top:  1px solid var(--color-border-subtle, rgba(255,255,255,0.05));
    padding-top: var(--space-4, 1rem);
}

.slh-nav-heading {
    font-size:      var(--text-overline, 0.6875rem);
    font-weight:    var(--weight-bold, 700);
    color:          var(--color-text-subdued, #8A8AA0);
    text-transform: uppercase;
    letter-spacing: 0.12em !important;
    margin-bottom:  var(--space-3, 0.75rem);
    padding:        0 var(--space-3, 0.75rem);
    opacity:        0.6 !important;
}

.slh-nav-link {
    display:         block;
    padding:         var(--space-3, 0.75rem);
    border-radius:   var(--radius-sm, 4px);
    font-size:       var(--text-body-sm, 0.875rem);
    font-weight:     var(--weight-medium, 500);
    color:           var(--color-text-secondary, #C8C8D8);
    text-decoration: none;
    position:        relative;
    transition:      background    150ms var(--ease-standard, ease),
                     color         150ms var(--ease-standard, ease),
                     padding-left  150ms var(--ease-standard, ease) !important;
}

.slh-nav-link:hover {
    background:   var(--color-bg-overlay, rgba(255,255,255,0.06));
    color:        var(--color-text-primary, #FFFFFF);
    padding-left: var(--space-4, 1rem);
}

/* Active nav link */
.slh-nav-link.slh-active,
.slh-nav-link[aria-current="page"] {
    color:      var(--color-accent, #F0176F) !important;
    background: var(--color-accent-tint, rgba(240,23,111,0.08)) !important;
}

/* Glowing left accent bar on active */
.slh-nav-link.slh-active::before,
.slh-nav-link[aria-current="page"]::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           50%;
    transform:     translateY(-50%);
    width:         3px;
    height:        60%;
    background:    var(--color-accent, #F0176F);
    border-radius: var(--radius-full, 9999px);
    box-shadow:    0 0 10px var(--color-accent-glow, rgba(240,23,111,0.35));
    pointer-events: none;
}

/* Hover shimmer underline */
.slh-nav-link:hover::after {
    content:       '';
    position:      absolute;
    bottom:        4px;
    left:          var(--space-3, 0.75rem);
    right:         var(--space-3, 0.75rem);
    height:        1px;
    background:    linear-gradient(90deg, transparent, rgba(240,23,111,0.4), transparent);
    border-radius: var(--radius-full, 9999px);
    pointer-events: none;
}

/* Sidebar footer (user info / copyright) */
.slh-sidebar-footer {
    padding:    var(--space-5, 1.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0;
    position:   relative;
}

/* Accent glow line above footer */
.slh-sidebar-footer::before {
    content:    '';
    position:   absolute;
    top:        -1px;
    left:       15%;
    right:      15%;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(240,23,111,0.15), transparent);
    pointer-events: none;
}

.slh-sidebar-user {
    font-size:     var(--text-body-sm, 0.875rem);
    font-weight:   var(--weight-semibold, 600);
    color:         var(--color-text-primary, #FFFFFF);
    margin-bottom: var(--space-1, 0.25rem);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.slh-sidebar-copy {
    font-size: var(--text-overline, 0.6875rem);
    color:     var(--color-text-disabled, #555570);
}

/* Prevent body scroll when sidebar is open */
body.slh-sidebar-open {
    overflow: hidden !important;
}


/* ───────────────────────────────────────────────────────────────────
   § 6  RESPONSIVE
   Breakpoints: 320 → 480 → 768 → 1024 → 2560
   ─────────────────────────────────────────────────────────────────── */

/* ── ≤ 480px  (phones) ── */
@media (max-width: 480px) {
    body {
        padding-top: 50px !important;
    }

    body.admin-bar {
        /* 50 header + 46 admin bar on mobile (WP uses 46px at ≤782px) */
        padding-top: 96px !important;
    }

    .slh-header-inner {
        padding: 0 var(--space-4, 1rem);
        height:  50px;
    }

    .slh-header-left {
        gap: var(--space-2, 0.5rem);
    }

    .slh-hamburger {
        width:  40px;
        height: 40px;
    }

    .slh-logo-icon {
        width:  24px;
        height: 27px;
    }

    .slh-logo-text {
        font-size: var(--text-body-sm, 0.875rem);
    }

    /* Hide button text on small screens; keep icons */
    .slh-btn-label {
        display: none;
    }

    .slh-btn {
        padding: 7px 10px;
    }

    /* Sign Up keeps its text label (it has no icon) */
    .slh-btn-signup .slh-btn-label {
        display: inline;
    }

    .slh-btn-signup {
        padding: 7px 14px;
    }
}

/* ── 481 – 782px  (large phones / small tablets) ── */
@media (min-width: 481px) and (max-width: 782px) {
    body {
        padding-top: 52px !important;
    }

    body.admin-bar {
        padding-top: 98px !important; /* 52 + 46 */
    }

    .slh-header-inner {
        height: 52px;
    }
}

/* ── WP admin bar switches from 46px to 32px above 782px ── */
@media screen and (max-width: 782px) {
    body.admin-bar .slh-header {
        top: 46px !important;
    }
}

/* ── 783 – 1024px  (tablets, landscape) ── */
@media (min-width: 783px) and (max-width: 1024px) {
    body {
        padding-top: 56px !important;
    }

    body.admin-bar {
        padding-top: 88px !important; /* 56 + 32 */
    }
}

/* ── ≥ 1025px  (desktop) ── */
@media (min-width: 1025px) {
    body {
        padding-top: 56px !important;
    }

    body.admin-bar {
        padding-top: 88px !important;
    }

    .slh-header-inner {
        padding: 0 clamp(2rem, 3vw, 4rem);
    }
}

/* ── Wide screens — stretch to edges ── */
@media (min-width: 1440px) {
    .slh-header-inner {
        padding: 0 48px;
    }
}

@media (min-width: 1920px) {
    .slh-header-inner {
        padding: 0 64px;
    }
}


/* ───────────────────────────────────────────────────────────────────
   § 7  PREMIUM ENHANCEMENTS
   Frosted glass, gradient border, button glow, smooth 150ms hovers.
   ─────────────────────────────────────────────────────────────────── */

/* ── Header: enhanced frosted glass ── */
/* (already set in § 3 with !important; these reinforce with specificity) */

/* Gradient bottom border: transparent → white → accent → white → transparent */
.slh-header::after {
    content:        '';
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    height:         1px;
    background:     linear-gradient(
        90deg,
        transparent                   0%,
        rgba(255, 255, 255, 0.06)    20%,
        rgba(240, 23, 111, 0.30)     50%,
        rgba(255, 255, 255, 0.06)    80%,
        transparent                  100%
    );
    pointer-events: none;
    z-index:        1;
}

/* Subtle top ambient glow */
.slh-header::before {
    content:        '';
    position:       absolute;
    top:            0;
    left:           50%;
    transform:      translateX(-50%);
    width:          60%;
    height:         1px;
    background:     linear-gradient(90deg, transparent, rgba(240,23,111,0.20), transparent);
    pointer-events: none;
    z-index:        1;
}

/* ── Sign Up button: premium glow shadow + inner sheen ── */
.slh-btn-signup {
    box-shadow: 0 0 16px var(--color-accent-glow, rgba(240,23,111,0.35)),
                0 2px 8px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* Inner highlight sheen */
.slh-btn-signup::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
    border-radius:  inherit;
    pointer-events: none;
}

.slh-btn-signup:hover {
    box-shadow: 0 0 32px var(--color-accent-glow, rgba(240,23,111,0.35)),
                0 4px 16px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.20) !important;
    transform:  translateY(-1px) !important;
}

.slh-btn-signup:active {
    transform:  translateY(0) scale(0.98) !important;
    box-shadow: 0 0 12px var(--color-accent-glow, rgba(240,23,111,0.35)) !important;
}

/* ── Hamburger: accent open state ── */
.slh-hamburger.slh-open {
    color:      var(--color-accent, #F0176F) !important;
    background: var(--color-accent-tint, rgba(240,23,111,0.08)) !important;
}

/* ── Sidebar overlay: ensure smooth dim ── */
.slh-sidebar-overlay {
    transition: opacity    300ms var(--ease-standard, ease),
                visibility 300ms var(--ease-standard, ease) !important;
}


/* ───────────────────────────────────────────────────────────────────
   § 8  AUTH FORMS
   Login / Register / Forgot-Password card and all form elements.
   All rules use !important to beat theme styles injected globally.
   ─────────────────────────────────────────────────────────────────── */

.slh-login-card {
    max-width:  440px !important;
    margin:     var(--space-10, 2.5rem) auto !important;
    background: var(--color-bg-surface, #1A1A24) !important;
    border:     1px solid var(--color-border, rgba(255,255,255,0.07)) !important;
    border-radius: var(--radius-lg, 10px) !important;
    padding:    var(--space-8, 2rem) !important;
    font-family: var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif) !important;
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3),
                0 0 0 1px rgba(255,255,255,0.04) inset;
}

.slh-login-title {
    color:       var(--color-text-primary, #FFFFFF) !important;
    font-size:   var(--text-h3, 1.5rem) !important;
    font-weight: var(--weight-bold, 700) !important;
    margin:      0 0 var(--space-1, 0.25rem) !important;
}

.slh-login-sub {
    color:     var(--color-text-subdued, #8A8AA0) !important;
    font-size: var(--text-body-sm, 0.875rem) !important;
    margin:    0 0 var(--space-6, 1.5rem) !important;
}

.slh-login-field {
    margin-bottom: var(--space-5, 1.25rem) !important;
}

.slh-login-field label {
    font-size:      var(--text-overline, 0.6875rem) !important;
    font-weight:    var(--weight-semibold, 600) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide, 0.05em) !important;
    color:          var(--color-text-subdued, #8A8AA0) !important;
    margin-bottom:  var(--space-2, 0.5rem) !important;
    display:        block !important;
}

.slh-login-field input,
.slh-login-field input[type="text"],
.slh-login-field input[type="email"],
.slh-login-field input[type="password"] {
    background:        var(--color-bg-base, #111118) !important;
    border:            1px solid var(--color-border, rgba(255,255,255,0.07)) !important;
    border-radius:     var(--radius-sm, 4px) !important;
    color:             var(--color-text-primary, #FFFFFF) !important;
    padding:           var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
    font-size:         var(--text-body, 1rem) !important;
    width:             100% !important;
    font-family:       var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif) !important;
    box-sizing:        border-box !important;
    outline:           none !important;
    -webkit-appearance: none !important;
    appearance:        none !important;
    color-scheme:      dark !important;
    transition:        border-color 150ms ease,
                       box-shadow   150ms ease,
                       background   150ms ease !important;
}

.slh-login-field input:focus,
.slh-login-field input[type="text"]:focus,
.slh-login-field input[type="email"]:focus,
.slh-login-field input[type="password"]:focus {
    border-color: var(--color-accent-border, rgba(240,23,111,0.50)) !important;
    box-shadow:   0 0 0 3px rgba(240,23,111,0.15) !important;
    background:   var(--color-bg-elevated, #222230) !important;
}

.slh-login-field input::placeholder {
    color: var(--color-text-disabled, #555570) !important;
}

/* Password wrapper */
.slh-pw-wrap {
    position: relative !important;
}

.slh-pw-wrap input {
    padding-right: 44px !important;
}

/* Show/hide toggle */
.slh-pw-toggle {
    position:   absolute !important;
    right:      var(--space-3, 0.75rem) !important;
    top:        50% !important;
    transform:  translateY(-50%) !important;
    background: none !important;
    border:     none !important;
    color:      var(--color-text-subdued, #8A8AA0) !important;
    cursor:     pointer !important;
    padding:    var(--space-1, 0.25rem) !important;
    display:    flex !important;
    align-items: center !important;
}

.slh-pw-toggle:hover {
    color: var(--color-text-primary, #FFFFFF) !important;
}

/* Form buttons */
.slh-login-btn {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    border:           none !important;
    border-radius:    var(--radius-md, 6px) !important;
    padding:          14px var(--space-8, 2rem) !important;
    font-size:        var(--text-body, 1rem) !important;
    font-weight:      var(--weight-semibold, 600) !important;
    cursor:           pointer !important;
    font-family:      var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif) !important;
    text-decoration:  none !important;
    transition:       all 150ms ease !important;
}

.slh-login-btn--primary {
    background: var(--color-accent, #F0176F) !important;
    color:      var(--color-text-on-accent, #FFFFFF) !important;
    box-shadow: 0 0 20px var(--color-accent-glow, rgba(240,23,111,0.35)) !important;
}

.slh-login-btn--primary:hover {
    background: var(--color-accent-hover, #FF2E86) !important;
    box-shadow: 0 0 28px var(--color-accent-glow, rgba(240,23,111,0.35)) !important;
    transform:  translateY(-1px) !important;
}

.slh-login-btn--full {
    width: 100% !important;
}

.slh-login-btn--ghost {
    background: transparent !important;
    color:      var(--color-text-primary, #FFFFFF) !important;
    border:     1px solid var(--color-border-strong, rgba(255,255,255,0.14)) !important;
}

.slh-login-btn--ghost:hover {
    border-color: var(--color-accent-border, rgba(240,23,111,0.50)) !important;
    color:        var(--color-accent, #F0176F) !important;
}

/* Error / success notices */
.slh-login-error {
    background:    var(--color-error-tint, rgba(239,68,68,0.10)) !important;
    border:        1px solid var(--color-error-border, rgba(239,68,68,0.30)) !important;
    border-radius: var(--radius-sm, 4px) !important;
    padding:       var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
    color:         var(--color-error, #EF4444) !important;
    font-size:     var(--text-body-sm, 0.875rem) !important;
    margin-bottom: var(--space-5, 1.25rem) !important;
}

.slh-login-error.slh-success {
    background:   var(--color-success-tint, rgba(34,197,94,0.10)) !important;
    border-color: var(--color-success-border, rgba(34,197,94,0.30)) !important;
    color:        var(--color-success, #22C55E) !important;
}

/* Card footer (links row) */
.slh-login-footer {
    text-align:  center !important;
    margin-top:  var(--space-6, 1.5rem) !important;
    padding-top: var(--space-5, 1.25rem) !important;
    border-top:  1px solid var(--color-border, rgba(255,255,255,0.07)) !important;
    color:       var(--color-text-subdued, #8A8AA0) !important;
    font-size:   var(--text-body-sm, 0.875rem) !important;
}

.slh-login-link {
    color:           var(--color-accent, #F0176F) !important;
    text-decoration: none !important;
    font-weight:     var(--weight-semibold, 600) !important;
}

.slh-login-link:hover {
    text-decoration: underline !important;
}

/* Actions row (Remember me + Forgot) */
.slh-login-actions {
    display:    flex !important;
    gap:        var(--space-3, 0.75rem) !important;
    margin-top: var(--space-5, 1.25rem) !important;
}

.slh-login-remember {
    color:     var(--color-text-subdued, #8A8AA0) !important;
    font-size: var(--text-body-sm, 0.875rem) !important;
}

.slh-login-remember input[type="checkbox"] {
    accent-color: var(--color-accent, #F0176F) !important;
}

.slh-login-forgot {
    color:           var(--color-accent, #F0176F) !important;
    font-size:       var(--text-body-sm, 0.875rem) !important;
    text-decoration: none !important;
}

.slh-login-forgot:hover {
    color: var(--color-accent-hover, #FF2E86) !important;
}


/* ───────────────────────────────────────────────────────────────────
   § 9  REDUCED MOTION
   Honour the OS preference; collapse all transitions to near-zero.
   ─────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .slh-header,
    .slh-header::before,
    .slh-header::after,
    .slh-hamburger,
    .slh-hamburger span,
    .slh-sidebar,
    .slh-sidebar-overlay,
    .slh-btn,
    .slh-btn-login,
    .slh-btn-account,
    .slh-btn-fullscreen,
    .slh-btn-signup,
    .slh-btn-signup::before,
    .slh-logo-link,
    .slh-nav-link,
    .slh-sidebar-close,
    .slh-login-btn,
    .slh-login-field input {
        transition-duration: 0.01ms !important;
        animation:           none   !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   GOOGLE SIGN-IN BUTTON
   Applied on both /login/ and /register/ pages.
   ═══════════════════════════════════════════════════════════════════ */

.slh-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}
.slh-login-divider::before,
.slh-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.slh-login-divider span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: lowercase;
    font-weight: 500;
}
/* Style the plugin's shortcode output to match our dark luxury theme */
.slh-google-wrap {
    width: 100%;
}
.slh-google-wrap .wp_google_login {
    margin: 0 !important;
    padding: 0 !important;
}
.slh-google-wrap .wp_google_login__button-container {
    margin: 0 !important;
    padding: 0 !important;
}
.slh-google-wrap .wp_google_login__button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif) !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
}
.slh-google-wrap .wp_google_login__button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.slh-google-wrap .wp_google_login__button:active {
    transform: scale(0.98);
}
.slh-google-wrap .wp_google_login__button svg,
.slh-google-wrap .wp_google_login__button img {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
/* Also keep the custom button class for backward compat */
.slh-google-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans, 'Satoshi', 'Inter', system-ui, sans-serif);
    text-decoration: none !important;
    transition: all 0.15s ease;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
}
.slh-google-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.slh-google-btn:active {
    transform: scale(0.98);
}
.slh-google-btn svg {
    flex-shrink: 0;
}


/* ─── Rewards Golden Ping Indicator ─── */
.slh-rewards-ping {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #FFD700;
    border-radius: 50%;
    margin-left: 8px;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 0 12px rgba(255, 215, 0, 0.3);
    animation: slh-ping-pulse 2s ease-in-out infinite;
}
.slh-rewards-ping::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.3);
    animation: slh-ping-ripple 2s ease-out infinite;
}

@keyframes slh-ping-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.85); }
}

@keyframes slh-ping-ripple {
    0% { transform: scale(0.8); opacity: 0.6; }
    70% { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   LEVEL UP POPUP
   ═══════════════════════════════════════════════════════ */

/* Overlay */
.slh-lvl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999998;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: all;
}
.slh-lvl-overlay--show { opacity: 1; }

/* Popup card */
.slh-lvl-popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 999999;
    width: 320px;
    max-width: 90vw;
    background: linear-gradient(170deg, #15151f 0%, #0e0e18 100%);
    border: 1px solid rgba(255,215,0,.15);
    border-radius: 20px;
    padding: 48px 32px 36px;
    text-align: center;
    opacity: 0;
    transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow:
        0 0 60px rgba(255,215,0,.12),
        0 0 120px rgba(255,215,0,.06),
        0 24px 48px rgba(0,0,0,.5);
    font-family: 'Inter', 'Satoshi', system-ui, -apple-system, sans-serif;
}
.slh-lvl-popup--show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.slh-lvl-popup--hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    transition: opacity .3s ease, transform .3s ease;
}

/* Glow ring behind badge */
.slh-lvl-glow {
    position: absolute;
    top: -30px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(255,215,0,.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: slh-lvl-glow-pulse 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes slh-lvl-glow-pulse {
    0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

/* Star badge */
.slh-lvl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,215,0,.12), rgba(255,215,0,.04));
    border: 1px solid rgba(255,215,0,.25);
    margin-bottom: 20px;
    animation: slh-lvl-badge-bounce .6s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: .2s;
}
@keyframes slh-lvl-badge-bounce {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* LEVEL UP text */
.slh-lvl-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FFD700;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(255,215,0,.3);
}

/* Level number */
.slh-lvl-number {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 2px 24px rgba(255,215,0,.15);
    animation: slh-lvl-num-in .5s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: .35s;
}
@keyframes slh-lvl-num-in {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Subtitle */
.slh-lvl-sub {
    font-size: 13px;
    color: rgba(255,255,255,.4);
    margin-bottom: 28px;
    font-weight: 500;
}

/* Continue button */
.slh-lvl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,215,0,.06));
    border: 1px solid rgba(255,215,0,.2);
    color: #FFD700;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all .2s;
    outline: none;
}
.slh-lvl-btn:hover {
    background: linear-gradient(135deg, rgba(255,215,0,.2), rgba(255,215,0,.1));
    border-color: rgba(255,215,0,.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,215,0,.15);
}

/* Gold ping on header account icon */
.slh-header-icon-ping {
    position: absolute;
    top: 4px;
    right: 4px;
}

/* Confetti canvas */
.slh-lvl-confetti {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000000;
}

/* ═══════════════════════════════════
   TERMLY COOKIE BANNER — StemLab Dark Theme
   Applied site-wide via header CSS
   ═══════════════════════════════════ */

/* Banner container */
#termly-code-snippet-support [class*="banner"],
#termly-code-snippet-support [class*="Banner"],
#termly-code-snippet-support [class*="consent"],
#termly-code-snippet-support [class*="Consent"],
#termly-code-snippet-support > div {
    background: #0e0e16 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,.5) !important;
}

/* All text in banner */
#termly-code-snippet-support [class*="banner"] *,
#termly-code-snippet-support [class*="Banner"] *,
#termly-code-snippet-support [class*="consent"] *,
#termly-code-snippet-support [class*="Consent"] *,
#termly-code-snippet-support > div * {
    color: rgba(255,255,255,.6) !important;
    font-family: 'Inter', 'Satoshi', system-ui, -apple-system, sans-serif !important;
}

/* Links */
#termly-code-snippet-support a,
#termly-code-snippet-support [class*="banner"] a,
#termly-code-snippet-support [class*="consent"] a {
    color: #E63988 !important;
    text-decoration: underline !important;
}

/* Accept button — primary pink gradient */
[data-tid="banner-accept"] {
    background: linear-gradient(135deg, #E63988, #d42f7b) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 22px !important;
    transition: all .2s !important;
    box-shadow: 0 2px 12px rgba(230,57,136,.2) !important;
}
[data-tid="banner-accept"]:hover {
    box-shadow: 0 4px 20px rgba(230,57,136,.35) !important;
    transform: translateY(-1px);
}

/* Decline button — ghost */
[data-tid="banner-decline"] {
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 22px !important;
    transition: all .2s !important;
}
[data-tid="banner-decline"]:hover {
    background: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.85) !important;
    border-color: rgba(255,255,255,.18) !important;
}

/* Preferences button — ghost */
[data-tid="banner-preferences"] {
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 22px !important;
    transition: all .2s !important;
}
[data-tid="banner-preferences"]:hover {
    background: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.85) !important;
    border-color: rgba(255,255,255,.18) !important;
}


/* ═══════════════════════════════════════════════════════════
   STREAK BROKEN POPUP — Full-screen overlay + centered card
   ═══════════════════════════════════════════════════════════ */

.slh-streak-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999998;
    opacity: 0;
    transition: opacity .35s ease;
}
.slh-streak-overlay--show {
    opacity: 1;
}

.slh-streak-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    width: 340px;
    max-width: 90vw;
    background: linear-gradient(165deg, #1a1a2e 0%, #111118 100%);
    border: 1px solid rgba(255,77,106,.15);
    border-radius: 20px;
    padding: 40px 32px 32px;
    text-align: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,1,.3,1);
    box-shadow:
        0 24px 80px rgba(0,0,0,.6),
        0 0 60px rgba(255,77,106,.08),
        0 0 0 1px rgba(255,255,255,.06) inset;
    font-family: 'Inter', 'Satoshi', system-ui, -apple-system, sans-serif;
}
.slh-streak-popup--show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.slh-streak-popup--hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
}

.slh-streak-icon-wrap {
    margin-bottom: 16px;
}
.slh-streak-icon-dead {
    font-size: 48px;
    line-height: 1;
    display: inline-block;
    animation: slh-streak-shake .5s ease .15s both;
}
@keyframes slh-streak-shake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(8deg); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(4deg); }
}

.slh-streak-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FF4D6A;
    margin-bottom: 8px;
}

.slh-streak-number {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    margin-bottom: 8px;
    line-height: 1.2;
}

.slh-streak-sub {
    font-size: 13px;
    color: rgba(255,255,255,.45);
    margin-bottom: 24px;
    line-height: 1.55;
}

.slh-streak-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.slh-streak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    width: 100%;
    max-width: 260px;
}

.slh-streak-btn--freeze {
    background: linear-gradient(135deg, #2196F3, #1565C0);
    color: #fff;
    box-shadow: 0 4px 16px rgba(33,150,243,.3);
}
.slh-streak-btn--freeze:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(33,150,243,.45);
}

.slh-streak-btn--upgrade {
    background: linear-gradient(135deg, #E63988, #d42f7b);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(230,57,136,.3);
}
.slh-streak-btn--upgrade:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(230,57,136,.45);
    color: #fff;
}

.slh-streak-btn--dismiss {
    background: transparent;
    color: rgba(255,255,255,.35);
    font-size: 12px;
    padding: 8px 16px;
}
.slh-streak-btn--dismiss:hover {
    color: rgba(255,255,255,.6);
}

.slh-streak-freeze-note {
    font-size: 11px;
    color: rgba(255,255,255,.3);
    margin-top: -4px;
}

@media (max-width: 480px) {
    .slh-streak-popup {
        width: 300px;
        padding: 32px 24px 28px;
    }
    .slh-streak-icon-dead { font-size: 40px; }
    .slh-streak-number { font-size: 28px; }
}