.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font: 700 1rem/1.2 var(--sans);
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.ui-btn:hover { background: var(--paper-2); color: var(--ink); }
.ui-btn--primary { background: var(--highlight); border-color: var(--highlight); color: var(--on-highlight); }
.ui-btn--primary:hover { background: var(--highlight-deep); border-color: var(--highlight-deep); color: var(--on-highlight); }
.ui-btn--secondary { background: var(--card); border-color: var(--field-border); }
.ui-btn--secondary:hover { border-color: var(--ink); background: var(--card); }
.ui-btn--danger { background: var(--card); border-color: var(--danger); color: var(--danger); }
.ui-btn--danger:hover { background: var(--danger-soft); color: var(--danger); }
.ui-btn--small { padding: 7px 14px; font-size: 0.875rem; }
.ui-btn--block { width: 100%; justify-content: center; }
.ui-btn--apply { font-size: 1.0625rem; padding: 15px 20px; }
.ui-btn--grow { flex: 1; justify-content: center; }

.ui-btn:disabled, .ui-btn[aria-disabled="true"], .ui-btn[aria-busy="true"] { cursor: not-allowed; opacity: 0.55; }
.ui-btn:disabled:hover, .ui-btn[aria-disabled="true"]:hover { background: transparent; }
.ui-btn--primary:disabled:hover { background: var(--highlight); }
.ui-btn[aria-busy="true"] { cursor: progress; }
.ui-btn[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ui-spin 0.8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--field-border);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.ui-iconbtn:hover { border-color: var(--ink); }

.ui-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: 600 0.875rem var(--sans);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ui-chip {
  font: 500 0.875rem var(--sans);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--field-border);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.ui-chip:hover { border-color: var(--ink); color: var(--ink); }
.ui-chip[aria-pressed="true"], .ui-chip[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ui-tag {
  font: 600 0.625rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--highlight);
  color: var(--on-highlight);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.ui-tag--quiet { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--field-border); }

.ui-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.75rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  background: var(--card);
}

.ui-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  font: 500 0.8125rem var(--mono);
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.ui-more-btn::-webkit-details-marker { display: none; }
.ui-more-btn:hover, [open] > .ui-more-btn { color: var(--ink); background: var(--paper-2); }

.ui-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }