:root{
  --bg:#070a11;--panel:#0f1522;--panel2:#141d2f;--text:#f6f7fb;--muted:#9aa7bd;
  --accent:#6de2ff;--accent2:#7a5cff;--gold:#f3c76a;--danger:#ff5e78;--line:rgba(255,255,255,.1);
  --shadow:0 24px 80px rgba(0,0,0,.38);--radius:22px;
}
html[data-mode="light"]{--bg:#f4f7fb;--panel:#ffffff;--panel2:#edf3fb;--text:#111827;--muted:#667085;--line:rgba(17,24,39,.12);--shadow:0 24px 70px rgba(38,53,82,.12)}
html[data-theme="abyss"]{--accent:#5de4ff;--accent2:#654cff;--gold:#f5c76c}
html[data-theme="imperial"]{--accent:#f7cd66;--accent2:#a56bff;--gold:#ffd77b}
html[data-theme="blood"]{--accent:#ff526f;--accent2:#9f193c;--gold:#f4b866}
html[data-theme="frost"]{--accent:#8be8ff;--accent2:#4f8cff;--gold:#d9f5ff}
html[data-theme="forest"]{--accent:#56e39f;--accent2:#258f69;--gold:#d6cb75}
html[data-theme="arcane"]{--accent:#c377ff;--accent2:#5b49ff;--gold:#ffcf72}
html[data-theme="solar"]{--accent:#ff9d46;--accent2:#ff4f6f;--gold:#ffd079}
html[data-theme="steel"]{--accent:#b4c5db;--accent2:#66758b;--gold:#d8bd86}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 34%),
radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 36%),
var(--bg);color:var(--text);font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.08em}
.logo{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 35px color-mix(in srgb,var(--accent) 38%,transparent);display:grid;place-items:center;color:#071019}
.navlinks{display:flex;gap:20px;margin-left:auto;color:var(--muted)}.navlinks a:hover{color:var(--text)}
.controls{display:flex;gap:8px}.select,.iconbtn,.btn,input{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:10px 12px}
.iconbtn{cursor:pointer;min-width:42px}.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:800;cursor:pointer;padding:12px 18px}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#071019;border:0;box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 24%,transparent)}
.hero{
  padding:92px 0 58px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  position:relative;color:#fff;min-height:640px;
}
.hero::before{
  content:"";position:absolute;z-index:0;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);pointer-events:none;
  background-image:url("../images/backgroud-1.png");
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.hero::after{
  content:"";position:absolute;z-index:1;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,8,15,.90) 0%,rgba(3,8,15,.68) 34%,rgba(3,8,15,.38) 58%,rgba(3,8,15,.58) 100%),
    linear-gradient(180deg,rgba(3,8,15,.16) 0%,rgba(3,8,15,.10) 60%,rgba(3,8,15,.82) 100%);
}
.hero>div{position:relative;z-index:2}
.kicker{font-size:13px;font-weight:900;letter-spacing:.22em;color:var(--accent);text-shadow:0 2px 18px rgba(0,0,0,.62)}h1{font-size:clamp(42px,6vw,82px);line-height:.98;margin:14px 0 20px;letter-spacing:-.055em;text-shadow:0 4px 28px rgba(0,0,0,.62)}
.hero p{font-size:18px;color:rgba(235,242,255,.84);max-width:720px;text-shadow:0 2px 18px rgba(0,0,0,.48)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.orb{aspect-ratio:1;border-radius:32px;background:
radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 32%),
conic-gradient(from 210deg,var(--panel),color-mix(in srgb,var(--accent2) 32%,var(--panel)),var(--panel));
border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.orb:before,.orb:after{content:"";position:absolute;inset:12%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:50%;transform:rotate(18deg)}
.orb:after{inset:22%;transform:rotate(-35deg)}.core{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,var(--accent),var(--accent2));filter:blur(2px);box-shadow:0 0 60px var(--accent)}
.notice{margin:8px 0 36px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-radius:14px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,transparent),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card .value{font-size:30px;font-weight:900;margin-top:7px}.muted{color:var(--muted)}section{padding:38px 0}
.sectionhead{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.sectionhead h2{margin:0;font-size:28px}
.rank{width:100%;border-collapse:collapse}.rank th,.rank td{text-align:left;padding:14px;border-bottom:1px solid var(--line)}.rank th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.featuregrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature{min-height:150px}.feature b{display:block;font-size:20px;margin:8px 0}
footer{padding:46px 0 70px;color:var(--muted);border-top:1px solid var(--line);margin-top:38px}
.admin-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth{width:min(480px,100%)}.auth h1{font-size:38px}.field{display:grid;gap:7px;margin:14px 0}.field input{width:100%}.alert{padding:12px 14px;border-radius:12px;margin:14px 0;background:color-mix(in srgb,var(--danger) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line))}
.dash{padding:52px 0}.dashgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.menu-toggle{display:none}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:62px;min-height:auto}.hero::before{background-position:42% center}.hero::after{background:linear-gradient(180deg,rgba(3,8,15,.58) 0%,rgba(3,8,15,.70) 58%,rgba(3,8,15,.92) 100%)}.orb{max-width:520px;width:100%;margin:auto}.grid,.featuregrid{grid-template-columns:repeat(2,1fr)}.navlinks{display:none}.menu-toggle{display:inline-flex}.controls .select.theme-select{display:none}.dashgrid{grid-template-columns:1fr}}
@media(max-width:560px){.wrap{width:min(100% - 22px,1180px)}.nav{height:66px;gap:10px}.brand span:last-child{display:none}.controls{margin-left:auto}.select{max-width:90px;padding:9px 8px}.hero{padding:48px 0 32px;gap:26px}h1{font-size:44px}.hero p{font-size:16px}.grid,.featuregrid{grid-template-columns:1fr 1fr;gap:10px}.card{padding:16px;border-radius:16px}.card .value{font-size:24px}.rank{font-size:13px}.rank th,.rank td{padding:11px 7px}.hide-mobile{display:none}.actions .btn{flex:1}.sectionhead h2{font-size:23px}}

/* BG1 visibility fix: pseudo layers stay ABOVE page background but BELOW hero content. */
.hero { overflow: visible; }
.hero::before { opacity: 1; }


/* LOCAL HERO BACKGROUND FIX */
.hero{
  position:relative;
  min-height:640px;
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  background-image:url("../images/backgroud-1.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  opacity:1;
  filter:saturate(1.12) contrast(1.06) brightness(1.05);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 38%, rgba(255,198,92,.16) 0%, rgba(255,128,34,.05) 24%, transparent 44%),
    linear-gradient(90deg,rgba(3,8,15,.25) 0%,rgba(3,8,15,.15) 38%,rgba(3,8,15,.06) 68%,rgba(3,8,15,.14) 100%),
    linear-gradient(180deg,rgba(3,8,15,.02) 0%,rgba(3,8,15,.06) 66%,rgba(3,8,15,.22) 100%);
}
.hero > div{
  position:relative;
  z-index:2;
}
@media(max-width:900px){
  .hero::before{
    background-position:42% center;
  }
  .hero::after{
    background:
      radial-gradient(circle at 62% 32%,rgba(255,190,80,.12),transparent 36%),
      linear-gradient(180deg,rgba(3,8,15,.08),rgba(3,8,15,.24));
  }
}
@media(max-width:560px){
  .hero{
    min-height:auto;
  }
  .hero::before{
    background-position:38% center;
  }
  .hero::after{
    background:
      radial-gradient(circle at 55% 28%,rgba(255,190,80,.10),transparent 34%),
      linear-gradient(180deg,rgba(3,8,15,.10),rgba(3,8,15,.30));
  }
}


/* HERO LIGHT FX - không thay đổi layout */
.hero-lightfx{
  position:absolute !important;
  z-index:1 !important;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:hidden;
}
.hero-lightfx::before,
.hero-lightfx::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  mix-blend-mode:screen;
}
.hero-lightfx::before{
  background:linear-gradient(
    112deg,
    transparent 0%,
    transparent 36%,
    rgba(255,255,255,.025) 41%,
    rgba(255,211,122,.12) 46%,
    rgba(255,132,45,.055) 50%,
    transparent 57%,
    transparent 100%
  );
  animation:muHeroSweep 9s ease-in-out infinite;
}
.hero-lightfx::after{
  background:
    radial-gradient(circle at 70% 38%,rgba(255,215,128,.14),transparent 18%),
    radial-gradient(circle at 76% 63%,rgba(255,104,30,.10),transparent 22%);
  animation:muHeroPulse 5.8s ease-in-out infinite alternate;
}
@keyframes muHeroSweep{
  0%{transform:translateX(-30%);opacity:.35}
  50%{transform:translateX(12%);opacity:.80}
  100%{transform:translateX(38%);opacity:.40}
}
@keyframes muHeroPulse{
  from{opacity:.40;transform:scale(1)}
  to{opacity:.82;transform:scale(1.035)}
}
@media (prefers-reduced-motion:reduce){
  .hero-lightfx::before,.hero-lightfx::after{animation:none}
}


/* CANVAS FIRE RAIN - layer above background, below hero content */
.hero-fire-canvas{
  position:absolute !important;
  z-index:2 !important;
  inset:0;
  left:50%;
  width:100vw;
  height:100%;
  transform:translateX(-50%);
  pointer-events:none;
  display:block;
}
.hero > div:not(.hero-lightfx){
  position:relative;
  z-index:4;
}
.hero-lightfx{
  z-index:1 !important;
}
@media(prefers-reduced-motion:reduce){
  .hero-fire-canvas{display:none}
}


/* CMS / FULL WIDTH MENU + FOOTER + USER WALLET */
.fullwidth-bar{width:100%;left:0;right:0}
.fullwidth-bar .wrap{width:min(1480px,calc(100% - 38px))}
.site-footer{width:100%;margin-top:46px;padding:0;background:color-mix(in srgb,var(--panel) 88%,var(--bg));border-top:1px solid var(--line)}
.footer-inner{padding:52px 0;display:grid;grid-template-columns:1.05fr 1.95fr;gap:54px}
.footer-brand p{max-width:460px;color:var(--muted);margin-top:18px}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer-col{display:flex;flex-direction:column;gap:10px}.footer-col h3{margin:0 0 8px;font-size:15px;letter-spacing:.06em}.footer-col a{color:var(--muted)}.footer-col a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--line);padding:18px 0;color:var(--muted)}
.admin-navlinks{display:flex;gap:14px;margin-left:auto;color:var(--muted);font-size:14px}.admin-navlinks a:hover{color:var(--text)}
.page-shell{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:48px 18px}.form-card{width:min(560px,100%)}.wide-form{width:100%;margin-top:18px}
.page-title{font-size:clamp(34px,5vw,58px);margin:10px 0 16px;line-height:1.02}.account-title{font-size:clamp(42px,6vw,72px);margin:8px 0}.module-heading{margin-top:40px}
.payment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.payment-card{text-align:center}.qr-img,.qr-placeholder{width:min(280px,100%);aspect-ratio:1;object-fit:contain;margin:14px auto;border-radius:18px;border:1px solid var(--line);background:#fff;padding:10px}.qr-placeholder{display:grid;place-items:center;background:var(--panel2);color:var(--muted);font-size:38px}
.admin-title{font-size:clamp(38px,5vw,64px);margin:8px 0 18px}.admin-two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.admin-row small{display:block;color:var(--muted);margin-top:4px}.row-actions form,.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.danger-btn{border-color:color-mix(in srgb,var(--danger) 42%,var(--line));color:#ff9aaa}.small-input{width:86px!important}
.footer-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.footer-link-editor{padding:12px;border:1px solid var(--line);border-radius:14px;margin:12px 0;display:grid;gap:8px}.footer-link-editor label{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center}.footer-link-editor input,textarea{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:9px 10px}.checkline{display:flex;gap:10px;align-items:center;margin:12px 0}.table-scroll{overflow:auto}
@media(max-width:1100px){.admin-navlinks{display:none}.footer-inner{grid-template-columns:1fr}.admin-two-col{grid-template-columns:1fr}.footer-admin-grid{grid-template-columns:1fr}}
@media(max-width:720px){.fullwidth-bar .wrap{width:min(100% - 20px,1480px)}.footer-columns{grid-template-columns:1fr 1fr}.payment-grid{grid-template-columns:1fr}.page-shell{padding:28px 12px}.footer-inner{padding:36px 0}.footer-admin-grid{grid-template-columns:1fr}}
@media(max-width:480px){.footer-columns{grid-template-columns:1fr}.site-footer .brand span:last-child{display:inline}.inline-form{min-width:260px}}

/* AUTH 4 LANG */
.auth-lang-switch{display:flex;justify-content:flex-end;margin:0 0 18px}
.auth-lang-switch .select{min-width:110px}
@media(max-width:560px){.auth-lang-switch{justify-content:flex-start}.auth-lang-switch .select{min-width:96px}}

.reset-pass-input{width:150px!important;min-width:130px}


/* MOBILE HAMBURGER + USER 4LANG */
.mobile-menu-toggle{display:none}
.mobile-menu-panel[hidden]{display:none!important}
.mobile-menu-panel{position:fixed;inset:0;z-index:1000}
.mobile-menu-backdrop{position:absolute;inset:0;background:rgba(1,5,12,.68);backdrop-filter:blur(5px)}
.mobile-menu-sheet{position:absolute;top:0;right:0;width:min(86vw,360px);height:100%;background:color-mix(in srgb,var(--panel) 96%,#000);border-left:1px solid var(--line);padding:18px;box-shadow:-20px 0 60px rgba(0,0,0,.45)}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mobile-menu-links{display:flex;flex-direction:column;padding-top:12px}
.mobile-menu-links a{padding:14px 10px;border-bottom:1px solid var(--line);font-weight:700}
.mobile-menu-links a:hover{color:var(--accent)}
html.mobile-menu-open,html.mobile-menu-open body{overflow:hidden}
.auth-lang-switch{align-items:center;gap:8px}
.auth-mobile-home{display:none;text-decoration:none}
@media(max-width:900px){
  .mobile-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center}
  .controls{gap:6px}
  .controls .select{order:1}
  .controls .mobile-menu-toggle{order:2}
  .controls [data-mode-toggle]{order:3}
  .account-topup-btn,.account-logout-btn{display:none}
}
@media(max-width:560px){
  .nav .controls{margin-left:auto}
  .nav .controls .select{max-width:88px}
  .mobile-menu-toggle{min-width:42px}
  .auth-mobile-home{display:inline-flex}
  .auth-lang-switch{justify-content:flex-end}
}

/* HERO CMS V13 */
.hero-logo-wrap{display:flex;align-items:center;justify-content:center;min-height:420px}
.hero-logo-stage{position:relative;width:min(100%,470px);height:420px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.hero-logo-stage.has-glow:before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,190,72,.4),rgba(255,93,22,.14) 34%,rgba(69,211,255,.1) 52%,transparent 72%);filter:blur(22px);animation:hglow 3.3s ease-in-out infinite}
.hero-main-logo{position:relative;z-index:4;width:min(var(--logo-width),80%);max-height:330px;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(255,181,61,.4));transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s ease}
.hero-logo-stage:hover .hero-main-logo{transform:scale(var(--logo-hover));filter:drop-shadow(0 20px 30px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,184,62,.7)) drop-shadow(0 0 45px rgba(70,210,255,.25))}
.hero-logo-orbit{position:absolute;z-index:2;border-radius:50%;opacity:0}.has-glow .hero-logo-orbit{opacity:1}.orbit-a{width:72%;aspect-ratio:1;border:1px solid rgba(78,211,255,.38);box-shadow:0 0 20px rgba(70,210,255,.16);animation:horbit 10s linear infinite}.orbit-b{width:58%;aspect-ratio:1;border:1px dashed rgba(255,188,74,.5);animation:horbitr 7s linear infinite}
.hero-cms-btn{transition:transform .2s ease,box-shadow .2s ease}.hero-cms-btn:hover{transform:translateY(-2px) scale(1.025)}.hero-cms-btn.hero-button-locked{background:var(--hero-btn-bg)!important;color:var(--hero-btn-text)!important;border-color:color-mix(in srgb,var(--hero-btn-bg) 70%,transparent)!important;box-shadow:0 10px 28px color-mix(in srgb,var(--hero-btn-bg) 24%,transparent)!important}.hero-cms-btn.hero-button-locked:hover{box-shadow:0 12px 32px color-mix(in srgb,var(--hero-btn-bg) 38%,transparent)!important}
.hero-cms-btn.hero-image-btn{background-image:var(--hero-btn-image)!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;min-width:145px;min-height:52px;border-color:transparent!important}
.admin-logo-preview{display:grid;place-items:center;min-height:190px;border:1px dashed var(--line);border-radius:18px;margin-top:14px}.admin-logo-preview img{max-width:220px;max-height:180px;object-fit:contain}
.hero-button-admin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.color-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.color-pair label{display:flex;justify-content:space-between;align-items:center}.color-pair input{width:62px;height:38px}details{border-top:1px solid var(--line);padding:12px 0}summary{cursor:pointer;margin-bottom:10px}
@keyframes hglow{0%,100%{transform:scale(.94);opacity:.6}50%{transform:scale(1.08);opacity:1}}@keyframes horbit{to{transform:rotate(360deg)}}@keyframes horbitr{to{transform:rotate(-360deg)}}
@media(max-width:900px){.hero-logo-wrap{min-height:300px}.hero-logo-stage{height:300px}.hero-main-logo{max-height:245px}.hero-button-admin{grid-template-columns:1fr}}
@media(max-width:620px){.hero-logo-wrap{min-height:230px}.hero-logo-stage{height:230px}.hero-main-logo{width:min(var(--logo-width),70%);max-height:190px}}
@media(prefers-reduced-motion:reduce){.hero-logo-stage:before,.hero-logo-orbit{animation:none!important}.hero-main-logo{transition:none}}


/* HERO LOGO 10 LIGHT EFFECTS V14 */
.hero-logo-stage.has-glow .hero-logo-orbit{transition:opacity .2s ease}
.hero-logo-stage.effect-orbit_dual .orbit-a{border-color:rgba(78,211,255,.42);box-shadow:0 0 22px rgba(70,210,255,.2)}
.hero-logo-stage.effect-orbit_dual .orbit-b{border-color:rgba(255,188,74,.52)}

.hero-logo-stage.effect-solar_burst:after{
  content:"";position:absolute;z-index:1;width:82%;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,218,115,.22) 0deg 3deg,transparent 3deg 12deg);
  mask:radial-gradient(circle,transparent 0 28%,#000 45% 100%);
  animation:fxSpin 16s linear infinite;filter:blur(.4px)
}
.hero-logo-stage.effect-solar_burst .orbit-a,.hero-logo-stage.effect-solar_burst .orbit-b{opacity:.22!important}

.hero-logo-stage.effect-blue_plasma:before{
  background:radial-gradient(circle,rgba(90,236,255,.48),rgba(50,118,255,.22) 34%,rgba(129,66,255,.14) 52%,transparent 73%)!important;
  filter:blur(28px)!important;animation:fxPlasma 2.8s ease-in-out infinite!important
}
.hero-logo-stage.effect-blue_plasma .orbit-a{border-color:rgba(95,231,255,.66);box-shadow:0 0 28px rgba(56,175,255,.34)}
.hero-logo-stage.effect-blue_plasma .orbit-b{border-color:rgba(125,95,255,.6)}

.hero-logo-stage.effect-fire_aura:before{
  background:radial-gradient(circle,rgba(255,224,102,.42),rgba(255,104,15,.28) 34%,rgba(193,22,0,.13) 55%,transparent 74%)!important;
  filter:blur(24px)!important;animation:fxFire 1.9s ease-in-out infinite!important
}
.hero-logo-stage.effect-fire_aura:after{
  content:"";position:absolute;z-index:1;width:76%;height:76%;border-radius:48% 52% 55% 45%;
  background:conic-gradient(from 0deg,transparent,rgba(255,83,0,.2),transparent 28%,rgba(255,196,49,.19),transparent 62%,rgba(255,69,0,.18),transparent);
  filter:blur(8px);animation:fxSpin 7s linear infinite
}

.hero-logo-stage.effect-holy_rays:after{
  content:"";position:absolute;z-index:1;width:92%;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,247,198,.18) 0deg 2deg,transparent 2deg 18deg);
  mask:radial-gradient(circle,transparent 0 24%,#000 47% 100%);
  animation:fxBreathe 3.6s ease-in-out infinite
}
.hero-logo-stage.effect-holy_rays .orbit-a,.hero-logo-stage.effect-holy_rays .orbit-b{opacity:.15!important}

.hero-logo-stage.effect-neon_ring .orbit-a{
  width:76%;border:2px solid rgba(57,237,255,.76);box-shadow:0 0 10px rgba(57,237,255,.9),0 0 34px rgba(57,237,255,.48),inset 0 0 18px rgba(57,237,255,.35);
  animation:fxSpin 8s linear infinite
}
.hero-logo-stage.effect-neon_ring .orbit-b{
  width:62%;border:2px solid rgba(193,82,255,.7);box-shadow:0 0 18px rgba(193,82,255,.52);
  animation:fxSpinReverse 5.5s linear infinite
}

.hero-logo-stage.effect-pulse_core:before{
  background:radial-gradient(circle,rgba(255,255,230,.55) 0 10%,rgba(79,220,255,.4) 20%,rgba(90,95,255,.18) 44%,transparent 72%)!important;
  animation:fxPulseCore 1.6s ease-in-out infinite!important;filter:blur(20px)!important
}
.hero-logo-stage.effect-pulse_core .orbit-a,.hero-logo-stage.effect-pulse_core .orbit-b{opacity:.18!important}

.hero-logo-stage.effect-spark_storm:after{
  content:"";position:absolute;z-index:3;inset:7%;border-radius:50%;
  background:
    radial-gradient(circle at 15% 24%,rgba(255,230,120,.95) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 74% 15%,rgba(88,228,255,.9) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 86% 66%,rgba(255,132,44,.9) 0 1.7px,transparent 2.7px),
    radial-gradient(circle at 28% 82%,rgba(255,245,165,.85) 0 1.3px,transparent 2.2px),
    radial-gradient(circle at 50% 7%,rgba(255,255,255,.9) 0 1.2px,transparent 2px);
  background-size:23% 23%,31% 31%,27% 27%,35% 35%,29% 29%;
  animation:fxSpark 2.3s linear infinite;filter:drop-shadow(0 0 5px rgba(255,185,73,.75))
}
.hero-logo-stage.effect-spark_storm .orbit-a,.hero-logo-stage.effect-spark_storm .orbit-b{opacity:.24!important}

.hero-logo-stage.effect-energy_wave:after{
  content:"";position:absolute;z-index:1;width:56%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(91,225,255,.58);box-shadow:0 0 24px rgba(91,225,255,.25);
  animation:fxWave 2.5s ease-out infinite
}
.hero-logo-stage.effect-energy_wave .orbit-a{animation-duration:12s}.hero-logo-stage.effect-energy_wave .orbit-b{opacity:.28!important}

.hero-logo-stage.effect-void_portal:before{
  background:radial-gradient(circle,rgba(10,10,18,.12) 0 16%,rgba(87,53,205,.4) 27%,rgba(33,180,255,.18) 46%,rgba(0,0,0,0) 70%)!important;
  filter:blur(20px)!important
}
.hero-logo-stage.effect-void_portal:after{
  content:"";position:absolute;z-index:1;width:76%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(72,217,255,.0),rgba(72,217,255,.38),rgba(138,69,255,.48),rgba(0,0,0,0),rgba(63,194,255,.34),rgba(0,0,0,0));
  mask:radial-gradient(circle,transparent 0 42%,#000 44% 63%,transparent 65%);
  filter:blur(2px);animation:fxSpin 5.5s linear infinite
}
.hero-logo-stage.effect-void_portal .orbit-a{border-color:rgba(84,213,255,.5)}.hero-logo-stage.effect-void_portal .orbit-b{border-color:rgba(143,75,255,.65)}

@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxSpinReverse{to{transform:rotate(-360deg)}}
@keyframes fxPlasma{0%,100%{transform:scale(.91);opacity:.55}50%{transform:scale(1.1);opacity:1}}
@keyframes fxFire{0%,100%{transform:scale(.94) rotate(-2deg);opacity:.63}50%{transform:scale(1.08) rotate(2deg);opacity:1}}
@keyframes fxBreathe{0%,100%{transform:scale(.9);opacity:.34}50%{transform:scale(1.08);opacity:.85}}
@keyframes fxPulseCore{0%,100%{transform:scale(.8);opacity:.45}45%{transform:scale(1.12);opacity:1}65%{transform:scale(.98);opacity:.72}}
@keyframes fxSpark{from{transform:rotate(0deg) scale(.96)}50%{transform:rotate(180deg) scale(1.05)}to{transform:rotate(360deg) scale(.96)}}
@keyframes fxWave{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@media(prefers-reduced-motion:reduce){
 .hero-logo-stage.effect-solar_burst:after,.hero-logo-stage.effect-blue_plasma:before,.hero-logo-stage.effect-fire_aura:before,
 .hero-logo-stage.effect-fire_aura:after,.hero-logo-stage.effect-holy_rays:after,.hero-logo-stage.effect-neon_ring .orbit-a,
 .hero-logo-stage.effect-neon_ring .orbit-b,.hero-logo-stage.effect-pulse_core:before,.hero-logo-stage.effect-spark_storm:after,
 .hero-logo-stage.effect-energy_wave:after,.hero-logo-stage.effect-void_portal:after{animation:none!important}
}


/* HERO BACKGROUND + IMAGE/TEXT MODE V15 */
.hero::before{
  background-image:var(--hero-bg)!important;
  background-position:var(--hero-bg-pos,center center)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.hero::after{
  background:
    linear-gradient(90deg,rgba(3,8,15,.52) 0%,rgba(3,8,15,.18) 46%,rgba(3,8,15,.12) 68%,rgba(3,8,15,.34) 100%),
    linear-gradient(180deg,rgba(3,8,15,.06) 0%,rgba(3,8,15,.03) 62%,rgba(3,8,15,var(--hero-bg-dark,.18)) 100%)!important;
}
.hero-text-image-link,.hero-text-link{display:inline-block;max-width:100%}
.hero-text-image{display:block;max-width:min(100%,760px);height:auto;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.28));transition:transform .25s ease,filter .25s ease}
.hero-text-image-link:hover .hero-text-image{transform:scale(1.025);filter:drop-shadow(0 15px 32px rgba(0,0,0,.36)) drop-shadow(0 0 15px rgba(93,228,255,.15))}
.hero-text-image.kicker{max-width:420px}
.hero-text-image.hero-title-text{max-width:760px;margin:14px 0 18px}
.hero-text-image.hero-desc-text{max-width:680px;margin:12px 0 20px}
.hero-title-text{font-size:clamp(42px,6vw,82px);line-height:.98;margin:14px 0 20px;letter-spacing:-.055em}
.hero-desc-text{font-size:18px;color:var(--muted);max-width:720px}
.seo-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hero-content-mode-editor{padding:14px 0;border-top:1px solid var(--line)}.hero-content-mode-editor h3{margin:0 0 12px}.soft-line{border:0;border-top:1px solid var(--line);margin:18px 0}
@media(max-width:620px){
  .hero-text-image.hero-title-text{max-width:92%}
  .hero-text-image.hero-desc-text{max-width:94%}
  .hero-text-image.kicker{max-width:80%}
}

