/* Alerts (Compose Alert preview + Custom Overlay). No card behind the alert: just the pieces you switch on. */
.al{--acc:#f4c66f;position:relative;display:grid;place-items:center;padding:34px 46px;min-width:360px;max-width:min(860px,96vw);isolation:isolate;color:#fff;text-align:center}
.al-stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.al-av-left .al-stack{flex-direction:row;text-align:left}.al-av-left .al-col{align-items:flex-start}
.al-av-right .al-stack{flex-direction:row-reverse;text-align:right}.al-av-right .al-col{align-items:flex-end}
.al-av-left .al-stack,.al-av-right .al-stack{gap:18px}
.al-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.al-text{line-height:1.08;font-weight:900;overflow-wrap:anywhere;transform:translateY(var(--off,0));max-width:min(760px,90vw);text-shadow:0 3px 14px #0008}
.al-name{letter-spacing:-.2px}
.al-av{position:relative;width:var(--sz);height:var(--sz);transform:translateY(var(--off,0));flex:none}
.al-face{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;font-weight:900;font-size:calc(var(--sz)*.42);color:#fff;background:linear-gradient(135deg,#c056f0,#7c3aed);border:3px solid #fff;box-shadow:0 0 0 2px #0006,0 6px 22px #0008}
.al-face img{width:100%;height:100%;object-fit:cover}
.al-icon{position:relative;display:grid;place-items:center;width:var(--sz);height:var(--sz);transform:translateY(var(--off,0));margin-top:4px}
.al-icon img,.al-icon video{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px #000a)}
.al-badge{display:grid;place-items:center;width:86%;height:86%;border-radius:50%;font-size:calc(var(--sz)*.46);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--bc),#fff 45%),var(--bc) 55%,color-mix(in srgb,var(--bc),#000 45%));box-shadow:inset 0 -4px 10px #0005,inset 0 3px 6px #fff8,0 0 0 3px color-mix(in srgb,var(--bc),#fff 30%),0 0 18px color-mix(in srgb,var(--bc),transparent 40%),0 8px 18px #0009;animation:alBadge 2.4s ease-in-out infinite}
@keyframes alBadge{50%{transform:translateY(-4px) rotate(-5deg) scale(1.04)}}
.al-icon-behind{position:absolute;z-index:0;left:50%;top:50%;margin:0;transform:translate(-50%,calc(-50% + var(--off,0)));opacity:.55;filter:blur(.5px)}
/* media background + soft edge */
.al-media{position:absolute;inset:0;z-index:0;border-radius:18px;overflow:hidden;background-size:cover!important}
.al-media img,.al-media video{width:100%;height:100%;object-fit:cover}
.al-media.al-soft{-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 var(--soft),transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 var(--soft),transparent 100%);border-radius:0}
/* particles */
.al-fx{position:absolute;pointer-events:none;z-index:1}
.al-fall{inset:0;overflow:hidden;border-radius:18px}
.al-p{position:absolute;font-style:normal;line-height:1;opacity:0}
.al-fall .al-p{left:var(--x);top:-12%;font-size:calc(22px*var(--s));animation:alFall var(--t) linear var(--d) infinite}
@keyframes alFall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(118vh) translateX(30px) rotate(var(--r))}}
.al-fall .al-p-snow{color:#fff;text-shadow:0 0 6px #fff}
.al-burst{left:50%;top:50%;width:0;height:0}
.al-burst .al-p{font-size:calc(16px*var(--s));animation:alBurst 1.6s cubic-bezier(.15,.7,.3,1) calc(var(--d)*.25) 1 both}
.al-burst.al-loop .al-p{animation-iteration-count:infinite}
@keyframes alBurst{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--sz,60px)*-1.25 - 20px)) scale(1)}}
.al-p-confetti{width:7px;height:11px;border-radius:2px}
.al-p-embers{width:6px;height:6px;border-radius:50%;background:radial-gradient(#fff3b0,#ff8a1f 60%,transparent);box-shadow:0 0 8px #ff7a1f}
.al-p-sparkles,.al-p-magic{color:#ffe9a6;text-shadow:0 0 8px #f4c66f}.al-p-magic{color:#d9b8ff;text-shadow:0 0 10px #a855f7}
/* text animations */
.al-ta-pulse{animation:alPulse 1.4s ease-in-out infinite}@keyframes alPulse{50%{transform:translateY(var(--off,0)) scale(1.07)}}
.al-ta-bounce{animation:alBounce 1.2s cubic-bezier(.3,1.6,.5,1) infinite}@keyframes alBounce{0%,60%,100%{transform:translateY(var(--off,0))}30%{transform:translateY(calc(var(--off,0) - 10px))}}
.al-ta-wave span{display:inline-block;animation:alWave 1.4s ease-in-out calc(var(--i)*.06s) infinite}@keyframes alWave{0%,60%,100%{transform:none}30%{transform:translateY(-.22em)}}
.al-ta-glow{animation:alGlow 1.8s ease-in-out infinite}@keyframes alGlow{50%{text-shadow:0 0 12px var(--acc),0 0 28px var(--acc),0 3px 14px #0008}}
.al-ta-shake{animation:alShake 1.6s ease-in-out infinite}@keyframes alShake{0%,70%,100%{transform:translateY(var(--off,0))}75%{transform:translate(-4px,var(--off,0)) rotate(-2deg)}80%{transform:translate(4px,var(--off,0)) rotate(2deg)}85%{transform:translate(-3px,var(--off,0))}90%{transform:translate(2px,var(--off,0))}}
.al-ta-rainbow{background:linear-gradient(90deg,#ff4f7a,#ffd75e,#7dff8a,#5ee7ff,#b28cff,#ff4f7a) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:alRb 2.5s linear infinite}@keyframes alRb{to{background-position:-200% 0}}
.al-ta-type span{opacity:0;animation:alType .01s linear calc(var(--i)*.045s + .35s) forwards}@keyframes alType{to{opacity:1}}
/* entrances */
.al-in-zoom{animation:alZoom .6s cubic-bezier(.2,1.4,.4,1) both}@keyframes alZoom{from{opacity:0;transform:scale(.3)}}
.al-in-fade{animation:alFade .6s ease both}@keyframes alFade{from{opacity:0}}
.al-in-slide{animation:alSlide .6s cubic-bezier(.2,1,.3,1) both}@keyframes alSlide{from{opacity:0;transform:translateY(60px)}}
.al-in-drop{animation:alDrop .7s cubic-bezier(.3,1.5,.5,1) both}@keyframes alDrop{from{opacity:0;transform:translateY(-120px)}}
.al-in-bounce{animation:alBounceIn .8s cubic-bezier(.2,1.8,.4,1) both}@keyframes alBounceIn{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.12)}80%{transform:scale(.95)}}
.al-in-flip{animation:alFlip .7s ease both}@keyframes alFlip{from{opacity:0;transform:perspective(600px) rotateX(85deg)}}
.al-in-spin{animation:alSpin .7s cubic-bezier(.2,1.2,.4,1) both}@keyframes alSpin{from{opacity:0;transform:rotate(-200deg) scale(.2)}}
.al.out{animation:alOut .45s ease-in forwards}@keyframes alOut{to{opacity:0;transform:translateY(-24px) scale(.94)}}