@layer components {
  .cx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-md);
    background: var(--cx-surface);
    color: var(--cx-text);
    font-weight: 700;
    transition: transform var(--cx-transition), box-shadow var(--cx-transition), background var(--cx-transition);
  }

  .cx-btn:hover { transform: translateY(-1px); box-shadow: var(--cx-shadow-soft); }
  .cx-btn:disabled { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }
  .cx-btn-primary { background: linear-gradient(135deg, var(--cx-brand), var(--cx-brand-strong)); color: #fff; }
  .cx-btn-accent { background: var(--cx-accent); color: #2a2100; }
  .cx-btn-ghost { background: transparent; border-color: var(--cx-border); }
}

@layer components {
  .cx-btn-danger { background: linear-gradient(135deg, var(--cx-sem-loss), #7f1d1d); color:#fff; border-color:transparent; }
  .cx-btn-success { background: linear-gradient(135deg, var(--cx-sem-profit), #166534); color:#fff; border-color:transparent; }
  .cx-btn-warning { background: linear-gradient(135deg, var(--cx-sem-pending), #92400e); color:#fff7ed; border-color:transparent; }
  .cx-btn-info { background: linear-gradient(135deg, var(--cx-sem-revenue), #1d4ed8); color:#fff; border-color:transparent; }
  .cx-btn-cost { background: var(--cx-sem-cost-soft); color:var(--cx-sem-cost); border-color:var(--cx-sem-cost-line); }
  .cx-btn-expense { background: var(--cx-sem-expense-soft); color:var(--cx-sem-expense); border-color:var(--cx-sem-expense-line); }
  .cx-btn-inventory { background: var(--cx-sem-inventory-soft); color:var(--cx-sem-inventory); border-color:var(--cx-sem-inventory-line); }
  .cx-btn-settlement { background: var(--cx-sem-settlement-soft); color:var(--cx-sem-settlement); border-color:var(--cx-sem-settlement-line); }
  .cx-btn-sm { min-height:34px; padding:.42rem .72rem; border-radius:var(--cx-radius-sm); font-size:.86rem; }
  .cx-btn-lg { min-height:50px; padding:.82rem 1.2rem; border-radius:var(--cx-radius-lg); font-size:1rem; }
  .cx-btn-icon { inline-size:42px; padding:0; flex:0 0 auto; }
  .cx-btn[aria-busy="true"], .cx-btn.is-loading { position:relative; color:transparent !important; pointer-events:none; }
  .cx-btn[aria-busy="true"]::after, .cx-btn.is-loading::after {
    content:''; position:absolute; inline-size:1.05rem; block-size:1.05rem; border-radius:999px;
    border:2px solid currentColor; border-block-start-color:transparent; color:#fff; animation:cx-spin 800ms linear infinite;
  }
  .cx-toolbar, .cx-actions-row { display:flex; align-items:center; gap:var(--cx-toolbar-gap); flex-wrap:wrap; }
  .cx-toolbar { justify-content:space-between; padding:.75rem 0; }
  .cx-toolbar-main, .cx-toolbar-actions { display:flex; align-items:center; gap:var(--cx-toolbar-gap); flex-wrap:wrap; }
}

/* Phase 31C — Costix brand buttons */
@layer components {
  .cx-btn { border-color: var(--cx-border); }
  .cx-btn-primary {
    background: var(--cx-brand-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(91, 26, 163, .18);
  }
  .cx-btn-primary:hover { box-shadow: 0 16px 28px rgba(91, 26, 163, .24); }
  .cx-btn-ghost {
    background: var(--cx-control-bg);
    border-color: var(--cx-control-border);
    color: var(--cx-text);
  }
  .cx-btn-ghost:hover { color: var(--cx-brand-strong); border-color: rgba(216, 59, 190, .28); }
}