/* HERO BACKGROUND PATH FIX V16 */
.hero::before,.hero::after{
  top:0!important;bottom:0!important;left:50%!important;width:100vw!important;
  transform:translateX(-50%)!important;
}

/* USER LOCK / WCOIN ADMIN V17 */
.lock-select{min-width:125px}.lock-until{min-width:190px!important}.lock-reason{min-width:150px!important}
@media(max-width:760px){.lock-until,.lock-reason,.lock-select{min-width:100%!important;width:100%!important}}


/* HEADER STATUS + BRANDING V18 */
.site-brand{flex:0 0 auto}
.site-logo-image{width:var(--site-logo-width,42px);height:auto;max-height:58px;object-fit:contain;display:block;filter:drop-shadow(0 0 10px rgba(93,228,255,.25))}
.site-logo-text{width:var(--site-logo-width,42px);height:var(--site-logo-width,42px);font-size:clamp(11px,1.2vw,16px)}
.site-brand-name{white-space:nowrap}
.header-status{
  flex:0 0 auto;min-width:190px;padding:7px 11px;border-left:1px solid var(--line);
  display:grid;gap:2px;line-height:1.15;
}
.header-status-top{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.12em;color:#82f3a8}
.status-dot{width:7px;height:7px;border-radius:50%;background:#58ef8a;box-shadow:0 0 9px rgba(88,239,138,.85);animation:statusPulse 1.8s ease-in-out infinite}
.header-status-counts{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.header-status-counts strong{color:var(--text)}
.header-status-time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.btn{background:var(--admin-secondary-bg,var(--panel));color:var(--admin-secondary-text,var(--text))}
.btn.primary{background:var(--admin-primary-bg,var(--accent))!important;color:var(--admin-primary-text,#071019)!important}
.color-admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.color-admin-grid label{display:grid;gap:8px}.color-admin-grid input{width:100%;height:48px;padding:3px}
@keyframes statusPulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:1080px){
  .header-status{min-width:155px}.header-status-counts{display:grid;gap:2px}
  .site-brand-name{display:none}
}
@media(max-width:760px){
  .header-status{min-width:0;padding:4px 7px;border-left:0}
  .header-status-top b{display:none}
  .header-status-counts{display:none}
  .header-status-time{font-size:9px}
  .color-admin-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .header-status{display:none}
  .color-admin-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.status-dot{animation:none}}

/* HERO VIDEO BACKGROUND V19 */
.hero-bg-video,.hero-bg-embed-wrap{position:absolute;z-index:0;top:0;bottom:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.hero-bg-video{object-fit:cover;object-position:center;background:#000}
.hero-bg-embed{position:absolute;top:50%;left:50%;width:max(100vw,177.78vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero.hero-has-video::before{opacity:0}.hero.hero-has-video::after{z-index:1!important}.hero.hero-has-video .hero-lightfx{z-index:2!important}.hero.hero-has-video .hero-fire-canvas{z-index:3!important}
.bg-video-settings[hidden],.bg-image-settings[hidden],.video-source-local[hidden],.video-source-url[hidden],.video-source-embed[hidden]{display:none!important}
.video-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 16px}
@media(max-width:800px){.video-check-grid{grid-template-columns:1fr 1fr}.hero-bg-embed{width:max(178vw,177.78vh);height:max(100vw,100vh)}}@media(max-width:480px){.video-check-grid{grid-template-columns:1fr}}


/* HERO BACKGROUND EFFECTS V20 */
.hero-bg-effect-canvas{
  position:absolute!important;
  z-index:2!important;
  top:0;bottom:0;left:50%;
  width:100vw;height:100%;
  transform:translateX(-50%);
  pointer-events:none;
  display:block;
}
.hero.hero-has-video .hero-bg-effect-canvas{z-index:2!important}
.hero.hero-has-video .hero-lightfx{z-index:3!important}
.hero.hero-has-video .hero-fire-canvas{z-index:4!important}
.hero.hero-has-video > .hero-copy,.hero.hero-has-video > .hero-logo-wrap{z-index:5!important}
.hero-effect-admin{padding:16px;border:1px solid var(--line);border-radius:16px;margin:14px 0;background:color-mix(in srgb,var(--panel2) 60%,transparent)}
.effect-tune-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.effect-tune-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hero-bg-effect-canvas{display:none!important}}


/* EFFECT SELECTOR FIX V21 */
.hero-fire-canvas[hidden],
.hero-bg-effect-canvas[hidden]{
  display:none!important;
}


/* ADMIN 4 LANG V22 */
.admin-lang-select{min-width:92px;max-width:110px}
@media(max-width:900px){.admin-lang-select{display:block!important;max-width:88px}.admin-navlinks{display:none}}

/* ADMIN LANG ENGINE FIX V24 */
.admin-lang-current{font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:4px 6px}


/* HERO IMAGE LIBRARY + AUTO RATIO V25 */
.hero-text-image{
  max-width:100%!important;
  height:auto!important;
}
[data-hero-image-folder][hidden],
[data-hero-image-url][hidden]{display:none!important}


/* HERO IMAGE MODE HIDE TEXT FIX V26 */
.seo-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* HERO IMAGE AUTO-HIDE TEXT V27 */
.hero-copy .seo-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  font-size:1px!important;
  line-height:1px!important;
  pointer-events:none!important;
}


/* HERO GLOBAL IMAGE OVERRIDE V28 */
.hero-global-content-link{display:inline-block;max-width:100%}
.hero-global-content-image{
  display:block;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.34));
}
.hero-copy > .seo-only,
.hero-copy h1.seo-only,
.hero-copy p.seo-only,
.hero-copy div.seo-only{
  position:absolute!important;
  left:-100000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  font-size:1px!important;
  line-height:1px!important;
}
[data-global-hero-image-folder][hidden],
[data-global-hero-image-url][hidden]{display:none!important}


/* HERO SAVE BUTTON FIX V29 */
.hero-save-bar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:20px 0 8px!important;
}
.hero-save-bar .hero-save-btn{
  display:inline-flex!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:160px!important;
  max-width:100%!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 22px!important;
  margin:0!important;
  align-self:auto!important;
  justify-self:auto!important;
  border-radius:12px!important;
  font-size:14px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
@media(max-width:560px){
  .hero-save-bar .hero-save-btn{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
  }
}


/* HEADER TEXT LOGO AUTO WIDTH FIX V30 */
.site-brand{
  min-width:0;
}
.site-logo-image{
  width:var(--site-logo-width,42px)!important;
  min-width:0!important;
  padding:0!important;
  flex:0 0 auto!important;
}

/* IMPORTANT:
   Text logo is no longer forced into a square.
   It grows according to the actual text length. */
.logo.site-logo-text,
.site-logo-text{
  width:auto!important;
  min-width:var(--site-logo-size,42px)!important;
  max-width:min(42vw,520px)!important;
  height:var(--site-logo-size,42px)!important;
  min-height:var(--site-logo-size,42px)!important;
  padding:0 clamp(10px,1vw,16px)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1!important;
  border-radius:calc(var(--site-logo-size,42px) * .32)!important;
  box-sizing:border-box!important;
}

/* Long logo text keeps the background/button extending with it. */
.site-logo-text{
  font-size:clamp(11px,calc(var(--site-logo-size,42px) * .34),18px)!important;
}

/* Brand name beside the logo must not squeeze the text-logo itself. */
.site-brand-name{
  flex:0 1 auto;
  min-width:0;
}

@media(max-width:760px){
  .logo.site-logo-text,
  .site-logo-text{
    max-width:58vw!important;
    padding-inline:10px!important;
  }
}

@media(max-width:460px){
  .logo.site-logo-text,
  .site-logo-text{
    max-width:68vw!important;
    font-size:11px!important;
  }
}


/* =========================================================
   MEGA MENU V31 — 5 COLUMNS × 3 ITEMS, 8 THEME AWARE
   ========================================================= */
.navlinks.desktop-nav{align-items:center;gap:4px}
.top-menu-link,.mega-menu-trigger{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;
  padding:7px 8px;border-radius:10px;color:var(--muted);
  font-size:13px;font-weight:680;white-space:nowrap;transition:.2s ease;
}
.top-menu-link:hover,.mega-menu-trigger:hover,.mega-menu-item:focus-within>.mega-menu-trigger{
  color:var(--text);background:color-mix(in srgb,var(--accent) 8%,transparent);
}
.menu-book-icon{
  width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;opacity:.78;
}
.mega-menu-item{position:relative;display:flex;align-items:center}
.mega-chevron{font-size:13px;line-height:1;opacity:.6;transition:transform .2s ease}
.mega-menu-item:hover .mega-chevron,.mega-menu-item:focus-within .mega-chevron,.mega-menu-item.is-open .mega-chevron{transform:rotate(180deg)}

.mega-menu-panel{
  position:absolute;top:calc(100% + 9px);left:50%;z-index:120;
  width:min(820px,calc(100vw - 28px));padding:12px;
  transform:translate(-50%,7px);opacity:0;visibility:hidden;pointer-events:none;
  background:color-mix(in srgb,var(--panel) 94%,var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(20px);transition:opacity .17s ease,transform .17s ease,visibility .17s;
}
.mega-menu-panel:before{
  content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);
  background:color-mix(in srgb,var(--panel) 94%,var(--bg));
  border-left:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  border-top:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
}
.mega-menu-item:hover>.mega-menu-panel,
.mega-menu-item:focus-within>.mega-menu-panel,
.mega-menu-item.is-open>.mega-menu-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}

/* EXACT requested structure: columns of 3 items.
   grid-auto-flow:column fills 3 rows, then starts the next column. */
.mega-menu-grid{
  display:grid;
  grid-template-rows:repeat(3,minmax(42px,auto));
  grid-auto-flow:column;
  grid-auto-columns:minmax(135px,1fr);
  gap:5px 8px;
}
.mega-menu-link{
  display:flex;align-items:center;gap:8px;min-width:0;padding:9px 10px;border-radius:10px;
  border:1px solid transparent;color:var(--muted);font-size:12.5px;font-weight:650;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.mega-menu-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-menu-link:hover,.mega-menu-link:focus-visible{
  color:var(--text);background:color-mix(in srgb,var(--accent) 9%,var(--panel));
  border-color:color-mix(in srgb,var(--accent) 20%,var(--line));transform:translateY(-1px);outline:none;
}
.mega-menu-link .menu-book-icon{color:var(--accent);opacity:.9}

/* keep mega panel on screen near left/right edges */
.mega-menu-item:first-child>.mega-menu-panel{left:0;transform:translate(0,7px)}
.mega-menu-item:first-child:hover>.mega-menu-panel,.mega-menu-item:first-child:focus-within>.mega-menu-panel,.mega-menu-item:first-child.is-open>.mega-menu-panel{transform:translate(0,0)}
.mega-menu-item:first-child>.mega-menu-panel:before{left:28px}
.mega-menu-item:nth-last-child(-n+2)>.mega-menu-panel{left:auto;right:0;transform:translate(0,7px)}
.mega-menu-item:nth-last-child(-n+2):hover>.mega-menu-panel,.mega-menu-item:nth-last-child(-n+2):focus-within>.mega-menu-panel,.mega-menu-item:nth-last-child(-n+2).is-open>.mega-menu-panel{transform:translate(0,0)}
.mega-menu-item:nth-last-child(-n+2)>.mega-menu-panel:before{left:auto;right:28px}

/* 8 styles follow current CSS variables automatically */
html[data-theme="imperial"] .mega-menu-panel{box-shadow:0 22px 65px color-mix(in srgb,var(--gold) 12%,rgba(0,0,0,.42))}
html[data-theme="blood"] .mega-menu-panel{box-shadow:0 22px 65px color-mix(in srgb,var(--accent) 15%,rgba(0,0,0,.44))}
html[data-theme="frost"] .mega-menu-panel{backdrop-filter:blur(22px) saturate(115%)}
html[data-theme="forest"] .mega-menu-panel{border-color:color-mix(in srgb,var(--accent) 24%,var(--line))}
html[data-theme="arcane"] .mega-menu-panel{box-shadow:0 22px 65px color-mix(in srgb,var(--accent2) 16%,rgba(0,0,0,.42))}
html[data-theme="solar"] .mega-menu-panel{border-color:color-mix(in srgb,var(--gold) 26%,var(--line))}
html[data-theme="steel"] .mega-menu-panel{border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
html[data-mode="light"] .mega-menu-panel{box-shadow:0 18px 48px rgba(25,35,55,.16)}

/* Mobile nested menu */
.mobile-menu-group{border-bottom:1px solid var(--line)}
.mobile-submenu-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 10px;border:0;background:transparent;color:var(--text);font:inherit;font-weight:750;text-align:left;cursor:pointer;
}
.mobile-menu-label{display:flex;align-items:center;gap:8px}
.mobile-submenu{padding:0 8px 10px 20px}
.mobile-submenu a{display:flex!important;align-items:center;gap:8px;padding:11px 10px!important;font-size:13px;border-bottom:0!important;border-radius:9px;color:var(--muted)}
.mobile-submenu a:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--text)}
.mobile-submenu-toggle[aria-expanded="true"] .mega-chevron{transform:rotate(180deg)}
.mobile-menu-links>a{display:flex;align-items:center;gap:8px}

/* Admin mega-menu management */
.menu-admin-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:18px;align-items:start}
.menu-admin-side{display:grid;gap:18px}
.menu-admin-item{border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;background:color-mix(in srgb,var(--panel2) 58%,transparent)}
.menu-admin-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-admin-title{display:flex;align-items:center;gap:9px;min-width:0}.menu-admin-title>div{min-width:0}
.menu-admin-title small,.submenu-admin-row small{display:block;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-admin-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.menu-count{font-size:11px;padding:4px 7px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:999px;color:var(--accent)}
.admin-book-icon{font-size:19px;line-height:1;color:var(--accent);opacity:.75}.admin-book-icon.small{font-size:15px}
.submenu-admin-list{margin-top:10px;padding:8px 0 0 24px;border-top:1px dashed var(--line)}
.submenu-admin-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0}
.submenu-admin-row>div{display:flex;align-items:center;gap:7px;min-width:0}.submenu-admin-row>div small{margin-left:4px}
.submenu-admin-row form,.row-actions{display:flex;gap:5px;margin:0}
.mini-btn{padding:6px 9px!important;font-size:11px!important;min-height:30px!important}
@media(max-width:1080px){.desktop-nav{gap:1px!important}.top-menu-link,.mega-menu-trigger{padding-inline:5px;font-size:12px}.menu-book-icon{width:12px;height:12px}}
@media(max-width:900px){.desktop-nav{display:none!important}.menu-admin-layout{grid-template-columns:1fr}.mega-menu-panel{display:none!important}}
@media(max-width:620px){.menu-admin-main,.submenu-admin-row{align-items:flex-start;flex-direction:column}.menu-admin-meta{justify-content:flex-start}.submenu-admin-list{padding-left:10px}}
@media(prefers-reduced-motion:reduce){.mega-menu-panel,.mega-chevron,.mega-menu-link{transition:none!important}}


/* MEGA MENU PARENT BRANCH FIX V32 */
.submenu-create-card{overflow:visible}
.submenu-parent-notice{margin-bottom:14px}
.submenu-parent-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.9fr);
  gap:12px;
  align-items:end;
}
.submenu-parent-field{margin:0}
.submenu-branch-preview{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 5%,var(--panel));
  min-width:0;
}
.submenu-branch-preview>div{min-width:0;display:grid}
.submenu-branch-preview small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.submenu-branch-preview b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.branch-arrow{color:var(--accent);opacity:.7;font-weight:900}
.submenu-lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.submenu-create-form .field{margin-top:10px}
.submenu-create-form select[name="parent_id"]{
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent);
}
.submenu-create-form select[name="parent_id"]:focus{
  outline:none;
  border-color:color-mix(in srgb,var(--accent) 70%,white 5%);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
.child-route-field[hidden],.child-manual-field[hidden]{display:none!important}
@media(max-width:720px){
  .submenu-parent-row{grid-template-columns:1fr}
  .submenu-lang-grid{grid-template-columns:1fr}
}


/* UNIFIED ADD MENU / SUBMENU V33 */
.unified-menu-add-card{
  position:sticky;
  top:86px;
}
.unified-menu-add-card>[data-menu-add-form]{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.unified-menu-add-card>[data-menu-add-form][hidden],
.menu-add-help[hidden]{
  display:none!important;
}
.menu-add-help{
  margin-top:9px;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  color:var(--muted);
  font-size:12px;
}
.unified-menu-add-card h3{
  margin:0 0 10px;
  font-size:15px;
}
@media(max-width:900px){
  .unified-menu-add-card{position:static}
}


/* =========================================================
   MEGA MENU HOVER + ICON FIX V34
   - No icon on main menu.
   - Submenu only gets a tiny clean marker.
   - Remove dead hover gap between parent and submenu.
   ========================================================= */

/* Top-level menu: text only */
.top-menu-link,
.mega-menu-trigger{
  gap:5px!important;
}
.top-menu-link .menu-book-icon,
.mega-menu-trigger .menu-book-icon,
.mobile-menu-label .menu-book-icon{
  display:none!important;
}

/* Submenu marker only */
.submenu-mini-icon{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:2px;
  border:1px solid color-mix(in srgb,var(--accent) 75%,white 5%);
  transform:rotate(45deg);
  opacity:.78;
  box-shadow:0 0 7px color-mix(in srgb,var(--accent) 28%,transparent);
}
.mega-menu-link:hover .submenu-mini-icon,
.mega-menu-link:focus-visible .submenu-mini-icon,
.mobile-submenu a:hover .submenu-mini-icon{
  opacity:1;
  background:color-mix(in srgb,var(--accent) 55%,transparent);
}

/* CRITICAL HOVER FIX:
   Original panel was top: calc(100% + 9px), creating a dead area.
   The pointer left the parent before it reached the submenu, so the menu closed.
   Now the hover hit-area starts exactly at the bottom of the parent. */
.mega-menu-panel{
  top:100%!important;
  margin-top:0!important;
}

/* Invisible bridge extends upward and makes the entire transition selectable. */
.mega-menu-panel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:14px;
  background:transparent;
  pointer-events:auto;
}

/* Keep visual breathing room inside the panel instead of outside it. */
.mega-menu-grid{
  margin-top:8px;
}

/* Keep panel open while pointer is over trigger OR panel */
.mega-menu-item{
  padding-bottom:0;
}
.mega-menu-item:hover > .mega-menu-panel,
.mega-menu-item:focus-within > .mega-menu-panel,
.mega-menu-item.is-open > .mega-menu-panel,
.mega-menu-panel:hover{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Submenu links have a larger click/hover target */
.mega-menu-link{
  min-height:44px!important;
  padding:10px 11px!important;
  cursor:pointer;
}
.mega-menu-link::after{
  content:"";
  position:absolute;
  inset:0;
}
.mega-menu-link{
  position:relative;
}
.mega-menu-link > *{
  position:relative;
  z-index:1;
}

/* Admin: main menu has no icon, submenu has tiny dot only */
.admin-submenu-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:2px;
  transform:rotate(45deg);
  border:1px solid color-mix(in srgb,var(--accent) 70%,var(--line));
  background:color-mix(in srgb,var(--accent) 18%,transparent);
}
.admin-submenu-dot.preview-dot{
  width:9px;
  height:9px;
}

/* Mobile submenu touch target */
.mobile-submenu a{
  min-height:42px;
}


/* MEGA MENU V35 — NO DROPDOWN CHEVRON */
.mega-chevron{display:none!important;width:0!important;margin:0!important;padding:0!important}
.mega-menu-trigger{gap:0!important}


/* MEGA MENU V36 — SLIGHT OFFSET + SUBMENU GAME ICONS */

/* Move panel down just a little for a cleaner edge,
   while keeping an invisible hover bridge so it remains selectable. */
.mega-menu-panel{
  top:calc(100% + 4px)!important;
  margin-top:0!important;
}
.mega-menu-panel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height:9px;
  background:transparent;
  pointer-events:auto;
}
.mega-menu-grid{margin-top:6px}

/* Main menu remains text-only. Icons exist ONLY inside submenu. */
.submenu-game-icon,
.admin-game-icon{
  width:17px;
  height:17px;
  flex:0 0 17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  opacity:.88;
  text-shadow:0 0 8px color-mix(in srgb,var(--accent) 30%,transparent);
}
.submenu-game-icon::before,
.admin-game-icon::before{content:"♦"}

[data-game-icon="none"]::before{content:""}
[data-game-icon="sword"]::before{content:"⚔︎"}
[data-game-icon="shield"]::before{content:"⛨"}
[data-game-icon="crown"]::before{content:"♛"}
[data-game-icon="jewel"]::before{content:"♦"}
[data-game-icon="chaos"]::before{content:"✦"}
[data-game-icon="star"]::before{content:"★"}
[data-game-icon="skull"]::before{content:"☠︎"}
[data-game-icon="fire"]::before{content:"✹"}
[data-game-icon="bolt"]::before{content:"ϟ"}
[data-game-icon="potion"]::before{content:"⚗︎"}
[data-game-icon="gem"]::before{content:"◈"}
[data-game-icon="heart"]::before{content:"♥"}
[data-game-icon="portal"]::before{content:"◎"}
[data-game-icon="boss"]::before{content:"♜"}
[data-game-icon="quest"]::before{content:"☷"}
[data-game-icon="map"]::before{content:"⌖"}
[data-game-icon="coin"]::before{content:"⊙"}
[data-game-icon="guild"]::before{content:"⚜"}

.mega-menu-link:hover .submenu-game-icon,
.mega-menu-link:focus-visible .submenu-game-icon,
.mobile-submenu a:hover .submenu-game-icon{
  opacity:1;
  transform:scale(1.08);
}
.submenu-icon-select{
  font-family:"Segoe UI Symbol","Arial Unicode MS",system-ui,sans-serif;
}


/* V37 — Dropdown lowered another 20px (total 24px below main menu) */
.mega-menu-panel{
  top:calc(100% + 24px)!important;
}
.mega-menu-panel::after{
  top:-28px!important;
  height:29px!important;
}


/* V38 — Dropdown lowered another 30px; total offset 54px */
.mega-menu-panel{
  top:calc(100% + 54px)!important;
}
.mega-menu-panel::after{
  top:-58px!important;
  height:59px!important;
}


/* =====================================================================
   V39 — 8 PREMIUM THEMES
   Same layout/form, but each theme has its own complete visual identity.
   Theme IDs are preserved for compatibility with the existing selector.
   ===================================================================== */

/* Shared theme-aware surfaces */
html{
  --theme-bg-glow-1:color-mix(in srgb,var(--accent) 13%,transparent);
  --theme-bg-glow-2:color-mix(in srgb,var(--accent2) 13%,transparent);
  --theme-panel-sheen:rgba(255,255,255,.025);
  --theme-topbar:color-mix(in srgb,var(--bg) 82%,transparent);
  --theme-card-border:var(--line);
  --theme-card-shadow:var(--shadow);
  --theme-btn-text:#071019;
  --theme-radius:22px;
}
body{
  background:
    radial-gradient(900px 520px at 8% -5%,var(--theme-bg-glow-1),transparent 68%),
    radial-gradient(850px 540px at 94% 2%,var(--theme-bg-glow-2),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 97%,var(--accent) 3%),var(--bg) 48%,color-mix(in srgb,var(--bg) 98%,#000 2%))!important;
}
.topbar{
  background:var(--theme-topbar)!important;
  border-bottom-color:var(--theme-card-border)!important;
}
.card{
  background:
    linear-gradient(145deg,var(--theme-panel-sheen),transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,var(--accent) 3%),var(--panel))!important;
  border-color:var(--theme-card-border)!important;
  box-shadow:var(--theme-card-shadow)!important;
  border-radius:var(--theme-radius)!important;
}
.btn.primary{
  color:var(--theme-btn-text)!important;
}
.select,.iconbtn,.btn,input,textarea{
  border-color:var(--theme-card-border);
}
.mega-menu-panel{
  background:
    linear-gradient(145deg,var(--theme-panel-sheen),transparent 42%),
    color-mix(in srgb,var(--panel) 96%,var(--bg))!important;
  border-color:var(--theme-card-border)!important;
}

/* ---------------------------------------------------------------------
   1. ABYSS — current signature / Electric Cyan
   Deep futuristic blue-black, luminous cyan + electric violet.
   --------------------------------------------------------------------- */
