#alerts .al-head { margin-bottom: 40px; }
#alerts .al-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
#alerts .al-loop { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 492 / 420; max-width: 600px; }
#alerts .al-svg { width: 100%; height: 100%; display: block; overflow: visible; }
#alerts .al-center { position: absolute; inset: 30% 32%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#alerts .al-n { font: 700 13px/1 var(--body); letter-spacing: .25em; color: var(--muted); }
#alerts .al-t { font: 700 clamp(26px, 3vw, 38px)/1.1 var(--head); color: var(--white); margin: 8px 0 8px; transition: color .4s; }
#alerts .al-d { font-size: 15px; color: var(--muted); line-height: 1.4; }
#alerts .al-node circle.b { fill: #0b1a2e; stroke: rgba(120,170,220,.35); stroke-width: 1.5; transition: all .4s; }
#alerts .al-node text { font: 600 15px/1 'Space Grotesk', Inter, sans-serif; fill: var(--muted); transition: fill .4s; }
#alerts .al-node text.k { font: 700 13px/1 Inter, sans-serif; text-anchor: middle; dominant-baseline: central; }
#alerts .al-node.done circle.b { stroke: var(--cyan); }
#alerts .al-node.on circle.b { stroke: var(--white); stroke-width: 2.5; fill: #13294a; }
#alerts .al-node.on text, #alerts .al-node.done text, #alerts .al-node.armed text { fill: var(--white); }
#alerts .al-node.armed circle.b { stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: 4 3; fill: #0b1a2e; }
#alerts .al-log li.w i { background: transparent; border: 1.5px solid var(--cyan); box-sizing: border-box; }
#alerts .al-side { display: flex; flex-direction: column; gap: 18px; position: relative; }
#alerts .al-card { border-radius: 22px; padding: 22px; background: linear-gradient(180deg, rgba(19,41,74,.9), rgba(10,24,42,.9)); border: 1px solid var(--line); box-shadow: 0 30px 90px -40px rgba(0,0,0,.9); transition: border-color .5s, box-shadow .5s; }
#alerts .al-card[data-s="red"] { border-color: rgba(244,63,94,.55); box-shadow: 0 30px 90px -40px rgba(244,63,94,.55); }
#alerts .al-card[data-s="ok"] { border-color: rgba(34,211,238,.55); box-shadow: 0 30px 90px -40px rgba(34,211,238,.55); }
#alerts .al-ch { display: flex; align-items: center; gap: 14px; }
#alerts .al-ch > div { flex: 1; min-width: 0; } #alerts .al-ch b { display: block; font: 600 19px/1.2 var(--head); color: var(--white); } #alerts .al-ch span { font-size: 13px; color: var(--muted); }
#alerts .al-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(244,63,94,.14); color: var(--red); flex: none; }
#alerts .al-ico svg { width: 22px; height: 22px; }
#alerts .al-st { font: 700 12px/1 var(--body) !important; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; color: #fff !important; background: var(--red); flex: none; transition: background .4s; }
#alerts .al-card[data-s="ok"] .al-st { background: var(--cyan); color: #04121f !important; }
#alerts .al-card[data-s="mid"] .al-st { background: var(--blue); }
#alerts .al-owner { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 14px; }
#alerts .al-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--muted); font: 700 11px/1 var(--body); transition: all .4s; }
#alerts .al-owner.has .al-av { background: var(--cyan); color: #04121f; }
#alerts .al-photo { height: 0; opacity: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; color: var(--cyan); font-size: 13px; transition: height .5s var(--ease), opacity .5s, margin .5s;
  background: repeating-linear-gradient(135deg, rgba(34,211,238,.06) 0 10px, rgba(34,211,238,.02) 10px 20px); border: 1px dashed rgba(34,211,238,.4); }
#alerts .al-photo svg { width: 22px; height: 22px; }
#alerts .al-photo.has { height: 64px; opacity: 1; margin-bottom: 12px; }
#alerts .al-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 140px; }
#alerts .al-log li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--text); animation: al-in .45s var(--ease) both; }
#alerts .al-log li i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); flex: none; }
#alerts .al-log li.r i { background: var(--red); box-shadow: 0 0 8px var(--red); }
#alerts .al-log li em { font-style: normal; color: var(--muted); margin-left: auto; font-size: 12px; }
@keyframes al-in { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } }
#alerts .al-toast { position: absolute; right: -14px; top: -34px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(245,249,252,.95); color: #0b1424; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); font-size: 13px; opacity: 0; transform: translateY(-10px) scale(.96); transition: all .5s var(--ease); pointer-events: none; z-index: 3; }
#alerts .al-toast.show { opacity: 1; transform: none; }
#alerts .al-toast b { display: block; font-size: 12px; color: #4b5d70; } #alerts .al-toast div span { font-weight: 600; }
#alerts .al-tb { width: 30px; height: 30px; border-radius: 9px; background: var(--red); color: #fff; display: grid; place-items: center; } #alerts .al-tb svg { width: 16px; height: 16px; }
#alerts .al-foot { margin: 0; font-size: 15px; color: var(--muted); } #alerts .al-foot b { color: var(--white); }
.hx-static #alerts .al-log li { animation: none; }
@media (max-width: 900px) { #alerts .al-stage { grid-template-columns: 1fr; gap: 48px; } #alerts .al-toast { right: 0; } }
@media (max-width: 600px) {
  #alerts .al-head { margin-bottom: 20px; }
  #alerts .al-node text { font-size: 17px; } #alerts .al-d { font-size: 13px; } #alerts .al-center { inset: 27% 27%; } #alerts .al-t { font-size: 22px; margin: 4px 0; } #alerts .al-d { font-size: 12px; } #alerts .al-n { font-size: 10px; }
  #alerts .al-card { padding: 16px; } #alerts .al-log { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { #alerts * { animation: none !important; transition: none !important; } }