/* ================================================================
   HERO BUTTONS V61 — ISOLATED ENGINE
   This file is loaded AFTER app.css.
   Old hero button classes are not used at all.
   ================================================================ */

.hero-actions61{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

/* Exact original button footprint */
.hero-actions61 .hero-btn61{
  --hb61-base1:var(--accent);
  --hb61-base2:var(--accent2);
  --hb61-fg:var(--theme-btn-text,#071019);

  position:relative !important;
  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;
  margin:0 !important;
  padding:12px 18px !important;
  line-height:1.2 !important;
  font-size:inherit !important;
  flex:0 0 auto !important;
  overflow:hidden !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
  transform:none !important;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--hb61-base1) 25%,var(--line));
  color:var(--hb61-fg) !important;
  background:linear-gradient(135deg,var(--hb61-base1),var(--hb61-base2)) !important;
  box-shadow:none;
  text-decoration:none;
}

/* Locked = admin colors. Unlocked = theme colors. */
.hero-actions61 .hero-btn61[data-locked="1"]{
  --hb61-base1:var(--hb61-c1);
  --hb61-base2:var(--hb61-c2);
  --hb61-fg:var(--hb61-text);
}
.hero-actions61 .hero-btn61[data-locked="0"]{
  --hb61-base1:var(--accent);
  --hb61-base2:var(--accent2);
  --hb61-fg:var(--theme-btn-text,#071019);
}

/* Image button is isolated too. */
.hero-actions61 .hero-btn61[data-type="image"]{
  background:var(--hb61-image) center/100% 100% no-repeat !important;
  color:var(--hb61-fg) !important;
  border-color:transparent !important;
}

.hero-actions61 .hero-btn61:hover{
  transform:none !important;
  filter:brightness(1.05);
}

/* Internal layers */
.hero-actions61 .hero-btn61 .hb61-material,
.hero-actions61 .hero-btn61 .hb61-light,
.hero-actions61 .hero-btn61 .hb61-edge{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}
.hero-actions61 .hero-btn61 .hb61-material{z-index:1}
.hero-actions61 .hero-btn61 .hb61-light{z-index:6;overflow:hidden}
.hero-actions61 .hero-btn61 .hb61-edge{z-index:7}
.hero-actions61 .hero-btn61 .hb61-label{
  position:relative;
  z-index:10;
  color:inherit;
}

/* ---------------- 3D LIBRARY — material layer only ---------------- */
.hero-btn61[data-style3d="flat"] .hb61-material{
  background:transparent;
  box-shadow:none;
}
.hero-btn61[data-style3d="soft"] .hb61-material{
  box-shadow:inset 0 2px 1px rgba(255,255,255,.26), inset 0 -4px 6px rgba(0,0,0,.20);
}
.hero-btn61[data-style3d="bevel"] .hb61-material{
  box-shadow:inset 0 4px 1px rgba(255,255,255,.30), inset 0 -6px 8px rgba(0,0,0,.30);
}
.hero-btn61[data-style3d="bevel"]{
  border-top-color:rgba(255,255,255,.55) !important;
}
.hero-btn61[data-style3d="glass"] .hb61-material{
  inset:2px 4px 52% 4px;
  border-radius:999px 999px 45% 45%;
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.hero-btn61[data-style3d="metal"]{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--hb61-base1) 45%,#fff 55%) 0%,
    var(--hb61-base1) 30%,
    color-mix(in srgb,var(--hb61-base2) 65%,#20242a 35%) 68%,
    color-mix(in srgb,var(--hb61-base2) 38%,#000 62%) 100%) !important;
}
.hero-btn61[data-style3d="metal"] .hb61-material{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.50), inset 0 -3px 5px rgba(0,0,0,.42);
}
.hero-btn61[data-style3d="chrome"]{
  background:linear-gradient(180deg,#fff 0%,#c6ced7 18%,#515b66 42%,#f8fafc 51%,#68727d 70%,#20242a 100%) !important;
  color:#111 !important;
}
.hero-btn61[data-style3d="chrome"] .hb61-label{text-shadow:0 1px 0 rgba(255,255,255,.72)}
.hero-btn61[data-style3d="neon"]{
  background:#07090e !important;
  color:#fff !important;
  border-color:var(--hb61-base1) !important;
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--hb61-base1) 36%,transparent),
             0 0 8px color-mix(in srgb,var(--hb61-base1) 55%,transparent);
}
.hero-btn61[data-style3d="crystal"]{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--hb61-base1) 40%,#fff 60%),
    var(--hb61-base1) 34%,
    color-mix(in srgb,var(--hb61-base2) 55%,#fff 45%) 67%,
    var(--hb61-base2)) !important;
}
.hero-btn61[data-style3d="crystal"] .hb61-material{
  box-shadow:inset 2px 2px 1px rgba(255,255,255,.38), inset -3px -3px 6px rgba(0,0,0,.20);
}
.hero-btn61[data-style3d="armor"]{
  clip-path:polygon(7% 0,93% 0,100% 28%,96% 100%,4% 100%,0 28%);
}
.hero-btn61[data-style3d="armor"] .hb61-material{
  box-shadow:inset 0 3px 1px rgba(255,255,255,.25), inset 0 -5px 7px rgba(0,0,0,.30);
}
.hero-btn61[data-style3d="obsidian"]{
  background:radial-gradient(circle at 28% 15%,rgba(255,255,255,.15),transparent 20%),
             linear-gradient(145deg,#25292e,#050607 60%,color-mix(in srgb,var(--hb61-base2) 22%,#050607 78%)) !important;
  color:#fff !important;
}
.hero-btn61[data-style3d="obsidian"] .hb61-material{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.10), inset 0 -4px 7px rgba(0,0,0,.56);
}
.hero-btn61[data-style3d="goldplate"]{
  background:linear-gradient(180deg,#fff2a7 0%,#e8bd4a 24%,#a86a1f 58%,#6c390d 78%,#d9a83c 100%) !important;
  color:#281607 !important;
}
.hero-btn61[data-style3d="goldplate"] .hb61-label{text-shadow:0 1px 0 rgba(255,255,255,.58)}
.hero-btn61[data-style3d="arcane"]{
  background:radial-gradient(circle at 26% 18%,rgba(255,255,255,.20),transparent 20%),
             linear-gradient(135deg,var(--hb61-base1),var(--hb61-base2)) !important;
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--hb61-base1) 28%,transparent);
}

