/* V106 — Human Maximus BlackGlass Button Standard
   Permanent direction: glossy black, white type, platinum edge,
   subtle purple light beneath the button, clean icons, real elevation. */

:root{
  --hmb-black-0:#010203;
  --hmb-black-1:#05070a;
  --hmb-black-2:#0d1117;
  --hmb-black-3:#1a2029;
  --hmb-white:#ffffff;
  --hmb-silver:#d9e0e9;
  --hmb-purple:#a565ff;
  --hmb-purple-deep:#5e1eb7;
  --hmb-purple-glow:rgba(165,101,255,.42);
}

/* One button anatomy for the whole ecosystem */
.hm-tech-btn,
.hub-course-login,
.hub-start-free-cta,
.topbar #submitSearch,
.topbar .premium,
.mobile-start-free{
  position:relative!important;
  isolation:isolate!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  color:var(--hmb-white)!important;
  border:1px solid rgba(245,248,252,.90)!important;
  border-bottom-color:rgba(133,142,154,.86)!important;
  border-radius:16px!important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 8%,
      rgba(255,255,255,.015) 18%,
      transparent 22%),
    linear-gradient(180deg,
      var(--hmb-black-3) 0%,
      #121720 23%,
      var(--hmb-black-2) 52%,
      var(--hmb-black-1) 76%,
      var(--hmb-black-0) 100%)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -10px 18px rgba(0,0,0,.60) inset,
    0 0 0 1px rgba(255,255,255,.055),
    0 7px 0 -4px rgba(0,0,0,.90),
    0 15px 28px rgba(0,0,0,.72),
    0 17px 26px -17px var(--hmb-purple-glow)!important;
  transform:translateY(0) translateZ(0)!important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease!important;
  text-decoration:none!important;
}

/* Purple light sits UNDER the button instead of covering its face */
.hm-tech-btn::after,
.hub-course-login::after,
.hub-start-free-cta::after,
.topbar #submitSearch::after,
.topbar .premium::after,
.mobile-start-free::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:13%!important;
  right:13%!important;
  bottom:-9px!important;
  height:13px!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at center,
    rgba(177,111,255,.58) 0%,
    rgba(130,55,234,.34) 38%,
    rgba(87,25,160,.12) 68%,
    transparent 78%)!important;
  filter:blur(5px)!important;
  pointer-events:none!important;
}

/* Fine metal inner rim */
.hm-tech-btn::before,
.hub-course-login::before,
.hub-start-free-cta::before,
.topbar #submitSearch::before,
.topbar .premium::before,
.mobile-start-free::before{
  content:""!important;
  position:absolute!important;
  inset:3px!important;
  border-radius:12px!important;
  border:1px solid rgba(220,228,237,.17)!important;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent),
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 25%)!important;
  pointer-events:none!important;
  z-index:0!important;
}

.hm-tech-btn > *,
.hub-course-login > *,
.hub-start-free-cta > *,
.topbar #submitSearch > *,
.topbar .premium > *,
.mobile-start-free > *{
  position:relative!important;
  z-index:2!important;
}

/* Crisp universal label */
.hm-label,
.hub-course-login .hm-label,
.hub-start-free-cta .hm-label,
.topbar #submitSearch .hm-label,
.mobile-start-free .hm-label,
.topbar .premium-label strong,
.topbar .premium-label small{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 8px rgba(255,255,255,.05)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}

.hm-label,
.hub-course-login .hm-label,
.hub-start-free-cta .hm-label,
.topbar #submitSearch .hm-label,
.mobile-start-free .hm-label{
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.085em!important;
  white-space:nowrap!important;
}

/* New icon family: small, precise, instrument-panel icons */
.hm-icon{
  width:31px!important;
  height:31px!important;
  flex:0 0 31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  color:#fff!important;
  border:1px solid rgba(245,248,252,.84)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.025) 28%,transparent 32%),
    radial-gradient(circle at 36% 28%,#d8baff 0%,#a765ff 24%,#7532dc 50%,#3a0f75 76%,#130321 100%)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 -7px 10px rgba(0,0,0,.42) inset,
    0 0 0 1px rgba(0,0,0,.34),
    0 0 12px rgba(165,101,255,.30)!important;
}

