/* ══ BUTTONS ════════════════════════════════════════════════════ */
.btn {
  height: 30px; padding: 0 12px;
  border: 1px solid var(--b2); border-radius: var(--r);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--tx);
  transition: all .12s; white-space: nowrap; flex-shrink: 0;
}
.btn:hover { border-color: var(--b3); background: var(--s3); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-sm { height: 24px; padding: 0 8px; font-size: 10px; }
.btn-lg { height: 36px; padding: 0 16px; font-size: 12px; }

/* Variants */
.btn-primary {
  background: var(--acc); color: #0c0c0c;
  border-color: var(--acc); font-weight: 700;
}
.btn-primary:hover { opacity: .88; background: var(--acc); }

.btn-ok {
  color: var(--ok); border-color: rgba(53,241,137,.3);
}
.btn-ok:hover { background: rgba(53,241,137,.07); }

.btn-warn {
  color: var(--warn); border-color: rgba(241,196,53,.3);
}
.btn-warn:hover { background: rgba(241,196,53,.07); }

.btn-danger {
  color: var(--danger); border-color: rgba(241,85,53,.3);
}
.btn-danger:hover { background: rgba(241,85,53,.07); }

.btn-ghost {
  border-color: transparent; color: var(--tx3);
}
.btn-ghost:hover { background: var(--s3); color: var(--tx); border-color: var(--b2); }

.btn-icon {
  width: 28px; height: 28px; padding: 0;
  justify-content: center; border-radius: var(--r);
}

/* ══ PILLS (FILTER) ═════════════════════════════════════════════ */
.pill {
  height: 22px; padding: 0 9px;
  border: 1px solid var(--b2); border-radius: 11px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  cursor: pointer; background: transparent; color: var(--tx3);
  transition: all .12s; white-space: nowrap;
}
.pill:hover { color: var(--tx); border-color: var(--b3); }
.pill.active { color: var(--acc); border-color: var(--acc); background: rgba(200,241,53,.07); }