html[data-theme="abyss"]{
  --bg:#050914;
  --panel:#0a1220;
  --panel2:#101c30;
  --text:#f4fbff;
  --muted:#8fa7bd;
  --accent:#43dcff;
  --accent2:#655cff;
  --gold:#f4ca70;
  --danger:#ff5875;
  --line:rgba(95,219,255,.13);
  --shadow:0 26px 80px rgba(0,5,18,.56);
  --theme-bg-glow-1:rgba(38,204,255,.16);
  --theme-bg-glow-2:rgba(98,75,255,.17);
  --theme-panel-sheen:rgba(92,225,255,.035);
  --theme-topbar:rgba(5,9,20,.86);
  --theme-card-border:rgba(87,214,255,.14);
  --theme-card-shadow:0 24px 72px rgba(0,7,25,.52),0 0 0 1px rgba(68,221,255,.025);
  --theme-btn-text:#03111a;
  --theme-radius:22px;
}
html[data-theme="abyss"] .btn.primary{
  background:linear-gradient(135deg,#49e5ff 0%,#4ea7ff 48%,#725cff 100%)!important;
  box-shadow:0 13px 34px rgba(67,220,255,.20),0 0 24px rgba(101,92,255,.10)!important;
}

/* ---------------------------------------------------------------------
   2. BLOOD — DARK CHERRY / Đỏ rượu vang
   Deep wine red with plum-purple reflections. Luxurious, mature.
   --------------------------------------------------------------------- */
html[data-theme="blood"]{
  --bg:#10070c;
  --panel:#1b0d15;
  --panel2:#29111e;
  --text:#fff5f8;
  --muted:#c29aa9;
  --accent:#c62f59;
  --accent2:#70234f;
  --gold:#d9ad72;
  --danger:#ff5b75;
  --line:rgba(218,77,119,.17);
  --shadow:0 28px 82px rgba(25,0,10,.58);
  --theme-bg-glow-1:rgba(178,30,72,.22);
  --theme-bg-glow-2:rgba(101,30,91,.20);
  --theme-panel-sheen:rgba(255,116,157,.035);
  --theme-topbar:rgba(17,6,12,.89);
  --theme-card-border:rgba(207,65,105,.18);
  --theme-card-shadow:0 25px 75px rgba(35,0,14,.48),inset 0 1px rgba(255,180,202,.025);
  --theme-btn-text:#fff8fa;
  --theme-radius:18px;
}
html[data-theme="blood"] .btn.primary{
  background:linear-gradient(135deg,#a91f49 0%,#c63761 48%,#70234f 100%)!important;
  box-shadow:0 14px 34px rgba(174,29,74,.30),0 0 28px rgba(111,31,78,.14)!important;
}
html[data-theme="blood"] .card{background:
  linear-gradient(135deg,rgba(198,47,89,.055),transparent 34%),
  linear-gradient(180deg,#1d0e16,#160a11)!important}

/* ---------------------------------------------------------------------
   3. FROST — LIGHT BLUE / Xanh dương nhạt
   Clean icy blue, glass-like, minimal and airy.
   --------------------------------------------------------------------- */
html[data-theme="frost"]{
  --bg:#08131b;
  --panel:#0e202b;
  --panel2:#15303d;
  --text:#f3fbff;
  --muted:#9fc3d2;
  --accent:#8bdcff;
  --accent2:#4e9fd2;
  --gold:#d9f3ff;
  --danger:#ff7187;
  --line:rgba(151,222,249,.18);
  --shadow:0 24px 72px rgba(0,19,30,.42);
  --theme-bg-glow-1:rgba(123,216,255,.18);
  --theme-bg-glow-2:rgba(83,166,218,.14);
  --theme-panel-sheen:rgba(207,244,255,.055);
  --theme-topbar:rgba(8,22,31,.78);
  --theme-card-border:rgba(154,224,250,.20);
  --theme-card-shadow:0 22px 60px rgba(0,25,38,.35),inset 0 1px rgba(218,247,255,.045);
  --theme-btn-text:#08202c;
  --theme-radius:24px;
}
html[data-theme="frost"] .btn.primary{
  background:linear-gradient(135deg,#b8ecff,#7ed3f7 50%,#66afd9)!important;
  box-shadow:0 12px 30px rgba(128,215,250,.22)!important;
}
html[data-theme="frost"] .card,
html[data-theme="frost"] .mega-menu-panel{backdrop-filter:blur(22px) saturate(112%)}

/* ---------------------------------------------------------------------
   4. STEEL — DARK GRAY / Xám đậm
   Graphite, gunmetal and silver. Professional, restrained, technical.
   --------------------------------------------------------------------- */
html[data-theme="steel"]{
  --bg:#0c0d0f;
  --panel:#15171a;
  --panel2:#202329;
  --text:#f1f3f5;
  --muted:#9da3ab;
  --accent:#b8c0ca;
  --accent2:#6d7580;
  --gold:#b7a67e;
  --danger:#e45c6a;
  --line:rgba(205,211,219,.12);
  --shadow:0 28px 80px rgba(0,0,0,.52);
  --theme-bg-glow-1:rgba(184,192,202,.075);
  --theme-bg-glow-2:rgba(93,101,112,.08);
  --theme-panel-sheen:rgba(255,255,255,.025);
  --theme-topbar:rgba(12,13,15,.91);
  --theme-card-border:rgba(205,211,219,.12);
  --theme-card-shadow:0 22px 64px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.022);
  --theme-btn-text:#101214;
  --theme-radius:14px;
}
html[data-theme="steel"] .btn.primary{
  background:linear-gradient(135deg,#d1d5db,#aeb5be 48%,#737b86)!important;
  box-shadow:0 12px 28px rgba(174,181,190,.14)!important;
}
html[data-theme="steel"] .card{
  background:linear-gradient(180deg,#181a1e,#121416)!important;
}

/* ---------------------------------------------------------------------
   5. IMPERIAL — ROYAL GOLD / Hoàng kim đế vương
   Black-brown lacquer, antique gold, subtle royal violet.
   --------------------------------------------------------------------- */
html[data-theme="imperial"]{
  --bg:#0d0a06;
  --panel:#18130c;
  --panel2:#251d10;
  --text:#fff8e8;
  --muted:#b7a783;
  --accent:#e7b94f;
  --accent2:#8e6531;
  --gold:#ffd87a;
  --danger:#d95b58;
  --line:rgba(231,185,79,.17);
  --shadow:0 28px 84px rgba(18,10,0,.58);
  --theme-bg-glow-1:rgba(226,173,55,.17);
  --theme-bg-glow-2:rgba(116,74,30,.12);
  --theme-panel-sheen:rgba(255,218,126,.035);
  --theme-topbar:rgba(14,10,5,.90);
  --theme-card-border:rgba(231,185,79,.18);
  --theme-card-shadow:0 25px 76px rgba(18,9,0,.46),inset 0 1px rgba(255,221,139,.035);
  --theme-btn-text:#211606;
  --theme-radius:10px;
}
html[data-theme="imperial"] .btn.primary{
  background:linear-gradient(135deg,#ffe096,#e6b64d 52%,#a8762f)!important;
  box-shadow:0 14px 36px rgba(222,171,57,.24)!important;
}

/* ---------------------------------------------------------------------
   6. FOREST — EMERALD / Ngọc lục bảo
   Deep black-green, emerald glow, natural jade highlights.
   --------------------------------------------------------------------- */
html[data-theme="forest"]{
  --bg:#06100c;
  --panel:#0c1b14;
  --panel2:#12291e;
  --text:#effcf5;
  --muted:#8db6a0;
  --accent:#45d894;
  --accent2:#16725b;
  --gold:#c4bb68;
  --danger:#ff6674;
  --line:rgba(74,215,153,.15);
  --shadow:0 27px 80px rgba(0,22,13,.52);
  --theme-bg-glow-1:rgba(48,202,135,.17);
  --theme-bg-glow-2:rgba(18,106,82,.16);
  --theme-panel-sheen:rgba(101,238,177,.035);
  --theme-topbar:rgba(5,16,11,.88);
  --theme-card-border:rgba(75,213,153,.16);
  --theme-card-shadow:0 24px 70px rgba(0,24,14,.43),inset 0 1px rgba(120,245,190,.025);
  --theme-btn-text:#04170f;
  --theme-radius:20px;
}
html[data-theme="forest"] .btn.primary{
  background:linear-gradient(135deg,#62e8a8,#32c988 52%,#17755b)!important;
  box-shadow:0 13px 34px rgba(49,202,137,.21)!important;
}

/* ---------------------------------------------------------------------
   7. ARCANE — VIOLET NEBULA / Tím huyền thuật
   Deep indigo, ultraviolet and magenta magic.
   --------------------------------------------------------------------- */
html[data-theme="arcane"]{
  --bg:#0b0715;
  --panel:#151026;
  --panel2:#21173a;
  --text:#fbf7ff;
  --muted:#ae9bc7;
  --accent:#b86cff;
  --accent2:#6647e8;
  --gold:#f0c66d;
  --danger:#ff5f94;
  --line:rgba(184,108,255,.16);
  --shadow:0 28px 84px rgba(17,4,40,.58);
  --theme-bg-glow-1:rgba(177,93,255,.20);
  --theme-bg-glow-2:rgba(87,62,224,.21);
  --theme-panel-sheen:rgba(205,151,255,.04);
  --theme-topbar:rgba(11,7,21,.87);
  --theme-card-border:rgba(183,106,255,.17);
  --theme-card-shadow:0 25px 76px rgba(23,5,52,.48),0 0 28px rgba(105,70,229,.035);
  --theme-btn-text:#fff;
  --theme-radius:26px;
}
html[data-theme="arcane"] .btn.primary{
  background:linear-gradient(135deg,#d08cff,#a45bf2 44%,#5f47df 100%)!important;
  box-shadow:0 14px 36px rgba(170,86,245,.26),0 0 30px rgba(91,70,220,.12)!important;
}

/* ---------------------------------------------------------------------
   8. SOLAR — OBSIDIAN AMBER / Cam hổ phách
   Obsidian black with molten amber/orange. Aggressive but premium.
   --------------------------------------------------------------------- */
html[data-theme="solar"]{
  --bg:#100b06;
  --panel:#1b130b;
  --panel2:#2b1d0e;
  --text:#fff8ed;
  --muted:#bea88e;
  --accent:#ff9d42;
  --accent2:#c64e2f;
  --gold:#ffd078;
  --danger:#ff574d;
  --line:rgba(255,157,66,.16);
  --shadow:0 28px 84px rgba(28,11,0,.58);
  --theme-bg-glow-1:rgba(255,143,45,.19);
  --theme-bg-glow-2:rgba(191,62,34,.16);
  --theme-panel-sheen:rgba(255,177,91,.035);
  --theme-topbar:rgba(16,10,5,.89);
  --theme-card-border:rgba(255,157,66,.17);
  --theme-card-shadow:0 25px 74px rgba(32,12,0,.47),inset 0 1px rgba(255,191,119,.025);
  --theme-btn-text:#231005;
  --theme-radius:16px;
}
html[data-theme="solar"] .btn.primary{
  background:linear-gradient(135deg,#ffbd67,#f48a37 48%,#bd452c)!important;
  box-shadow:0 14px 35px rgba(239,123,45,.26)!important;
}

/* =====================================================================
   LIGHT MODE — each theme keeps its identity instead of becoming
   the same generic white skin.
   ===================================================================== */
html[data-mode="light"][data-theme="abyss"]{
  --bg:#eef8fc;--panel:#ffffff;--panel2:#e4f3fa;--text:#10212b;--muted:#617987;
  --line:rgba(33,149,190,.15);--theme-topbar:rgba(244,251,254,.88);
  --theme-card-border:rgba(55,174,214,.16);--theme-card-shadow:0 20px 55px rgba(44,121,150,.12);
}
html[data-mode="light"][data-theme="blood"]{
  --bg:#fbf1f4;--panel:#fffafb;--panel2:#f5e3e9;--text:#32141f;--muted:#87616e;
  --line:rgba(152,42,76,.14);--theme-topbar:rgba(255,248,250,.90);
  --theme-card-border:rgba(174,48,87,.15);--theme-card-shadow:0 20px 55px rgba(104,27,53,.12);
}
html[data-mode="light"][data-theme="frost"]{
  --bg:#edf8fc;--panel:#fbfeff;--panel2:#e0f2f9;--text:#12303e;--muted:#628594;
  --line:rgba(76,163,201,.16);--theme-topbar:rgba(247,253,255,.88);
  --theme-card-border:rgba(94,184,220,.18);--theme-card-shadow:0 18px 50px rgba(64,146,178,.11);
}
html[data-mode="light"][data-theme="steel"]{
  --bg:#f1f2f3;--panel:#fafafa;--panel2:#e7e9ec;--text:#1c1e21;--muted:#666b72;
  --line:rgba(42,46,52,.13);--theme-topbar:rgba(248,248,248,.91);
  --theme-card-border:rgba(66,72,80,.13);--theme-card-shadow:0 18px 48px rgba(32,35,40,.10);
}
html[data-mode="light"][data-theme="imperial"]{
  --bg:#fbf7ed;--panel:#fffdf7;--panel2:#f3ead5;--text:#302512;--muted:#7d6c4d;
  --line:rgba(156,115,34,.16);--theme-topbar:rgba(255,252,244,.90);
  --theme-card-border:rgba(185,137,42,.17);--theme-card-shadow:0 20px 54px rgba(110,79,23,.11);
}
html[data-mode="light"][data-theme="forest"]{
  --bg:#eef8f3;--panel:#fbfffd;--panel2:#e1f2e9;--text:#143126;--muted:#668273;
  --line:rgba(39,135,91,.15);--theme-topbar:rgba(248,254,251,.90);
  --theme-card-border:rgba(55,156,108,.16);--theme-card-shadow:0 19px 52px rgba(36,112,78,.11);
}
html[data-mode="light"][data-theme="arcane"]{
  --bg:#f5f0fb;--panel:#fefcff;--panel2:#ece3f8;--text:#281b3b;--muted:#79668f;
  --line:rgba(111,67,171,.14);--theme-topbar:rgba(252,249,255,.90);
  --theme-card-border:rgba(133,76,202,.15);--theme-card-shadow:0 20px 55px rgba(87,48,137,.11);
}
html[data-mode="light"][data-theme="solar"]{
  --bg:#fbf4ec;--panel:#fffdf9;--panel2:#f5e7d6;--text:#382416;--muted:#876f5c;
  --line:rgba(179,94,37,.15);--theme-topbar:rgba(255,251,246,.90);
  --theme-card-border:rgba(204,111,48,.16);--theme-card-shadow:0 20px 55px rgba(128,65,27,.11);
}

/* Light mode text/buttons refinement */
html[data-mode="light"] .card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.68),transparent 38%),
    var(--panel)!important;
}
html[data-mode="light"] .mega-menu-panel{
  background:color-mix(in srgb,var(--panel) 96%,var(--accent) 4%)!important;
}


/* =====================================================================
   V40 — FULL THEME SKIN OVERRIDE
   This layer intentionally touches the entire visual system, not only
   accent variables: page, hero, header, forms, cards, stats, footer,
   menu, buttons, inputs, notices and decorative borders.
   ===================================================================== */
html[data-theme]{
  --radius:var(--theme-radius,20px);
}
html[data-theme] body,
html[data-theme] main,
html[data-theme] .section,
html[data-theme] .site-footer{
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
html[data-theme] .hero{
  border-color:var(--theme-card-border)!important;
}
html[data-theme] .hero::after{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 77%,transparent) 0%,
      color-mix(in srgb,var(--bg) 35%,transparent) 48%,
      color-mix(in srgb,var(--bg) 16%,transparent) 70%,
      color-mix(in srgb,var(--bg) 48%,transparent) 100%),
    linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--bg) 50%,transparent) 100%)!important;
}
html[data-theme] .kicker{
  color:var(--accent)!important;
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line))!important;
  background:color-mix(in srgb,var(--accent) 7%,transparent)!important;
}
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3{
  color:var(--text)!important;
}
html[data-theme] .muted,
html[data-theme] .hero p{
  color:var(--muted)!important;
}
html[data-theme] .grid .card,
html[data-theme] .featuregrid .card,
html[data-theme] .dash .card{
  border-color:var(--theme-card-border)!important;
}
html[data-theme] .featuregrid .card:hover,
html[data-theme] .grid .card:hover{
  border-color:color-mix(in srgb,var(--accent) 35%,var(--theme-card-border))!important;
  box-shadow:var(--theme-card-shadow),0 0 26px color-mix(in srgb,var(--accent) 8%,transparent)!important;
}
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select,
html[data-theme] .select,
html[data-theme] .iconbtn,
html[data-theme] .btn{
  background-color:color-mix(in srgb,var(--panel2) 82%,var(--bg))!important;
  color:var(--text)!important;
  border-color:var(--theme-card-border)!important;
}
html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus{
  outline:none!important;
  border-color:color-mix(in srgb,var(--accent) 62%,white 5%)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)!important;
}
html[data-theme] .btn:hover,
html[data-theme] .iconbtn:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,var(--theme-card-border))!important;
}
html[data-theme] .btn.primary{
  border-color:transparent!important;
}
html[data-theme] .notice{
  background:color-mix(in srgb,var(--accent) 7%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--accent) 23%,var(--line))!important;
  color:var(--text)!important;
}
html[data-theme] .alert{
  background:color-mix(in srgb,var(--danger) 9%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--danger) 28%,var(--line))!important;
}
html[data-theme] .site-footer,
html[data-theme] footer{
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 72%,var(--bg)),var(--bg))!important;
  border-color:var(--theme-card-border)!important;
}
html[data-theme] .footer-box,
html[data-theme] .footer-content,
html[data-theme] .footer-bottom{
  border-color:var(--theme-card-border)!important;
}
html[data-theme] .mega-menu-link,
html[data-theme] .top-menu-link,
html[data-theme] .mega-menu-trigger{
  color:var(--muted)!important;
}
html[data-theme] .mega-menu-link:hover,
html[data-theme] .top-menu-link:hover,
html[data-theme] .mega-menu-trigger:hover{
  color:var(--text)!important;
}
html[data-theme] .submenu-game-icon{
  color:var(--accent)!important;
}

/* Theme personality: components differ, not just colors */
html[data-theme="blood"] .card,
html[data-theme="blood"] .mega-menu-panel{
  border-radius:18px!important;
  background:
    linear-gradient(135deg,rgba(198,47,89,.07),transparent 32%),
    linear-gradient(180deg,#211019,#160a11)!important;
}
html[data-theme="blood"] .hero{
  box-shadow:inset 0 0 110px rgba(95,13,48,.18)!important;
}

html[data-theme="frost"] .card,
html[data-theme="frost"] .mega-menu-panel{
  border-radius:26px!important;
  background:
    linear-gradient(145deg,rgba(211,247,255,.075),transparent 38%),
    color-mix(in srgb,var(--panel) 94%,#ccefff 6%)!important;
}
html[data-theme="frost"] .hero{
  box-shadow:inset 0 0 100px rgba(103,206,246,.12)!important;
}

html[data-theme="steel"] .card,
html[data-theme="steel"] .mega-menu-panel{
  border-radius:10px!important;
  background:linear-gradient(180deg,#1c1e22,#111315)!important;
}
html[data-theme="steel"] .btn,
html[data-theme="steel"] input,
html[data-theme="steel"] select{
  border-radius:8px!important;
}
html[data-theme="steel"] .hero{
  box-shadow:inset 0 0 90px rgba(184,192,202,.055)!important;
}

html[data-theme="imperial"] .card,
html[data-theme="imperial"] .mega-menu-panel{
  border-radius:8px!important;
  background:
    linear-gradient(135deg,rgba(231,185,79,.055),transparent 30%),
    linear-gradient(180deg,#1c160d,#120e08)!important;
}
html[data-theme="imperial"] .hero{
  box-shadow:inset 0 0 120px rgba(222,169,54,.10)!important;
}

html[data-theme="forest"] .card,
html[data-theme="forest"] .mega-menu-panel{
  border-radius:20px 8px 20px 8px!important;
  background:
    linear-gradient(145deg,rgba(69,216,148,.045),transparent 35%),
    linear-gradient(180deg,#0e2118,#09160f)!important;
}
html[data-theme="forest"] .hero{
  box-shadow:inset 0 0 120px rgba(39,164,111,.12)!important;
}

html[data-theme="arcane"] .card,
html[data-theme="arcane"] .mega-menu-panel{
  border-radius:28px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(184,108,255,.075),transparent 34%),
    linear-gradient(180deg,#19112c,#100a1d)!important;
}
html[data-theme="arcane"] .hero{
  box-shadow:inset 0 0 130px rgba(134,72,230,.15)!important;
}

html[data-theme="solar"] .card,
html[data-theme="solar"] .mega-menu-panel{
  border-radius:16px!important;
  background:
    linear-gradient(135deg,rgba(255,157,66,.065),transparent 34%),
    linear-gradient(180deg,#21160c,#130d07)!important;
}
html[data-theme="solar"] .hero{
  box-shadow:inset 0 0 120px rgba(229,98,31,.14)!important;
}

html[data-theme="abyss"] .card,
html[data-theme="abyss"] .mega-menu-panel{
  border-radius:22px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(67,220,255,.055),transparent 32%),
    linear-gradient(180deg,#0b1524,#08101c)!important;
}
html[data-theme="abyss"] .hero{

}

/* Light mode gets its own surfaces too */
html[data-mode="light"][data-theme] input,
html[data-mode="light"][data-theme] textarea,
html[data-mode="light"][data-theme] select,
html[data-mode="light"][data-theme] .select,
html[data-mode="light"][data-theme] .iconbtn,
html[data-mode="light"][data-theme] .btn{
  background-color:color-mix(in srgb,var(--panel2) 58%,white 42%)!important;
}
html[data-mode="light"][data-theme] .hero::after{
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 60%),
    linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--bg) 42%,transparent))!important;
}


/* =====================================================================
   V41 — LIGHT MODE READABILITY / FORM CONTRAST FIX
   Fixes washed-out text, weak input borders and unclear cards in Light.
   Dark mode is untouched.
   ===================================================================== */

html[data-mode="light"]{
  color-scheme:light;

  /* stronger readable neutrals */
  --light-text:#18212b;
  --light-muted:#5f6b78;
  --light-soft:#768391;
  --light-input-bg:#ffffff;
  --light-input-border:rgba(31,45,61,.18);
  --light-input-border-hover:rgba(31,45,61,.28);
  --light-card-border:rgba(31,45,61,.13);
}

/* Global text clarity */
html[data-mode="light"] body,
html[data-mode="light"] main{
  color:var(--text)!important;
}
html[data-mode="light"] p,
html[data-mode="light"] label,
html[data-mode="light"] .field,
html[data-mode="light"] .checkline,
html[data-mode="light"] .admin-row,
html[data-mode="light"] .menu-admin-item,
html[data-mode="light"] .submenu-admin-row{
  color:var(--text)!important;
}
html[data-mode="light"] .muted,
html[data-mode="light"] small,
html[data-mode="light"] .helper,
html[data-mode="light"] .hint,
html[data-mode="light"] .hero p{
  color:var(--muted)!important;
  opacity:1!important;
}

/* Headings should be crisp, never gray/translucent */
html[data-mode="light"] h1,
html[data-mode="light"] h2,
html[data-mode="light"] h3,
html[data-mode="light"] h4,
html[data-mode="light"] h5,
html[data-mode="light"] h6{
  color:var(--text)!important;
  text-shadow:none!important;
}

/* Form fields */
html[data-mode="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-mode="light"] textarea,
html[data-mode="light"] select,
html[data-mode="light"] .select{
  background:#fff!important;
  color:var(--text)!important;
  border:1px solid color-mix(in srgb,var(--accent) 14%,rgba(28,40,54,.22))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(21,31,43,.04)!important;
  opacity:1!important;
}

/* Placeholder visibility */
html[data-mode="light"] input::placeholder,
html[data-mode="light"] textarea::placeholder{
  color:color-mix(in srgb,var(--muted) 78%,white 22%)!important;
  opacity:1!important;
}

/* Select arrow/text visibility */
html[data-mode="light"] select,
html[data-mode="light"] option{
  color:var(--text)!important;
  background:#fff!important;
}
html[data-mode="light"] select:hover,
html[data-mode="light"] input:hover,
html[data-mode="light"] textarea:hover{
  border-color:color-mix(in srgb,var(--accent) 26%,rgba(28,40,54,.30))!important;
}
html[data-mode="light"] input:focus,
html[data-mode="light"] textarea:focus,
html[data-mode="light"] select:focus{
  background:#fff!important;
  border-color:color-mix(in srgb,var(--accent) 70%,#253649 30%)!important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent),
    0 2px 7px rgba(20,30,42,.06)!important;
}

/* Cards and panels: stronger separation */
html[data-mode="light"] .card,
html[data-mode="light"] .mega-menu-panel,
html[data-mode="light"] .mobile-menu,
html[data-mode="light"] .notice,
html[data-mode="light"] .menu-admin-item{
  border-color:color-mix(in srgb,var(--accent) 11%,rgba(25,38,52,.16))!important;
}
html[data-mode="light"] .card{
  box-shadow:
    0 12px 34px rgba(32,48,65,.08),
    0 1px 2px rgba(32,48,65,.04)!important;
}

/* Buttons */
html[data-mode="light"] .btn:not(.primary),
html[data-mode="light"] .iconbtn{
  background:color-mix(in srgb,#fff 92%,var(--accent) 8%)!important;
  color:var(--text)!important;
  border-color:color-mix(in srgb,var(--accent) 16%,rgba(29,42,57,.18))!important;
}
html[data-mode="light"] .btn:not(.primary):hover,
html[data-mode="light"] .iconbtn:hover{
  background:color-mix(in srgb,#fff 84%,var(--accent) 16%)!important;
  border-color:color-mix(in srgb,var(--accent) 35%,rgba(29,42,57,.20))!important;
}

/* Links / nav text */
html[data-mode="light"] .top-menu-link,
html[data-mode="light"] .mega-menu-trigger,
html[data-mode="light"] .mega-menu-link,
html[data-mode="light"] .mobile-menu-links a{
  color:color-mix(in srgb,var(--text) 78%,var(--accent) 22%)!important;
}
html[data-mode="light"] .top-menu-link:hover,
html[data-mode="light"] .mega-menu-trigger:hover,
html[data-mode="light"] .mega-menu-link:hover,
html[data-mode="light"] .mobile-menu-links a:hover{
  color:var(--text)!important;
}

/* Topbar clarity */
html[data-mode="light"] .topbar{
  background:color-mix(in srgb,var(--panel) 88%,transparent)!important;
  border-bottom-color:color-mix(in srgb,var(--accent) 10%,rgba(24,38,52,.14))!important;
  box-shadow:0 6px 20px rgba(25,40,55,.045);
}

/* Footer */
html[data-mode="light"] footer,
html[data-mode="light"] .site-footer{
  color:var(--text)!important;
  border-top-color:color-mix(in srgb,var(--accent) 10%,rgba(25,38,52,.14))!important;
}
html[data-mode="light"] footer a,
html[data-mode="light"] .site-footer a{
  color:color-mix(in srgb,var(--text) 78%,var(--accent) 22%)!important;
}

/* Status / counters */
html[data-mode="light"] .header-status-counts,
html[data-mode="light"] .header-status-time{
  color:var(--muted)!important;
}
html[data-mode="light"] .header-status-counts strong{
  color:var(--text)!important;
}

/* Checkboxes/radios */
html[data-mode="light"] input[type="checkbox"],
html[data-mode="light"] input[type="radio"]{
  accent-color:var(--accent);
}

/* Per-theme light refinements */
html[data-mode="light"][data-theme="blood"]{
  --text:#33151f;
  --muted:#7c5c68;
}
html[data-mode="light"][data-theme="frost"]{
  --text:#16303d;
  --muted:#5c7a88;
}
html[data-mode="light"][data-theme="steel"]{
  --text:#202428;
  --muted:#626a72;
}
html[data-mode="light"][data-theme="imperial"]{
  --text:#302612;
  --muted:#76684f;
}
html[data-mode="light"][data-theme="forest"]{
  --text:#173128;
  --muted:#607d6d;
}
html[data-mode="light"][data-theme="arcane"]{
  --text:#2a1d3c;
  --muted:#725f89;
}
html[data-mode="light"][data-theme="solar"]{
  --text:#382618;
  --muted:#806b59;
}
html[data-mode="light"][data-theme="abyss"]{
  --text:#122832;
  --muted:#5e7884;
}

/* Prevent accidental inherited transparency */
html[data-mode="light"] .field,
html[data-mode="light"] .card,
html[data-mode="light"] .btn,
html[data-mode="light"] input,
html[data-mode="light"] textarea,
html[data-mode="light"] select{
  opacity:1!important;
}


/* V42 — Move submenu group UP 35px.
   Previous offset: 54px. New final offset: 19px.
   Hover bridge adjusted to preserve mouse selection. */
.mega-menu-panel{
  top:calc(100% + 19px)!important;
}
.mega-menu-panel::after{
  top:-23px!important;
  height:24px!important;
}


/* =====================================================================
   V44 — HERO GRAYSCALE HOVER + HEADER LOGO/TEXT LOAD EFFECTS
   ===================================================================== */

/* Hero center logo: optional grayscale, original color on hover */
.hero-logo-stage.is-grayscale .hero-main-logo{
  filter:
    grayscale(1)
    saturate(0)
    contrast(1.08)
    brightness(.94)
    drop-shadow(0 18px 26px rgba(0,0,0,.48))
    drop-shadow(0 0 13px rgba(230,240,255,.18))!important;
}
.hero-logo-stage.is-grayscale:hover .hero-main-logo{
  filter:
    grayscale(0)
    saturate(1)
    contrast(1)
    brightness(1)
    drop-shadow(0 20px 30px rgba(0,0,0,.55))
    drop-shadow(0 0 28px rgba(255,184,62,.70))
    drop-shadow(0 0 45px rgba(70,210,255,.25))!important;
  transform:scale(var(--logo-hover))!important;
}

/* Header effect wrapper — works for image logo and text logo */
.site-logo-fx{
  --logo-fx-speed:2.4s;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  isolation:isolate;
  overflow:hidden;
  border-radius:14px;
}
.site-logo-fx > .site-logo-image,
.site-logo-fx > .site-logo-text{
  position:relative;
  z-index:1;
}

/* sweep base */
.site-logo-fx::before,
.site-logo-fx::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:3;
  opacity:0;
}

/* 1. Shimmer */
.logo-fx-shimmer::after{
  top:-40%;bottom:-40%;width:42%;
  left:-60%;
  opacity:.92;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
  filter:blur(1px);
  animation:headerLogoSweep var(--logo-fx-speed) ease-in-out infinite;
}

/* 2. Thin scanner */
.logo-fx-scan::after{
  left:0;right:0;height:2px;top:-5%;
  opacity:.9;
  background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);
  box-shadow:0 0 8px var(--accent),0 0 16px color-mix(in srgb,var(--accent) 55%,transparent);
  animation:headerLogoScan var(--logo-fx-speed) linear infinite;
}

/* 3. Cyan energy sweep */
.logo-fx-energy::after{
  top:-50%;bottom:-50%;width:34%;left:-48%;
  opacity:.9;transform:skewX(-15deg);
  background:linear-gradient(90deg,transparent,rgba(69,220,255,.28),rgba(145,242,255,.95),rgba(94,124,255,.38),transparent);
  box-shadow:0 0 18px rgba(75,220,255,.35);
  animation:headerLogoSweep var(--logo-fx-speed) cubic-bezier(.35,.05,.15,1) infinite;
}

/* 4. Gold sweep */
.logo-fx-gold::after{
  top:-45%;bottom:-45%;width:38%;left:-55%;
  opacity:.92;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,190,65,.25),rgba(255,239,178,.95),rgba(255,153,36,.35),transparent);
  box-shadow:0 0 18px rgba(255,185,55,.30);
  animation:headerLogoSweep var(--logo-fx-speed) ease-in-out infinite;
}

/* 5. Neon breathing */
.logo-fx-neon > .site-logo-image,
.logo-fx-neon > .site-logo-text{
  animation:headerLogoNeon var(--logo-fx-speed) ease-in-out infinite;
}

/* 6. Plasma */
.logo-fx-plasma::before{
  inset:-35%;
  opacity:.55;
  background:
    radial-gradient(circle at 25% 40%,rgba(77,225,255,.65),transparent 25%),
    radial-gradient(circle at 70% 58%,rgba(167,85,255,.62),transparent 28%);
  filter:blur(11px);
  animation:headerLogoPlasma var(--logo-fx-speed) ease-in-out infinite alternate;
}
.logo-fx-plasma > *{z-index:2!important}

/* 7. Subtle chromatic */
.logo-fx-glitch > .site-logo-image,
.logo-fx-glitch > .site-logo-text{
  animation:headerLogoChromatic var(--logo-fx-speed) steps(1,end) infinite;
}

/* 8. Ice sweep */
.logo-fx-ice::after{
  top:-45%;bottom:-45%;width:36%;left:-52%;
  opacity:.9;transform:skewX(-17deg);
  background:linear-gradient(90deg,transparent,rgba(192,241,255,.28),rgba(245,253,255,.96),rgba(116,208,255,.42),transparent);
  box-shadow:0 0 18px rgba(140,225,255,.34);
  animation:headerLogoSweep var(--logo-fx-speed) ease-in-out infinite;
}

/* Text logo gets subtle glow matching current theme */
.site-logo-fx:not(.logo-fx-none) .site-logo-text{
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 28%,transparent);
}

@keyframes headerLogoSweep{
  0%,14%{left:-62%;opacity:0}
  22%{opacity:.92}
  62%{left:125%;opacity:.86}
  70%,100%{left:125%;opacity:0}
}
@keyframes headerLogoScan{
  0%,8%{top:-8%;opacity:0}
  16%{opacity:.95}
  78%{top:108%;opacity:.8}
  86%,100%{top:108%;opacity:0}
}
@keyframes headerLogoNeon{
  0%,100%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 20%,transparent))}
  50%{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 65%,transparent)) drop-shadow(0 0 17px color-mix(in srgb,var(--accent2) 35%,transparent))}
}
@keyframes headerLogoPlasma{
  0%{transform:translate3d(-5%,-3%,0) scale(.92) rotate(-4deg);opacity:.35}
  100%{transform:translate3d(7%,4%,0) scale(1.08) rotate(5deg);opacity:.7}
}
@keyframes headerLogoChromatic{
  0%,89%,100%{filter:none;transform:translateX(0)}
  90%{filter:drop-shadow(2px 0 rgba(255,50,100,.55)) drop-shadow(-2px 0 rgba(50,220,255,.55));transform:translateX(1px)}
  93%{filter:drop-shadow(-1px 0 rgba(255,50,100,.45)) drop-shadow(1px 0 rgba(50,220,255,.45));transform:translateX(-1px)}
  96%{filter:none;transform:translateX(0)}
}