/* ---------------- LIGHT ENGINE — dedicated hb61-light only ---------------- */
.hero-btn61 .hb61-light{
  opacity:0;
}

/* sweep visual templates */
.hero-btn61[data-light="shimmer"] .hb61-light,
.hero-btn61[data-light="scan_lr"] .hb61-light,
.hero-btn61[data-light="scan_rl"] .hb61-light,
.hero-btn61[data-light="diagonal"] .hb61-light,
.hero-btn61[data-light="laser"] .hb61-light,
.hero-btn61[data-light="gold"] .hb61-light,
.hero-btn61[data-light="ice"] .hb61-light,
.hero-btn61[data-light="plasma"] .hb61-light,
.hero-btn61[data-light="fire"] .hb61-light,
.hero-btn61[data-light="electric"] .hb61-light{
  top:-70%;
  bottom:-70%;
  right:auto;
  height:auto;
  width:30%;
  border-radius:0;
}
.hero-btn61[data-light="shimmer"] .hb61-light{
  background:linear-gradient(90deg,transparent,#ffffff22,#fff,#ffffff22,transparent);
}
.hero-btn61[data-light="scan_lr"] .hb61-light,
.hero-btn61[data-light="scan_rl"] .hb61-light{
  width:8%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 10px #fff,0 0 18px var(--hb61-base1);
}
.hero-btn61[data-light="diagonal"] .hb61-light{
  width:16%;
  transform:skewX(-34deg);
  background:linear-gradient(90deg,transparent,#ffffff55,#fff,#ffffff22,transparent);
}
.hero-btn61[data-light="laser"] .hb61-light{
  width:3px;
  background:#fff;
  box-shadow:0 0 7px #fff,0 0 15px var(--hb61-base1),0 0 25px var(--hb61-base2);
}
.hero-btn61[data-light="gold"] .hb61-light{
  background:linear-gradient(90deg,transparent,#ffb72c66,#fff0a8,#ffb72c99,transparent);
  box-shadow:0 0 18px #ffc44f99;
}
.hero-btn61[data-light="ice"] .hb61-light{
  background:linear-gradient(90deg,transparent,#75dcff66,#fff,#62d0ff99,transparent);
  box-shadow:0 0 18px #77ddff99;
}
.hero-btn61[data-light="plasma"] .hb61-light{
  background:linear-gradient(90deg,transparent,#49eaff77,#ce6aff,#6c5cff99,transparent);
  box-shadow:0 0 19px #9868ff99;
}
.hero-btn61[data-light="fire"] .hb61-light{
  background:linear-gradient(90deg,transparent,#ff452766,#ffb82f,#fff0a4,#ff4c2577,transparent);
  box-shadow:0 0 19px #ff642f99;
}
.hero-btn61[data-light="electric"] .hb61-light{
  width:7%;
  background:linear-gradient(90deg,transparent,#82ebff,#fff,#4dd7ff,transparent);
  box-shadow:0 0 19px #5cddff;
}

/* Non-sweep visuals */
.hero-btn61[data-light="scan_vertical"] .hb61-light{
  left:-8%;right:-8%;width:auto;height:3px;bottom:auto;
  background:linear-gradient(90deg,transparent,#fff,var(--hb61-base1),#fff,transparent);
  box-shadow:0 0 13px var(--hb61-base1);
}
.hero-btn61[data-light="aura"] .hb61-light,
.hero-btn61[data-light="edge_glow"] .hb61-light,
.hero-btn61[data-light="pulse"] .hb61-light,
.hero-btn61[data-light="dual_flow"] .hb61-light,
.hero-btn61[data-light="dual_pulse"] .hb61-light,
.hero-btn61[data-light="chromatic"] .hb61-light{
  inset:0;
}
.hero-btn61[data-light="dual_flow"] .hb61-light{
  background:linear-gradient(115deg,var(--hb61-base1),var(--hb61-base2),var(--hb61-base1),var(--hb61-base2));
  background-size:300% 300%;
  opacity:.42;
}
.hero-btn61[data-light="dual_pulse"] .hb61-light{
  background:linear-gradient(135deg,var(--hb61-base1),var(--hb61-base2));
}
.hero-btn61[data-light="ripple"] .hb61-light{
  left:50%;top:50%;right:auto;bottom:auto;width:8px;height:8px;border:2px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%);
}
.hero-btn61[data-light="border_run"] .hb61-edge{
  inset:0;
  border:2px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             conic-gradient(from 0deg,var(--hb61-base1),#fff,var(--hb61-base2),var(--hb61-base1)) border-box;
}

/* No CSS animation here. Dedicated JS owns the animation state per button. */

@media(max-width:560px){
  .hero-actions61 .hero-btn61{flex:1 1 0 !important}
}