/* Xenyra buttons (T2): one shared module for every Xenyra page (hub, sections, install, later CRM).
   .xh-btn + .xh-btn-primary (gradient) or .xh-btn-outline (glass). The living Xenyra ring turns around the edge.
   Moved here from hub.css + hub-ring.css (not copied). Colours come from tokens.css. Pure decoration, no logic. */
@property --xb-a{syntax:'<angle>';inherits:false;initial-value:0deg}

.xh-btn{position:relative;isolation:isolate;text-decoration:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:16px 28px;font-size:16px;font-weight:400;min-height:52px;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .2s,background .2s}
.xh-btn:hover{transform:translateY(-1px)}
.xh-btn:focus-visible{outline:3px solid var(--xt-focus);outline-offset:3px}
.xh-btn-primary{color:#fff;background:linear-gradient(135deg,#3355ff,#7a4df5);box-shadow:0 10px 30px rgba(70,80,240,.28)}
.xh-btn-primary:hover{box-shadow:0 14px 36px rgba(70,80,240,.38)}
.xh-btn-outline{background:var(--xt-surface);color:var(--xt-ink);border:1px solid var(--xt-line-2)}
.xh-btn-outline:hover{border-color:var(--xt-line-hi);background:var(--xt-surface-2)}

/* the living ring: a thin rotating border plus a soft glow behind it */
.xh-btn::before,.xh-btn::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--xb-a),#00e5ff,#1d7cff,#b026ff,#00e5ff);opacity:0;
  transition:opacity .25s,inset .25s;animation:xb-turn 3s linear infinite}
.xh-btn::before{inset:-3px;padding:3px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.xh-btn::after{inset:-2px;filter:blur(14px);z-index:-1}
.xh-btn-primary::before{opacity:.85}
.xh-btn-primary::after{opacity:.35}
.xh-btn-primary:hover::before,.xh-btn-primary:focus-visible::before{inset:-7px;opacity:1}
.xh-btn-primary:hover::after,.xh-btn-primary:focus-visible::after{inset:-8px;opacity:.75}
.xh-btn-outline:hover::before,.xh-btn-outline:focus-visible::before{opacity:1}
.xh-btn-outline:hover::after,.xh-btn-outline:focus-visible::after{opacity:.6}
@keyframes xb-turn{to{--xb-a:360deg}}

@media(max-width:540px){.xh-btn{font-size:13px}}
@media(prefers-reduced-motion:reduce){.xh-btn{transition:none}.xh-btn::before,.xh-btn::after{animation:none}}