@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
/* ============================================================================
   FTJ GLASS  —  deep black, glass/slate panels, glow behind every menu item.
   This is the site-wide theme. It lives in the Admin → Custom Design → "Header
   CSS Style" box (file: themes/ftj/css/custom.style.css) and loads LAST, so it
   wins. CSS-VARIABLE DRIVEN: the per-Pro UI-glow customization just overrides
   the --ftj-* tokens below per user. Edit the tokens to retune the whole site.
   ========================================================================== */
:root{
  --ftj-bg:#060606;              /* true deep black */
  --ftj-ink:#e8eaef;            /* body text */
  --ftj-ink-dim:#9aa1ad;
  --ftj-glow:#22d3ee;           /* DEFAULT glow hue (Pro-overridable) */
  --ftj-glowrgb:34,211,238;     /* glow as RGB for rgba() */
  --ftj-glow-i:1;               /* glow intensity multiplier (Pro slider) */
  --ftj-glass:rgba(18,20,26,.55);
  --ftj-glass-2:rgba(24,26,33,.72);
  --ftj-brd:rgba(255,255,255,.07);
  --ftj-hi:rgba(255,255,255,.14);
  --ftj-danger:#ff3b46;
  --ftj-blur:14px;
  --ftj-r:14px;
}

/* ---- deep black base + faint radial shimmer (depth, not flat) ---- */
html, body{ background:var(--ftj-bg) !important; color:var(--ftj-ink) !important;
  -webkit-font-smoothing:antialiased; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 720px at 16% -12%, rgba(var(--ftj-glowrgb),.075), transparent 60%),
    radial-gradient(900px 620px at 102% -4%, rgba(var(--ftj-glowrgb),.05), transparent 55%),
    radial-gradient(1100px 860px at 50% 122%, rgba(255,255,255,.03), transparent 60%),
    var(--ftj-bg);
}

