/* LAB v8.0 · AI Security for Apps — palco 3D de duas camadas e cartoes do WAF (reaproveita .fx-*, .pipe, .tgl do lab.css) */
.as-stage .fx-row {
  grid-template-columns:1fr 1.25fr 1.1fr 1fr;
  min-height:300px
}
@media(max-width:860px) {
  .as-stage .fx-row {
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:520px) {
  .as-stage .fx-row {
    grid-template-columns:1fr
  }
}
.as-stage .fx-shield {
  width:96px;
  height:110px
}
.as-stage .fx-shield.off {
  background:rgba(239, 68, 68, .08);
  border-color:rgba(239, 68, 68, .5);
  box-shadow:none;
  filter:grayscale(.4)
}
/* cubo da aplicacao / usuario */
.as-app {
  width:84px;
  height:84px;
  margin:0 auto;
  display:grid;
  place-items:center;
  font-size:2rem;
  border-radius:16px;
  background:linear-gradient(150deg, rgba(0, 194, 212, .22), rgba(0, 194, 212, .05));
  border:1px solid rgba(0, 194, 212, .45);
  transform:rotateY(18deg) rotateX(6deg);
  box-shadow:0 14px 30px rgba(0, 0, 0, .35), inset 0 0 22px rgba(0, 194, 212, .18);
  transform-style:preserve-3d;
  transition:.4s
}
/* nucleo do AI Gateway */
.as-gw {
  width:92px;
  height:92px;
  margin:0 auto;
  display:grid;
  place-items:center;
  font-size:2rem;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(250, 174, 64, .45), rgba(246, 130, 31, .08) 70%);
  border:1px solid rgba(246, 130, 31, .55);
  box-shadow:0 0 34px rgba(246, 130, 31, .35);
  position:relative;
  transition:.4s
}
.as-gw::after {
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px dashed rgba(246, 130, 31, .45);
  animation:asSpin 9s linear infinite
}
@keyframes asSpin {
  to {
    transform:rotate(360deg)
  }
}
/* modelo */
.as-model {
  width:88px;
  height:88px;
  margin:0 auto;
  display:grid;
  place-items:center;
  font-size:2rem;
  border-radius:14px;
  background:linear-gradient(160deg, rgba(74, 222, 128, .18), rgba(74, 222, 128, .04));
  border:1px solid rgba(74, 222, 128, .45);
  transform:rotateY(-18deg) rotateX(6deg);
  box-shadow:0 14px 30px rgba(0, 0, 0, .35), inset 0 0 20px rgba(74, 222, 128, .15);
  transition:.4s
}
/* reacoes do palco */
.as-stage.hit-waf .fx-shield.on {
  animation:fxshield .6s ease-in-out 3 alternate
}
.as-stage.hit-gw .as-gw {
  box-shadow:0 0 60px rgba(250, 174, 64, .9);
  animation:asPulse .5s ease-in-out 3 alternate
}
.as-stage.hit-ok .as-model {
  box-shadow:0 0 44px rgba(74, 222, 128, .6), inset 0 0 20px rgba(74, 222, 128, .3)
}
.as-stage.hit-leak .as-model {
  border-color:rgba(239, 68, 68, .7);
  box-shadow:0 0 48px rgba(239, 68, 68, .65);
  animation:asPulse .5s ease-in-out 4 alternate
}
@keyframes asPulse {
  from {
    transform:scale(1)
  }
  to {
    transform:scale(1.07)
  }
}
/* badge e legenda */
.as-badge {
  position:absolute;
  top:12px;
  left:14px;
  z-index:4;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.06em;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(246, 130, 31, .32);
  background:rgba(246, 130, 31, .12);
  color:var(--cf-orange-2);
  transition:.3s
}
.as-cap {
  position:relative;
  z-index:3;
  margin:0;
  padding:0 18px 14px;
  font-size:.74rem;
  color:var(--muted);
  min-height:1.4em
}
/* detalhe da regra na mensagem bloqueada */
.as-rule {
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(0, 0, 0, .25);
  border:1px solid rgba(239, 68, 68, .3);
  font-size:.7rem
}
body.light .as-rule {
  background:rgba(0, 0, 0, .05)
}
.as-rule b {
  display:block;
  font-size:.64rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px
}
.as-rule code {
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  color:#fca5a5;
  word-break:break-all;
  white-space:pre-wrap
}
.as-rule small {
  display:block;
  margin-top:4px;
  font-family:var(--mono);
  font-size:.62rem;
  color:var(--muted)
}
/* kpi da borda */
.as-kpi {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(246, 130, 31, .08);
  border:1px solid rgba(246, 130, 31, .25);
  font-size:.72rem
}
.as-kpi b {
  font-family:var(--mono);
  font-size:1.1rem;
  color:var(--cf-orange-2)
}
.tgl code {
  font-family:var(--mono);
  font-size:.6rem;
  color:var(--muted);
  display:block;
  margin-top:2px;
  word-break:break-all
}
@media(prefers-reduced-motion:reduce) {
  .as-gw::after, .as-stage.hit-gw .as-gw, .as-stage.hit-leak .as-model, .as-stage.hit-waf .fx-shield.on {
    animation:none
  }
}

/* v8.24 · modo claro */
body.light .as-rule code { color:#b91c1c; }

/* v8.26 · modo claro */
body.light .as-badge, body.light .as-kpi b { color:#c2410c; }