.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;

  font-size: var(--text-base);
  font-weight: 500;

  transition: all 0.15s ease;
}

.btn--primary{
  background: var(--darkGreen);
  color: var(--text);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border: 1px solid var(--lvl4);
}

.btn--secondary{
  background: transparent;
  color: var(--text);
}

.btn--primary:hover{
  border-color: #306030;
  box-shadow: 0 0 0 3px rgba(153,169,143,0.25);
}

.btn--secondary:hover{
  border-color: var(--darkGreen);
  box-shadow: 0 0 0 3px rgba(153,169,143,0.25);
}

.btn--back{
  margin-left: auto;

  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: inherit;
  font-size: var(--text-base);
  opacity: .8;
}

.btn--back:hover{
  background: var(--surface);
  opacity: 1;
}

.btn--sm { padding: 7px 12px; font-size: var(--text-sm); }

.btn--danger-outline {
  color: #e05050;
  border-color: #e8b4b4;
}
.btn--danger-outline:hover {
  background: #fff0f0;
  border-color: #e05050;
  box-shadow: 0 0 0 3px rgba(224,80,80,0.15);
}
[data-theme="dark"] .btn--danger-outline:hover { background: #2a1515; }