:root{
  --brand-blue:#2563eb;
  --brand-blue-dark:#1e40af;

  --brand-red:#e11d2e;
  --brand-red-dark:#b91c1c;

  --brand-purple:#7c3aed;
  --brand-teal:#0f766e;
  --brand-green:#16a34a;
  --brand-orange:#f97316;

  --btn-radius:14px;
  --btn-shadow:0 18px 40px rgba(0,0,0,.18);
}
.btn-primary{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  border:none;
  color:#fff;
  font-weight:700;
  border-radius:var(--btn-radius);
  padding:14px 36px;
  box-shadow:0 14px 36px rgba(37,99,235,.45);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(37,99,235,.55);
  background:linear-gradient(135deg,#1e40af,#2563eb);
}

.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 10px 24px rgba(37,99,235,.35);
}
.btn-danger{
  background:linear-gradient(135deg,#e11d2e,#b91c1c);
  border:none;
  color:#fff;
  font-weight:800;
  border-radius:var(--btn-radius);
  padding:14px 36px;
  box-shadow:0 16px 42px rgba(225,29,46,.45);
  transition:all .35s ease;
}

.btn-danger:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 70px rgba(225,29,46,.55);
}
.btn-outline-secondary{
  background:rgba(255,255,255,.75);
  color:#1e40af;
  font-weight:700;
  border:2px solid rgba(37,99,235,.25);
  border-radius:var(--btn-radius);
  padding:14px 34px;
  backdrop-filter:blur(8px);
  transition:all .35s ease;
}

.btn-outline-secondary:hover{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 42px rgba(37,99,235,.45);
}
.btn-success{
  background:linear-gradient(135deg,#16a34a,#0f766e);
  border:none;
  color:#fff;
  font-weight:700;
  border-radius:var(--btn-radius);
  padding:14px 34px;
  box-shadow:0 16px 40px rgba(22,163,74,.45);
}

.btn-success:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 60px rgba(22,163,74,.55);
}
.btn-warning{
  background:linear-gradient(135deg,#f97316,#ea580c);
  border:none;
  color:#fff;
  font-weight:700;
  border-radius:var(--btn-radius);
  padding:14px 34px;
  box-shadow:0 16px 40px rgba(249,115,22,.45);
}
.btn-shine{
  position:relative;
  overflow:hidden;
}

.btn-shine::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.45),
    transparent 70%
  );
  animation:shine 2.8s infinite;
}

@keyframes shine{
  to{ left:120%; }
}
.btn-3d{
  transition:transform .3s ease, box-shadow .3s ease;
}

.btn-3d:hover{
  transform:translateY(-4px);
}

.btn-3d:active{
  transform:translateY(0);
}