/* Base */
.btns {
  --bg:#2563eb; 
  --fg:#fff; 
  --br:6px; 
  --bd:1px solid transparent;
  --py:.55rem; 
  --px:.9rem; 
  --gap:.5rem; 
  --shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:var(--gap);
  border-radius:var(--br); 
  border:var(--bd);
  background:var(--bg); 
  color:var(--fg); 
  text-decoration:none; 
  white-space:nowrap;
  height: 37px;
  font-size: 10.5px;
  font-weight: 600;
  width: 100%;
  cursor:pointer;
  box-shadow:var(--shadow); 
  transition:transform .06s ease, filter .2s ease, background .2s ease;
  user-select:none;
}
.btns:active { transform: translateY(1px) }
.btns[disabled], .btns[aria-busy="true"] { opacity:.65; cursor:not-allowed }

/* Variants */
.btns--primary   { --bg:#0083f6; --fg:#fff }
.btns--secondary { --bg:transparent; --fg:#0083f6; --shadow: none; }
.btns--success   { --bg:#059669; --fg:#fff }
.btns--danger    { --bg:#dc2626; --fg:#fff }
.btns--warning   { --bg:#d97706; --fg:#fff }
.btns--ghost     { --bg:#ECECED; --fg:#85888E; }
.btns--outline   { --bg:#fff; --fg:#111827; --bd:1px solid #d1d5db }

/* Sizes */
.btns--sm { --py:.375rem; --px:.7rem; font-size:12px }
.btns--lg { --py:.75rem;  --px:1.1rem; font-size:16px }

/* Shapes */
.btns--pill   { --br:999px }
.btns--square { --px: var(--py); width:2.5rem; aspect-ratio:1/1; padding:0; }

/* Loading */
.btns__spinner{
  width:1em;height:1em;border:.18em solid currentColor;border-right-color:transparent;
  border-radius:50%; display:inline-block; animation: spin .8s linear infinite
}
@keyframes spin { to { transform: rotate(360deg) } }
.btnss__icon { width:1.1em; height:1.1em; display:inline-block; }