/* Prefixed so Bootstrap's .btn on old pages is untouched. Six styles: primary, secondary, danger, small, icon, link. */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; line-height: 1.3; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none }
.ui-btn:hover { background: var(--surface2); text-decoration: none; color: var(--fg) }
.ui-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.ui-btn:disabled { opacity: .5; cursor: not-allowed }
.ui-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600 }
.ui-btn--primary:hover { background: #1a52a6; color: var(--accent-fg) }
.ui-btn--danger { background: var(--bad); border-color: var(--bad); color: #fff }
.ui-btn--danger:hover { background: #a32e22; color: #fff }
.ui-btn--small { padding: 3px 9px; font-size: 13px }
.ui-btn--icon { padding: 4px; border-color: transparent; background: transparent; color: var(--muted) }
.ui-btn--link { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline }
.ui-btn--link:hover { background: none; color: var(--accent) }

.toast-region { position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 2000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none }
.toast { pointer-events: auto; max-width: 420px; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 4px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); font: 14px/1.4 var(--font-ui) }
.toast--warning { border-left-color: var(--warn) }
.toast__message { flex: 1; overflow-wrap: anywhere }