#crawler-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0;
}
#crawlers-view .crawler-tile {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #31516b;
  border-radius: 14px;
  background: linear-gradient(135deg, #14283b, #0e1c2c 70%);
  box-shadow: 0 12px 28px #00000020;
}
#crawlers-view .crawler-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px;
}
#crawlers-view .crawler-tile-head > div { min-width: 0; }
#crawlers-view .crawler-id { color: #37e6ff; font: 700 10px ui-monospace, monospace; letter-spacing: .07em; }
#crawlers-view .crawler-domain {
  margin: 3px 0 0;
  color: #f1f6ff;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 760;
  overflow-wrap: anywhere;
}
#crawlers-view .crawler-live {
  flex-shrink: 0;
  padding: 4px 6px;
  border: 1px solid #37e6ff35;
  border-radius: 4px;
  color: #72eefc;
  background: #37e6ff09;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .025em;
}
#crawlers-view .crawler-url { padding: 9px 15px 11px; border-top: 1px solid #31516b70; background: #07162370; }
#crawlers-view .crawler-url > span { display: block; margin-bottom: 3px; color: #7893ac; font-size: 8px; font-weight: 750; letter-spacing: .08em; }
#crawlers-view .crawler-url a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c0d7e9; font: 10px/1.4 ui-monospace, monospace; }
#crawlers-view .crawler-url a:hover { color: #37e6ff; }
#crawlers-view .crawler-screen { position: relative; aspect-ratio: 8 / 5; isolation: isolate; overflow: hidden; background: #071320; }
#crawlers-view .crawler-frame { display: block; width: 100%; height: auto; }
#crawlers-view .crawler-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 25px; text-align: center; color: #819db5; font-size: 12px; background: linear-gradient(135deg, #0b1b29, #101b2c); }
#crawlers-view .crawler-crab {
  position: absolute;
  z-index: 3;
  width: 136px;
  height: 110.5px;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 1px #000a) drop-shadow(0 0 6px #19e3ff55);
}
#crawlers-view .crawler-crab svg { display: block; width: 100%; height: 100%; overflow: visible; }
#crawlers-view .crawler-crab.crab-textured .crab-rig { opacity: 0; }
#crawlers-view .crawler-crab.crab-textured .crab-body { transform-box: view-box; transform-origin: 80px 65px; }
#crawlers-view .crawler-crab.crab-textured .claw-left { transform-box: view-box; transform-origin: 57px 73px; }
#crawlers-view .crawler-crab.crab-textured .claw-right { transform-box: view-box; transform-origin: 103px 73px; }
#crawlers-view .crawler-crab .crab-texture-leg .is-stepping { filter: drop-shadow(0 0 1px #73f7ff); }
#crawlers-view .crawler-crab .crab-leg { stroke-linecap: round; stroke-linejoin: round; }
#crawlers-view .crawler-crab .crab-foot { filter: drop-shadow(0 0 3px #23e6f2); }
#crawlers-view .crawler-crab .crab-knee.is-stepping { fill:#fff28a; }
#crawlers-view .crawler-crab .crab-body,
#crawlers-view .crawler-crab .claw-left,
#crawlers-view .crawler-crab .claw-right { transform-box: fill-box; transform-origin: center; }
#crawlers-view .crawler-crab .crab-bubble {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 110px;
  padding: 4px 7px;
  border: 1px solid #37e6ff80;
  border-radius: 3px;
  color: #83f2ff;
  background: #071421f0;
  font: 700 8px/1.35 ui-monospace, monospace;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 0 8px #37e6ff20;
}
#crawlers-view .crawler-crab.walking .crab-body { animation: grid-crab-bob .12s ease-in-out infinite alternate; }
#crawlers-view .crawler-crab.walking .claw-left { animation: grid-crab-scan .3s ease-in-out infinite alternate; }
#crawlers-view .crawler-crab.walking .claw-right { animation: grid-crab-scan .3s ease-in-out -.15s infinite alternate-reverse; }
#crawlers-view .crawler-crab.snipping .claw-left { animation: grid-crab-snip .5s ease-in-out 1; }
#crawlers-view .crawler-crab.snipping .claw-right { animation: grid-crab-snip .5s ease-in-out 1 reverse; }
#crawlers-view .crawler-tile.is-paused .crawler-crab * { animation-play-state: paused; }
#crawlers-view .crawler-frame-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 9px 15px; border-top: 1px solid #31516b70; border-bottom: 1px solid #31516b70; }
#crawlers-view .crawler-frame-state { color: #6befff; font-size: 9px; font-weight: 800; }
#crawlers-view .crawler-frame-clock { color: #8aa6bd; font-size: 9px; }
#crawlers-view .frame-unavailable .crawler-frame-state { color: #ffb18e; }
#crawlers-view .crawler-report { padding: 12px 15px 0; }
#crawlers-view .crawler-title { margin: 0 0 4px; font-size: 11px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
#crawlers-view .crawler-report-time { color: #7f9ab3; font-size: 9px; }
#crawlers-view .crawler-tile-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px 15px; }
#crawlers-view .crawler-pages { color: #98aec1; font-size: 10px; }
#crawlers-view .crawler-view { flex-shrink: 0; border-color: #ff713d80; color: #ffb185; background: #ff713d0c; font-size: 10px; }
#crawlers-view .crawler-view:hover { border-color: #ff9a5f; color: #ffd1b0; }
#crawlers-view .crawler-grid-empty { grid-column: 1 / -1; padding: 30px 20px; border: 1px dashed #31516b; border-radius: 12px; color: #90a9bf; text-align: center; }
#crawlers-more { display: flex; margin: 8px auto 28px; }
@keyframes grid-crab-bob { from { transform: translateY(-1px); } to { transform: translateY(1px); } }
@keyframes grid-crab-scan { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes grid-crab-snip { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg) scale(.98); } }
@media (max-width: 1150px) { #crawler-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  #crawler-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #crawlers-view .crawler-tile-head { padding: 13px; }
  #crawlers-view .crawler-crab { width: 112px; height: 91px; }
}
@media (prefers-reduced-motion: reduce) {
  #crawlers-view .crawler-crab,
  #crawlers-view .crawler-crab * { animation: none !important; transition: none !important; }
}