.ctc-mag { display: flex; gap: 10px; }

.ctc-mag-chip { position: relative; display: inline-flex; align-items: center; padding: 8px 16px; background: #1f1f2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; color: #f0eeff; font: 600 12px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; overflow: hidden; transition: border-color 0.2s, background 0.2s; }

.ctc-mag-chip span { display: inline-block; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 1; }

.ctc-mag-chip:hover { background: #2a2a3e; border-color: #7c6cff; }

.ctc-mag-chip:hover span { transform: translateX(3px) scale(1.05); }

.ctc-mag-chip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(124,108,255,0.35), transparent 60%); opacity: 0; transition: opacity 0.25s; }

.ctc-mag-chip:hover::before { opacity: 1; }