.btn{font-family:var(--font-body);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;cursor:pointer;border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-snap), box-shadow var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);border:none;justify-content:center;align-items:center;gap:8px;font-weight:700;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn--primary:after,.btn--pill:after{content:"";opacity:0;transition:opacity var(--duration) var(--ease-out);pointer-events:none;background:linear-gradient(135deg,#ffffff2e 0%,#0000 55%);position:absolute;inset:0}.btn--sm{gap:6px;padding:8px 18px;font-size:11px}.btn--md{padding:13px 28px;font-size:13px}.btn--lg{font-family:var(--font-display);letter-spacing:.05em;border-radius:var(--border-radius);gap:10px;padding:16px 44px;font-size:22px}.btn--primary{color:var(--color-text-dark);background:var(--color-accent);box-shadow:0 3px 14px #f8d0182e}.btn--primary:hover:not(.btn--disabled):not(.btn--loading){background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 8px 28px #f8d01847}.btn--primary:hover:after{opacity:1}.btn--primary:active:not(.btn--disabled):not(.btn--loading){transform:scale(.97)translateY(0);box-shadow:0 3px 14px #f8d0182e}.btn--outline{color:var(--color-accent);border:1.5px solid var(--color-accent);background:0 0}.btn--outline:hover:not(.btn--disabled):not(.btn--loading){background:var(--color-accent);color:var(--color-text-dark);transform:translateY(-2px);box-shadow:0 6px 22px #f8d01833}.btn--outline:active:not(.btn--disabled):not(.btn--loading){transform:scale(.97)}.btn--ghost{color:var(--color-text-light);background:#ffffff0f;border:1.5px solid #ffffff1f}.btn--ghost:hover:not(.btn--disabled):not(.btn--loading){background:#ffffff1f;border-color:#ffffff42;transform:translateY(-2px)}.btn--ghost:active:not(.btn--disabled):not(.btn--loading){transform:scale(.97)}.btn--pill{color:var(--color-text-dark);background:var(--color-accent);border-radius:100px;box-shadow:0 3px 14px #f8d0182e}.btn--pill:hover:not(.btn--disabled):not(.btn--loading){background:var(--color-accent-hover);transform:translateY(-2px)scale(1.02);box-shadow:0 8px 28px #f8d0184d}.btn--pill:hover:after{opacity:1}.btn--pill:active:not(.btn--disabled):not(.btn--loading){transform:scale(.97)}.btn--brutal{font-family:var(--font-display);letter-spacing:.06em;color:var(--color-text-dark);background:var(--color-accent);transition:box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);border-radius:0;font-size:18px;box-shadow:4px 4px #000}.btn--brutal.btn--sm{padding:8px 20px;font-size:14px}.btn--brutal.btn--lg{padding:18px 48px;font-size:26px}.btn--brutal:hover:not(.btn--disabled):not(.btn--loading){transform:translate(2px,2px);box-shadow:2px 2px #000}.btn--brutal:active:not(.btn--disabled):not(.btn--loading){transform:translate(4px,4px);box-shadow:0 0 #000}.btn--danger{color:#fff;background:#c0392b}.btn--danger:hover:not(.btn--disabled):not(.btn--loading){background:#a93226;transform:translateY(-2px);box-shadow:0 6px 18px #c0392b4d}.btn--danger:active:not(.btn--disabled):not(.btn--loading){transform:scale(.97)}.btn--disabled,.btn[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none}.btn--loading{cursor:wait;pointer-events:none;opacity:.82}.btn__spinner{border:2px solid #0000002e;border-top-color:currentColor;border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.65s linear infinite btn-spin;display:inline-block}.btn--ghost .btn__spinner,.btn--outline .btn__spinner,.btn--danger .btn__spinner{border-color:currentColor #e6e5e133 #e6e5e133}@keyframes btn-spin{to{transform:rotate(360deg)}}.btn__icon{flex-shrink:0;align-items:center;display:inline-flex}.btn__arrow{transition:transform var(--duration) var(--ease-snap);flex-shrink:0}.btn:hover:not(.btn--disabled):not(.btn--loading) .btn__arrow{transform:translate(4px)}.btn--brutal:hover .btn__arrow{transform:none}.btn__label{line-height:1}