.ccm-glass-bg { padding: 30px; border-radius: 14px; background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%); }

.ccm-glass { position: relative; width: 200px; height: 110px; }

.ccm-glass-dome { position: absolute; bottom: 0; left: 0; right: 0; height: 110px; border-radius: 100px 100px 0 0; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); border-bottom: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -10px 30px rgba(255,255,255,0.1); }

.ccm-glass-dome::before { content: ''; position: absolute; top: 8px; left: 20%; right: 50%; height: 24px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent); filter: blur(2px); }

.ccm-glass-i { position: absolute; bottom: 0; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.5); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)); transition: transform 0.3s, background 0.2s; backdrop-filter: blur(6px); }

.ccm-glass-i:hover { background: rgba(255,255,255,0.45); transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.18) translateY(-6px); }