:root{
  --jr-energy-blue:rgba(90,130,255,.95);
  --jr-energy-violet:rgba(130,70,255,.58);
  --jr-chrome-rim:rgba(236,244,255,.48);
  --jr-glass-border:rgba(130,160,255,.30);
}

.btn,.nav-toggle{
  min-height:50px;
  padding:15px 30px;
  border-radius:16px;
  font-size:.94rem;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.60);
  border:1px solid rgba(130,160,255,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 35%,rgba(10,12,25,.78) 100%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.13),inset 0 -1px 1px rgba(255,255,255,.03),0 10px 35px rgba(0,0,0,.45);
}
.btn::before,.nav-toggle::before{display:none}
.btn::after,.nav-toggle::after{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:74%;
  height:100%;
  z-index:1;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.05) 32%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.10) 66%,transparent 82%);
  transform:skewX(-25deg);
  opacity:.58;
  transition:left .95s cubic-bezier(.18,.78,.18,1),opacity .32s ease;
}
.btn:hover,.nav-toggle:hover{
  transform:translateY(-3px) translateZ(0);
  border-color:rgba(140,170,255,.65);
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 35%,rgba(15,18,35,.90) 100%);
  box-shadow:0 0 18px rgba(100,120,255,.32),0 0 45px rgba(90,70,255,.18),0 13px 42px rgba(0,0,0,.60),inset 0 1px 1px rgba(255,255,255,.16);
  filter:none;
}
.btn:hover::after,.nav-toggle:hover::after{left:160%;opacity:.95}
.btn:active,.nav-toggle:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 0 12px rgba(120,140,255,.25),inset 0 2px 8px rgba(0,0,0,.48),0 6px 18px rgba(0,0,0,.36);
}
.btn[disabled],button[disabled],.btn.is-disabled{
  opacity:.46;
  cursor:not-allowed;
  filter:saturate(.55) brightness(.82);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.24);
}

/* Primary = Family 06 glass neural. */
.btn.primary,.btn.glass.primary{
  border-color:var(--jr-glass-border);
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.045) 35%,rgba(10,12,25,.82) 100%);
}
.btn.primary::before{
  content:"";
  display:block;
  position:absolute;
  left:-15%;
  bottom:-14px;
  width:130%;
  height:34px;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(circle at center,var(--jr-energy-blue),var(--jr-energy-violet),transparent 75%);
  filter:blur(13px);
  opacity:0;
  transition:opacity .40s ease;
}
.btn.primary:hover::before{opacity:.82}

/* Secondary = Family 07 machined black chrome. */
.btn.secondary,.nav-toggle,.btn.titanium,.btn.ghost{
  border-radius:18px;
  border-color:var(--jr-chrome-rim);
  background:radial-gradient(90% 100% at 50% -35%,rgba(255,255,255,.42),rgba(255,255,255,.10) 32%,transparent 52%),linear-gradient(180deg,#24292d 0%,#101418 46%,#050608 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.42),inset 0 -3px 7px rgba(0,0,0,.82),inset 0 0 0 2px rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.09);
  color:#fff;
}
.btn.secondary::before,.nav-toggle::before,.btn.titanium::before,.btn.ghost::before{
  content:"";
  display:block;
  position:absolute;
  inset:5px;
  z-index:-1;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.20),inset 0 -1px 1px rgba(0,0,0,.80);
}
.btn.secondary:hover,.nav-toggle:hover,.btn.titanium:hover,.btn.ghost:hover{
  filter:brightness(1.10);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.54),inset 0 -3px 7px rgba(0,0,0,.85),0 16px 38px rgba(0,0,0,.70),0 0 22px rgba(220,235,255,.18);
}

/* Precision remains available as the restrained technical path. */
.btn.precision{
  border-radius:10px;
  border-color:rgba(93,137,255,.46);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),#0f1115;
  box-shadow:0 10px 28px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.03);
}

html[data-theme="light"] .btn,html[data-theme="light"] .nav-toggle{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.58);
}
html[data-motion="reduced"] .btn::after,html[data-motion="reduced"] .nav-toggle::after{display:none}
