.button {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  padding: 0 18px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  box-shadow:
    0 16px 30px rgba(12, 16, 32, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.button::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
  pointer-events: none;
}

.button > * {
  position: relative;
  z-index: 1;
}

.button:hover {
  box-shadow:
    0 20px 34px rgba(12, 16, 32, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.button--primary {
  background: linear-gradient(135deg, #6e39ff, #4a29ff);
  color: #fffdfa;
  box-shadow:
    0 18px 32px rgba(90, 50, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.button--secondary {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 236, 255, 0.94));
  border-color: rgba(109, 69, 255, 0.18);
  color: #15182b;
}

.button--ghost {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.7), transparent 24%),
    linear-gradient(135deg, rgba(251, 248, 255, 0.96), rgba(241, 236, 255, 0.9));
  border-color: rgba(109, 69, 255, 0.12);
  color: #403966;
}

.button--feature {
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.64), transparent 22%),
    linear-gradient(135deg, #e3ff4b, #6e39ff);
  border-color: rgba(93, 67, 255, 0.18);
  color: #0b1020;
  box-shadow:
    0 20px 34px rgba(109, 69, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.button--danger {
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.75), transparent 24%),
    linear-gradient(135deg, #ffe0e5, #ffc5d0);
  border-color: rgba(255, 45, 85, 0.18);
  color: #a1193d;
  box-shadow:
    0 18px 30px rgba(255, 45, 85, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.settings-page .button {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 18px;
}

.button--settings-cta {
  min-width: 190px;
}

.button--pill-icon {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  font-size: 1rem;
}

.button--pill-icon-add {
  background: linear-gradient(135deg, rgba(216, 255, 69, 0.9), rgba(34, 212, 105, 0.9));
  border-color: rgba(22, 163, 74, 0.18);
  color: #0d2517;
}

.button--add-fab {
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 20px 28px 20px 28px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(135deg, rgba(224, 255, 80, 0.98), rgba(166, 221, 39, 0.94));
  border-color: rgba(210, 255, 112, 0.28);
  color: #182113;
  box-shadow:
    0 22px 36px rgba(166, 221, 39, 0.18),
    0 10px 0 rgba(166, 221, 39, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -12px 18px rgba(84, 120, 16, 0.12);
  transform: rotate(5deg);
}

.button--add-fab:hover {
  transform: translateY(-3px) rotate(3deg) scale(1.02);
  box-shadow:
    0 28px 44px rgba(166, 221, 39, 0.24),
    0 12px 0 rgba(166, 221, 39, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -12px 18px rgba(84, 120, 16, 0.14);
}

.button--add-fab span {
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-2px);
}

.button--pill-icon-delete {
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(135deg, #ff5a5f, #ff173d);
  border-color: #ff173d;
  color: #fffdfa;
  box-shadow:
    0 18px 30px rgba(255, 23, 61, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.button--mode {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.88rem;
}

.button--mode-edit {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 237, 255, 0.92));
  border-color: rgba(109, 69, 255, 0.14);
  color: #2f3450;
}

.button--mode-save {
  background: linear-gradient(135deg, rgba(216, 255, 69, 0.92), rgba(34, 212, 105, 0.92));
  border-color: rgba(22, 163, 74, 0.16);
  color: #0c2517;
}

.button--tab.is-active {
  background: linear-gradient(135deg, #6e39ff, #4a29ff);
  border-color: rgba(109, 69, 255, 0.18);
  color: #fffdfa;
}