button, input[type="submit"], .btn, a.btn-text {
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h);
  background: var(--fo-surface-hover);
  color: var(--fo-text);
  border: var(--border-w) solid var(--fo-button-border);
  border-radius: var(--fo-radius-control);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease, transform .15s ease;
}
button:hover { background: var(--fo-surface); border-color: var(--color-accent); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
button:disabled:hover { background: var(--fo-surface-hover); border-color: var(--fo-button-border); }

a.btn, a.btn-text { text-decoration: none; }

button.danger { background: none; border-color: var(--color-danger); color: var(--color-danger); }
button.danger:hover { background: var(--color-danger); color: var(--color-on-accent); }

button.btn-text, a.btn-text {
  background: none; border: none; padding: 8px 4px; min-height: auto;
  color: var(--color-accent); font-weight: 600;
}
button.btn-text:hover, a.btn-text:hover { background: none; text-decoration: underline; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

.fo-btn {
  --btn-bg: var(--fo-action-bg); --btn-hover: var(--fo-action-hover);
  --btn-pressed: var(--fo-action-pressed); --btn-text: var(--fo-dark-ink);
  --btn-current: var(--btn-bg); --btn-inset: 1px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--control-h); padding: 11px 26px;
  border: 0; clip-path: var(--fo-shape-button);
  background: var(--fo-button-border); color: var(--btn-text);
  font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-ui); line-height: 1.3;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 0 #00000030;
  transition: background-color .12s ease, transform .12s ease;
  overflow: visible; max-width: 100%; overflow-wrap: anywhere;
  flex-shrink: 0;
}
.fo-btn::before {
  content: ''; position: absolute; inset: var(--btn-inset); clip-path: var(--fo-shape-button);
  background-color: var(--btn-current);
  background-image:
    linear-gradient(color-mix(in srgb, var(--btn-current) 88%, transparent), color-mix(in srgb, var(--btn-current) 88%, transparent)),
    var(--fo-grain);
  background-size: auto, 320px 320px;
  pointer-events: none; z-index: 0;
}
.fo-btn::after {
  content: ''; position: absolute; inset: 1px; clip-path: var(--fo-shape-button);
  background-image: var(--fo-rust-patch), var(--fo-rust-patch);
  background-size: 92px 35px, 70px 26px;
  background-position: left -20px top -19px, right -14px bottom -15px;
  background-repeat: no-repeat; pointer-events: none; z-index: 1;
}
.fo-btn > * { position: relative; z-index: 2; }

.fo-btn--cancel { --btn-bg: var(--fo-cancel-bg); --btn-hover: var(--fo-cancel-hover); --btn-pressed: var(--fo-cancel-pressed); --btn-text: var(--fo-light-ink); }
.fo-btn--accept { --btn-bg: var(--fo-accept-bg); --btn-hover: var(--fo-accept-hover); --btn-pressed: var(--fo-accept-pressed); --btn-text: var(--fo-light-ink); }
.fo-btn--danger { --btn-bg: var(--fo-danger-bg); --btn-hover: var(--fo-danger-hover); --btn-pressed: var(--fo-danger-pressed); --btn-text: var(--fo-light-ink); }

.fo-btn.is-active { --btn-current: var(--btn-hover); }

.fo-btn:hover:not(:disabled):not([aria-disabled="true"]) { --btn-current: var(--btn-hover); background: var(--fo-button-border); }
.fo-btn:active:not(:disabled):not([aria-disabled="true"]) { --btn-current: var(--btn-pressed); background: var(--fo-button-border); }
.fo-btn:disabled, .fo-btn[aria-disabled="true"] {
  --btn-current: var(--fo-disabled-bg); background: var(--fo-disabled-border);
  /* Disabled text needs contrast against the disabled fill in both themes. */
  color: var(--fo-disabled-text);
  box-shadow: none; cursor: not-allowed;
}
.fo-btn:disabled::before, .fo-btn[aria-disabled="true"]::before { background-image: none; }
.fo-btn:disabled::after, .fo-btn[aria-disabled="true"]::after { display: none; }
.fo-btn--small { padding: 10px 18px; min-height: 44px; }
.fo-btn--large { padding: 13px 30px; min-height: 50px; font-size: 15px; }
.fo-btn:focus-visible { --btn-inset: 3px; outline: none; background: var(--fo-focus) !important; }
.fo-btn:focus-visible::after { inset: 3px; }

.fo-btn[aria-busy="true"] { color: transparent; cursor: wait; pointer-events: none; }
.fo-btn[aria-busy="true"]::after {
  content: ''; position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 16px; height: 16px; background-image: none;
  border: 2px solid var(--btn-text); border-top-color: transparent; border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
.btn-compact { min-height: 36px; padding: 6px 10px; font-size: var(--fs-small); }
.input-group-btn {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  min-height: auto; padding: 0 10px; font-size: var(--fs-small);
  background: none; border: none; color: var(--fo-muted);
}
.input-group-btn:hover { background: var(--fo-surface-hover); color: var(--fo-text); }
.auth-form .fo-btn[type=submit] { margin-top: var(--gap-md); }
.rules-footer-cta .fo-btn { flex: 0 0 auto; }