@media(prefers-reduced-motion:reduce){
  .site-logo-fx::before,.site-logo-fx::after,
  .site-logo-fx > .site-logo-image,.site-logo-fx > .site-logo-text{
    animation:none!important;
  }
}


/* =====================================================================
   V45 — MAIN MENU HOT HIGHLIGHT
   Only the selected top-level menu gets the chosen color.
   ===================================================================== */
.desktop-nav .menu-hot{
  --menu-hot-color:#ff375f;
  color:#fff!important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--menu-hot-color) 92%,#fff 8%),
      color-mix(in srgb,var(--menu-hot-color) 74%,#000 26%))!important;
  border:1px solid color-mix(in srgb,var(--menu-hot-color) 72%,#fff 28%)!important;
  box-shadow:
    0 7px 18px color-mix(in srgb,var(--menu-hot-color) 25%,transparent),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.20);
  border-radius:10px!important;
}
.desktop-nav .menu-hot:hover,
.desktop-nav .mega-menu-item:focus-within > .menu-hot{
  color:#fff!important;
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:
    0 9px 24px color-mix(in srgb,var(--menu-hot-color) 34%,transparent),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
}

/* Mobile HOT item */
.mobile-menu-links .menu-hot{
  --menu-hot-color:#ff375f;
  background:color-mix(in srgb,var(--menu-hot-color) 14%,var(--panel))!important;
  border:1px solid color-mix(in srgb,var(--menu-hot-color) 35%,var(--line))!important;
  color:color-mix(in srgb,var(--menu-hot-color) 65%,var(--text) 35%)!important;
  border-radius:10px!important;
  margin:4px 6px!important;
  width:calc(100% - 12px)!important;
}

/* Admin HOT controls */
.menu-hot-inline{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}
.menu-hot-check{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:30px;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
}
.menu-hot-check input{margin:0}
.menu-hot-color{
  width:34px!important;
  min-width:34px!important;
  height:30px!important;
  padding:2px!important;
  border-radius:7px!important;
  cursor:pointer;
}
.menu-hot-create{
  margin:12px 0;
  padding:11px;
  border:1px solid color-mix(in srgb,#ff375f 18%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,#ff375f 4%,transparent);
}
.menu-hot-create .field{margin-top:8px}
@media(max-width:720px){
  .menu-hot-inline{flex-wrap:wrap}
}


/* =====================================================================
   NEWS CMS V46 — Admin WYSIWYG + Public News
   ===================================================================== */
.news-admin-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:18px;align-items:start}
.news-list-card{position:sticky;top:84px;max-height:calc(100vh - 105px);overflow:auto}
.news-meta-grid,.news-seo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.news-featured-check{align-self:end;min-height:48px}
.news-lang-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.news-lang-tab,.news-editor-mode button,.news-toolbar button{
  border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:8px;cursor:pointer
}
.news-lang-tab{padding:8px 13px;font-weight:800}
.news-lang-tab.is-active,.news-editor-mode button.is-active{background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--text);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.news-lang-panel{display:none}.news-lang-panel.is-active{display:block}
.news-editor-shell{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:12px 0;background:var(--panel)}
.news-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-bottom:1px solid var(--line);background:var(--panel2)}
.news-editor-mode{display:flex;gap:5px}.news-editor-mode button{padding:5px 9px}
.news-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:7px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 76%,var(--panel))}
.news-toolbar button{min-width:32px;min-height:30px;padding:4px 7px;font-size:12px}
.news-toolbar button:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 36%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.news-rich-editor,.news-html-editor{width:100%;min-height:360px;padding:18px;border:0!important;border-radius:0!important;background:var(--panel)!important;color:var(--text)!important;outline:none;overflow:auto}
.news-rich-editor h2,.news-rich-editor h3{margin:1em 0 .45em}.news-rich-editor p{line-height:1.75}.news-rich-editor img{max-width:100%;height:auto}.news-rich-editor blockquote{border-left:3px solid var(--accent);padding-left:14px;color:var(--muted)}
.news-widget-code{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.55;background:#080b11!important;color:#d7f3ff!important;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))!important}
.news-embed-admin{margin-top:18px;padding:15px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 4%,var(--panel))}
.news-admin-list{display:grid;gap:9px}.news-admin-list-item{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.news-admin-list-main{display:grid;gap:3px}.news-admin-list-main small{color:var(--muted)}
.news-admin-list-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.news-admin-list-actions form{margin:0}

/* Public */
.news-public-page,.news-detail-page{padding-top:54px;padding-bottom:80px}
.news-grid-public{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.news-card-public{overflow:hidden;border:1px solid var(--theme-card-border,var(--line));border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}
.news-card-cover{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--panel2)}.news-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.news-card-public:hover .news-card-cover img{transform:scale(1.035)}
.news-card-body{padding:17px}.news-card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:11px}.news-card-meta b{color:#fff;background:#e73158;padding:3px 6px;border-radius:6px;font-size:9px}
.news-card-body h2{font-size:20px;line-height:1.25;margin:10px 0}.news-card-body h2 a{color:var(--text)}.news-card-body p{color:var(--muted);line-height:1.65}.news-read-more{color:var(--accent);font-weight:800;font-size:13px}
.news-article{max-width:930px;margin:0 auto}.news-article-head{text-align:center;margin-bottom:24px}.news-article-head .news-card-meta{justify-content:center}.news-article-head h1{font-size:clamp(34px,5vw,62px);line-height:1.08;margin:14px auto;max-width:900px}.news-lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:760px;margin:0 auto}.news-author{margin-top:12px;font-size:12px;color:var(--muted)}
.news-hero-cover{margin:24px 0;border-radius:22px;overflow:hidden;border:1px solid var(--line)}.news-hero-cover img{display:block;width:100%;height:auto}
.news-article-content{font-size:17px;line-height:1.85;color:var(--text)}.news-article-content h2{font-size:30px;margin:1.3em 0 .55em}.news-article-content h3{font-size:24px;margin:1.2em 0 .5em}.news-article-content img{max-width:100%;height:auto;border-radius:14px}.news-article-content blockquote{padding:12px 18px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel));border-radius:0 12px 12px 0}
.news-article-content pre{overflow:auto;padding:15px;background:#080b11;color:#d7f3ff;border-radius:12px}.news-article-content table{width:100%;border-collapse:collapse}.news-article-content th,.news-article-content td{padding:9px;border:1px solid var(--line)}
.news-widget-section{margin:26px 0;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:18px;overflow:hidden;background:var(--panel)}.news-widget-frame{display:block;width:100%;border:0;background:transparent}
.news-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:28px}.news-tags span{padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}

/* Homepage news */
.home-news-section{margin-top:30px}.home-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.home-news-card{display:flex;gap:12px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);min-width:0}.home-news-card:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));transform:translateY(-1px)}
.home-news-thumb{width:92px;aspect-ratio:1/1;flex:0 0 92px;border-radius:10px;overflow:hidden;background:var(--panel2)}.home-news-thumb img{width:100%;height:100%;object-fit:cover}.home-news-body{display:grid;align-content:center;gap:4px;min-width:0}.home-news-body small,.home-news-body>span{color:var(--muted);font-size:11px}.home-news-body b{font-size:14px;line-height:1.3}
@media(max-width:1000px){.news-admin-layout{grid-template-columns:1fr}.news-list-card{position:static;max-height:none}.news-grid-public,.home-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.news-meta-grid,.news-seo-grid,.news-grid-public,.home-news-grid{grid-template-columns:1fr}.news-editor-head{align-items:flex-start;flex-direction:column}.news-rich-editor,.news-html-editor{min-height:300px}.news-article-content{font-size:16px}.home-news-thumb{width:78px;flex-basis:78px}}

/* V47 — News patch sidebar + related links + global public chrome */
.news-with-sidebar,.news-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:22px;align-items:start}
.news-main-column{min-width:0}
.news-with-sidebar .news-grid-public{grid-template-columns:repeat(2,minmax(0,1fr))}
.news-patch-sidebar{position:sticky;top:92px}
.news-patch-module{border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:18px;padding:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 6%,var(--panel)),var(--panel));box-shadow:var(--shadow)}
.news-patch-head{display:flex;align-items:center;gap:10px}.news-patch-head h2{font-size:19px;margin:1px 0}.news-patch-head small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}.patch-orb{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 65%,transparent)}
.news-patch-desc{font-size:12px;line-height:1.55;color:var(--muted);margin:9px 0 12px}.news-patch-list{display:grid;gap:6px}.news-patch-item{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center;padding:8px;border-radius:10px;color:var(--text);border:1px solid transparent}.news-patch-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}.patch-index{font-size:10px;color:var(--accent);font-weight:900}.news-patch-item span:last-child{display:grid;min-width:0}.news-patch-item b{font-size:12px;line-height:1.3}.news-patch-item small{font-size:10px;color:var(--muted)}
.patch-badge{background:color-mix(in srgb,var(--accent) 72%,#ff4c58 28%)!important}
.news-other-posts{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}.news-other-head h2{margin:0 0 4px}.news-other-head p{margin:0 0 12px;color:var(--muted);font-size:13px}.news-other-list{display:grid}.news-other-list a{display:grid;grid-template-columns:82px 1fr auto;gap:10px;align-items:center;padding:11px 3px;border-bottom:1px solid var(--line);color:var(--text)}.news-other-list a:hover b{color:var(--accent)}.news-other-list span{font-size:10px;color:var(--muted)}.news-other-list b{font-size:13px}.news-other-list em{font-style:normal;font-size:9px;color:#fff;background:#d93655;border-radius:5px;padding:3px 5px}
.news-pretty-url-box{display:grid;gap:4px;margin-bottom:12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 4%,var(--panel));font-size:12px}.news-pretty-url-box code{color:var(--accent);word-break:break-all}.news-patch-admin-control{grid-column:1/-1;padding:9px 11px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 4%,transparent)}
/* keep page content clear of universal header/footer */
.page-shell,.dash,.news-public-page,.news-detail-page{min-height:calc(100vh - 220px)}
@media(max-width:980px){.news-with-sidebar,.news-detail-layout{grid-template-columns:1fr}.news-patch-sidebar{position:static}.news-with-sidebar .news-grid-public{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.news-with-sidebar .news-grid-public{grid-template-columns:1fr}.news-other-list a{grid-template-columns:65px 1fr}.news-other-list em{display:none}}


/* V48 — SEO BREADCRUMB */
.site-breadcrumb{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:8px 11px;
  width:max-content;
  max-width:100%;
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--panel) 84%,transparent);
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
}
.site-breadcrumb a{
  color:var(--muted);
  transition:color .16s ease;
}
.site-breadcrumb a:hover{color:var(--accent)}
.site-breadcrumb span[aria-hidden="true"]{opacity:.48}
.site-breadcrumb span[aria-current="page"]{
  color:var(--text);
  font-weight:750;
  max-width:min(52vw,520px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-mode="light"] .site-breadcrumb{
  background:color-mix(in srgb,#fff 92%,var(--accent) 8%);
  border-color:color-mix(in srgb,var(--accent) 13%,rgba(30,43,57,.14));
}
@media(max-width:650px){
  .site-breadcrumb{width:100%;font-size:10px;margin-bottom:14px}
  .site-breadcrumb span[aria-current="page"]{max-width:56vw}
}


/* V49 — Article to Menu/Submenu + news-style section pages */
.news-menu-target-field{grid-column:1/-1}
.news-menu-target-field select{font-weight:700}
.news-menu-target-field small{display:block;margin-top:5px;line-height:1.45}
.section-public-page .sectionhead{margin-bottom:18px}
.section-public-page .news-card-public{min-height:100%}

/* V52 Hero buttons:
   unlocked = follow all 8 themes normally;
   locked = admin colors/image stay identical while theme changes. */
.hero-cms-btn.hero-button-theme.secondary{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
.hero-cms-btn.hero-button-theme.secondary:hover{
  border-color:color-mix(in srgb,var(--accent) 48%,var(--line))!important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 12%,transparent)!important;
}
.hero-button-theme-lock{border-color:color-mix(in srgb,var(--accent) 24%,var(--line))}


/* =====================================================================
   V53 — HERO BUTTON HARD LOCK
   FINAL override: placed after all 8 theme rules.
   Locked buttons must never inherit theme background/color.
   ===================================================================== */
html[data-theme] .hero .actions .btn.hero-cms-btn.hero-button-locked,
html[data-theme][data-mode="light"] .hero .actions .btn.hero-cms-btn.hero-button-locked{
  color:inherit;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease!important;
}
html[data-theme] .hero .actions .btn.hero-cms-btn.hero-button-locked:hover,
html[data-theme][data-mode="light"] .hero .actions .btn.hero-cms-btn.hero-button-locked:hover{
  transform:translateY(-2px) scale(1.025)!important;
  filter:brightness(1.08)!important;
}

/* UNLOCKED = fully controlled by the selected theme */
html[data-theme] .hero .actions .btn.hero-cms-btn.hero-button-theme.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2))!important;
  color:var(--theme-btn-text,#071019)!important;
  border-color:transparent!important;
}
html[data-theme] .hero .actions .btn.hero-cms-btn.hero-button-theme.secondary{
  background:color-mix(in srgb,var(--panel) 92%,var(--accent) 8%)!important;
  color:var(--text)!important;
  border-color:var(--theme-card-border,var(--line))!important;
}

/* Make image mode immune to theme background shorthand */
html[data-theme] .hero .actions .hero-cms-btn.hero-button-locked.hero-image-btn{
  background-color:transparent!important;
  min-width:145px;
  min-height:52px;
}


/* =====================================================================
   V54 — HERO BUTTON 3D + 25 LIGHT / DUAL-COLOR EFFECTS
   Works with lock ON and OFF. Unlocked colors follow theme; locked colors
   use Admin color 1 + color 2 and remain stable across all 8 themes.
   ===================================================================== */
.hero .actions .hero-cms-btn{
  --hero-btn-bg:#52d8ff;
  --hero-btn-bg2:#725cff;
  --hero-btn-text:#07111d;
  --hero-btn-fx-speed:2.4s;
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  transform-style:preserve-3d;
  perspective:700px;
  z-index:0;
}
.hero .actions .hero-cms-btn>span{position:relative;z-index:5}
.hero .actions .hero-cms-btn::before,
.hero .actions .hero-cms-btn::after{
  content:"";position:absolute;pointer-events:none;z-index:2;opacity:0;
}

/* LOCKED color buttons: two-color base is always Admin controlled */
html[data-theme] .hero .actions .hero-cms-btn.hero-button-locked:not(.hero-image-btn){
  background:linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  background-color:var(--hero-btn-bg)!important;
  color:var(--hero-btn-text)!important;
  border-color:color-mix(in srgb,var(--hero-btn-bg) 58%,var(--hero-btn-bg2) 42%)!important;
}
/* UNLOCKED effect colors follow theme */
html[data-theme] .hero .actions .hero-cms-btn.hero-button-theme{
  --hero-btn-bg:var(--accent)!important;
  --hero-btn-bg2:var(--accent2)!important;
}

/* 01 none */
.hero-btnfx-none::before,.hero-btnfx-none::after{display:none}

/* 02 bevel3d */
.hero-btnfx-bevel3d{
  border-top-color:rgba(255,255,255,.42)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.24),inset 0 -5px 10px rgba(0,0,0,.24),0 8px 0 color-mix(in srgb,var(--hero-btn-bg2) 54%,#000 46%),0 13px 24px rgba(0,0,0,.28)!important;
}
.hero-btnfx-bevel3d:hover{transform:translateY(2px) scale(1.025)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -4px 8px rgba(0,0,0,.20),0 5px 0 color-mix(in srgb,var(--hero-btn-bg2) 54%,#000 46%),0 10px 20px rgba(0,0,0,.26)!important}

/* 03 glass3d */
.hero-btnfx-glass3d{box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(0,0,0,.18),0 12px 28px color-mix(in srgb,var(--hero-btn-bg) 18%,transparent)!important}
.hero-btnfx-glass3d::before{inset:2px 4px 52% 4px;border-radius:inherit;opacity:.6;background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.03))}

/* 04 metal3d */
.hero-btnfx-metal3d{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-btn-bg) 50%,#fff 50%) 0%,var(--hero-btn-bg) 35%,color-mix(in srgb,var(--hero-btn-bg2) 72%,#000 28%) 68%,color-mix(in srgb,var(--hero-btn-bg2) 45%,#000 55%) 100%)!important;box-shadow:inset 0 1px 0 #fff8,inset 0 -2px 4px #0008,0 8px 18px #0005!important}

/* 05 neon3d */
.hero-btnfx-neon3d{box-shadow:inset 0 0 11px color-mix(in srgb,var(--hero-btn-bg) 35%,transparent),0 0 9px color-mix(in srgb,var(--hero-btn-bg) 55%,transparent),0 0 24px color-mix(in srgb,var(--hero-btn-bg2) 35%,transparent)!important;animation:heroBtnNeon var(--hero-btn-fx-speed) ease-in-out infinite}

/* 06 dual flow */
.hero-btnfx-dual_flow{background-size:220% 220%!important;animation:heroBtnDualFlow var(--hero-btn-fx-speed) linear infinite!important}

/* 07 dual pulse */
.hero-btnfx-dual_pulse{animation:heroBtnDualPulse var(--hero-btn-fx-speed) ease-in-out infinite!important}

