.btn {
    --bg: var(--brand);
    --ring: rgba(138,180,255,.5);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 16px; border-radius: 12px; font-weight: 600;
    border: 2px solid transparent; text-decoration: none; color: #fff; box-shadow: var(--shadow-1);
    outline: none; cursor: pointer; position: relative; overflow: hidden;
  }
  .btn:hover { text-decoration: none; transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn:focus-visible { box-shadow: 0 0 0 4px var(--ring); }
  
  .btn--primary { background-image: var(--bg); border: 2px solid rgba(255,255,255,.1); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
  .btn--ghost { background: #161b2a; border: 2px solid #2a3454; color: #e7eaff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
  
  .badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #1b2136; border: 1px solid #2d3861; margin-left: 6px; }
  
  .price-toggle { display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
  .price-toggle__btn.is-active { outline: 2px solid #2b3561; }