/* REUSABLE CARDS, BUTTONS, FORM FIELDS, AND THEME PICKERS. */
.card { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .7rem 1rem; border: 1px solid transparent; border-radius: .7rem; background: var(--action); color: var(--on-action); text-decoration: none; font-weight: 650; font-size: .9rem; text-align: center; }
.button:hover { filter: brightness(.96); }
.button.secondary { color: var(--text); background: var(--surface); border-color: var(--border); }
.button.small { font-size: .8rem; padding: .5rem .7rem; }
.badge { display: inline-block; width: fit-content; color: var(--link); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem; font-size: .72rem; font-weight: 650; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: var(--surface); color: var(--link); flex-shrink: 0; }
.icon-tile.large { width: 4rem; height: 4rem; border-radius: 1.2rem; }
.icon-tile.large .icon { width: 1.9rem; height: 1.9rem; }
.field { margin: 1.25rem 0; }
.field label { display: block; margin-bottom: .4rem; font-weight: 650; font-size: .9rem; }
.field input, .theme-picker select { color: var(--text); background: var(--background); border: 1px solid var(--border); border-radius: .65rem; min-height: 2.75rem; }
.field input { display: block; width: 100%; padding: .75rem .85rem; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.help-text { display: block; font-size: .8rem; margin-top: .45rem; }
.help-text ul { padding-left: 1.2rem; }
.errorlist { color: var(--error); padding-left: 1.2rem; font-size: .85rem; }
.form-links { display: grid; gap: .7rem; margin-top: 1.5rem; font-size: .9rem; }
.messages { padding: .25rem 1rem; margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; }
.messages p { margin: .7rem 0; }
.theme-picker label { display: block; font-size: .85rem; font-weight: 650; margin-bottom: .4rem; }
.theme-picker select { padding: .5rem .8rem; min-width: 9rem; }
.theme-picker-compact select { min-width: 0; width: 6rem; padding: .4rem .45rem; font-size: .8rem; background: var(--card); }