.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius: 12px; font-weight:700; border:1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--accent-soft); color: var(--accent-contrast); border: none; }
.btn-ghost { background: transparent; border-color: var(--border); }

.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.card-header { padding: 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.card-body { padding: 18px; }

.input, .textarea, .select {
  width: 100%; background: var(--surface); color: var(--text);
  border:1px solid var(--border); border-radius: 12px; padding: .65rem .8rem; font: inherit;
}
.input:focus, .textarea:focus, .select:focus { outline: 3px solid var(--ring); }

.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .85em; background: var(--brand-gray-100); padding: .2rem .4rem; border-radius: 6px; border:1px solid var(--border); }