.cb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    outline: none;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    position: relative;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.cb:hover, .cb:focus { text-decoration: none; color: #fff; }
.cb:focus-visible { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); }
.cb:active { transform: scale(0.97); }
.cb-xs { padding: 2px 8px; font-size: 11.5px; border-radius: 6px; gap: 5px; }
.cb-sm { padding: 4px 10px; font-size: 11.5px; border-radius: 6px; gap: 5px; }
.cb-lg { padding: 8px 16px; font-size: 13.5px; border-radius: 8px; gap: 7px; }
.cb-xl { padding: 11px 22px; font-size: 15px; border-radius: 10px; gap: 9px; }
.cb .fa { font-size: inherit; line-height: 1; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.cb-sm .fa { font-size: 11px; }
.cb-lg .fa { font-size: 14px; }
.cb-xl .fa { font-size: 16px; }
.cb:hover .cb-icon-left-rotate  { transform: rotate(-12deg) translateY(-1px) scale(1.18); }
.cb:hover .cb-icon-right-rotate { transform: rotate(12deg) translateY(-1px) scale(1.18); }
.cb:hover .cb-icon-scale        { transform: scale(1.22); }
.cb.cb-grow:hover              { transform: scale(1.03); }
.cb.cb-grow:has(.fa):hover     { transform: scale(1.05); }
.cb.cb-grow.cb-has-icon:hover  { transform: scale(1.05); }

.cb-blue       { background: #4a90d9; box-shadow: 0 1px 3px rgba(74,144,217,.2); }
.cb-blue:hover { background: #5799dd; box-shadow: 0 2px 6px rgba(74,144,217,.25); }
.cb-orange       { background: #e0893a; box-shadow: 0 1px 3px rgba(224,137,58,.2); }
.cb-orange:hover { background: #e4944d; box-shadow: 0 2px 6px rgba(224,137,58,.25); }
.cb-red       { background: #d95c5c; box-shadow: 0 1px 3px rgba(217,92,92,.2); }
.cb-red:hover { background: #dd6b6b; box-shadow: 0 2px 6px rgba(217,92,92,.25); }
.cb-green       { background: #45b07c; box-shadow: 0 1px 3px rgba(69,176,124,.2); }
.cb-green:hover { background: #52b888; box-shadow: 0 2px 6px rgba(69,176,124,.25); }
.cb-gray       { background: #8e99a4; box-shadow: 0 1px 3px rgba(142,153,164,.2); }
.cb-gray:hover { background: #97a1ab; box-shadow: 0 2px 6px rgba(142,153,164,.25); }
.cb-black       { background: #3d4451; box-shadow: 0 1px 3px rgba(61,68,81,.2); }
.cb-black:hover { background: #474e5c; box-shadow: 0 2px 6px rgba(61,68,81,.25); }
.cb-navy       { background: #34567a; box-shadow: 0 1px 3px rgba(52,86,122,.2); }
.cb-navy:hover { background: #3d6188; box-shadow: 0 2px 6px rgba(52,86,122,.25); }
.cb-purple       { background: #8e6bb5; box-shadow: 0 1px 3px rgba(142,107,181,.2); }
.cb-purple:hover { background: #9877bc; box-shadow: 0 2px 6px rgba(142,107,181,.25); }
.cb-light-blue       { background: #5baed4; box-shadow: 0 1px 3px rgba(91,174,212,.2); }
.cb-light-blue:hover { background: #67b6d9; box-shadow: 0 2px 6px rgba(91,174,212,.25); }

.cb-default { background: #f0f2f4; color: #4a5568; border: 1px solid #d1d5db; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cb-default:hover, .cb-default:focus { background: #e4e7eb; color: #2d3748; border-color: #b0b7c0; box-shadow: 0 1px 4px rgba(0,0,0,.10); }
.cb-default:active { background: #d8dce1; }

.cb-block { width: 100%; display: flex; }

.cb-outline { background: transparent; border: 1.5px solid currentColor; box-shadow: none; }
.cb-outline.cb-blue       { color: #4a90d9; }
.cb-outline.cb-orange     { color: #e0893a; }
.cb-outline.cb-red        { color: #d95c5c; }
.cb-outline.cb-green      { color: #45b07c; }
.cb-outline.cb-gray       { color: #8e99a4; }
.cb-outline.cb-black      { color: #3d4451; }
.cb-outline.cb-navy       { color: #34567a; }
.cb-outline.cb-purple     { color: #8e6bb5; }
.cb-outline.cb-light-blue { color: #5baed4; }
.cb-outline:hover { color: #fff; }
.cb-outline.cb-blue:hover       { background: #4a90d9; border-color: #4a90d9; }
.cb-outline.cb-orange:hover     { background: #e0893a; border-color: #e0893a; }
.cb-outline.cb-red:hover        { background: #d95c5c; border-color: #d95c5c; }
.cb-outline.cb-green:hover      { background: #45b07c; border-color: #45b07c; }
.cb-outline.cb-gray:hover       { background: #8e99a4; border-color: #8e99a4; }
.cb-outline.cb-black:hover      { background: #3d4451; border-color: #3d4451; }
.cb-outline.cb-navy:hover       { background: #34567a; border-color: #34567a; }
.cb-outline.cb-purple:hover     { background: #8e6bb5; border-color: #8e6bb5; }
.cb-outline.cb-light-blue:hover { background: #5baed4; border-color: #5baed4; }
.cb-outline.cb-default { background: transparent; color: #4a5568; border-color: #d1d5db; }
.cb-outline.cb-default:hover { background: #f0f2f4; color: #2d3748; border-color: #b0b7c0; }

@media (max-width: 768px) {
    .cb    { padding: 5px 12px; font-size: 11.5px; }
    .cb-xs { padding: 1px 4px; font-size: 11.5px; border-radius: 6px; gap: 5px; }
    .cb-sm { padding: 3px 8px; font-size: 10.5px; }
    .cb-lg { padding: 7px 14px; font-size: 12.5px; }
    .cb-xl { padding: 9px 18px; font-size: 14px; }
}