
.swarm-stage{perspective:1100px;perspective-origin:50% 30%;margin:1.5rem 0 1rem;padding:2rem 0 2.5rem;touch-action:pan-y;cursor:grab;user-select:none}
.swarm-stage.dragging{cursor:grabbing}
.swarm-tiles{--rx:24deg;--ry:-10deg;list-style:none;padding:0;margin:0 auto;max-width:56rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:1rem;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.swarm-stage.dragging .swarm-tiles{transition:none}
.swarm-tiles li{transform-style:preserve-3d}
.swarm-tile{--z:10px;border:1px solid #2a3346;border-radius:12px;padding:.8rem .5rem;text-align:center;cursor:pointer;position:relative;background:#111723;color:inherit;width:100%;font:inherit;transform:translateZ(var(--z));transition:transform .25s ease,border-color .2s,box-shadow .25s;box-shadow:0 calc(var(--z) * .5) calc(var(--z) * .9) rgba(0,0,0,.45)}
.swarm-tile.watching{--z:34px}
.swarm-tile.detected{--z:64px;border-color:#f7768e}
.swarm-tile:hover,.swarm-tile:focus-visible{--z:80px;border-color:#d7dce6;outline:none}
.swarm-tile[aria-pressed=true]{--z:96px;border-color:#d7dce6;box-shadow:0 40px 60px rgba(0,0,0,.55),0 0 0 2px #d7dce6}
.swarm-logo{width:3rem;height:3rem;margin:0 auto .5rem;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b0e14}
.swarm-logo svg{width:1.9rem;height:1.9rem}
.swarm-tile .nm{display:block;font-size:.9em}
.swarm-tile .st{display:block;font-size:.75em;margin-top:.2rem}
.swarm-tile.detected .swarm-logo{box-shadow:0 0 0 3px #f7768e}
.swarm-tile.planned .swarm-logo{opacity:.6}
.swarm-panel{border:1px solid #2a3346;border-radius:10px;padding:1.25rem;min-height:6rem;overflow-wrap:anywhere;margin:0 auto 1.5rem;max-width:56rem;scroll-margin-top:5rem}
.swarm-panel:focus{outline:none}
.swarm-panel .head{display:flex;gap:1rem;align-items:center}
.swarm-panel .head .swarm-logo{margin:0;flex:none}
.swarm-panel h3{margin:0}
.swarm-panel ol{padding-left:1.1rem;font-size:.9em}
.swarm-free{margin:1.25rem 0 0}
.swarm-caught{font-size:1.05em;margin:.5rem 0 1rem}
.swarm-caught b{color:#f7768e;font-size:1.6em;font-variant-numeric:tabular-nums;margin-right:.2rem}
.swarm-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.swarm-legend li::before,.st::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.35em;vertical-align:middle}
.watching::before,.st.watching::before{background:#7aa2f7}.planned::before,.st.planned::before{background:#8a93a6}.detected::before,.st.detected::before{background:#f7768e}
.swarm-cta{border:1px solid #2a3346;border-radius:12px;padding:1.5rem;margin:1rem auto 2rem;max-width:56rem}
.swarm-cta h2{margin:0 0 .5rem}
.swarm-form label{display:block;font-size:.85em;margin:.75rem 0 .35rem}
.swarm-form .row{display:flex;gap:.5rem;flex-wrap:wrap}
.swarm-form select{width:100%;max-width:24rem;padding:.6rem .7rem;border-radius:8px;border:1px solid #2a3346;background:#0b0e14;color:inherit;font:inherit}
.swarm-form input{flex:1 1 16rem;min-width:0;padding:.7rem .8rem;border-radius:8px;border:1px solid #2a3346;background:#0b0e14;color:inherit;font:inherit}
.swarm-form button{padding:.7rem 1.1rem;border-radius:8px;border:0;background:#f7768e;color:#0b0e14;font:inherit;font-weight:600;cursor:pointer}
.swarm-form button[disabled]{opacity:.6;cursor:default}
.swarm-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.swarm-form .small{font-size:.85em;margin-top:.6rem}
@media (prefers-reduced-motion:reduce){.swarm-tiles,.swarm-tile{transition:none}}
@media (max-width:560px){.swarm-tiles{--rx:14deg;--ry:0deg;grid-template-columns:repeat(3,1fr);gap:.6rem}.swarm-stage{padding:1rem 0 1.5rem}}
