.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--fg);
  font-size: var(--text-md); white-space: nowrap;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--bg-hover); }
.btn.primary { border-color: transparent; background: var(--accent-solid); color: var(--accent-contrast); }
.btn.primary:hover:not(:disabled) { background: var(--accent-solid); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.danger { color: var(--red); }
.btn.danger.primary { background: var(--red); color: #fff; }
.btn.danger.primary:hover:not(:disabled) { background: var(--red); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-secondary); }
.btn.ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--fg); }
.btn.sm { height: 24px; padding: 0 8px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--fg-secondary);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.icon-btn:hover:not(:disabled), .icon-btn[aria-pressed="true"], .icon-btn[aria-expanded="true"] { background: var(--bg-hover); color: var(--fg); }
.icon-btn[aria-pressed="true"], .icon-btn[aria-expanded="true"] { background: var(--accent-bg); color: var(--accent); }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn.sm { width: 22px; height: 22px; border-radius: var(--radius-sm); }
.input, .textarea, .select {
  width: 100%; min-height: 32px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg); color: var(--fg); font-size: var(--text-md); outline: 0;
}
.textarea { resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-glow); }