/* sweep base 08-17 */
.hero-btnfx-shimmer::after,.hero-btnfx-scan_lr::after,.hero-btnfx-scan_rl::after,.hero-btnfx-diagonal::after,
.hero-btnfx-laser::after,.hero-btnfx-gold::after,.hero-btnfx-ice::after,.hero-btnfx-plasma::after,.hero-btnfx-fire::after,.hero-btnfx-electric::after{
  top:-55%;bottom:-55%;width:34%;left:-55%;opacity:.88;transform:skewX(-20deg);
  animation:heroBtnSweep var(--hero-btn-fx-speed) ease-in-out infinite;
}
.hero-btnfx-shimmer::after{background:linear-gradient(90deg,transparent,#fff9,#fff,transparent);filter:blur(.5px)}
.hero-btnfx-scan_lr::after{width:12%;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 16px #fff8}
.hero-btnfx-scan_rl::after{width:12%;left:120%;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 16px #fff8;animation-name:heroBtnSweepReverse}
.hero-btnfx-diagonal::after{width:18%;background:linear-gradient(90deg,transparent,#fffbe0,#fff,transparent);transform:skewX(-32deg)}
.hero-btnfx-laser::after{width:4px;background:#fff;box-shadow:0 0 5px #fff,0 0 14px var(--hero-btn-bg),0 0 24px var(--hero-btn-bg2)}
.hero-btnfx-gold::after{background:linear-gradient(90deg,transparent,#ffd45a99,#fff2b5,#ffb72c88,transparent);box-shadow:0 0 18px #ffc85766}
.hero-btnfx-ice::after{background:linear-gradient(90deg,transparent,#9deaff80,#f6fdff,#69cfff88,transparent);box-shadow:0 0 18px #9deaff66}
.hero-btnfx-plasma::after{background:linear-gradient(90deg,transparent,#58eaff88,#c16aff,#745cff99,transparent);box-shadow:0 0 20px #8c67ff88}
.hero-btnfx-fire::after{background:linear-gradient(90deg,transparent,#ff6a2f66,#ffd36a,#fff4c3,#ff462f66,transparent);box-shadow:0 0 20px #ff6a2f77}
.hero-btnfx-electric::after{width:8%;background:linear-gradient(90deg,transparent,#b7f8ff,#fff,#73d9ff,transparent);filter:contrast(1.5);box-shadow:0 0 16px #7beaff}

/* 10 vertical scanner */
.hero-btnfx-scan_vertical::after{left:-10%;right:-10%;width:auto;height:3px;top:-15%;opacity:.9;background:linear-gradient(90deg,transparent,#fff,var(--hero-btn-bg),#fff,transparent);box-shadow:0 0 12px var(--hero-btn-bg);animation:heroBtnScanVertical var(--hero-btn-fx-speed) linear infinite}

/* 18 aura */
.hero-btnfx-aura{animation:heroBtnAura var(--hero-btn-fx-speed) ease-in-out infinite!important}

/* 19 border run */
.hero-btnfx-border_run::before{inset:-3px;opacity:1;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0 25%,var(--hero-btn-bg) 34%,#fff 40%,var(--hero-btn-bg2) 48%,transparent 58% 100%);animation:heroBtnSpin var(--hero-btn-fx-speed) linear infinite;z-index:-2}
.hero-btnfx-border_run::after{inset:2px;opacity:1;border-radius:calc(10px - 2px);background:inherit;z-index:-1}

/* 20 edge glow */
.hero-btnfx-edge_glow{animation:heroBtnEdgeGlow var(--hero-btn-fx-speed) ease-in-out infinite!important}

/* 21 ripple */
.hero-btnfx-ripple::after{left:50%;top:50%;width:8px;height:8px;border:2px solid #fff;border-radius:50%;opacity:0;transform:translate(-50%,-50%);animation:heroBtnRipple var(--hero-btn-fx-speed) ease-out infinite}

/* 22 pulse */
.hero-btnfx-pulse{animation:heroBtnPulse var(--hero-btn-fx-speed) ease-in-out infinite!important}

/* 23 hover lift */
.hero-btnfx-hover_lift{box-shadow:0 8px 18px rgba(0,0,0,.22)!important}.hero-btnfx-hover_lift:hover{transform:translateY(-6px) scale(1.04)!important;box-shadow:0 17px 34px color-mix(in srgb,var(--hero-btn-bg) 22%,rgba(0,0,0,.25))!important}

/* 24 chromatic */
.hero-btnfx-chromatic{animation:heroBtnChromatic var(--hero-btn-fx-speed) steps(1,end) infinite!important}

/* global subtle 3D face for every non-none effect */
.hero-cms-btn:not(.hero-btnfx-none){text-shadow:0 1px 1px rgba(0,0,0,.18);backface-visibility:hidden}

@keyframes heroBtnSweep{0%,12%{left:-55%;opacity:0}20%{opacity:.9}65%{left:125%;opacity:.9}74%,100%{left:125%;opacity:0}}
@keyframes heroBtnSweepReverse{0%,12%{left:125%;opacity:0}20%{opacity:.9}65%{left:-25%;opacity:.9}74%,100%{left:-25%;opacity:0}}
@keyframes heroBtnScanVertical{0%,10%{top:-15%;opacity:0}18%{opacity:.9}72%{top:115%;opacity:.9}82%,100%{top:115%;opacity:0}}
@keyframes heroBtnDualFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes heroBtnDualPulse{0%,100%{filter:saturate(1) brightness(1)}50%{filter:saturate(1.25) brightness(1.13);box-shadow:0 0 24px color-mix(in srgb,var(--hero-btn-bg2) 42%,transparent)}}
@keyframes heroBtnNeon{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18);box-shadow:0 0 10px var(--hero-btn-bg),0 0 27px color-mix(in srgb,var(--hero-btn-bg2) 55%,transparent)}}
@keyframes heroBtnAura{0%,100%{box-shadow:0 0 0 color-mix(in srgb,var(--hero-btn-bg) 0%,transparent)}50%{box-shadow:0 0 14px color-mix(in srgb,var(--hero-btn-bg) 45%,transparent),0 0 32px color-mix(in srgb,var(--hero-btn-bg2) 30%,transparent)}}
@keyframes heroBtnSpin{to{transform:rotate(360deg)}}
@keyframes heroBtnEdgeGlow{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-btn-bg) 35%,transparent)}50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--hero-btn-bg2) 72%,#fff 28%),0 0 20px color-mix(in srgb,var(--hero-btn-bg) 28%,transparent)}}
@keyframes heroBtnRipple{0%{width:8px;height:8px;opacity:.65}75%,100%{width:170%;height:250%;opacity:0}}
@keyframes heroBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes heroBtnChromatic{0%,88%,100%{filter:none;transform:translateX(0)}90%{filter:drop-shadow(2px 0 #ff2f6d) drop-shadow(-2px 0 #4deaff);transform:translateX(1px)}94%{filter:drop-shadow(-2px 0 #ff2f6d) drop-shadow(2px 0 #4deaff);transform:translateX(-1px)}97%{filter:none;transform:translateX(0)}}

.color-triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:10px 0}.color-triple label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px;border:1px solid var(--line);border-radius:9px}.hero-button-fx-card .field{margin-top:10px}
@media(max-width:650px){.color-triple{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hero-cms-btn,.hero-cms-btn::before,.hero-cms-btn::after{animation:none!important}}


/* =====================================================================
   V55 — 3D BUTTON LIBRARY + ONE SEPARATE LIGHT/SCAN EFFECT
   Choose 1 3D style + choose 1 light effect for EACH Hero button.
   ===================================================================== */

/* 3D library base */
.hero .actions .hero-cms-btn[class*="hero-btn3d-"]{
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

/* 01 Flat */
.hero-btn3d-flat{
  box-shadow:none!important;
  border-radius:10px!important;
}

/* 02 Soft 3D */
.hero-btn3d-soft{
  border-radius:12px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 5px rgba(0,0,0,.16),
    0 8px 18px rgba(0,0,0,.20)!important;
}

/* 03 Bevel */
.hero-btn3d-bevel{
  border-radius:9px!important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.28),
    inset 0 -5px 8px rgba(0,0,0,.27),
    0 6px 0 color-mix(in srgb,var(--hero-btn-bg2) 55%,#000 45%),
    0 11px 20px rgba(0,0,0,.30)!important;
}
.hero-btn3d-bevel:hover{transform:translateY(2px) scale(1.025)!important}

/* 04 Glass */
.hero-btn3d-glass{
  border-radius:16px!important;
  backdrop-filter:blur(8px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(0,0,0,.13),
    0 10px 28px rgba(0,0,0,.22)!important;
}
.hero-btn3d-glass>span{text-shadow:0 1px 1px rgba(0,0,0,.15)}

/* 05 Metal */
.hero-btn3d-metal{
  border-radius:8px!important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--hero-btn-bg) 56%,#fff 44%) 0%,
      var(--hero-btn-bg) 28%,
      color-mix(in srgb,var(--hero-btn-bg2) 74%,#000 26%) 64%,
      color-mix(in srgb,var(--hero-btn-bg2) 48%,#000 52%) 100%)!important;
  box-shadow:inset 0 1px 0 #fff8,inset 0 -2px 4px #0008,0 8px 18px #0005!important;
}

/* 06 Chrome */
.hero-btn3d-chrome{
  border-radius:10px!important;
  background:
    linear-gradient(180deg,#fff 0%,#cfd5dc 13%,#606a75 45%,#eef2f5 52%,#525b66 72%,#bcc5cf 100%)!important;
  color:#111!important;
  border-color:#dfe5ea!important;
  box-shadow:inset 0 1px 0 #fff,0 7px 18px #0006!important;
  text-shadow:0 1px 0 #fff7!important;
}

/* 07 Neon */
.hero-btn3d-neon{
  border-radius:14px!important;
  background:color-mix(in srgb,var(--hero-btn-bg) 18%,#05070b 82%)!important;
  color:#fff!important;
  border:1px solid var(--hero-btn-bg)!important;
  box-shadow:
    inset 0 0 16px color-mix(in srgb,var(--hero-btn-bg) 28%,transparent),
    0 0 10px color-mix(in srgb,var(--hero-btn-bg) 55%,transparent),
    0 0 25px color-mix(in srgb,var(--hero-btn-bg2) 36%,transparent)!important;
}

/* 08 Crystal */
.hero-btn3d-crystal{
  border-radius:18px 8px 18px 8px!important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--hero-btn-bg) 45%,#fff 55%),
      color-mix(in srgb,var(--hero-btn-bg) 66%,transparent) 32%,
      color-mix(in srgb,var(--hero-btn-bg2) 75%,#fff 25%) 68%,
      var(--hero-btn-bg2))!important;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.34),
    inset -3px -3px 9px rgba(0,0,0,.18),
    0 10px 24px rgba(0,0,0,.22)!important;
}

/* 09 Armor */
.hero-btn3d-armor{
  border-radius:5px!important;
  clip-path:polygon(8% 0,92% 0,100% 28%,96% 100%,4% 100%,0 28%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.23),inset 0 -4px 7px rgba(0,0,0,.28),0 9px 20px rgba(0,0,0,.30)!important;
}

/* 10 Obsidian */
.hero-btn3d-obsidian{
  border-radius:12px!important;
  background:
    radial-gradient(circle at 28% 15%,rgba(255,255,255,.12),transparent 22%),
    linear-gradient(145deg,#17191d,#030405 62%,color-mix(in srgb,var(--hero-btn-bg2) 24%,#030405 76%))!important;
  color:#f8f8f8!important;
  border-color:color-mix(in srgb,var(--hero-btn-bg) 32%,#292d33)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 11px 26px rgba(0,0,0,.43)!important;
}

/* 11 Gold Plate */
.hero-btn3d-goldplate{
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff1a8 0%,#e7b943 28%,#9e641c 65%,#f1c964 100%)!important;
  color:#251607!important;
  border-color:#ffe28b!important;
  box-shadow:inset 0 2px 0 #fff6,inset 0 -3px 6px #6f3b1188,0 8px 20px #0005!important;
  text-shadow:0 1px 0 #fff7!important;
}

/* 12 Arcane */
.hero-btn3d-arcane{
  border-radius:20px!important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.20),transparent 20%),
    linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  box-shadow:
    inset 0 0 18px color-mix(in srgb,var(--hero-btn-bg) 28%,transparent),
    0 0 15px color-mix(in srgb,var(--hero-btn-bg) 28%,transparent),
    0 12px 28px rgba(0,0,0,.24)!important;
}

/* Keep custom locked colors for styles that do not intentionally replace the material palette */
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-flat,
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-soft,
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-bevel,
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-glass,
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-armor,
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-arcane{
  background:linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  color:var(--hero-btn-text)!important;
}

/* Admin library layout */
.hero-btn-library-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
@media(max-width:650px){
  .hero-btn-library-grid{grid-template-columns:1fr}
}


/* =====================================================================
   V56 — AUTHORITATIVE HERO BUTTON FIX
   3D MATERIAL and LIGHT FX are two independent layers.
   This block is intentionally LAST to defeat older theme/button rules.
   ===================================================================== */

/* base */
html[data-theme] .hero .actions a.hero-cms-btn{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:50px;
  transform-style:preserve-3d!important;
  backface-visibility:hidden;
}
html[data-theme] .hero .actions a.hero-cms-btn > span{
  position:relative!important;
  z-index:20!important;
}
html[data-theme] .hero .actions a.hero-cms-btn::before,
html[data-theme] .hero .actions a.hero-cms-btn::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
}

/* -------- 3D MATERIAL LIBRARY: visually strong -------- */
html[data-theme] .hero .actions .hero-btn3d-flat{
  border-radius:9px!important;
  box-shadow:none!important;
}
html[data-theme] .hero .actions .hero-btn3d-soft{
  border-radius:13px!important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.28),inset 0 -4px 7px rgba(0,0,0,.22),0 7px 14px rgba(0,0,0,.30)!important;
}
html[data-theme] .hero .actions .hero-btn3d-bevel{
  border-radius:8px!important;
  border-top:1px solid rgba(255,255,255,.62)!important;
  box-shadow:
    inset 0 4px 1px rgba(255,255,255,.30),
    inset 0 -7px 9px rgba(0,0,0,.33),
    0 7px 0 color-mix(in srgb,var(--hero-btn-bg2) 48%,#000 52%),
    0 13px 20px rgba(0,0,0,.38)!important;
}
html[data-theme] .hero .actions .hero-btn3d-bevel:hover{
  transform:translateY(3px) scale(1.025)!important;
  box-shadow:inset 0 3px 1px rgba(255,255,255,.28),inset 0 -5px 8px rgba(0,0,0,.30),0 4px 0 color-mix(in srgb,var(--hero-btn-bg2) 48%,#000 52%),0 9px 16px rgba(0,0,0,.34)!important;
}
html[data-theme] .hero .actions .hero-btn3d-glass{
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.48),inset 0 -3px 8px rgba(0,0,0,.17),0 10px 25px rgba(0,0,0,.28)!important;
}
html[data-theme] .hero .actions .hero-btn3d-glass::before{
  display:block!important;z-index:3!important;opacity:.58!important;
  left:5%!important;right:5%!important;top:3px!important;height:42%!important;
  border-radius:999px 999px 40% 40%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.05))!important;
}
html[data-theme] .hero .actions .hero-btn3d-metal{
  border-radius:7px!important;
  background:linear-gradient(180deg,#f7fbff 0%,color-mix(in srgb,var(--hero-btn-bg) 55%,#c9d1da 45%) 15%,var(--hero-btn-bg) 40%,color-mix(in srgb,var(--hero-btn-bg2) 64%,#20242a 36%) 67%,#15181c 100%)!important;
  box-shadow:inset 0 2px 0 #fff9,inset 0 -4px 7px #0009,0 8px 0 #111820,0 13px 22px #0007!important;
}
html[data-theme] .hero .actions .hero-btn3d-chrome{
  border-radius:9px!important;
  background:linear-gradient(180deg,#fff 0%,#bfc8d1 18%,#4d5660 43%,#f7fafc 51%,#656f79 66%,#16191d 100%)!important;
  color:#111!important;border:1px solid #eef3f7!important;
  box-shadow:inset 0 2px 0 #fff,0 7px 0 #222830,0 13px 22px #0007!important;
  text-shadow:0 1px 0 #fff!important;
}
html[data-theme] .hero .actions .hero-btn3d-neon{
  border-radius:15px!important;
  background:#07090e!important;color:#fff!important;
  border:2px solid var(--hero-btn-bg)!important;
  box-shadow:inset 0 0 17px color-mix(in srgb,var(--hero-btn-bg) 42%,transparent),0 0 10px var(--hero-btn-bg),0 0 28px color-mix(in srgb,var(--hero-btn-bg2) 58%,transparent),0 7px 18px #0007!important;
}
html[data-theme] .hero .actions .hero-btn3d-crystal{
  border-radius:18px 7px 18px 7px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--hero-btn-bg) 35%,#fff 65%) 0%,var(--hero-btn-bg) 30%,color-mix(in srgb,var(--hero-btn-bg2) 48%,#fff 52%) 62%,var(--hero-btn-bg2) 100%)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:inset 3px 3px 2px rgba(255,255,255,.36),inset -4px -5px 9px rgba(0,0,0,.23),0 8px 0 color-mix(in srgb,var(--hero-btn-bg2) 44%,#000 56%),0 14px 23px #0006!important;
}
html[data-theme] .hero .actions .hero-btn3d-armor{
  border-radius:4px!important;
  clip-path:polygon(8% 0,92% 0,100% 28%,96% 100%,4% 100%,0 28%)!important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.26),inset 0 -6px 9px rgba(0,0,0,.32),0 8px 0 color-mix(in srgb,var(--hero-btn-bg2) 42%,#000 58%),0 14px 22px #0007!important;
}
html[data-theme] .hero .actions .hero-btn3d-obsidian{
  border-radius:12px!important;
  background:radial-gradient(circle at 28% 14%,rgba(255,255,255,.17),transparent 20%),linear-gradient(145deg,#272b31,#050607 58%,color-mix(in srgb,var(--hero-btn-bg2) 24%,#050607 76%))!important;
  color:#fff!important;border:1px solid #4c525a!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -4px 8px #000b,0 8px 0 #030405,0 15px 24px #0009!important;
}
html[data-theme] .hero .actions .hero-btn3d-goldplate{
  border-radius:7px!important;
  background:linear-gradient(180deg,#fff6bd 0%,#efca61 19%,#bd812b 48%,#75400f 72%,#e6b94f 100%)!important;
  color:#281606!important;border:1px solid #ffeb9e!important;
  box-shadow:inset 0 3px 0 #fff8,inset 0 -5px 8px #60310db0,0 8px 0 #67390e,0 14px 24px #0007!important;
  text-shadow:0 1px 0 #fff9!important;
}
html[data-theme] .hero .actions .hero-btn3d-arcane{
  border-radius:22px!important;
  background:radial-gradient(circle at 26% 18%,rgba(255,255,255,.28),transparent 20%),linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  border:1px solid color-mix(in srgb,var(--hero-btn-bg) 65%,#fff 35%)!important;
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--hero-btn-bg) 35%,transparent),inset 0 -5px 8px rgba(0,0,0,.22),0 8px 0 color-mix(in srgb,var(--hero-btn-bg2) 45%,#000 55%),0 15px 30px color-mix(in srgb,var(--hero-btn-bg) 22%,#000 78%)!important;
}

/* Locked normal-color materials keep Admin Color1/Color2 unless material intentionally metallic */
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-flat:not(.hero-image-btn),
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-soft:not(.hero-image-btn),
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-bevel:not(.hero-image-btn),
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-glass:not(.hero-image-btn),
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-armor:not(.hero-image-btn),
html[data-theme] .hero .actions .hero-button-locked.hero-btn3d-arcane:not(.hero-image-btn){
  background:linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  color:var(--hero-btn-text)!important;
}

/* -------- LIGHT FX: exactly one independently selected per button -------- */
/* Reset light pseudo layer so old 3D pseudo styling cannot hide the selected light sweep */
html[data-theme] .hero .actions .hero-cms-btn[class*="hero-btnfx-"]::after{
  display:block!important;
  z-index:10!important;
}

/* None */
html[data-theme] .hero .actions .hero-btnfx-none::after{display:none!important}

/* Horizontal/diagonal sweeps */
html[data-theme] .hero .actions .hero-btnfx-shimmer::after,
html[data-theme] .hero .actions .hero-btnfx-scan_lr::after,
html[data-theme] .hero .actions .hero-btnfx-scan_rl::after,
html[data-theme] .hero .actions .hero-btnfx-diagonal::after,
html[data-theme] .hero .actions .hero-btnfx-laser::after,
html[data-theme] .hero .actions .hero-btnfx-gold::after,
html[data-theme] .hero .actions .hero-btnfx-ice::after,
html[data-theme] .hero .actions .hero-btnfx-plasma::after,
html[data-theme] .hero .actions .hero-btnfx-fire::after,
html[data-theme] .hero .actions .hero-btnfx-electric::after{
  top:-65%!important;bottom:-65%!important;right:auto!important;height:auto!important;
  left:-60%!important;width:30%!important;opacity:0!important;
  transform:skewX(-20deg)!important;
  animation:heroBtnSweepV56 var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
html[data-theme] .hero .actions .hero-btnfx-shimmer::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),#fff,rgba(255,255,255,.15),transparent)!important;filter:blur(.5px)}
html[data-theme] .hero .actions .hero-btnfx-scan_lr::after{width:9%!important;background:linear-gradient(90deg,transparent,#fff,transparent)!important;box-shadow:0 0 14px #fff!important}
html[data-theme] .hero .actions .hero-btnfx-scan_rl::after{width:9%!important;left:125%!important;background:linear-gradient(90deg,transparent,#fff,transparent)!important;box-shadow:0 0 14px #fff!important;animation-name:heroBtnSweepReverseV56!important}
html[data-theme] .hero .actions .hero-btnfx-diagonal::after{width:17%!important;transform:skewX(-34deg)!important;background:linear-gradient(90deg,transparent,#fff6,#fff,transparent)!important}
html[data-theme] .hero .actions .hero-btnfx-laser::after{width:3px!important;background:#fff!important;box-shadow:0 0 7px #fff,0 0 15px var(--hero-btn-bg),0 0 25px var(--hero-btn-bg2)!important}
html[data-theme] .hero .actions .hero-btnfx-gold::after{background:linear-gradient(90deg,transparent,#ffbd2f88,#fff4b7,#ff9d2188,transparent)!important;box-shadow:0 0 18px #ffc44788!important}
html[data-theme] .hero .actions .hero-btnfx-ice::after{background:linear-gradient(90deg,transparent,#80dcff88,#fff,#54c5ff88,transparent)!important;box-shadow:0 0 18px #80dcffaa!important}
html[data-theme] .hero .actions .hero-btnfx-plasma::after{background:linear-gradient(90deg,transparent,#47e7ff88,#ce65ff,#6959ff99,transparent)!important;box-shadow:0 0 20px #9a68ffaa!important}
html[data-theme] .hero .actions .hero-btnfx-fire::after{background:linear-gradient(90deg,transparent,#ff4d1f77,#ffca4d,#fff1a0,#ff4b2477,transparent)!important;box-shadow:0 0 20px #ff672faa!important}
html[data-theme] .hero .actions .hero-btnfx-electric::after{width:7%!important;background:linear-gradient(90deg,transparent,#8defff,#fff,#50d5ff,transparent)!important;box-shadow:0 0 19px #56ddff!important}

/* Vertical */
html[data-theme] .hero .actions .hero-btnfx-scan_vertical::after{
  display:block!important;z-index:10!important;left:-10%!important;right:-10%!important;
  width:auto!important;height:3px!important;top:-20%!important;bottom:auto!important;opacity:0!important;
  background:linear-gradient(90deg,transparent,#fff,var(--hero-btn-bg),#fff,transparent)!important;
  box-shadow:0 0 13px var(--hero-btn-bg)!important;
  animation:heroBtnScanVerticalV56 var(--hero-btn-fx-speed) linear infinite!important;
}

/* non-sweep lights */
html[data-theme] .hero .actions .hero-btnfx-aura{animation:heroBtnAuraV56 var(--hero-btn-fx-speed) ease-in-out infinite!important}
html[data-theme] .hero .actions .hero-btnfx-edge_glow{animation:heroBtnEdgeV56 var(--hero-btn-fx-speed) ease-in-out infinite!important}
html[data-theme] .hero .actions .hero-btnfx-pulse{animation:heroBtnPulseV56 var(--hero-btn-fx-speed) ease-in-out infinite!important}
html[data-theme] .hero .actions .hero-btnfx-dual_flow{background-size:220% 220%!important;animation:heroBtnDualFlowV56 var(--hero-btn-fx-speed) linear infinite!important}
html[data-theme] .hero .actions .hero-btnfx-dual_pulse{animation:heroBtnDualPulseV56 var(--hero-btn-fx-speed) ease-in-out infinite!important}
html[data-theme] .hero .actions .hero-btnfx-chromatic{animation:heroBtnChromaticV56 var(--hero-btn-fx-speed) steps(1,end) infinite!important}
html[data-theme] .hero .actions .hero-btnfx-ripple::after{
  display:block!important;z-index:10!important;left:50%!important;top:50%!important;
  width:8px!important;height:8px!important;bottom:auto!important;border:2px solid #fff!important;
  border-radius:50%!important;background:transparent!important;opacity:0!important;
  transform:translate(-50%,-50%)!important;animation:heroBtnRippleV56 var(--hero-btn-fx-speed) ease-out infinite!important;
}

/* running border uses BEFORE, leaving AFTER free */
html[data-theme] .hero .actions .hero-btnfx-border_run::before{
  display:block!important;z-index:-2!important;inset:-4px!important;opacity:1!important;
  border-radius:inherit!important;
  background:conic-gradient(from 0deg,transparent 0 24%,var(--hero-btn-bg) 33%,#fff 40%,var(--hero-btn-bg2) 48%,transparent 58% 100%)!important;
  animation:heroBtnSpinV56 var(--hero-btn-fx-speed) linear infinite!important;
}

@keyframes heroBtnSweepV56{
  0%,10%{left:-60%;opacity:0}
  18%{opacity:1}
  66%{left:130%;opacity:1}
  76%,100%{left:130%;opacity:0}
}
@keyframes heroBtnSweepReverseV56{
  0%,10%{left:125%;opacity:0}
  18%{opacity:1}
  66%{left:-25%;opacity:1}
  76%,100%{left:-25%;opacity:0}
}
@keyframes heroBtnScanVerticalV56{
  0%,10%{top:-20%;opacity:0}
  18%{opacity:1}
  72%{top:120%;opacity:1}
  82%,100%{top:120%;opacity:0}
}
@keyframes heroBtnAuraV56{0%,100%{filter:brightness(1);box-shadow:0 0 4px transparent}50%{filter:brightness(1.14);box-shadow:0 0 14px var(--hero-btn-bg),0 0 30px color-mix(in srgb,var(--hero-btn-bg2) 60%,transparent)}}
@keyframes heroBtnEdgeV56{0%,100%{outline:1px solid color-mix(in srgb,var(--hero-btn-bg) 30%,transparent);outline-offset:0}50%{outline:2px solid color-mix(in srgb,var(--hero-btn-bg2) 75%,#fff 25%);outline-offset:3px}}
@keyframes heroBtnPulseV56{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes heroBtnDualFlowV56{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes heroBtnDualPulseV56{0%,100%{filter:brightness(1)}50%{filter:brightness(1.16) saturate(1.3)}}
@keyframes heroBtnChromaticV56{0%,88%,100%{filter:none}91%{filter:drop-shadow(3px 0 #ff2767) drop-shadow(-3px 0 #4aeaff)}95%{filter:drop-shadow(-2px 0 #ff2767) drop-shadow(2px 0 #4aeaff)}}
@keyframes heroBtnRippleV56{0%{width:8px;height:8px;opacity:.75}80%,100%{width:190%;height:330%;opacity:0}}
@keyframes heroBtnSpinV56{to{transform:rotate(360deg)}}

/* ADMIN: exactly two self-contained cards, each owns its own light selector */
.hero-button-admin-v56{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:start!important;
}
.hero-button-admin-v56 .hero-button-fx-card{
  min-width:0!important;
  overflow:hidden!important;
}
.hero-button-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.hero-button-card-head small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.hero-button-card-head h2{margin:2px 0 0}
.hero-button-number{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--accent);font-weight:900}
.hero-button-design-box{
  width:100%!important;
  box-sizing:border-box!important;
  margin:13px 0!important;
  padding:12px!important;
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line))!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--accent) 4%,var(--panel))!important;
}
.hero-button-design-box h3{margin:0 0 8px;font-size:14px}
.hero-button-design-box .field{width:100%!important;max-width:100%!important}
.hero-button-design-box select,.hero-button-design-box input{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
@media(max-width:900px){.hero-button-admin-v56{grid-template-columns:1fr!important}}


/* =====================================================================
   V57 — INDEPENDENT LIGHT FX PER HERO BUTTON
   Each button owns a real child layer:
     .hero-btn-light-layer
   Therefore Button 1 and Button 2 can use DIFFERENT effects at the same
   time without pseudo-element collisions with 3D materials.
   ===================================================================== */

html[data-theme] .hero .actions .hero-cms-btn{
  contain:paint;
}
html[data-theme] .hero .actions .hero-btn-label{
  position:relative!important;
  z-index:30!important;
  pointer-events:none!important;
}
html[data-theme] .hero .actions .hero-btn-light-layer,
html[data-theme] .hero .actions .hero-btn-edge-layer{
  position:absolute!important;
  pointer-events:none!important;
  display:block!important;
  z-index:18!important;
}
html[data-theme] .hero .actions .hero-btn-edge-layer{
  inset:0!important;
  border-radius:inherit!important;
  z-index:16!important;
}

/* Disable the old LIGHT pseudo layer completely.
   3D ::before styling (glass, etc.) may remain, but ::after no longer
   carries light effects. */
html[data-theme] .hero .actions .hero-cms-btn[class*="hero-btnfx-"]::after{
  display:none!important;
  animation:none!important;
  content:none!important;
}

/* -------------------------------------------------
   SWEEP effects — isolated real layer per button
   ------------------------------------------------- */
.hero-btn-light-shimmer,
.hero-btn-light-scan_lr,
.hero-btn-light-scan_rl,
.hero-btn-light-diagonal,
.hero-btn-light-laser,
.hero-btn-light-gold,
.hero-btn-light-ice,
.hero-btn-light-plasma,
.hero-btn-light-fire,
.hero-btn-light-electric{
  top:-65%!important;
  bottom:-65%!important;
  width:30%!important;
  height:auto!important;
  left:-65%!important;
  opacity:0!important;
  transform:skewX(-20deg)!important;
  animation:heroBtnSweepIndependent var(--hero-btn-fx-speed) ease-in-out infinite!important;
}

.hero-btn-light-shimmer{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),#fff,rgba(255,255,255,.18),transparent)!important;
  filter:blur(.4px);
}
.hero-btn-light-scan_lr{
  width:9%!important;
  background:linear-gradient(90deg,transparent,#fff,transparent)!important;
  box-shadow:0 0 10px #fff,0 0 20px color-mix(in srgb,var(--hero-btn-bg) 70%,transparent)!important;
}
.hero-btn-light-scan_rl{
  width:9%!important;
  left:125%!important;
  background:linear-gradient(90deg,transparent,#fff,transparent)!important;
  box-shadow:0 0 10px #fff,0 0 20px color-mix(in srgb,var(--hero-btn-bg) 70%,transparent)!important;
  animation-name:heroBtnSweepIndependentReverse!important;
}
.hero-btn-light-diagonal{
  width:18%!important;
  transform:skewX(-34deg)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),#fff,rgba(255,255,255,.18),transparent)!important;
}
.hero-btn-light-laser{
  width:3px!important;
  background:#fff!important;
  box-shadow:0 0 7px #fff,0 0 15px var(--hero-btn-bg),0 0 28px var(--hero-btn-bg2)!important;
}
.hero-btn-light-gold{
  background:linear-gradient(90deg,transparent,#ffb82c66,#fff0a9,#ffb82caa,transparent)!important;
  box-shadow:0 0 19px #ffc54f99!important;
}
.hero-btn-light-ice{
  background:linear-gradient(90deg,transparent,#70dbff66,#fff,#64d2ffaa,transparent)!important;
  box-shadow:0 0 19px #73deff99!important;
}
.hero-btn-light-plasma{
  background:linear-gradient(90deg,transparent,#47eaff77,#d26cff,#6e5dffaa,transparent)!important;
  box-shadow:0 0 21px #9b69ff99!important;
}
.hero-btn-light-fire{
  background:linear-gradient(90deg,transparent,#ff3f1f66,#ffb92e,#fff0a5,#ff4b2477,transparent)!important;
  box-shadow:0 0 21px #ff652f99!important;
}
.hero-btn-light-electric{
  width:7%!important;
  background:linear-gradient(90deg,transparent,#78e8ff,#fff,#4bd5ff,transparent)!important;
  box-shadow:0 0 20px #59dfff!important;
}

/* Vertical scanner */
.hero-btn-light-scan_vertical{
  left:-8%!important;
  right:-8%!important;
  width:auto!important;
  height:3px!important;
  top:-20%!important;
  opacity:0!important;
  background:linear-gradient(90deg,transparent,#fff,var(--hero-btn-bg),#fff,transparent)!important;
  box-shadow:0 0 14px var(--hero-btn-bg)!important;
  animation:heroBtnVerticalIndependent var(--hero-btn-fx-speed) linear infinite!important;
}

/* -------------------------------------------------
   FULL-SURFACE / PULSE effects
   ------------------------------------------------- */
.hero-btn-light-aura{
  inset:0!important;
  border-radius:inherit!important;
  animation:heroBtnAuraLayer var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
.hero-btn-light-edge_glow{
  inset:0!important;
  border-radius:inherit!important;
  border:1px solid transparent!important;
  animation:heroBtnEdgeLayer var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
.hero-btn-light-ripple{
  left:50%!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  border:2px solid #fff!important;
  opacity:0!important;
  transform:translate(-50%,-50%)!important;
  animation:heroBtnRippleLayer var(--hero-btn-fx-speed) ease-out infinite!important;
}
.hero-btn-light-pulse{
  inset:0!important;
  border-radius:inherit!important;
  animation:heroBtnPulseLayer var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
.hero-btn-light-dual_flow{
  inset:0!important;
  border-radius:inherit!important;
  opacity:.42!important;
  background:linear-gradient(115deg,var(--hero-btn-bg),var(--hero-btn-bg2),var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  background-size:300% 300%!important;
  mix-blend-mode:screen;
  animation:heroBtnDualFlowLayer var(--hero-btn-fx-speed) linear infinite!important;
}
.hero-btn-light-dual_pulse{
  inset:0!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  opacity:.08!important;
  animation:heroBtnDualPulseLayer var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
.hero-btn-light-chromatic{
  inset:0!important;
  border-radius:inherit!important;
  animation:heroBtnChromaticLayer var(--hero-btn-fx-speed) steps(1,end) infinite!important;
}

/* Border-run uses its own edge layer so it does not steal another button's pseudo-element */
.hero-btnfx-border_run .hero-btn-edge-layer{
  inset:-3px!important;
  z-index:14!important;
  background:conic-gradient(from 0deg,transparent 0 24%,var(--hero-btn-bg) 33%,#fff 40%,var(--hero-btn-bg2) 48%,transparent 58% 100%)!important;
  animation:heroBtnBorderSpinIndependent var(--hero-btn-fx-speed) linear infinite!important;
}
.hero-btnfx-border_run .hero-btn-edge-layer::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  background:color-mix(in srgb,var(--hero-btn-bg) 45%,var(--hero-btn-bg2) 55%);
}

/* NONE */
.hero-btn-light-none{display:none!important}

/* independent keyframes */
@keyframes heroBtnSweepIndependent{
  0%,10%{left:-65%;opacity:0}
  18%{opacity:1}
  66%{left:130%;opacity:1}
  76%,100%{left:130%;opacity:0}
}
@keyframes heroBtnSweepIndependentReverse{
  0%,10%{left:125%;opacity:0}
  18%{opacity:1}
  66%{left:-25%;opacity:1}
  76%,100%{left:-25%;opacity:0}
}
@keyframes heroBtnVerticalIndependent{
  0%,10%{top:-20%;opacity:0}
  18%{opacity:1}
  72%{top:120%;opacity:1}
  82%,100%{top:120%;opacity:0}
}
@keyframes heroBtnAuraLayer{
  0%,100%{box-shadow:inset 0 0 0 transparent,0 0 0 transparent;opacity:.15}
  50%{box-shadow:inset 0 0 18px color-mix(in srgb,var(--hero-btn-bg) 35%,transparent),0 0 28px color-mix(in srgb,var(--hero-btn-bg2) 45%,transparent);opacity:.9}
}
@keyframes heroBtnEdgeLayer{
  0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-btn-bg) 20%,transparent);opacity:.35}
  50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--hero-btn-bg2) 75%,#fff 25%),0 0 18px color-mix(in srgb,var(--hero-btn-bg) 38%,transparent);opacity:1}
}
@keyframes heroBtnRippleLayer{
  0%{width:8px;height:8px;opacity:.75}
  80%,100%{width:190%;height:330%;opacity:0}
}
@keyframes heroBtnPulseLayer{
  0%,100%{box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--hero-btn-bg) 0%,transparent);opacity:.1}
  50%{box-shadow:inset 0 0 24px 5px color-mix(in srgb,var(--hero-btn-bg) 32%,transparent);opacity:.8}
}
@keyframes heroBtnDualFlowLayer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes heroBtnDualPulseLayer{
  0%,100%{opacity:.08}
  50%{opacity:.62}
}
@keyframes heroBtnChromaticLayer{
  0%,88%,100%{box-shadow:none;transform:translateX(0)}
  91%{box-shadow:inset 3px 0 #ff276777,inset -3px 0 #4aeaff77;transform:translateX(1px)}
  95%{box-shadow:inset -2px 0 #ff276777,inset 2px 0 #4aeaff77;transform:translateX(-1px)}
}
@keyframes heroBtnBorderSpinIndependent{
  to{transform:rotate(360deg)}
}

/* Critical: different buttons MUST keep their own animation.
   Never target both siblings with a shared state selector. */
.hero-button-index-0 .hero-btn-light-layer,
.hero-button-index-1 .hero-btn-light-layer{
  animation-delay:0s!important;
}

/* Keep light selector visibly inside each Admin card */
.hero-button-admin-v56 .hero-button-design-box{
  overflow:hidden!important;
}
.hero-button-admin-v56 .hero-light-field{
  display:block!important;
  width:100%!important;
  margin-top:10px!important;
}
.hero-button-admin-v56 .hero-light-field .select{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}


/* =====================================================================
   V58 — HERO BUTTON FINAL HARD FIX
   1) Restore original button dimensions.
   2) Each button gets a completely independent light engine.
   3) No parent animation is used for light effects.
   ===================================================================== */

/* Restore original physical size */
html[data-theme] .hero .actions a.hero-cms-btn{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  width:auto!important;
  padding:12px 18px!important;
  line-height:1.2!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
}
@media(max-width:560px){
  html[data-theme] .hero .actions a.hero-cms-btn{
    flex:1 1 0!important;
  }
}
/* Image button keeps old image minimum only when image mode is actually used */
html[data-theme] .hero .actions a.hero-cms-btn.hero-image-btn{
  min-width:145px!important;
  min-height:52px!important;
}

/* Stop ALL old light animations on the parent.
   3D hover/material can remain, light effect is child-layer only. */
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-shimmer,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-scan_lr,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-scan_rl,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-scan_vertical,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-diagonal,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-laser,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-gold,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-ice,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-plasma,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-fire,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-electric,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-aura,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-edge_glow,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-ripple,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-pulse,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-dual_flow,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-dual_pulse,
html[data-theme] .hero .actions a.hero-cms-btn.hero-btnfx-chromatic{
  animation:none!important;
}

/* Stable internal layers */
html[data-theme] .hero .actions .hero-btn-surface{
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:1!important;
}
html[data-theme] .hero .actions .hero-btn-light-layer{
  position:absolute!important;
  pointer-events:none!important;
  z-index:12!important;
  display:block!important;
  will-change:transform,left,top,opacity!important;
}
html[data-theme] .hero .actions .hero-btn-edge-layer{
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:11!important;
}
html[data-theme] .hero .actions .hero-btn-label{
  position:relative!important;
  z-index:20!important;
}

/* Kill old pseudo light effects */
html[data-theme] .hero .actions a.hero-cms-btn::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* ========== one effect class = one independent animation ========== */
html[data-theme] .hero .actions .hero-btn-light-none{
  display:none!important;
}

/* left -> right */
html[data-theme] .hero .actions .hero-btn-light-shimmer,
html[data-theme] .hero .actions .hero-btn-light-scan_lr,
html[data-theme] .hero .actions .hero-btn-light-diagonal,
html[data-theme] .hero .actions .hero-btn-light-laser,
html[data-theme] .hero .actions .hero-btn-light-gold,
html[data-theme] .hero .actions .hero-btn-light-ice,
html[data-theme] .hero .actions .hero-btn-light-plasma,
html[data-theme] .hero .actions .hero-btn-light-fire,
html[data-theme] .hero .actions .hero-btn-light-electric{
  top:-70%!important;
  bottom:-70%!important;
  left:-70%!important;
  width:30%!important;
  opacity:0!important;
  transform:skewX(-20deg)!important;
  animation-name:v58SweepLR!important;
  animation-duration:var(--hero-btn-fx-speed)!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
}

html[data-theme] .hero .actions .hero-btn-light-shimmer{
  background:linear-gradient(90deg,transparent,#ffffff26,#fff,#ffffff26,transparent)!important;
}
html[data-theme] .hero .actions .hero-btn-light-scan_lr{
  width:8%!important;
  background:linear-gradient(90deg,transparent,#fff,transparent)!important;
  box-shadow:0 0 10px #fff,0 0 20px var(--hero-btn-bg)!important;
}
html[data-theme] .hero .actions .hero-btn-light-diagonal{
  width:16%!important;
  transform:skewX(-35deg)!important;
  background:linear-gradient(90deg,transparent,#ffffff55,#fff,#ffffff22,transparent)!important;
}
html[data-theme] .hero .actions .hero-btn-light-laser{
  width:3px!important;
  background:#fff!important;
  box-shadow:0 0 7px #fff,0 0 16px var(--hero-btn-bg),0 0 28px var(--hero-btn-bg2)!important;
}
html[data-theme] .hero .actions .hero-btn-light-gold{
  background:linear-gradient(90deg,transparent,#ffb62e77,#fff3b0,#ffb62e99,transparent)!important;
  box-shadow:0 0 18px #ffc34d99!important;
}
html[data-theme] .hero .actions .hero-btn-light-ice{
  background:linear-gradient(90deg,transparent,#77dcff77,#fff,#62d0ff99,transparent)!important;
  box-shadow:0 0 18px #79ddff99!important;
}
html[data-theme] .hero .actions .hero-btn-light-plasma{
  background:linear-gradient(90deg,transparent,#4aeaff77,#d16bff,#6c5cff99,transparent)!important;
  box-shadow:0 0 20px #9a68ff99!important;
}
html[data-theme] .hero .actions .hero-btn-light-fire{
  background:linear-gradient(90deg,transparent,#ff452777,#ffba31,#fff0a4,#ff4c2577,transparent)!important;
  box-shadow:0 0 20px #ff642f99!important;
}
html[data-theme] .hero .actions .hero-btn-light-electric{
  width:7%!important;
  background:linear-gradient(90deg,transparent,#82ebff,#fff,#4dd7ff,transparent)!important;
  box-shadow:0 0 20px #5cddff!important;
}

/* right -> left */
html[data-theme] .hero .actions .hero-btn-light-scan_rl{
  top:-70%!important;
  bottom:-70%!important;
  left:125%!important;
  width:8%!important;
  opacity:0!important;
  background:linear-gradient(90deg,transparent,#fff,transparent)!important;
  box-shadow:0 0 10px #fff,0 0 20px var(--hero-btn-bg)!important;
  transform:skewX(-20deg)!important;
  animation-name:v58SweepRL!important;
  animation-duration:var(--hero-btn-fx-speed)!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
}

/* top -> bottom */
html[data-theme] .hero .actions .hero-btn-light-scan_vertical{
  left:-8%!important;
  right:-8%!important;
  width:auto!important;
  height:3px!important;
  top:-20%!important;
  opacity:0!important;
  background:linear-gradient(90deg,transparent,#fff,var(--hero-btn-bg),#fff,transparent)!important;
  box-shadow:0 0 14px var(--hero-btn-bg)!important;
  animation-name:v58SweepTB!important;
  animation-duration:var(--hero-btn-fx-speed)!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
}

/* aura */
html[data-theme] .hero .actions .hero-btn-light-aura{
  inset:0!important;
  border-radius:inherit!important;
  animation:v58Aura var(--hero-btn-fx-speed) ease-in-out infinite!important;
}

/* edge glow */
html[data-theme] .hero .actions .hero-btn-light-edge_glow{
  inset:0!important;
  border-radius:inherit!important;
  animation:v58Edge var(--hero-btn-fx-speed) ease-in-out infinite!important;
}

/* ripple */
html[data-theme] .hero .actions .hero-btn-light-ripple{
  left:50%!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  opacity:0!important;
  transform:translate(-50%,-50%)!important;
  animation:v58Ripple var(--hero-btn-fx-speed) ease-out infinite!important;
}

/* pulse surface */
html[data-theme] .hero .actions .hero-btn-light-pulse{
  inset:0!important;
  border-radius:inherit!important;
  animation:v58Pulse var(--hero-btn-fx-speed) ease-in-out infinite!important;
}

/* dual flow */
html[data-theme] .hero .actions .hero-btn-light-dual_flow{
  inset:0!important;
  border-radius:inherit!important;
  opacity:.40!important;
  background:linear-gradient(115deg,var(--hero-btn-bg),var(--hero-btn-bg2),var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  background-size:300% 300%!important;
  mix-blend-mode:screen;
  animation:v58DualFlow var(--hero-btn-fx-speed) linear infinite!important;
}

/* dual pulse */
html[data-theme] .hero .actions .hero-btn-light-dual_pulse{
  inset:0!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  animation:v58DualPulse var(--hero-btn-fx-speed) ease-in-out infinite!important;
}

/* chromatic */
html[data-theme] .hero .actions .hero-btn-light-chromatic{
  inset:0!important;
  border-radius:inherit!important;
  animation:v58Chromatic var(--hero-btn-fx-speed) steps(1,end) infinite!important;
}

/* border run — isolated edge layer */
html[data-theme] .hero .actions .hero-btnfx-border_run .hero-btn-edge-layer{
  inset:-3px!important;
  background:conic-gradient(from 0deg,transparent 0 24%,var(--hero-btn-bg) 33%,#fff 40%,var(--hero-btn-bg2) 48%,transparent 58% 100%)!important;
  animation:v58BorderSpin var(--hero-btn-fx-speed) linear infinite!important;
}

/* Keyframes */
@keyframes v58SweepLR{
  0%,10%{left:-70%;opacity:0}
  18%{opacity:1}
  66%{left:130%;opacity:1}
  76%,100%{left:130%;opacity:0}
}
@keyframes v58SweepRL{
  0%,10%{left:125%;opacity:0}
  18%{opacity:1}
  66%{left:-25%;opacity:1}
  76%,100%{left:-25%;opacity:0}
}
@keyframes v58SweepTB{
  0%,10%{top:-20%;opacity:0}
  18%{opacity:1}
  72%{top:120%;opacity:1}
  82%,100%{top:120%;opacity:0}
}
@keyframes v58Aura{
  0%,100%{box-shadow:inset 0 0 0 transparent,0 0 0 transparent;opacity:.15}
  50%{box-shadow:inset 0 0 16px color-mix(in srgb,var(--hero-btn-bg) 38%,transparent),0 0 26px color-mix(in srgb,var(--hero-btn-bg2) 45%,transparent);opacity:.95}
}
@keyframes v58Edge{
  0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-btn-bg) 20%,transparent);opacity:.35}
  50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--hero-btn-bg2) 72%,#fff 28%),0 0 18px color-mix(in srgb,var(--hero-btn-bg) 35%,transparent);opacity:1}
}
@keyframes v58Ripple{
  0%{width:8px;height:8px;opacity:.75}
  80%,100%{width:190%;height:330%;opacity:0}
}
@keyframes v58Pulse{
  0%,100%{box-shadow:inset 0 0 0 0 transparent;opacity:.08}
  50%{box-shadow:inset 0 0 24px 5px color-mix(in srgb,var(--hero-btn-bg) 35%,transparent);opacity:.9}
}
@keyframes v58DualFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes v58DualPulse{
  0%,100%{opacity:.08}
  50%{opacity:.62}
}
@keyframes v58Chromatic{
  0%,88%,100%{box-shadow:none;transform:none}
  91%{box-shadow:inset 3px 0 #ff276788,inset -3px 0 #4aeaff88;transform:translateX(1px)}
  95%{box-shadow:inset -2px 0 #ff276788,inset 2px 0 #4aeaff88;transform:translateX(-1px)}
}
@keyframes v58BorderSpin{to{transform:rotate(360deg)}}

/* Different sibling effects are never coupled */
.hero-button-index-0 .hero-btn-light-layer,
.hero-button-index-1 .hero-btn-light-layer{
  animation-delay:0s!important;
}


/* =====================================================================
   V59 — RESTORE ORIGINAL SIZE + JS-DRIVEN INDEPENDENT LIGHT FX
   ===================================================================== */

/* Restore MAIN MENU dimensions exactly to the original V31 values. */
.navlinks.desktop-nav{
  align-items:center!important;
  gap:4px!important;
}
.top-menu-link,
.mega-menu-trigger{
  min-height:38px!important;
  height:auto!important;
  padding:7px 8px!important;
  border-radius:10px!important;
  font-size:13px!important;
  line-height:1.2!important;
}

/* Restore the two Hero buttons to the original .btn geometry.
   No effect is allowed to change physical size. */
html[data-theme] .hero .actions a.hero-cms-btn:not(.hero-image-btn){
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
  padding:12px 18px!important;
  font-size:inherit!important;
  line-height:normal!important;
  flex:0 0 auto!important;
}
html[data-theme] .hero .actions{
  gap:12px!important;
}

/* The light layers are controlled by app.js in V59.
   This prevents legacy CSS animations from fighting each other. */
html[data-theme] .hero .actions .hero-btn-light-layer{
  animation:none!important;
  transition:none!important;
  will-change:left,top,opacity,transform,box-shadow,background-position!important;
}

/* Keep static appearance for each light type; JS performs movement. */
html[data-theme] .hero .actions .hero-btn-light-shimmer,
html[data-theme] .hero .actions .hero-btn-light-scan_lr,
html[data-theme] .hero .actions .hero-btn-light-scan_rl,
html[data-theme] .hero .actions .hero-btn-light-diagonal,
html[data-theme] .hero .actions .hero-btn-light-laser,
html[data-theme] .hero .actions .hero-btn-light-gold,
html[data-theme] .hero .actions .hero-btn-light-ice,
html[data-theme] .hero .actions .hero-btn-light-plasma,
html[data-theme] .hero .actions .hero-btn-light-fire,
html[data-theme] .hero .actions .hero-btn-light-electric{
  top:-70%!important;
  bottom:-70%!important;
  opacity:0;
}
html[data-theme] .hero .actions .hero-btn-light-scan_vertical{
  left:-8%!important;
  right:-8%!important;
  width:auto!important;
  height:3px!important;
  opacity:0;
}
html[data-theme] .hero .actions .hero-btn-light-aura,
html[data-theme] .hero .actions .hero-btn-light-edge_glow,
html[data-theme] .hero .actions .hero-btn-light-pulse,
html[data-theme] .hero .actions .hero-btn-light-dual_flow,
html[data-theme] .hero .actions .hero-btn-light-dual_pulse,
html[data-theme] .hero .actions .hero-btn-light-chromatic{
  inset:0!important;
}
html[data-theme] .hero .actions .hero-btn-light-ripple{
  left:50%!important;
  top:50%!important;
}

/* Mobile retains original responsive behavior without enlarging desktop buttons. */
@media(max-width:560px){
  html[data-theme] .hero .actions a.hero-cms-btn:not(.hero-image-btn){
    flex:1 1 0!important;
  }
}


/* =====================================================================
   V60 — FINAL HERO BUTTON FIX
   PURE CSS independent FX, no JS dependency.
   Exact original size; 3D is rendered INSIDE the same footprint.
   ===================================================================== */

/* Exact original geometry */
html[data-theme] .hero .actions{
  display:flex!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin-top:28px!important;
}
html[data-theme] .hero .actions a.hero-cms-btn:not(.hero-image-btn){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:12px 18px!important;
  margin:0!important;
  line-height:1.2!important;
  font-size:inherit!important;
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  transform:none!important;
  overflow:hidden!important;
}
/* Hover must not enlarge physical/visual footprint */
html[data-theme] .hero .actions a.hero-cms-btn:not(.hero-image-btn):hover{
  transform:none!important;
}

/* 3D styles are inset-first: no large external extrusion */
html[data-theme] .hero .actions .hero-btn3d-flat{
  box-shadow:none!important;
}
html[data-theme] .hero .actions .hero-btn3d-soft{
  box-shadow:inset 0 2px 1px rgba(255,255,255,.24),inset 0 -3px 5px rgba(0,0,0,.20),0 2px 4px rgba(0,0,0,.22)!important;
}
html[data-theme] .hero .actions .hero-btn3d-bevel{
  border-top-color:rgba(255,255,255,.50)!important;
  box-shadow:inset 0 3px 1px rgba(255,255,255,.28),inset 0 -5px 7px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.24)!important;
}
html[data-theme] .hero .actions .hero-btn3d-glass{
  border-color:rgba(255,255,255,.32)!important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.44),inset 0 -2px 5px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.20)!important;
}
html[data-theme] .hero .actions .hero-btn3d-metal{
  background:linear-gradient(180deg,color-mix(in srgb,var(--hero-btn-bg) 48%,#fff 52%) 0%,var(--hero-btn-bg) 30%,color-mix(in srgb,var(--hero-btn-bg2) 68%,#181b20 32%) 72%,color-mix(in srgb,var(--hero-btn-bg2) 42%,#000 58%) 100%)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.48),inset 0 -3px 5px rgba(0,0,0,.42),0 2px 4px rgba(0,0,0,.25)!important;
}
html[data-theme] .hero .actions .hero-btn3d-chrome{
  background:linear-gradient(180deg,#fff 0%,#c8d0d8 18%,#59626c 43%,#f5f8fa 52%,#69737d 70%,#24282d 100%)!important;
  color:#101214!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7)!important;
  box-shadow:inset 0 2px 0 #fff,inset 0 -2px 4px #0008,0 2px 4px #0005!important;
}
html[data-theme] .hero .actions .hero-btn3d-neon{
  background:#080a0f!important;color:#fff!important;border-color:var(--hero-btn-bg)!important;
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--hero-btn-bg) 32%,transparent),0 0 5px color-mix(in srgb,var(--hero-btn-bg) 45%,transparent)!important;
}
html[data-theme] .hero .actions .hero-btn3d-crystal{
  background:linear-gradient(145deg,color-mix(in srgb,var(--hero-btn-bg) 42%,#fff 58%) 0%,var(--hero-btn-bg) 34%,color-mix(in srgb,var(--hero-btn-bg2) 55%,#fff 45%) 68%,var(--hero-btn-bg2) 100%)!important;
  box-shadow:inset 2px 2px 1px rgba(255,255,255,.33),inset -3px -3px 6px rgba(0,0,0,.20),0 2px 4px rgba(0,0,0,.20)!important;
}
html[data-theme] .hero .actions .hero-btn3d-armor{
  clip-path:polygon(7% 0,93% 0,100% 28%,96% 100%,4% 100%,0 28%)!important;
  box-shadow:inset 0 3px 1px rgba(255,255,255,.24),inset 0 -4px 6px rgba(0,0,0,.28)!important;
}
html[data-theme] .hero .actions .hero-btn3d-obsidian{
  background:radial-gradient(circle at 28% 15%,rgba(255,255,255,.14),transparent 20%),linear-gradient(145deg,#25292e,#060708 60%,color-mix(in srgb,var(--hero-btn-bg2) 22%,#050607 78%))!important;
  color:#fff!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.10),inset 0 -3px 6px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.28)!important;
}
html[data-theme] .hero .actions .hero-btn3d-goldplate{
  background:linear-gradient(180deg,#fff3aa 0%,#e7bc4b 24%,#a86b20 58%,#6e3a0e 78%,#d9a83d 100%)!important;
  color:#271607!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.48),inset 0 -3px 6px rgba(93,45,7,.50),0 2px 4px rgba(0,0,0,.24)!important;
}
html[data-theme] .hero .actions .hero-btn3d-arcane{
  background:radial-gradient(circle at 26% 18%,rgba(255,255,255,.20),transparent 20%),linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--hero-btn-bg) 28%,transparent),inset 0 -3px 5px rgba(0,0,0,.20),0 2px 4px rgba(0,0,0,.20)!important;
}

/* Stable layers */
html[data-theme] .hero .actions .hero-btn-light-layer{
  position:absolute!important;
  display:block!important;
  pointer-events:none!important;
  z-index:12!important;
  animation-delay:0s!important;
  animation-fill-mode:none!important;
  will-change:transform,left,top,opacity,background-position,box-shadow!important;
}
html[data-theme] .hero .actions .hero-btn-label{
  position:relative!important;
  z-index:20!important;
}
html[data-theme] .hero .actions .hero-btn-edge-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:11!important;
  border-radius:inherit!important;
}

/* No pseudo-element light engine */
html[data-theme] .hero .actions a.hero-cms-btn::after{
  content:none!important;
  display:none!important;
}

/* NONE */
html[data-theme] .hero .actions .hero-btn-light-none{display:none!important}

/* LR sweep family */
html[data-theme] .hero .actions .hero-btn-light-shimmer,
html[data-theme] .hero .actions .hero-btn-light-scan_lr,
html[data-theme] .hero .actions .hero-btn-light-diagonal,
html[data-theme] .hero .actions .hero-btn-light-laser,
html[data-theme] .hero .actions .hero-btn-light-gold,
html[data-theme] .hero .actions .hero-btn-light-ice,
html[data-theme] .hero .actions .hero-btn-light-plasma,
html[data-theme] .hero .actions .hero-btn-light-fire,
html[data-theme] .hero .actions .hero-btn-light-electric{
  top:-65%!important;
  bottom:-65%!important;
  left:-65%!important;
  width:30%!important;
  opacity:0!important;
  transform:skewX(-20deg)!important;
  animation:v60SweepLR var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
html[data-theme] .hero .actions .hero-btn-light-shimmer{background:linear-gradient(90deg,transparent,#ffffff20,#fff,#ffffff20,transparent)!important}
html[data-theme] .hero .actions .hero-btn-light-scan_lr{width:8%!important;background:linear-gradient(90deg,transparent,#fff,transparent)!important;box-shadow:0 0 10px #fff,0 0 18px var(--hero-btn-bg)!important}
html[data-theme] .hero .actions .hero-btn-light-diagonal{width:16%!important;transform:skewX(-35deg)!important;background:linear-gradient(90deg,transparent,#ffffff55,#fff,#ffffff22,transparent)!important}
html[data-theme] .hero .actions .hero-btn-light-laser{width:3px!important;background:#fff!important;box-shadow:0 0 7px #fff,0 0 15px var(--hero-btn-bg),0 0 25px var(--hero-btn-bg2)!important}
html[data-theme] .hero .actions .hero-btn-light-gold{background:linear-gradient(90deg,transparent,#ffb72c66,#fff0a8,#ffb72c99,transparent)!important;box-shadow:0 0 18px #ffc44f99!important}
html[data-theme] .hero .actions .hero-btn-light-ice{background:linear-gradient(90deg,transparent,#75dcff66,#fff,#62d0ff99,transparent)!important;box-shadow:0 0 18px #77ddff99!important}
html[data-theme] .hero .actions .hero-btn-light-plasma{background:linear-gradient(90deg,transparent,#49eaff77,#ce6aff,#6c5cff99,transparent)!important;box-shadow:0 0 19px #9868ff99!important}
html[data-theme] .hero .actions .hero-btn-light-fire{background:linear-gradient(90deg,transparent,#ff452766,#ffb82f,#fff0a4,#ff4c2577,transparent)!important;box-shadow:0 0 19px #ff642f99!important}
html[data-theme] .hero .actions .hero-btn-light-electric{width:7%!important;background:linear-gradient(90deg,transparent,#82ebff,#fff,#4dd7ff,transparent)!important;box-shadow:0 0 19px #5cddff!important}

/* RL */
html[data-theme] .hero .actions .hero-btn-light-scan_rl{
  top:-65%!important;bottom:-65%!important;left:125%!important;width:8%!important;opacity:0!important;
  background:linear-gradient(90deg,transparent,#fff,transparent)!important;
  box-shadow:0 0 10px #fff,0 0 18px var(--hero-btn-bg)!important;
  animation:v60SweepRL var(--hero-btn-fx-speed) ease-in-out infinite!important;
}

/* TB */
html[data-theme] .hero .actions .hero-btn-light-scan_vertical{
  left:-8%!important;right:-8%!important;width:auto!important;height:3px!important;top:-20%!important;opacity:0!important;
  background:linear-gradient(90deg,transparent,#fff,var(--hero-btn-bg),#fff,transparent)!important;
  box-shadow:0 0 13px var(--hero-btn-bg)!important;
  animation:v60SweepTB var(--hero-btn-fx-speed) linear infinite!important;
}

/* surface FX */
html[data-theme] .hero .actions .hero-btn-light-aura{
  inset:0!important;border-radius:inherit!important;
  animation:v60Aura var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
html[data-theme] .hero .actions .hero-btn-light-edge_glow{
  inset:0!important;border-radius:inherit!important;
  animation:v60Edge var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
html[data-theme] .hero .actions .hero-btn-light-ripple{
  left:50%!important;top:50%!important;width:8px!important;height:8px!important;border:2px solid #fff!important;border-radius:50%!important;opacity:0!important;
  transform:translate(-50%,-50%)!important;
  animation:v60Ripple var(--hero-btn-fx-speed) ease-out infinite!important;
}
html[data-theme] .hero .actions .hero-btn-light-pulse{
  inset:0!important;border-radius:inherit!important;
  animation:v60Pulse var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
html[data-theme] .hero .actions .hero-btn-light-dual_flow{
  inset:0!important;border-radius:inherit!important;opacity:.42!important;
  background:linear-gradient(115deg,var(--hero-btn-bg),var(--hero-btn-bg2),var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  background-size:300% 300%!important;
  animation:v60DualFlow var(--hero-btn-fx-speed) linear infinite!important;
}
html[data-theme] .hero .actions .hero-btn-light-dual_pulse{
  inset:0!important;border-radius:inherit!important;background:linear-gradient(135deg,var(--hero-btn-bg),var(--hero-btn-bg2))!important;
  animation:v60DualPulse var(--hero-btn-fx-speed) ease-in-out infinite!important;
}
html[data-theme] .hero .actions .hero-btn-light-chromatic{
  inset:0!important;border-radius:inherit!important;
  animation:v60Chromatic var(--hero-btn-fx-speed) steps(1,end) infinite!important;
}

/* Border run */
html[data-theme] .hero .actions .hero-btnfx-border_run .hero-btn-edge-layer{
  inset:0!important;
  border:2px solid transparent!important;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             conic-gradient(from 0deg,var(--hero-btn-bg),#fff,var(--hero-btn-bg2),var(--hero-btn-bg)) border-box!important;
  animation:v60HueRotate var(--hero-btn-fx-speed) linear infinite!important;
}

/* independent per-element keyframes */
@keyframes v60SweepLR{
  0%,10%{left:-65%;opacity:0}
  18%{opacity:1}
  66%{left:130%;opacity:1}
  76%,100%{left:130%;opacity:0}
}
@keyframes v60SweepRL{
  0%,10%{left:125%;opacity:0}
  18%{opacity:1}
  66%{left:-25%;opacity:1}
  76%,100%{left:-25%;opacity:0}
}
@keyframes v60SweepTB{
  0%,10%{top:-20%;opacity:0}
  18%{opacity:1}
  72%{top:120%;opacity:1}
  82%,100%{top:120%;opacity:0}
}
@keyframes v60Aura{
  0%,100%{opacity:.15;box-shadow:inset 0 0 0 transparent}
  50%{opacity:.95;box-shadow:inset 0 0 18px var(--hero-btn-bg),inset 0 0 28px var(--hero-btn-bg2)}
}
@keyframes v60Edge{
  0%,100%{opacity:.3;box-shadow:inset 0 0 0 1px var(--hero-btn-bg)}
  50%{opacity:1;box-shadow:inset 0 0 0 2px var(--hero-btn-bg2),inset 0 0 12px var(--hero-btn-bg)}
}
@keyframes v60Ripple{
  0%{width:8px;height:8px;opacity:.75}
  80%,100%{width:190%;height:330%;opacity:0}
}
@keyframes v60Pulse{
  0%,100%{opacity:.08}
  50%{opacity:.85;box-shadow:inset 0 0 22px 4px var(--hero-btn-bg)}
}
@keyframes v60DualFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes v60DualPulse{
  0%,100%{opacity:.08}
  50%{opacity:.62}
}
@keyframes v60Chromatic{
  0%,88%,100%{opacity:0;box-shadow:none}
  91%{opacity:1;box-shadow:inset 3px 0 #ff276788,inset -3px 0 #4aeaff88}
  95%{opacity:1;box-shadow:inset -2px 0 #ff276788,inset 2px 0 #4aeaff88}
}
@keyframes v60HueRotate{
  to{filter:hue-rotate(360deg)}
}

/* Mobile follows original site's rule */
@media(max-width:560px){
  html[data-theme] .hero .actions a.hero-cms-btn:not(.hero-image-btn){
    flex:1 1 0!important;
  }
}


/* =====================================================================
   V63 — LIGHT MODE CARD HARD OVERRIDE
   FINAL rule. Must stay at the END of app.css.
   Fixes theme-specific dark card backgrounds that were overriding Light.
   Dark Mode is intentionally untouched.
   ===================================================================== */

html[data-mode="light"][data-theme]{
  --light-surface:#ffffff;
  --light-surface-2:color-mix(in srgb,#ffffff 94%,var(--accent) 6%);
  --light-surface-3:color-mix(in srgb,#ffffff 88%,var(--accent) 12%);
  --light-border:color-mix(in srgb,var(--accent) 18%,rgba(24,39,54,.18));
  --light-shadow:0 12px 30px rgba(35,54,72,.09),0 2px 6px rgba(35,54,72,.04);
}

/* ALL generic cards: override every dark personality rule from V39/V40. */
html[data-mode="light"][data-theme] body .card,
html[data-mode="light"][data-theme] body .grid .card,
html[data-mode="light"][data-theme] body .featuregrid .card,
html[data-mode="light"][data-theme] body .dash .card,
html[data-mode="light"][data-theme] body #rank > .card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.90)),
    var(--light-surface) !important;
  background-color:#ffffff !important;
  color:var(--text) !important;
  border-color:var(--light-border) !important;
  box-shadow:var(--light-shadow) !important;
}

/* Explicitly defeat each theme's hardcoded dark card skin. */
html[data-mode="light"][data-theme="abyss"] body .card,
html[data-mode="light"][data-theme="blood"] body .card,
html[data-mode="light"][data-theme="frost"] body .card,
html[data-mode="light"][data-theme="steel"] body .card,
html[data-mode="light"][data-theme="imperial"] body .card,
html[data-mode="light"][data-theme="forest"] body .card,
html[data-mode="light"][data-theme="arcane"] body .card,
html[data-mode="light"][data-theme="solar"] body .card{
  background:
    linear-gradient(145deg,
      color-mix(in srgb,#fff 96%,var(--accent) 4%),
      color-mix(in srgb,#fff 99%,var(--accent2) 1%)) !important;
  background-color:#fff !important;
}

/* Server status values + Feature cards */
html[data-mode="light"][data-theme] .card .value,
html[data-mode="light"][data-theme] .feature b,
html[data-mode="light"][data-theme] .feature > span:first-child{
  color:var(--text) !important;
  opacity:1 !important;
}
html[data-mode="light"][data-theme] .feature > span:first-child{
  color:var(--accent) !important;
}
html[data-mode="light"][data-theme] .card .muted,
html[data-mode="light"][data-theme] .feature .muted{
  color:var(--muted) !important;
  opacity:1 !important;
}

/* Ranking table: white card, readable headers and rows. */
html[data-mode="light"][data-theme] #rank .rank,
html[data-mode="light"][data-theme] #rank table{
  background:transparent !important;
  color:var(--text) !important;
}
html[data-mode="light"][data-theme] #rank .rank thead,
html[data-mode="light"][data-theme] #rank .rank thead tr,
html[data-mode="light"][data-theme] #rank .rank th{
  background:color-mix(in srgb,#fff 88%,var(--accent) 12%) !important;
  color:color-mix(in srgb,var(--text) 78%,var(--accent) 22%) !important;
  opacity:1 !important;
}
html[data-mode="light"][data-theme] #rank .rank tbody,
html[data-mode="light"][data-theme] #rank .rank tbody tr,
html[data-mode="light"][data-theme] #rank .rank td{
  background:transparent !important;
  color:var(--text) !important;
  opacity:1 !important;
}
html[data-mode="light"][data-theme] #rank .rank td b{
  color:var(--text) !important;
}
html[data-mode="light"][data-theme] #rank .rank th,
html[data-mode="light"][data-theme] #rank .rank td{
  border-bottom-color:color-mix(in srgb,var(--accent) 10%,rgba(28,43,58,.13)) !important;
}
html[data-mode="light"][data-theme] #rank .rank tbody tr:hover td{
  background:color-mix(in srgb,#fff 91%,var(--accent) 9%) !important;
}

/* Other public content cards/modules also become truly Light. */
html[data-mode="light"][data-theme] .home-news-card,
html[data-mode="light"][data-theme] .news-card-public,
html[data-mode="light"][data-theme] .news-patch-module,
html[data-mode="light"][data-theme] .news-admin-list-item,
html[data-mode="light"][data-theme] .news-widget-section,
html[data-mode="light"][data-theme] .news-editor-shell,
html[data-mode="light"][data-theme] .notice{
  background:var(--light-surface-2) !important;
  background-color:#fff !important;
  color:var(--text) !important;
  border-color:var(--light-border) !important;
  box-shadow:var(--light-shadow) !important;
}

/* Dropdown panels in Light Mode. */
html[data-mode="light"][data-theme] .mega-menu-panel,
html[data-mode="light"][data-theme] .mobile-menu-sheet{
  background:color-mix(in srgb,#fff 96%,var(--accent) 4%) !important;
  background-color:#fff !important;
  color:var(--text) !important;
  border-color:var(--light-border) !important;
  box-shadow:0 18px 42px rgba(31,48,66,.13) !important;
}

/* Keep text strong across all light cards. */
html[data-mode="light"][data-theme] .card h1,
html[data-mode="light"][data-theme] .card h2,
html[data-mode="light"][data-theme] .card h3,
html[data-mode="light"][data-theme] .card b,
html[data-mode="light"][data-theme] .home-news-card b,
html[data-mode="light"][data-theme] .news-card-public h2,
html[data-mode="light"][data-theme] .news-card-public h2 a{
  color:var(--text) !important;
}

/* Theme identity remains visible via borders, icons and subtle tint. */
html[data-mode="light"][data-theme] .grid .card:hover,
html[data-mode="light"][data-theme] .featuregrid .card:hover,
html[data-mode="light"][data-theme] .home-news-card:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,rgba(35,50,65,.16)) !important;
  box-shadow:
    0 14px 34px rgba(35,54,72,.10),
    0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent) !important;
}

/* No impact on V61 isolated Hero buttons. */

/* V77 Admin / Mod permissions */
.admin-perm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 16px}
.admin-perm-grid label{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);font-size:12px}
.admin-mod-card{margin-top:14px}
.auth code,.dash code{display:inline-block;margin-top:8px;padding:10px 12px;border-radius:8px;background:#05080d;color:#7df3b2;font-size:14px;word-break:break-all}
@media(max-width:760px){.admin-perm-grid{grid-template-columns:1fr}}

/* BJMU1982 Bridge V2 */
.channel-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.channel-status-card{border:1px solid rgba(255,255,255,.08)}.channel-status-card.is-online{box-shadow:inset 0 0 0 1px rgba(58,220,143,.16)}.channel-status-card.is-offline{opacity:.72}.channel-status-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.channel-status-card.is-online .channel-status-head span{color:#4ce09a}.channel-status-card.is-offline .channel-status-head span{color:#ff7777}.channel-status-meta{font-size:12px;color:var(--muted,#8ba2b7);margin-top:8px}.channel-status-mini{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-top:9px}@media(max-width:980px){.channel-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.channel-status-grid{grid-template-columns:1fr}}

/* =====================================================================
   BJMU1982 LIVE GAME CHAT V2 — CHAT BEHIND ROUND HERO LOGO
   - Logo tròn luôn nằm PHÍA TRƯỚC.
   - Chat nằm PHÍA SAU logo và chui xuống từ nửa dưới logo.
   - Tin mới nhất ở dưới: đậm, sáng, rõ.
   - Tin càng bị đẩy lên: càng mờ và biến mất.
   - Không box, không border, không nền panel.
   ===================================================================== */

/* Hero logo wrapper trở thành vùng neo cho cả logo + chat.
   Không thay đổi cấu trúc HTML hiện tại. */
.hero-logo-wrap{
  position:relative!important;
  z-index:5!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:420px;
  overflow:visible!important;
}

/* Stage của logo phải nằm trên chat. */
.hero-logo-stage{
  position:relative!important;
  z-index:30!important;
  isolation:isolate;
  flex:0 0 auto;
}

/* Logo chính là lớp cao nhất. */
.hero-main-logo{
  position:relative!important;
  z-index:40!important;
}

/* Các hiệu ứng logo vẫn ở trước chat nhưng sau logo chính. */
.hero-logo-stage::before,
.hero-logo-stage::after{
  pointer-events:none;
}

.hero-logo-orbit{
  z-index:32!important;
}

/* ---------------------------------------------------------------------
   CHAT STAGE
   Chat được kéo NGƯỢC LÊN phía sau phần dưới của logo.
   Logo che lên chat thật sự bằng z-index.
   --------------------------------------------------------------------- */
.mu-live-chat{
  position:relative!important;
  z-index:10!important;

  width:min(96%,820px);
  height:190px;
  min-height:190px;

  /* Đây là phần quan trọng:
     số âm lớn => chat chui sâu hơn vào phía sau logo. */
  margin:-128px auto 0!important;

  flex:0 0 190px;

  overflow:hidden!important;
  pointer-events:none!important;

  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;

  /* Trên mất hoàn toàn -> giữa mờ -> dưới rõ hoàn toàn.
     KHÔNG fade ở đáy vì dòng mới phải rõ nhất. */
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.04) 8%,
    rgba(0,0,0,.14) 17%,
    rgba(0,0,0,.32) 28%,
    rgba(0,0,0,.58) 42%,
    rgba(0,0,0,.82) 58%,
    #000 74%,
    #000 100%
  )!important;

  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.04) 8%,
    rgba(0,0,0,.14) 17%,
    rgba(0,0,0,.32) 28%,
    rgba(0,0,0,.58) 42%,
    rgba(0,0,0,.82) 58%,
    #000 74%,
    #000 100%
  )!important;
}

/* Danh sách chat luôn bám đáy.
   JS thêm dòng mới => dòng cũ tự bị đẩy lên vùng fade. */
.mu-live-chat-lines{
  position:relative;
  z-index:1;

  width:100%;
  height:100%;

  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:center!important;

  gap:4px;

  /* Phần trên cố ý để trống một ít vì nó đang nằm sau logo. */
  padding:36px 12px 10px!important;

  overflow:visible;
}

/* ---------------------------------------------------------------------
   MỖI DÒNG CHAT
   Không dùng ô nền để chữ nổi tự nhiên trên hero.
   --------------------------------------------------------------------- */
.mu-chat-line{
  position:relative;

  width:fit-content;
  max-width:96%;

  margin:0 auto!important;
  padding:2px 8px!important;

  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;

  color:#f7fbff;

  font-size:14px;
  line-height:1.32;
  font-weight:650;

  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;

  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 5px rgba(0,0,0,.95),
    0 0 10px rgba(0,0,0,.70);

  opacity:0;
  transform:translateY(8px);

  animation:muChatRiseIn .30s cubic-bezier(.2,.75,.25,1) forwards;

  transition:
    opacity .35s ease,
    filter .35s ease,
    transform .35s ease,
    font-weight .35s ease;
}

/* Nếu JS hiện tại vẫn gắn is-old thì không cho nó phá hệ fade mới. */
.mu-chat-line.is-old{
  opacity:inherit;
}

/* ---------------------------------------------------------------------
   FADE THEO TUỔI DÒNG CHAT
   fade-0 = mới nhất / dưới cùng
   fade-6 = cũ nhất / trên cùng
   Nếu JS chưa gắn fade-* thì mask của container vẫn tạo fade theo vị trí.
   --------------------------------------------------------------------- */
.mu-chat-line.fade-0{
  opacity:1!important;
  filter:none;
  font-weight:900;
  color:#fff;
  transform:translateY(0) scale(1.015);
  text-shadow:
    0 1px 2px #000,
    0 0 6px rgba(0,0,0,1),
    0 0 13px rgba(75,211,255,.34);
}

.mu-chat-line.fade-1{
  opacity:.88!important;
  filter:none;
  font-weight:800;
}

.mu-chat-line.fade-2{
  opacity:.70!important;
  filter:none;
  font-weight:720;
}

.mu-chat-line.fade-3{
  opacity:.50!important;
  filter:none;
  font-weight:650;
}

.mu-chat-line.fade-4{
  opacity:.30!important;
  filter:blur(.15px);
  font-weight:600;
}

.mu-chat-line.fade-5{
  opacity:.14!important;
  filter:blur(.35px);
  font-weight:550;
}

.mu-chat-line.fade-6{
  opacity:.045!important;
  filter:blur(.7px);
  font-weight:500;
}

/* Channel nhỏ hơn để tên + nội dung là trọng tâm. */
.mu-chat-channel{
  display:inline-block;
  margin-right:6px;

  color:#ffd76a;
  font-size:10px;
  line-height:inherit;
  font-weight:850;
  letter-spacing:.015em;

  text-shadow:
    0 1px 2px #000,
    0 0 6px rgba(0,0,0,.9);
}

/* Tên nhân vật. */
.mu-chat-name{
  display:inline-block;
  margin-right:5px;

  color:#67ddff;
  font-weight:900;

  text-shadow:
    0 1px 2px #000,
    0 0 8px rgba(61,202,255,.24);
}

.mu-chat-message{
  color:inherit;
}

/* Dòng cũ rời khỏi vùng trên. */
.mu-chat-line.is-leaving{
  animation:muChatFadeAway .58s ease forwards!important;
}

@keyframes muChatRiseIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes muChatFadeAway{
  from{
    opacity:.12;
    transform:translateY(0);
    filter:blur(.25px);
  }
  to{
    opacity:0;
    transform:translateY(-16px);
    filter:blur(2px);
  }
}

/* ---------------------------------------------------------------------
   DESKTOP LỚN
   --------------------------------------------------------------------- */
@media(min-width:1200px){
  .mu-live-chat{
    width:min(96%,860px);
    height:200px;
    min-height:200px;
    flex-basis:200px;
    margin-top:-136px!important;
  }

  .mu-live-chat-lines{
    padding-top:38px!important;
  }

  .mu-chat-line{
    font-size:14px;
  }

  .mu-chat-line.fade-0{
    font-size:15px;
  }
}

/* ---------------------------------------------------------------------
   TABLET
   --------------------------------------------------------------------- */
@media(max-width:900px){
  .hero-logo-wrap{
    min-height:300px;
  }

  .hero-logo-stage{
    z-index:30!important;
  }

  .mu-live-chat{
    width:98%;
    height:158px;
    min-height:158px;
    flex-basis:158px;

    /* Logo mobile thấp hơn nên giảm overlap. */
    margin:-92px auto 0!important;
  }

  .mu-live-chat-lines{
    gap:3px;
    padding:28px 8px 7px!important;
  }

  .mu-chat-line{
    max-width:98%;
    font-size:13px;
    line-height:1.28;
  }

  .mu-chat-line.fade-0{
    font-size:13.5px;
  }
}

/* ---------------------------------------------------------------------
   MOBILE
   --------------------------------------------------------------------- */
@media(max-width:620px){
  .hero-logo-wrap{
    min-height:230px;
  }

  .mu-live-chat{
    width:100%;
    height:138px;
    min-height:138px;
    flex-basis:138px;

    margin:-68px auto 0!important;

    -webkit-mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.08) 14%,
      rgba(0,0,0,.30) 30%,
      rgba(0,0,0,.65) 50%,
      #000 72%,
      #000 100%
    )!important;

    mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.08) 14%,
      rgba(0,0,0,.30) 30%,
      rgba(0,0,0,.65) 50%,
      #000 72%,
      #000 100%
    )!important;
  }

  .mu-live-chat-lines{
    gap:2px;
    padding:22px 4px 5px!important;
  }

  .mu-chat-line{
    max-width:100%;
    padding:1px 4px!important;
    font-size:11.5px;
    line-height:1.25;
  }

  .mu-chat-line.fade-0{
    font-size:12px;
  }

  .mu-chat-channel{
    font-size:9px;
    margin-right:4px;
  }

  .mu-chat-name{
    margin-right:4px;
  }
}

/* Giảm chuyển động theo thiết lập hệ điều hành,
   nhưng vẫn giữ fade vị trí để giao diện không thay đổi. */
@media(prefers-reduced-motion:reduce){
  .mu-chat-line,
  .mu-chat-line.is-leaving{
    animation:none!important;
    transform:none!important;
    transition:none!important;
  }
}

/* =====================================================================
   BJMU1982 RANKING CLASS ICONS V2
   7 ảnh class thật + vòng sáng + sao lấp lánh.
   Không thay đổi cấu trúc bảng TOP.
   ===================================================================== */
.bj-class-cell{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:190px;
  vertical-align:middle;
}

.bj-class-name{
  font-weight:800;
  white-space:nowrap;
}

.bj-class-icon{
  --bj-ring:#63dcff;
  --bj-glow:rgba(75,190,255,.58);

  position:relative;
  isolation:isolate;
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  border-radius:50%;

  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.14),rgba(8,18,31,.92) 63%,rgba(2,7,13,.98) 100%);

  border:1px solid color-mix(in srgb,var(--bj-ring) 75%,rgba(255,255,255,.15));

  box-shadow:
    0 0 7px var(--bj-glow),
    0 0 17px color-mix(in srgb,var(--bj-ring) 30%,transparent),
    inset 0 0 8px rgba(255,255,255,.09);

  transition:transform .22s ease,box-shadow .22s ease;
}

/* Ảnh gốc được thu nhỏ bằng CSS, không crop và không làm méo. */
.bj-class-icon > img{
  position:relative;
  z-index:4;
  display:block;
  width:34px;
  height:34px;
  max-width:none;
  object-fit:contain;
  object-position:center;
  border-radius:50%;
  pointer-events:none;

  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.86))
    drop-shadow(0 0 4px color-mix(in srgb,var(--bj-ring) 62%,transparent));

  transition:transform .22s ease,filter .22s ease;
}

/* Vòng năng lượng quay quanh ảnh. */
.bj-class-icon::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:-4px;
  border-radius:50%;
  pointer-events:none;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 28deg,
      color-mix(in srgb,var(--bj-ring) 92%,white) 42deg,
      transparent 62deg 170deg,
      rgba(255,255,255,.92) 190deg,
      transparent 214deg 300deg,
      color-mix(in srgb,var(--bj-ring) 78%,white) 320deg,
      transparent 344deg
    );

  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);

  animation:bjClassRingSpin 5.4s linear infinite;
}

/* Halo mềm phía sau. */
.bj-class-icon::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-8px;
  border-radius:50%;
  pointer-events:none;

  background:radial-gradient(circle,var(--bj-glow) 0%,transparent 68%);
  filter:blur(3px);
  animation:bjClassAura 2.35s ease-in-out infinite;
}

.bj-class-fallback{
  position:relative;
  z-index:4;
  font-size:9px;
  line-height:1;
  font-weight:950;
  color:#fff;
  text-shadow:0 1px 2px #000;
}

/* 4 ngôi sao lấp lánh bao quanh từng icon. */
.bj-class-star{
  position:absolute;
  z-index:7;
  display:block;
  width:10px;
  height:10px;
  line-height:10px;
  text-align:center;
  font-style:normal;
  font-size:9px;
  color:#fff;
  pointer-events:none;

  text-shadow:
    0 0 3px #fff,
    0 0 6px var(--bj-ring),
    0 0 11px var(--bj-ring);

  animation:bjClassStar 1.65s ease-in-out infinite;
}

.bj-star-1{top:-4px;right:0;animation-delay:0s}
.bj-star-2{bottom:-2px;left:-4px;animation-delay:.42s;font-size:7px}
.bj-star-3{top:7px;left:-6px;animation-delay:.82s;font-size:6px}
.bj-star-4{right:-5px;bottom:7px;animation-delay:1.18s;font-size:7px}

/* Mỗi dòng class có màu hào quang riêng. */
.bj-class-wizard .bj-class-icon{--bj-ring:#54b8ff;--bj-glow:rgba(67,127,255,.55)}
.bj-class-knight .bj-class-icon{--bj-ring:#ff5064;--bj-glow:rgba(255,48,70,.48)}
.bj-class-elf .bj-class-icon{--bj-ring:#59ef9b;--bj-glow:rgba(49,221,126,.46)}
.bj-class-mg .bj-class-icon{--bj-ring:#ff9d3d;--bj-glow:rgba(255,112,42,.48)}
.bj-class-dl .bj-class-icon{--bj-ring:#ffd15a;--bj-glow:rgba(242,185,56,.48)}
.bj-class-sum .bj-class-icon{--bj-ring:#d05dff;--bj-glow:rgba(183,61,255,.50)}
.bj-class-rf .bj-class-icon{--bj-ring:#f2d5a0;--bj-glow:rgba(225,178,103,.44)}
.bj-class-unknown .bj-class-icon{--bj-ring:#8090a6;--bj-glow:rgba(110,130,155,.34)}

.bj-class-cell:hover .bj-class-icon{
  transform:translateY(-1px) scale(1.07);
  box-shadow:
    0 0 9px var(--bj-glow),
    0 0 22px color-mix(in srgb,var(--bj-ring) 46%,transparent),
    inset 0 0 9px rgba(255,255,255,.12);
}

.bj-class-cell:hover .bj-class-icon > img{
  transform:scale(1.10);
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.9))
    drop-shadow(0 0 6px var(--bj-ring));
}

@keyframes bjClassRingSpin{
  to{transform:rotate(360deg)}
}

@keyframes bjClassAura{
  0%,100%{opacity:.42;transform:scale(.92)}
  50%{opacity:.95;transform:scale(1.10)}
}

@keyframes bjClassStar{
  0%,100%{opacity:.12;transform:scale(.45) rotate(0deg)}
  45%{opacity:1;transform:scale(1.22) rotate(95deg)}
  70%{opacity:.62;transform:scale(.82) rotate(155deg)}
}

/* Mobile: icon nhỏ hơn nhưng vẫn giữ đủ ảnh + sao. */
@media(max-width:700px){
  .bj-class-cell{min-width:0;gap:7px}
  .bj-class-icon{width:32px;height:32px;flex-basis:32px}
  .bj-class-icon > img{width:27px;height:27px}
  .bj-class-name{font-size:12px}
  .bj-class-star{transform-origin:center}
  .bj-star-1{top:-4px;right:-2px}
  .bj-star-2{bottom:-4px;left:-4px}
}

/* Tôn trọng người dùng tắt animation, icon vẫn hiển thị đầy đủ. */
@media(prefers-reduced-motion:reduce){
  .bj-class-icon::before,
  .bj-class-icon::after,
  .bj-class-star{
    animation:none!important;
  }
}

/* =====================================================================
   BJMU1982 LIVE GAME CHAT V5 — 22 DÒNG, MỞ RỘNG LÊN TRÊN
   QUAN TRỌNG:
   - Chat là absolute overlay => KHÔNG làm dài web / KHÔNG đẩy nội dung xuống.
   - Mép dưới giữ nguyên, tăng chiều cao về PHÍA TRÊN.
   - Logo z-index 30/40 => chat vẫn nằm SAU logo.
   ===================================================================== */

.hero-logo-wrap{
  position:relative!important;
  overflow:visible!important;
}

/* Logo/stage luôn nằm trên chữ chat. */
.hero-logo-stage{
  position:relative!important;
  z-index:30!important;
}
.hero-main-logo{
  position:relative!important;
  z-index:40!important;
}

/* Desktop:
   bottom giữ nguyên vùng chat cũ.
   height tăng lên 385px => phần thêm chỉ đi LÊN TRÊN. */
.hero-logo-wrap > #mu-live-chat.mu-live-chat,
.hero-logo-wrap > .mu-live-chat{
  position:absolute!important;
  z-index:10!important;

  left:50%!important;
  right:auto!important;
  bottom:0!important;
  top:auto!important;

  transform:translateX(-50%)!important;

  width:min(96%,860px)!important;
  height:385px!important;
  min-height:385px!important;

  /* Tuyệt đối không tham gia flex layout => không làm dài web. */
  flex:none!important;
  flex-basis:auto!important;
  margin:0!important;

  overflow:hidden!important;
  pointer-events:none!important;

  background:transparent!important;
  border:0!important;
  box-shadow:none!important;

  /* Phía trên biến mất từ từ; phía dưới giữ rõ. */
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.04) 7%,
    rgba(0,0,0,.13) 15%,
    rgba(0,0,0,.30) 25%,
    rgba(0,0,0,.56) 38%,
    rgba(0,0,0,.80) 52%,
    #000 68%,
    #000 100%
  )!important;

  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.04) 7%,
    rgba(0,0,0,.13) 15%,
    rgba(0,0,0,.30) 25%,
    rgba(0,0,0,.56) 38%,
    rgba(0,0,0,.80) 52%,
    #000 68%,
    #000 100%
  )!important;
}

#mu-live-chat-lines.mu-live-chat-lines{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:stretch!important;

  gap:2px!important;

  /* Không tạo khoảng trống lớn phía dưới.
     Dòng mới nhất vẫn ở đúng vùng dưới logo như trước. */
  padding:52px 8px 8px!important;
  margin:0!important;

  overflow:hidden!important;
}

#mu-live-chat-lines > .mu-chat-line{
  flex:0 0 auto!important;
  transition:
    opacity .38s ease,
    filter .38s ease,
    transform .38s ease!important;
}

/* Khi JS loại dòng thứ 23: dòng trên cùng tan và đi lên. */
#mu-live-chat-lines > .mu-chat-line.is-leaving{
  opacity:0!important;
  transform:translateY(-14px)!important;
  filter:blur(1.6px)!important;
}

/* Tablet: vẫn absolute; chỉ thu vùng overlay, không tăng chiều cao trang. */
@media(max-width:900px){
  .hero-logo-wrap > #mu-live-chat.mu-live-chat,
  .hero-logo-wrap > .mu-live-chat{
    left:50%!important;
    bottom:0!important;
    top:auto!important;
    width:98%!important;
    height:315px!important;
    min-height:315px!important;
    transform:translateX(-50%)!important;
    margin:0!important;
  }

  #mu-live-chat-lines.mu-live-chat-lines{
    padding:46px 6px 6px!important;
    gap:2px!important;
  }
}

/* Mobile: không đẩy hero dài ra. 22 dòng vẫn chạy lên,
   vùng trên mờ mạnh hơn để không phủ quá nhiều giao diện. */
@media(max-width:620px){
  .hero-logo-wrap > #mu-live-chat.mu-live-chat,
  .hero-logo-wrap > .mu-live-chat{
    left:50%!important;
    bottom:-2px!important;
    top:auto!important;
    width:100%!important;
    height:250px!important;
    min-height:250px!important;
    transform:translateX(-50%)!important;
    margin:0!important;
  }

  #mu-live-chat-lines.mu-live-chat-lines{
    padding:34px 3px 4px!important;
    gap:1px!important;
  }

  #mu-live-chat-lines > .mu-chat-line{
    font-size:11px!important;
    line-height:1.18!important;
    padding:1px 3px!important;
  }
}



/* =====================================================================
   V79 — NEWS RESTORE / PRIORITY QUICK CONTROL
   ===================================================================== */
.news-priority-admin-control{grid-column:1/-1;padding:10px 12px;border:1px solid color-mix(in srgb,#ffd257 24%,var(--line));border-radius:10px;background:color-mix(in srgb,#ffd257 5%,transparent)}
.news-priority-admin-control p{margin:5px 0 0;font-size:11px;line-height:1.45}
.news-priority-badge{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,#ffd257 16%,transparent);border:1px solid color-mix(in srgb,#ffd257 35%,var(--line));color:#ffd257;font-size:9px;font-weight:900;white-space:nowrap}
.news-priority-quick-form{margin:0}.news-priority-quick-form .priority-on{border-color:color-mix(in srgb,#ffd257 48%,var(--line));color:#ffd257;background:color-mix(in srgb,#ffd257 8%,var(--panel))}
.mobile-news-all-link{font-weight:900!important;border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))}

/* =====================================================================
   V87 — PLAYER ACCOUNT SECURITY / WEB↔GAME SYNC
   ===================================================================== */
.account-security-register{width:min(860px,100%)}
.security-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.security-question-box{margin:22px 0;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--accent) 4%,var(--panel))}
.security-question-box h2{margin:0 0 5px;font-size:21px}
.security-question-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:12px;align-items:end}
.security-question-row .select{width:100%;max-width:none}
.human-check{display:grid;grid-template-columns:1.1fr auto minmax(160px,.7fr);gap:14px;align-items:center;margin:18px 0;padding:15px 17px;border-radius:16px;border:1px solid color-mix(in srgb,#ffd257 28%,var(--line));background:color-mix(in srgb,#ffd257 5%,var(--panel))}
.human-check p{margin:4px 0 0}.human-check .field{margin:0}.human-code{min-width:128px;text-align:center;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,#ffd257 50%,var(--line));font:900 27px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:6px;color:#ffd257;background:rgba(0,0,0,.22);text-shadow:0 0 14px rgba(255,210,87,.35);user-select:none}
.account-security-notice{margin:18px 0}
.account-sync-card .value{font-size:clamp(18px,2.4vw,28px);line-height:1.1}.account-sync-value.sync-ok{color:#60e6a8}.account-sync-value.sync-warn{color:#ffd257}.account-sync-value.sync-bad{color:#ff6f7f}
.account-security-section{margin-top:42px}.account-security-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.security-panel{min-height:100%}.security-panel-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.security-panel-head b{font-size:20px}.security-panel-head p{margin:5px 0 0;line-height:1.5}
.security-status-pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:7px 10px;border-radius:999px;border:1px solid var(--line);font-size:10px;font-weight:900;letter-spacing:.06em}.security-status-pill.is-on{color:#60e6a8;border-color:color-mix(in srgb,#60e6a8 45%,var(--line));background:color-mix(in srgb,#60e6a8 8%,transparent)}.security-status-pill.is-off{color:#ffd257;border-color:color-mix(in srgb,#ffd257 45%,var(--line));background:color-mix(in srgb,#ffd257 8%,transparent)}
.security-answer-check{margin:18px 0;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:color-mix(in srgb,var(--accent) 3%,transparent)}.security-answer-check>b{display:block;margin-bottom:8px}.account-password-sync-note{margin:14px 0;padding:11px 12px;border-radius:12px;border-left:3px solid #60e6a8;background:color-mix(in srgb,#60e6a8 6%,var(--panel));font-size:12px;line-height:1.55;color:var(--muted)}.account-security-empty{padding:18px;border:1px dashed color-mix(in srgb,#ffd257 42%,var(--line));border-radius:14px;color:var(--muted);line-height:1.6}
@media(max-width:900px){.account-security-columns{grid-template-columns:1fr}.human-check{grid-template-columns:1fr auto}.human-check .field{grid-column:1/-1}.security-question-row{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.security-form-grid,.security-question-row{grid-template-columns:1fr}.human-check{grid-template-columns:1fr}.human-code{width:100%}.security-panel-head{flex-direction:column}.account-security-register{width:100%}}


/* ============================================================
   HAIDANGLUXE V88 - PLAYER 2FA / TOTP + RECOVERY CODES
   ============================================================ */
.two-factor-panel{position:relative;overflow:hidden}.two-factor-panel:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,#5ae6ff,#a87cff,#ffd257,transparent);opacity:.8}.two-factor-summary{padding:12px 14px;margin:0 0 15px;border-radius:14px;border:1px solid color-mix(in srgb,#60e6a8 28%,var(--line));background:color-mix(in srgb,#60e6a8 5%,var(--panel))}.two-factor-summary p{margin:5px 0 0}.two-factor-action-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.two-factor-action-form.danger-zone{border-top-color:color-mix(in srgb,#ff6c7d 35%,var(--line))}.totp-setup-box{padding:15px;border-radius:15px;border:1px solid color-mix(in srgb,#5ae6ff 28%,var(--line));background:color-mix(in srgb,#5ae6ff 4%,var(--panel));margin-bottom:14px}.totp-setup-box>p:first-child{margin-top:0}.totp-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 13px;align-items:center;margin:12px 0}.totp-meta span{color:var(--muted);font-size:12px}.totp-secret-label{font-size:12px;color:var(--muted);margin-top:8px}.totp-secret{display:block;overflow-wrap:anywhere;margin:7px 0 10px;padding:13px;border-radius:12px;border:1px dashed color-mix(in srgb,#ffd257 55%,var(--line));background:rgba(0,0,0,.2);color:#ffd257;font:900 16px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.4px}.totp-uri{margin:10px 0}.totp-uri summary{cursor:pointer;color:var(--muted);font-size:12px}.totp-uri textarea{width:100%;margin-top:8px;resize:vertical;font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}.totp-code-input{font:800 20px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:3px}.two-factor-cancel-form{margin-top:9px}.recovery-code-alert{margin:18px 0;border-color:color-mix(in srgb,#ffd257 50%,var(--line));box-shadow:0 0 28px color-mix(in srgb,#ffd257 9%,transparent)}.recovery-code-alert h2{margin:.35rem 0}.recovery-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.recovery-code-grid code{display:block;text-align:center;padding:10px 8px;border:1px dashed color-mix(in srgb,#ffd257 45%,var(--line));border-radius:10px;background:rgba(0,0,0,.2);color:#ffd257;font:800 14px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px}.two-factor-login-card{width:min(520px,100%)}.two-factor-account{display:inline-flex;margin:4px 0 16px;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));font-weight:800}.two-factor-hint{font-size:12px;line-height:1.55}
@media(max-width:620px){.recovery-code-grid{grid-template-columns:1fr}.totp-meta{grid-template-columns:1fr}.totp-secret{font-size:14px;letter-spacing:.8px}}


/* MU1982 - SINGLE FULL-PAGE BACKGROUND (opt-in, image only)
   Admin stores the image URL; index.php provides only the URL as a CSS variable.
   No extra hero image / duplicate layer. All old themes and modules are untouched. */
body.apps1982-fullpage-bg{
    background-color:var(--bg)!important;
    background-image:linear-gradient(rgba(3,8,15,.36),rgba(3,8,15,.36)),var(--apps1982-page-bg)!important;
    background-repeat:no-repeat!important;
    background-position:50% 0!important;
    background-size:100% 100%,100% auto!important;
    background-attachment:scroll!important;
}
/* Remove precisely the redundant hero BACKGROUND image, not its structure. */
body.apps1982-fullpage-bg #home > .hero::before{
    content:none!important;
    display:none!important;
    background-image:none!important;
}
/* Keep original hero effect canvases and logo/buttons. No movement of elements. */
body.apps1982-fullpage-bg #home > .hero{
    background-image:none!important;
    background-color:transparent!important;
}

/* MU1982 V6 - remove ONLY the rectangular Hero shade in full-page mode.
   The background image already lives on body, anchored top-center.
   No layout, canvas, download/chat, admin or theme changes. */
body.apps1982-fullpage-bg #home > .hero::after{
    content:none!important;
    display:none!important;
    background:none!important;
    opacity:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:none!important;
}

/* V7: Uniform 36% dark tint covers ENTIRE page image, not Hero only. */

/* =============================================================
   MU1982 V8 - NO HERO-ONLY DARK RECTANGLE, FULL PAGE UNIFORM TINT
   Scope: only when Admin enabled the existing fullpage background.
   No layout/element positioning is changed.
   ============================================================= */
html body.apps1982-fullpage-bg {
  background-color:var(--bg)!important;
  background-image:linear-gradient(rgba(3,8,15,.36),rgba(3,8,15,.36)),var(--apps1982-page-bg)!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%,100% auto!important;
  background-attachment:scroll!important;
}
/* Match the actual hero even if it is not a direct child of #home. */
html body.apps1982-fullpage-bg .hero:not(.hero-has-video),
html body.apps1982-fullpage-bg #home .hero:not(.hero-has-video) {
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.apps1982-fullpage-bg .hero:not(.hero-has-video)::before,
html body.apps1982-fullpage-bg .hero:not(.hero-has-video)::after,
html body.apps1982-fullpage-bg #home .hero:not(.hero-has-video)::before,
html body.apps1982-fullpage-bg #home .hero:not(.hero-has-video)::after {
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  opacity:0!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}


/* MU1982 HERO SUN RAYS + BURNING ARROW V1
   Pure additive visual layer. No module removal. */
.hero-cinematic-layer,
.hero-cinematic-layer *{
  pointer-events:none!important;
}
.hero-cinematic-layer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.hero-cinematic-layer .hero-sunburst{
  position:absolute;
  inset:0;
  overflow:hidden;
  mix-blend-mode:screen;
  opacity:.96;
}
.hero-cinematic-layer .hero-sunburst::before{
  content:"";
  position:absolute;
  right:-10%;
  top:7%;
  width:62%;
  height:88%;
  background:repeating-conic-gradient(
    from -24deg at 86% 52%,
    rgba(255,255,255,0) 0deg 5deg,
    rgba(255,233,168,.22) 5deg 7deg,
    rgba(255,196,72,.08) 7deg 12deg,
    rgba(255,255,255,0) 12deg 17deg
  );
  transform-origin:86% 52%;
  filter:blur(.5px) saturate(1.18);
  animation:heroSunRaysRotate 18s linear infinite, heroSunRaysPulse 4.8s ease-in-out infinite;
  mask-image:radial-gradient(circle at 86% 52%, rgba(0,0,0,.94) 0 7%, rgba(0,0,0,.78) 16%, rgba(0,0,0,.38) 42%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 86% 52%, rgba(0,0,0,.94) 0 7%, rgba(0,0,0,.78) 16%, rgba(0,0,0,.38) 42%, transparent 80%);
}
.hero-cinematic-layer .hero-sunburst::after{
  content:"";
  position:absolute;
  right:-4%;
  top:26%;
  width:31%;
  height:44%;
  border-radius:50%;
  background:
    radial-gradient(circle at 62% 50%, rgba(255,255,230,.98) 0 5%, rgba(255,239,177,.82) 6%, rgba(255,198,92,.56) 16%, rgba(255,154,48,.20) 33%, rgba(255,120,30,0) 64%),
    radial-gradient(circle at 70% 50%, rgba(255,230,140,.34), transparent 52%);
  filter:blur(4px);
  animation:heroSunCorePulse 3.4s ease-in-out infinite;
}
.hero-cinematic-layer .hero-arrow-fire{
  position:absolute;
  left:36%;
  top:60.2%;
  width:59%;
  height:20px;
  transform:rotate(-8.3deg);
  transform-origin:left center;
  mix-blend-mode:screen;
  opacity:.96;
}
.hero-cinematic-layer .hero-arrow-fire::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(255,126,28,0) 0%,
      rgba(255,170,40,.12) 10%,
      rgba(255,214,125,.35) 22%,
      rgba(255,167,34,.62) 45%,
      rgba(255,103,16,.92) 74%,
      rgba(255,244,214,.60) 87%,
      rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 9px rgba(255,176,58,.78),
    0 0 18px rgba(255,104,18,.56),
    0 0 34px rgba(255,76,0,.34);
  filter:blur(.25px);
  animation:heroArrowFlare 2.2s linear infinite;
}
.hero-cinematic-layer .hero-arrow-fire::after{
  content:"";
  position:absolute;
  right:-2.2%;
  top:50%;
  width:78px;
  height:56px;
  transform:translateY(-50%);
  border-radius:45% 55% 58% 42% / 55% 40% 60% 45%;
  background:
    radial-gradient(circle at 28% 50%, rgba(255,255,235,.98) 0 8%, rgba(255,228,122,.88) 14%, rgba(255,150,34,.72) 28%, rgba(255,88,10,.50) 48%, rgba(255,35,0,0) 80%),
    radial-gradient(circle at 72% 45%, rgba(255,210,88,.34), rgba(255,55,0,0) 70%);
  filter:blur(2px);
  box-shadow:0 0 20px rgba(255,180,52,.72), 0 0 38px rgba(255,86,15,.42);
  animation:heroArrowHeadFlicker 1.2s ease-in-out infinite;
}
.hero-cinematic-layer .hero-arrow-sparks{
  position:absolute;
  left:54.2%;
  top:54.2%;
  width:33%;
  height:17%;
  opacity:.88;
  mix-blend-mode:screen;
}
.hero-cinematic-layer .hero-arrow-sparks span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,225,.95) 0 16%, rgba(255,208,92,.90) 24%, rgba(255,120,30,.72) 48%, rgba(255,60,0,0) 75%);
  filter:blur(.25px);
  box-shadow:0 0 10px rgba(255,190,75,.75), 0 0 18px rgba(255,100,24,.42);
  animation:heroSparkFly var(--dur,1.7s) linear infinite;
  animation-delay:var(--delay,0s);
  left:var(--x,50%);
  top:var(--y,50%);
}
@keyframes heroSunRaysRotate{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(1.9deg) scale(1.015)}
  to{transform:rotate(0deg) scale(1)}
}
@keyframes heroSunRaysPulse{
  0%,100%{opacity:.78}
  50%{opacity:1}
}
@keyframes heroSunCorePulse{
  0%,100%{transform:scale(1);opacity:.80}
  50%{transform:scale(1.06);opacity:1}
}
@keyframes heroArrowFlare{
  0%{transform:translateX(0);filter:blur(.2px) brightness(.95)}
  50%{transform:translateX(1.2%);filter:blur(.35px) brightness(1.12)}
  100%{transform:translateX(0);filter:blur(.2px) brightness(.95)}
}
@keyframes heroArrowHeadFlicker{
  0%,100%{transform:translateY(-50%) scale(1) rotate(-2deg);opacity:.88}
  25%{transform:translateY(-51%) scale(1.06,1.02) rotate(1deg);opacity:1}
  55%{transform:translateY(-49%) scale(.96,1.06) rotate(-3deg);opacity:.86}
  80%{transform:translateY(-50%) scale(1.08,.98) rotate(2deg);opacity:1}
}
@keyframes heroSparkFly{
  0%{transform:translate(0,0) scale(.4);opacity:0}
  8%{opacity:.95}
  100%{transform:translate(var(--tx,38px), var(--ty,-24px)) scale(1.15);opacity:0}
}
@media(max-width:1100px){
  .hero-cinematic-layer .hero-sunburst::before{right:-14%;width:68%;height:86%}
  .hero-cinematic-layer .hero-sunburst::after{right:-7%;width:34%;height:42%}
  .hero-cinematic-layer .hero-arrow-fire{left:35%;top:60.8%;width:61%}
  .hero-cinematic-layer .hero-arrow-sparks{left:53%;top:55%;width:36%}
}
@media(max-width:900px){
  .hero-cinematic-layer .hero-sunburst::before{right:-26%;top:2%;width:92%;height:78%;opacity:.85}
  .hero-cinematic-layer .hero-sunburst::after{right:-16%;top:18%;width:46%;height:36%}
  .hero-cinematic-layer .hero-arrow-fire{left:32%;top:63%;width:66%;height:16px;transform:rotate(-6.7deg)}
  .hero-cinematic-layer .hero-arrow-fire::after{width:58px;height:42px}
  .hero-cinematic-layer .hero-arrow-sparks{left:50%;top:57%;width:42%;height:14%}
}
@media(max-width:620px){
  .hero-cinematic-layer .hero-sunburst::before{opacity:.70}
  .hero-cinematic-layer .hero-arrow-fire{left:29%;top:65.2%;width:70%;height:14px;transform:rotate(-4.8deg)}
  .hero-cinematic-layer .hero-arrow-fire::after{width:42px;height:32px}
  .hero-cinematic-layer .hero-arrow-sparks{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-cinematic-layer .hero-sunburst::before,
  .hero-cinematic-layer .hero-sunburst::after,
  .hero-cinematic-layer .hero-arrow-fire::before,
  .hero-cinematic-layer .hero-arrow-fire::after,
  .hero-cinematic-layer .hero-arrow-sparks span{animation:none!important}
}


/* MU1982 - CHOI NGAY / RANKINGS SAT TREN SHOWCASE (20261011)
   Buttons only. Logo, Hero, chat, modules and arrow are unchanged.
   Adjust --mu1982-actions-bottom to raise/lower both buttons together. */
#home > .hero {
  --mu1982-actions-bottom: 28px;
  position: relative;
}
/* Let the buttons use .hero as the positioning reference rather than .hero-copy. */
#home > .hero > .hero-copy {
  position: static !important;
}
#home > .hero > .hero-copy > .hero-actions61 {
  position: absolute !important;
  left: 50% !important;
  bottom: var(--mu1982-actions-bottom) !important;
  top: -520px !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content;
  max-width: 100%;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px;
  margin: 0 !important;
  padding: 0;
  z-index: 8 !important;
}
@media (max-width: 900px) {
  #home > .hero { --mu1982-actions-bottom: 18px; }
  #home > .hero > .hero-copy > .hero-actions61 { gap: 10px; }
  #home > .hero > .hero-copy > .hero-actions61 .hero-btn61 {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  #home > .hero > .hero-copy > .hero-actions61 .hero-btn61 img {
    max-width: 100% !important;
    height: auto !important;
  }
}