/* ---- typography ---- */
body, button, input, select, textarea{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important; }
h1,h2,h3,h4,h5,.sc-title,.navbar-brand,.gl-card h3,.lw-info h1,.menu_static_text,.video-title{
  font-family:'Space Grotesk','Inter',sans-serif !important; letter-spacing:-.015em; color:#fff !important; }
h1,.lw-info h1{ font-weight:700 !important; }
.menu_static_text{ text-transform:uppercase; letter-spacing:.08em; color:var(--ftj-ink-dim) !important; }
a{ color:var(--ftj-glow) !important; transition:color .2s ease; }
a:hover{ color:#fff !important; }
.text-muted{ color:var(--ftj-ink-dim) !important; }

/* ============================ TOPBAR (glass stripe — fixes the transparent
   streamer/timeline-page header) ========================================== */
.navbar.header-layout, .pt_main_hdr{
  background:linear-gradient(180deg, rgba(13,15,20,.86), rgba(7,8,11,.86)) !important;
  -webkit-backdrop-filter:blur(var(--ftj-blur)); backdrop-filter:blur(var(--ftj-blur));
  border:none !important; border-bottom:1px solid var(--ftj-brd) !important;
  box-shadow:0 1px 0 var(--ftj-hi) inset, 0 10px 34px rgba(0,0,0,.55) !important;
}
.navbar-brand{ font-weight:700 !important; letter-spacing:-.02em; }

/* ============================ SIDEBAR (glass) ============================ */
.left_menu.desktop{
  background:var(--ftj-glass) !important;
  -webkit-backdrop-filter:blur(var(--ftj-blur)); backdrop-filter:blur(var(--ftj-blur));
  border-right:1px solid var(--ftj-brd) !important;
}

/* ====================== GLOW BEHIND EVERY MENU ITEM ====================== */
.navbar-nav > li > a, .left_menu.desktop a, .sec_lay_hdr.custom_text_link > li > a{
  position:relative; border-radius:10px; color:var(--ftj-ink-dim) !important;
  transition:color .2s ease, background .2s ease, box-shadow .28s ease;
}
.navbar-nav > li > a::before, .left_menu.desktop a::before, .sec_lay_hdr.custom_text_link > li > a::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:radial-gradient(120% 130% at 50% 125%, rgba(var(--ftj-glowrgb),calc(.16*var(--ftj-glow-i))), transparent 70%);
  opacity:.38; transition:opacity .28s ease;
}
.navbar-nav > li > a:hover, .left_menu.desktop a:hover, .sec_lay_hdr.custom_text_link > li > a:hover,
.navbar-nav > li.active > a, .left_menu.desktop li.active > a{
  color:var(--ftj-glow) !important; background:rgba(var(--ftj-glowrgb),.06) !important;
  box-shadow:0 0 0 1px rgba(var(--ftj-glowrgb),.28), 0 8px 26px rgba(var(--ftj-glowrgb),calc(.20*var(--ftj-glow-i)));
}
.navbar-nav > li > a:hover::before, .left_menu.desktop a:hover::before, .sec_lay_hdr.custom_text_link > li > a:hover::before{ opacity:1; }

/* ============================ CARDS / PANELS (glass) ===================== */
.gl-card, .lw-info, .lw-related, .ch-streams-sec, .gl-stream-card, .gs-host,
.dropdown-menu, .panel, .panel-default, .modal-content, .box, .card, .video-card,
.comment-item, .comment-box{
  background:var(--ftj-glass) !important;
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  border:1px solid var(--ftj-brd) !important;
  box-shadow:0 1px 0 var(--ftj-hi) inset, 0 12px 32px rgba(0,0,0,.45) !important;
  border-radius:var(--ftj-r) !important;
}
.panel-heading, .card-header{ background:var(--ftj-glass-2) !important; border-bottom:1px solid var(--ftj-brd) !important; color:#fff !important; }
/* stream cards: lift + glow on hover (leave the thumbnail image alone) */
.stream-card-wrap{ transition:transform .2s ease, box-shadow .28s ease; border-radius:var(--ftj-r); }
.stream-card-wrap:hover, .video-card:hover{ transform:translateY(-3px);
  box-shadow:0 12px 38px rgba(var(--ftj-glowrgb),calc(.22*var(--ftj-glow-i))), 0 1px 0 var(--ftj-hi) inset; }
.stream-card-thumb, .video-thumb, .thumbsImageContainer{ border-radius:10px !important; border:1px solid var(--ftj-brd) !important; overflow:hidden; }
.thumbsImage, .thumbsImageContainer img{ box-shadow:none !important; }

/* ============================ BUTTONS ==================================== */
.btn, .gl-btn, .gl-btn-sm, button.btn, input[type="submit"], input[type="button"]{
  border-radius:10px !important; transition:box-shadow .26s ease, transform .12s ease, background .2s ease; }
.gl-btn, .btn-primary, .btn.main, input.button.main{
  background:linear-gradient(180deg, rgba(var(--ftj-glowrgb),.92), rgba(var(--ftj-glowrgb),.66)) !important;
  border:1px solid rgba(var(--ftj-glowrgb),.6) !important; color:#04222a !important; font-weight:700 !important;
  box-shadow:0 6px 22px rgba(var(--ftj-glowrgb),calc(.30*var(--ftj-glow-i))), 0 1px 0 var(--ftj-hi) inset; }
.gl-btn:hover, .btn-primary:hover, .btn.main:hover, input.button.main:hover{ transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(var(--ftj-glowrgb),calc(.46*var(--ftj-glow-i))), 0 1px 0 var(--ftj-hi) inset; }
.gl-btn-sm, .btn-default{
  background:var(--ftj-glass-2) !important; border:1px solid var(--ftj-brd) !important; color:var(--ftj-ink) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.gl-btn-sm:hover, .btn-default:hover{ color:var(--ftj-glow) !important;
  box-shadow:0 0 0 1px rgba(var(--ftj-glowrgb),.35), 0 6px 18px rgba(var(--ftj-glowrgb),calc(.20*var(--ftj-glow-i))); }
.btn-danger, .gl-btn-danger{ background:var(--ftj-danger) !important; border:1px solid var(--ftj-danger) !important; color:#fff !important; }

/* ============================ FORMS ===================================== */
.form-control, input[type="text"], input[type="email"], input[type="password"],
textarea, select, .search-header input, .navbar-form input{
  background:var(--ftj-glass-2) !important; border:1px solid var(--ftj-brd) !important; color:var(--ftj-ink) !important;
  border-radius:10px !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.form-control:focus, input:focus, textarea:focus, select:focus, .search-header input:focus{
  border-color:rgba(var(--ftj-glowrgb),.55) !important;
  box-shadow:0 0 0 3px rgba(var(--ftj-glowrgb),calc(.18*var(--ftj-glow-i))) !important; outline:none !important; }
.form-control::placeholder{ color:var(--ftj-ink-dim) !important; }

/* dropdown items */
.dropdown-menu > li > a{ color:var(--ftj-ink) !important; border-radius:8px !important; }
.dropdown-menu > li > a:hover{ background:rgba(var(--ftj-glowrgb),.08) !important; color:var(--ftj-glow) !important; }

/* ============================ TABLES / ALERTS / BADGES ================== */
.table, .table > thead > tr > th, .table > tbody > tr > td{ border-color:var(--ftj-brd) !important; color:var(--ftj-ink) !important; }
.table > thead > tr > th{ background:var(--ftj-glass-2) !important; color:#fff !important; text-transform:uppercase; letter-spacing:.05em; font-size:12px !important; }
.alert{ border-radius:10px !important; border:1px solid var(--ftj-brd) !important; background:var(--ftj-glass) !important; backdrop-filter:blur(8px); }
.alert-success{ border-color:rgba(var(--ftj-glowrgb),.5) !important; color:var(--ftj-glow) !important; }
.alert-danger{ border-color:var(--ftj-danger) !important; color:#ff8088 !important; }
.badge, .label, .tag{ background:var(--ftj-glass-2) !important; color:var(--ftj-ink-dim) !important; border-radius:6px !important; }
.badge-primary, .label-primary{ background:rgba(var(--ftj-glowrgb),.85) !important; color:#04222a !important; }
.live-badge, .is-live, .sc-badge-live{ background:var(--ftj-danger) !important; color:#fff !important; text-transform:uppercase; letter-spacing:.08em; border-radius:5px !important; }

/* ============================ PAGINATION / SCROLLBAR ==================== */
.pagination > li > a, .pagination > li > span{ background:var(--ftj-glass-2) !important; border-color:var(--ftj-brd) !important; color:var(--ftj-ink) !important; }
.pagination > li.active > a, .pagination > li > a:hover{ background:rgba(var(--ftj-glowrgb),.85) !important; border-color:rgba(var(--ftj-glowrgb),.6) !important; color:#04222a !important; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--ftj-bg); }
::-webkit-scrollbar-thumb{ background:rgba(var(--ftj-glowrgb),.28); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(var(--ftj-glowrgb),.5); }

/* ============================ PRO PULSE HOOK (Phase 2) =================
   add class `ftj-pulse` to <body> for a Pro user -> their panels breathe. */
@keyframes ftjPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(var(--ftj-glowrgb),.18), 0 8px 22px rgba(var(--ftj-glowrgb),calc(.16*var(--ftj-glow-i))); }
  50%    { box-shadow:0 0 0 1px rgba(var(--ftj-glowrgb),.42), 0 14px 40px rgba(var(--ftj-glowrgb),calc(.42*var(--ftj-glow-i))); }
}
body.ftj-pulse .gl-card, body.ftj-pulse .gs-host{ animation:ftjPulse 3.4s ease-in-out infinite; }

/* ============================ FTJ THEME PACK ============================
   Selectable palettes — set body class `ftj-theme-NAME`. Each overrides the
   --ftj-* tokens (and some override the radial shimmer). The live switcher
   (bottom-right paint button) sets the body class + remembers it per browser.
   Phase 2: gate to Pro + save per user. ================================= */
body.ftj-theme-abyss{ --ftj-glow:#22d3ee; --ftj-glowrgb:34,211,238; --ftj-bg:#060606; --ftj-glow-i:1; }

body.ftj-theme-universe{ --ftj-glow:#8b9cff; --ftj-glowrgb:139,156,255; --ftj-bg:#04050e; --ftj-glow-i:1.1; }
body.ftj-theme-universe::before{ background:
  radial-gradient(900px 600px at 12% -8%, rgba(139,156,255,.11), transparent 60%),
  radial-gradient(820px 600px at 95% 4%, rgba(214,99,255,.08), transparent 55%),
  radial-gradient(1000px 820px at 50% 121%, rgba(64,120,255,.07), transparent 60%),
  #04050e; }

body.ftj-theme-volcano{ --ftj-glow:#ff5a1f; --ftj-glowrgb:255,90,31; --ftj-bg:#0a0503; --ftj-glow-i:1.25; }
body.ftj-theme-volcano::before{ background:
  radial-gradient(1000px 720px at 50% 126%, rgba(255,90,31,.17), transparent 62%),
  radial-gradient(700px 520px at 14% -10%, rgba(255,180,40,.07), transparent 55%),
  radial-gradient(720px 520px at 92% 0%, rgba(200,20,20,.10), transparent 55%),
  #0a0503; }

body.ftj-theme-geode{ --ftj-glow:#c084fc; --ftj-glowrgb:192,132,252; --ftj-bg:#0b0712; --ftj-glow-i:1.15; }
body.ftj-theme-geode::before{ background:
  radial-gradient(820px 600px at 14% -8%, rgba(192,132,252,.13), transparent 58%),
  radial-gradient(820px 600px at 96% 4%, rgba(236,72,200,.08), transparent 55%),
  radial-gradient(920px 720px at 50% 122%, rgba(45,212,191,.06), transparent 60%),
  #0b0712; }

body.ftj-theme-oldgold{ --ftj-glow:#d4af37; --ftj-glowrgb:212,175,55; --ftj-bg:#0a0805; --ftj-glow-i:.85;
  --ftj-glass:rgba(26,22,12,.55); --ftj-hi:rgba(255,225,150,.16); }

body.ftj-theme-bling{ --ftj-glow:#19e57a; --ftj-glowrgb:25,229,122; --ftj-bg:#04090a; --ftj-glow-i:1.3;
  --ftj-hi:rgba(255,215,120,.22); }
body.ftj-theme-bling::before{ background:
  radial-gradient(900px 660px at 16% -8%, rgba(25,229,122,.12), transparent 58%),
  radial-gradient(720px 520px at 92% 2%, rgba(255,205,90,.10), transparent 55%),
  radial-gradient(1000px 820px at 50% 122%, rgba(25,229,122,.07), transparent 60%),
  #04090a; }

body.ftj-theme-spectre{ --ftj-glow:#cfd8e3; --ftj-glowrgb:207,216,227; --ftj-bg:#000000; --ftj-glow-i:.8; --ftj-blur:18px;
  --ftj-glass:rgba(16,18,22,.5); }

body.ftj-theme-synthwave{ --ftj-glow:#ff2dd0; --ftj-glowrgb:255,45,208; --ftj-bg:#0a0514; --ftj-glow-i:1.2; }
body.ftj-theme-synthwave::before{ background:
  radial-gradient(900px 600px at 50% -10%, rgba(255,45,208,.12), transparent 60%),
  radial-gradient(1000px 720px at 50% 122%, rgba(34,211,238,.10), transparent 60%),
  #0a0514; }

/* ===== EXPAND-ICON FIX — keep the menu grid in the float flow so it no longer
   overlaps the topbar buttons (Replay Radio / FTJ Merch). ===== */
.navbar-header .yp_slide_menu{ float:left !important; display:flex !important; align-items:center; margin:0 10px 0 4px !important; }
.navbar-header .yp_slide_menu span{ margin:12px 0 !important; }
.navbar-header .sec_lay_hdr.custom_text_link{ margin-left:6px; }

/* ===== ACTIVE MENU GLOW — active sidebar item follows the theme glow color
   instead of the hardcoded blue pill. ===== */
.left_menu.desktop li.active{ background:transparent !important; }
.left_menu.desktop li.active > a, .left_menu.desktop li.active a{
  background:rgba(var(--ftj-glowrgb), .15) !important;
  color:var(--ftj-glow) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--ftj-glowrgb),.55), 0 0 22px rgba(var(--ftj-glowrgb), calc(.30*var(--ftj-glow-i))) !important;
  border-radius:10px !important;
}
.left_menu.desktop li.active a svg, .left_menu.desktop li.active a svg path{ fill:currentColor !important; stroke:currentColor; }

/* ===== PULSE v2 — make the Pro "pulse" motion actually visible: animate the
   active menu item's glow + primary buttons (cards already pulse). Follows the
   per-theme/per-Pro --ftj-glow. ===== */
@keyframes ftjGlowPulse{
  0%,100%{ box-shadow:inset 0 0 0 1px rgba(var(--ftj-glowrgb),.40), 0 0 14px rgba(var(--ftj-glowrgb),calc(.22*var(--ftj-glow-i))); }
  50%    { box-shadow:inset 0 0 0 1px rgba(var(--ftj-glowrgb),.78), 0 0 34px rgba(var(--ftj-glowrgb),calc(.60*var(--ftj-glow-i))); }
}
body.ftj-pulse .left_menu.desktop li.active > a,
body.ftj-pulse .left_menu.desktop li.active a{ animation:ftjGlowPulse 2.8s ease-in-out infinite; }
body.ftj-pulse .gl-btn, body.ftj-pulse .btn-primary{ animation:ftjGlowPulse 3s ease-in-out infinite; }

/* ===== FIX v2 (2026-06-07) — header overlap + active-item theme color, done
   robustly. Earlier attempts aimed at .left_menu.desktop / float, but the live
   sidebar is the .yp_side_drawer and the header is flex. ===== */

/* HEADER: it's flexbox — space the children with a gap so the expand grid can
   never overlap the Replay Radio / FTJ Merch buttons. */
.pt_main_hdr .navbar-header{ gap:14px !important; align-items:center !important; }
.pt_main_hdr .navbar-header > .mobile,
.pt_main_hdr .navbar-header > .yp_slide_menu,
.pt_main_hdr .navbar-header > .sec_lay_hdr{ flex:0 0 auto !important; float:none !important; }
.navbar-header .sec_lay_hdr.custom_text_link{ margin-left:0 !important; }

/* ACTIVE MENU ITEM -> theme glow (covers left_menu, the side drawer, and any
   id'd active <li> like #home_menu_; overrides the hardcoded blue incl.
   background-color). */
.left_menu li.active > a, .left_menu li.active a,
.yp_side_drawer li.active > a, .yp_side_drawer li.active a,
ul.sections li.active > a, ul.sections li.active a,
ul li.active[id] > a, ul li.active[id] a{
  background:rgba(var(--ftj-glowrgb),.16) !important;
  background-color:rgba(var(--ftj-glowrgb),.16) !important;
  border-color:rgba(var(--ftj-glowrgb),.5) !important;
  color:var(--ftj-glow) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--ftj-glowrgb),.5), 0 0 22px rgba(var(--ftj-glowrgb),calc(.30*var(--ftj-glow-i))) !important;
  border-radius:10px !important;
}
.left_menu li.active a svg, .left_menu li.active a svg path,
.yp_side_drawer li.active a svg, .yp_side_drawer li.active a svg path,
ul li.active[id] a svg, ul li.active[id] a svg path{ fill:currentColor !important; stroke:currentColor; color:var(--ftj-glow) !important; }

/* ===== ACTIVE v3 (2026-06-07) — beat PlayTube's #04abf2 active pill on EVERY
   menu variant by matching its exact selector (+!important) and filling with a
   solid theme-colored pill. ===== */
nav.navbar-findcond ul.navbar-nav li.active a:not(.category),
nav.navbar-findcond ul.navbar-nav li.active a,
.yp_side_drawer ul.sections li.active a,
.yp_side_drawer ul.sections li.active > a,
.left_menu li.active a, .left_menu li.active > a,
ul li.active[id] a, ul li.active[id] > a{
  background:linear-gradient(180deg, rgba(var(--ftj-glowrgb),.95), rgba(var(--ftj-glowrgb),.60)) !important;
  background-color:rgba(var(--ftj-glowrgb),.88) !important;
  border-color:rgba(var(--ftj-glowrgb),.7) !important;
  color:#0b0b0c !important;
  border-radius:10px !important;
  box-shadow:0 0 18px rgba(var(--ftj-glowrgb),calc(.35*var(--ftj-glow-i))) !important;
}
nav.navbar-findcond ul.navbar-nav li.active a svg, nav.navbar-findcond ul.navbar-nav li.active a svg path,
.yp_side_drawer ul.sections li.active a svg, .yp_side_drawer ul.sections li.active a svg path,
.left_menu li.active a svg, .left_menu li.active a svg path,
ul li.active[id] a svg, ul li.active[id] a svg path{ fill:#0b0b0c !important; stroke:#0b0b0c !important; color:#0b0b0c !important; }

/* ===== COLLAPSE BUTTON — parked top-left (before the logo), themed, no overlap
   (header gap from FIX v2 keeps it clear of the logo/buttons). ===== */
.pt_main_hdr .navbar-header > .yp_slide_menu{ order:-1 !important; flex:0 0 auto !important; display:flex !important; align-items:center; margin:0 8px 0 0 !important; }
.yp_slide_menu span#open_slide{ color:var(--ftj-glow) !important; padding:6px !important; border-radius:8px; transition:background .2s, box-shadow .2s; }
.yp_slide_menu span#open_slide:hover{ background:rgba(var(--ftj-glowrgb),.10) !important; box-shadow:0 0 14px rgba(var(--ftj-glowrgb),calc(.30*var(--ftj-glow-i))); }
.yp_slide_menu span#open_slide svg{ width:22px; height:22px; }

/* ===== COLLAPSE v2 — pin the button to the TRUE top-left corner, out of the
   topbar flex flow so it can never overlap the buttons again. Reserve a left
   gutter on the header so the logo/buttons never slide under it. ===== */
.pt_main_hdr .navbar-header{ padding-left:54px !important; }
.pt_main_hdr .navbar-header > .yp_slide_menu{
  position:fixed !important; top:12px !important; left:14px !important; z-index:1050 !important;
  margin:0 !important; flex:0 0 auto !important;
}
.yp_slide_menu span#open_slide{ color:var(--ftj-glow) !important; padding:6px !important; border-radius:8px; }
.yp_slide_menu span#open_slide:hover{ background:rgba(var(--ftj-glowrgb),.10) !important; box-shadow:0 0 14px rgba(var(--ftj-glowrgb),calc(.30*var(--ftj-glow-i))); }

/* ===== HEADER v3 — keep it simple: grid as a normal in-flow icon, and shove the
   Replay Radio / FTJ Merch buttons well clear to the right. ===== */
.pt_main_hdr .navbar-header{ padding-left:0 !important; align-items:center; }
.pt_main_hdr .navbar-header > .yp_slide_menu{
  position:static !important; float:none !important; display:inline-flex !important;
  align-items:center; flex:0 0 auto !important; margin:0 6px 0 4px !important; z-index:auto !important;
}
.pt_main_hdr .navbar-header .sec_lay_hdr.custom_text_link{ margin-left:80px !important; padding-left:0 !important; }

/* ===== CHAT BUTTONS — modernize the bare 'Send' buttons + Superchat pills ===== */
#chat-send, #ftjMsgSend{
  background:linear-gradient(180deg, rgba(var(--ftj-glowrgb),.95), rgba(var(--ftj-glowrgb),.60)) !important;
  color:#06121a !important; border:1px solid rgba(var(--ftj-glowrgb),.6) !important;
  border-radius:9px !important; font-weight:700 !important; font-family:'Inter',system-ui,sans-serif !important;
  padding:7px 16px !important; cursor:pointer; line-height:1.1 !important; text-shadow:none !important;
  box-shadow:0 4px 14px rgba(var(--ftj-glowrgb),calc(.30*var(--ftj-glow-i))) !important;
  transition:box-shadow .2s ease, transform .12s ease;
}
#chat-send:hover, #ftjMsgSend:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(var(--ftj-glowrgb),calc(.46*var(--ftj-glow-i))) !important; }
#chat-send:active, #ftjMsgSend:active{ transform:translateY(0); }

/* Superchat = money -> a gold pill (recognizable across all themes) */
#lw-sc-btn, #ftjScBtn{
  background:linear-gradient(180deg,#f6c64e,#dd9e1c) !important; color:#3a2600 !important;
  border:1px solid #f7d488 !important; border-radius:9px !important; font-weight:800 !important;
  cursor:pointer; line-height:1 !important;
  box-shadow:0 4px 14px rgba(245,196,74,.35) !important; transition:box-shadow .2s ease, transform .12s ease;
}
#lw-sc-btn:hover, #ftjScBtn:hover{ transform:translateY(-1px); box-shadow:0 7px 20px rgba(245,196,74,.5) !important; }