.hm-icon svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.65))!important;
}

/* Dimensions and special layouts */
.hub-course-login{
  min-height:50px!important;
  padding:0 17px!important;
}

.hub-start-free-cta{
  min-width:158px!important;
  min-height:50px!important;
  padding:0 18px 0 10px!important;
}

.topbar #submitSearch{
  width:116px!important;
  min-width:116px!important;
  height:46px!important;
  padding:0 13px 0 8px!important;
}

.topbar .premium{
  width:230px!important;
  min-width:230px!important;
  height:56px!important;
  padding:0 16px 0 10px!important;
  justify-content:flex-start!important;
  border-radius:18px!important;
}

.topbar .premium-label{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
  line-height:1!important;
}

.topbar .premium-label strong{
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:.075em!important;
  white-space:nowrap!important;
}

.topbar .premium-label small{
  margin-top:5px!important;
  font-size:8px!important;
  font-weight:850!important;
  letter-spacing:.15em!important;
  color:#d4dae3!important;
  -webkit-text-fill-color:#d4dae3!important;
  white-space:nowrap!important;
}

.mobile-start-free{
  min-height:54px!important;
  padding:0 16px 0 11px!important;
}

/* Hover: lift, sharpen metal, increase underglow slightly */
.hm-tech-btn:hover,
.hub-course-login:hover,
.hub-start-free-cta:hover,
.topbar #submitSearch:hover,
.topbar .premium:hover,
.mobile-start-free:hover,
.hm-tech-btn:focus-visible,
.hub-course-login:focus-visible,
.hub-start-free-cta:focus-visible,
.topbar #submitSearch:focus-visible,
.topbar .premium:focus-visible,
.mobile-start-free:focus-visible{
  transform:translateY(-3px) translateZ(0)!important;
  filter:brightness(1.07)!important;
  border-color:#fff!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 -10px 18px rgba(0,0,0,.62) inset,
    0 0 0 1px rgba(255,255,255,.08),
    0 8px 0 -4px rgba(0,0,0,.92),
    0 20px 34px rgba(0,0,0,.78),
    0 22px 34px -16px rgba(165,101,255,.58)!important;
}

/* Pressed: physical movement into the panel */
.hm-tech-btn:active,
.hub-course-login:active,
.hub-start-free-cta:active,
.topbar #submitSearch:active,
.topbar .premium:active,
.mobile-start-free:active{
  transform:translateY(2px) scale(.988)!important;
  filter:brightness(.94)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 4px 10px rgba(0,0,0,.66),
    0 7px 15px -9px rgba(165,101,255,.30)!important;
}

/* Primary command gets a slightly brighter instrument icon, not a brighter face */
.topbar .premium .hm-icon,
.hub-start-free-cta .hm-icon,
.mobile-start-free .hm-icon{
  box-shadow:
    0 1px 0 rgba(255,255,255,.48) inset,
    0 -7px 10px rgba(0,0,0,.44) inset,
    0 0 0 1px rgba(0,0,0,.34),
    0 0 15px rgba(165,101,255,.42)!important;
}

/* Keep microphone deliberately quiet */
.topbar #voiceSearch{
  color:#fff!important;
  border:1px solid rgba(220,226,235,.50)!important;
  background:linear-gradient(180deg,#11151b,#040507)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -7px 12px rgba(0,0,0,.52) inset,
    0 8px 16px rgba(0,0,0,.52)!important;
}

/* Mobile */
@media(max-width:900px){
  .topbar .premium{display:none!important}
  .topbar #submitSearch{
    width:50px!important;
    min-width:50px!important;
    padding:0!important;
  }
  .topbar #submitSearch .hm-label{display:none!important}
  .topbar #submitSearch .hm-icon{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hm-tech-btn,
  .hub-course-login,
  .hub-start-free-cta,
  .topbar #submitSearch,
  .topbar .premium,
  .mobile-start-free{
    transition:none!important;
  }
}