.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);font-family:inherit;font-size:var(--font-size-button);font-weight:var(--font-weight-button);cursor:pointer;transition:var(--transition);white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;display:inline-flex;position:relative}.btn--primary{background-color:var(--color-accent);color:var(--color-white);box-shadow:0 4px 12px #3b82f64d}.btn--primary:hover:not(:disabled){background-color:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #3b82f64d}.btn--secondary{color:var(--color-accent);border:2px solid var(--color-accent);background-color:#0000}.btn--secondary:hover:not(:disabled){background-color:#3b82f61a;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f633}.btn--secondary:active:not(:disabled){background-color:#3b82f626;transform:translateY(0)}.btn--danger{background-color:var(--color-error);color:var(--color-white);box-shadow:0 4px 12px #ef44444d}.btn--danger:hover:not(:disabled){background-color:var(--color-error-hover,#dc2626);transform:translateY(-2px);box-shadow:0 6px 20px #ef444466}.btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #ef44444d}.btn--ghost{color:var(--color-text-body);background-color:#0000}.btn--ghost:hover:not(:disabled){background-color:var(--color-gray-100);transform:translateY(-2px)}.btn--ghost:active:not(:disabled){background-color:var(--color-gray-200);transform:translateY(0)}.btn--sm{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);min-width:32px;min-height:32px;font-size:.875rem}.btn--md{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);min-width:44px;min-height:44px}.btn--lg{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);min-width:52px;min-height:52px;font-size:1.05rem;font-weight:700}.btn:disabled{background-color:var(--color-gray-300);color:var(--color-gray-500);cursor:not-allowed;opacity:.6;box-shadow:none}.btn--secondary:disabled{color:var(--color-gray-300);border-color:var(--color-gray-300);background-color:#0000}.btn--ghost:disabled{color:var(--color-gray-300);background-color:#0000}.btn--loading{pointer-events:none}.btn__spinner{justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex;position:relative}.btn__spinner-dot{background-color:currentColor;border-radius:50%;width:.5em;height:.5em;animation:1.2s cubic-bezier(0,.5,.5,1) infinite btn-pulse}@keyframes btn-pulse{0%,to{opacity:1}50%{opacity:.5}}@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover:not(:disabled),.btn:active:not(:disabled){transform:none}.btn__spinner-dot{opacity:.7;animation:none}}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:calc(var(--radius-md) + 2px)}.btn--secondary:focus-visible{outline-offset:2px}.btn__content{justify-content:center;align-items:center;display:inline-flex}.btn__content--hidden{visibility:hidden;width:0;height:0;position:absolute}
.badge{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--font-size-small);font-weight:600;line-height:var(--line-height-small);-webkit-user-select:none;user-select:none;display:inline-flex}.badge--success{color:var(--color-success,#16a34a);background-color:#22c55e1a}.badge--error{color:var(--color-error);background-color:#ef44441a}.badge--warning{color:var(--color-warning,#ca8a04);background-color:#eab3081a}.badge--info{color:var(--color-accent);background-color:#3b82f61a}.badge--neutral{background-color:var(--color-gray-100);color:var(--color-gray-500)}.badge-icon{flex-shrink:0;width:14px;height:14px;display:inline-block}.badge-circle{background-color:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.badge-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;flex-shrink:0;width:12px;height:12px;animation:.6s linear infinite badge-spin;display:inline-block}@keyframes badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.badge-spinner{animation:.6s steps(4,end) infinite badge-spin-stepped}}@keyframes badge-spin-stepped{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}to{transform:rotate(360deg)}}