.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--color-border-subtle); border-radius: 6px; background: var(--color-surface); color: var(--color-text-soft); font: 500 .8125rem/1.5 var(--font-mono); text-decoration: none; cursor: pointer; }
.button:hover { background: var(--color-surface-hover); border-color: var(--color-muted); }
.button--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-header); }
.button--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.button:disabled { cursor: wait; opacity: .55; }
.button[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-surface); }
.page-status { color: var(--color-muted); font: .875rem/1.7 var(--font-mono); overflow-wrap: anywhere; }
.page-status[data-error="true"] { color: var(--color-error); }
.field { display: grid; gap: .5rem; }
.field label { font: 500 .8125rem/1.6 var(--font-mono); color: var(--color-text-soft); }
.field input, .field textarea, .field select { width: 100%; min-width: 0; padding: .875rem 1rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: 1rem/1.6 var(--font-sans); }
.field textarea { resize: vertical; }
.field-hint { margin: 0; color: var(--color-muted); font: .75rem/1.6 var(--font-mono); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }