.btn {
  --btn-bg: var(--bg-3);
  --btn-bg-hover: var(--bg-4);
  --btn-fg: var(--ink-1);
  --btn-border: transparent;
  --btn-pad-x: var(--s-4);
  --btn-pad-y: 10px;
  --btn-fs: var(--t-sm);
  --btn-radius: var(--r-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background var(--d-fast) var(--ease-std),
              color var(--d-fast) var(--ease-std),
              border-color var(--d-fast) var(--ease-std),
              transform var(--d-fast) var(--ease-std),
              box-shadow var(--d-base) var(--ease-std);
  position: relative;
  white-space: nowrap;
}

.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hot);
  --btn-fg: var(--ink-on-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  box-shadow: 0 0 0 1px rgba(215, 255, 58, 0.2), 0 6px 20px rgba(215, 255, 58, 0.18);
}
.btn--primary:hover { box-shadow: var(--sh-glow); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--bg-2);
  --btn-border: var(--line-strong);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--accent-soft);
  --btn-fg: var(--accent);
  --btn-border: var(--accent);
}

.btn--quiet {
  --btn-bg: transparent;
  --btn-bg-hover: var(--bg-2);
  --btn-fg: var(--ink-2);
}

.btn--danger {
  --btn-bg: var(--down);
  --btn-bg-hover: var(--down-strong);
  --btn-fg: #fff;
}

.btn--xs { --btn-pad-x: var(--s-2); --btn-pad-y: 4px; --btn-fs: var(--t-xs); }
.btn--sm { --btn-pad-x: var(--s-3); --btn-pad-y: 6px; --btn-fs: var(--t-xs); }
.btn--lg { --btn-pad-x: var(--s-6); --btn-pad-y: 14px; --btn-fs: var(--t-md); }
.btn--xl { --btn-pad-x: var(--s-8); --btn-pad-y: 18px; --btn-fs: var(--t-lg); }

.btn--block { width: 100%; }

.btn--icon {
  --btn-pad-x: 8px;
  --btn-pad-y: 8px;
  width: 36px; height: 36px;
}
.btn--icon.btn--sm { width: 28px; height: 28px; }
.btn--icon.btn--lg { width: 44px; height: 44px; }

.btn__icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn__icon--lg { width: 20px; height: 20px; }

.btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ink-on-accent);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
}
.btn--ghost .btn__count, .btn--quiet .btn__count {
  background: var(--accent);
  color: var(--ink-on-accent);
}

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; border-right-width: 0; }
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-right-width: 1px; }
.btn-group .btn[aria-pressed="true"] { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); }

@media (max-width: 720px) {
  .btn { --btn-pad-y: 12px; min-height: 44px; }
  .btn--sm { --btn-pad-y: 9px; min-height: 36px; }
  .btn--xs { min-height: 28px; }
  .btn--lg { --btn-pad-y: 15px; min-height: 48px; }
  .btn--icon { width: 44px; height: 44px; min-height: 44px; }
  .btn--icon.btn--sm { width: 36px; height: 36px; min-height: 36px; }
}