/* Buttons */
.btn{ --ring: transparent; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; font-weight:600; text-decoration:none; color:var(--text); border:1px solid var(--border); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  background: linear-gradient(180deg, rgba(17,25,46,0.7), rgba(13,20,40,0.5)); }
.btn::after{ content:""; position:absolute; inset:-2px; border-radius:14px; background: radial-gradient(120px 60px at 50% 0%, rgba(99,102,241,0.35), transparent 60%); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--glow); border-color: rgba(99,102,241,0.5); }
.btn:hover::after{ opacity:1 }
.btn-primary{ background: radial-gradient(120% 120% at 0% 0%, rgba(168,85,247,0.2), transparent 60%),
                         radial-gradient(120% 120% at 100% 0%, rgba(6,182,212,0.2), transparent 60%),
                         linear-gradient(180deg, rgba(23,32,56,0.85), rgba(18,26,48,0.6));
  border-color: rgba(99,102,241,0.5);
}
.btn[disabled], .btn:disabled{
  opacity: .6; cursor: not-allowed; filter: grayscale(.15);
  box-shadow: none; transform: none;
}
.btn-secondary{ background: linear-gradient(180deg, rgba(16,23,44,0.6), rgba(13,20,40,0.45)); }

.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; padding:.2em .45em; border:1px solid var(--border); border-radius:6px; background: rgba(12,18,36,0.6);} 

/* Button groups */
.btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }