/* buttons.css */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 38px; padding: 0 var(--s-3);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  color: var(--fg);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  transition: background .14s, border-color .14s, color .14s, transform .12s;
}
.btn:hover { background: var(--bg-hover); border-color: var(--line); }
.btn:active { transform: translateY(0.5px); }
.btn .ico { width: 15px; height: 15px; }

.btn-ghost  { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--fg); border-color: transparent; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  border-color: var(--accent-deep);
  color: oklch(0.16 0.01 80); font-weight: 600;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.18) inset, 0 1px 2px oklch(0 0 0 / 0.4);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-steel {
  background: var(--steel-soft);
  border-color: oklch(0.74 0.06 225 / 0.35);
  color: var(--steel);
}
.btn-steel:hover { background: oklch(0.74 0.06 225 / 0.22); }

.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: oklch(0.70 0.17 25 / 0.35); }

.btn-sm { height: 30px; padding: 0 var(--s-2); font-size: 12px; }
.btn-icon { width: 38px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 30px; }

.kbd {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px;
  color: var(--fg-dim); background: var(--bg-deep);
  margin-left: var(--s-2);
}