:root {
  --c-ok:#4ade80; --c-bad:#f87171; --c-warn:#fbbf24; --c-hi:#faae40; --c-bad-soft:#fca5a5;
  --td-cyan:#00c2d4;
  --td-cyan-2:#28d7e6;
  --bg:#041a20;
  --panel:rgba(10, 42, 52, .55);
  --panel-brd:rgba(255, 255, 255, .09);
  --cf-orange:#f6821f;
  --cf-orange-2:#faae40;
  --green:#22c55e;
  --red:#ef4444;
  --amber:#eab308;
  --violet:#a855f7;
  --text:#e6f2f4;
  --muted:#89a6ad;
  --radius:16px;
  --blur:blur(14px);
  --mono:'JetBrains Mono', Consolas, monospace;
  /* v8.6.1: variaveis de layout do lab (antes em :root duplicados no fim do arquivo) */
  --lab-nav-h:62px;
  --lab-sticky:calc(var(--lab-nav-h) + var(--lab-tabs-h));
  --lab-tabs-h:112px;
  --lm-line:rgba(255, 255, 255, .10);
  --lm-fill:rgba(255, 255, 255, .05);
  --lm-hover:rgba(255, 255, 255, .10);
  --lm-ink:var(--text);
  --lm-mute:#a9c3c9;
  --lm-bg:rgba(4, 26, 32, .92);
  --tab-a:var(--td-cyan);
  --tab-b:var(--td-cyan-2);
  --tab-ink:#04222a;
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:140px
}
:focus-visible {
  outline:2px solid var(--td-cyan);
  outline-offset:2px;
  border-radius:6px
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
  .reveal {
    opacity:1!important;
    transform:none!important
  }
}
body {
  font-family:'Segoe UI', -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:radial-gradient(60vw 60vw at 85% -10%, rgba(0, 194, 212, .14), transparent 60%), radial-gradient(50vw 50vw at 8% 18%, rgba(0, 194, 212, .10), transparent 60%), radial-gradient(70vw 60vw at 50% 120%, rgba(246, 130, 31, .08), transparent 60%), var(--bg)
}
body.light {
  --c-ok:#15803d; --c-bad:#b91c1c; --c-warn:#a16207; --c-hi:#c2410c; --c-bad-soft:#b91c1c;
  --bg:#f4f7f9;
  --panel:rgba(255, 255, 255, .75);
  --panel-brd:rgba(15, 23, 42, .10);
  --text:#0f2730;
  --muted:#51707a;
  /* v8.6.1: variaveis do menu em modo claro (antes em body.light duplicado) */
  --lm-line:rgba(15, 23, 42, .12);
  --lm-fill:rgba(15, 23, 42, .04);
  --lm-hover:rgba(15, 23, 42, .08);
  --lm-mute:#4b6670;
  --lm-bg:rgba(244, 247, 249, .94);
}
a {
  color:inherit;
  text-decoration:none
}
h1, h2, h3 {
  letter-spacing:-.02em;
  line-height:1.15
}
.container {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px
}
.mono {
  font-family:var(--mono)
}
button {
  font-family:inherit;
  cursor:pointer
}
nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 24px;
  background:rgba(4, 26, 32, .85);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--panel-brd)
}
body.light nav {
  background:rgba(255, 255, 255, .85)
}
.brand {
  display:flex;
  align-items:center;
  gap:11px
}
.back {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border-radius:9px;
  font-size:.76rem;
  font-weight:700;
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--panel-brd);
  transition:.2s;
  white-space:nowrap
}
.brand-home {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:inherit;
  border-radius:10px;
  padding:4px 8px 4px 4px;
  margin:-4px -8px -4px -4px;
  transition:.2s;
  cursor:pointer
}
.brand-home:hover {
  background:rgba(255, 255, 255, .06)
}
body.light .brand-home:hover {
  background:rgba(15, 23, 42, .05)
}
.brand-home:hover .mark {
  transform:scale(1.06)
}
.back:hover {
  color:var(--td-cyan);
  border-color:var(--td-cyan)
}
.mark {
  transition:.2s;
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#022;
  font-weight:800;
  font-size:.7rem;
  flex:none
}
.bname {
  font-size:.88rem;
  font-weight:800;
  letter-spacing:-.02em
}
.btag {
  font-size:.55rem;
  color:var(--td-cyan);
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700
}
@media(max-width:700px) {
  .btag, .bname {
    display:none
  }
}
.nav-right {
  display:flex;
  align-items:center;
  gap:8px
}
.lang {
  display:flex;
  gap:3px;
  background:var(--panel);
  border:1px solid var(--panel-brd);
  border-radius:10px;
  padding:3px
}
.lang button {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:.71rem;
  font-weight:700;
  padding:6px 9px;
  border-radius:7px
}
.lang button.on {
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#022
}
.ico-btn {
  width:33px;
  height:31px;
  border-radius:9px;
  border:1px solid var(--panel-brd);
  background:var(--panel);
  color:var(--text);
  font-size:.92rem
}
header.hero {
  padding:100px 0 24px
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:15px;
  padding:6px 14px;
  border-radius:100px;
  font-size:.74rem;
  font-weight:600;
  background:var(--panel);
  border:1px solid var(--panel-brd);
  color:var(--td-cyan)
}
.badge .dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
  animation:pulse 1.6s infinite
}
@keyframes pulse {
  0%, 100% {
    opacity:1
  }
  50% {
    opacity:.35
  }
}
header.hero h1 {
  font-size:clamp(1.85rem, 4.2vw, 2.95rem);
  font-weight:800;
  background:linear-gradient(120deg, #fff 20%, var(--td-cyan-2) 55%, var(--cf-orange-2) 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  max-width:900px
}
body.light header.hero h1 {
  background:linear-gradient(120deg, #0f2730 15%, var(--td-cyan) 55%, var(--cf-orange) 95%);
  -webkit-background-clip:text;
  background-clip:text
}
header.hero p {
  margin-top:13px;
  font-size:clamp(.93rem, 1.6vw, 1.05rem);
  color:var(--muted);
  max-width:690px
}
.netbar {
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  margin-top:22px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--panel-brd);
  background:var(--panel-brd)
}
@media(max-width:900px) {
  .netbar {
    grid-template-columns:repeat(3, 1fr)
  }
}
@media(max-width:520px) {
  .netbar {
    grid-template-columns:repeat(2, 1fr)
  }
}
.ns {
  padding:13px 12px;
  text-align:center;
  background:rgba(6, 39, 48, .9)
}
body.light .ns {
  background:rgba(255, 255, 255, .9)
}
.ns b {
  display:block;
  font-size:1.05rem;
  font-weight:800;
  color:var(--td-cyan-2)
}
.ns span {
  display:block;
  font-size:.63rem;
  color:var(--muted);
  margin-top:3px;
  line-height:1.4
}
main {
  padding:24px 0 80px
}
.pane {
  display:none;
  animation:fade .35s cubic-bezier(.2, .7, .2, 1)
}
.pane.on {
  display:block
}
@keyframes fade {
  from {
    opacity:0;
    transform:translateY(14px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.sec-head {
  margin-bottom:18px;
  max-width:800px
}
.kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:11px;
  padding:5px 12px;
  border-radius:8px
}
.k-waf {
  color:var(--cf-orange-2);
  background:rgba(246, 130, 31, .1);
  border:1px solid rgba(246, 130, 31, .28)
}
.k-ac {
  color:#c084fc;
  background:rgba(168, 85, 247, .1);
  border:1px solid rgba(168, 85, 247, .28)
}
.k-ai {
  color:#4ade80;
  background:rgba(34, 197, 94, .1);
  border:1px solid rgba(34, 197, 94, .28)
}
.sec-head h2 {
  font-size:clamp(1.45rem, 2.8vw, 2.05rem);
  font-weight:800;
  margin-bottom:9px
}
.sec-head p {
  color:var(--muted);
  font-size:.96rem
}
.ov {
  border:1px solid var(--panel-brd);
  background:var(--panel);
  backdrop-filter:var(--blur);
  border-radius:var(--radius);
  margin-bottom:16px;
  overflow:hidden
}
.ov-h {
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  width:100%;
  background:none;
  border:0;
  color:inherit;
  text-align:left;
  transition:.2s
}
.ov-h:hover {
  background:rgba(255, 255, 255, .03)
}
body.light .ov-h:hover {
  background:rgba(15, 23, 42, .03)
}
.ov-h .oi {
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:1rem;
  flex:none;
  background:rgba(0, 194, 212, .14);
  border:1px solid rgba(0, 194, 212, .3)
}
.ov-h b {
  display:block;
  font-size:.92rem;
  font-weight:700
}
.ov-h span {
  display:block;
  font-size:.72rem;
  color:var(--muted);
  margin-top:1px
}
.ov-h .car {
  margin-left:auto;
  font-size:.66rem;
  color:var(--muted);
  transition:.25s;
  flex:none
}
.ov.open .ov-h .car {
  transform:rotate(180deg)
}
.ov-b {
  display:none;
  padding:0 18px 18px;
  border-top:1px solid var(--panel-brd)
}
.ov.open .ov-b {
  display:block;
  animation:fade .25s ease
}
.ov-g {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  margin-top:16px
}
@media(max-width:860px) {
  .ov-g {
    grid-template-columns:1fr
  }
}
.ov-con {
  font-size:.86rem;
  line-height:1.7;
  color:var(--muted)
}
.ana {
  padding:15px;
  border-radius:13px;
  background:rgba(246, 130, 31, .07);
  border:1px solid rgba(246, 130, 31, .25)
}
.ana .at {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.87rem;
  font-weight:800;
  color:var(--cf-orange-2)
}
.ana p {
  font-size:.82rem;
  line-height:1.65;
  color:var(--muted);
  margin-top:8px
}
.feats {
  display:grid;
  gap:7px;
  margin-top:14px
}
.feat {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.81rem;
  color:var(--muted);
  line-height:1.5
}
.feat i {
  font-style:normal;
  color:var(--green);
  flex:none
}
.caps {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px
}
.cap {
  font-size:.67rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:100px;
  color:var(--td-cyan);
  background:rgba(0, 194, 212, .1);
  border:1px solid rgba(0, 194, 212, .26)
}
.arch {
  display:grid;
  grid-template-columns:1fr auto 1.3fr auto 1fr;
  gap:10px;
  align-items:stretch;
  margin-top:16px
}
@media(max-width:1050px) {
  .arch {
    grid-template-columns:1fr;
    gap:8px
  }
  .arch .ar {
    display:none
  }
}
.az {
  padding:13px;
  border-radius:13px;
  background:rgba(0, 0, 0, .22);
  border:1px solid var(--panel-brd)
}
body.light .az {
  background:rgba(15, 23, 42, .04)
}
.az.mid {
  border-color:rgba(0, 194, 212, .4);
  background:rgba(0, 194, 212, .06)
}
.az-t {
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
  text-align:center
}
.az.mid .az-t {
  color:var(--td-cyan-2)
}
.an {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(255, 255, 255, .04);
  border:1px solid var(--panel-brd);
  margin-bottom:6px
}
body.light .an {
  background:rgba(255, 255, 255, .7)
}
.an:last-child {
  margin-bottom:0
}
.an .ae {
  font-size:1rem;
  flex:none
}
.an b {
  display:block;
  font-size:.76rem;
  font-weight:700
}
.an span {
  display:block;
  font-size:.65rem;
  color:var(--muted);
  margin-top:1px
}
.ar {
  display:grid;
  place-items:center;
  font-size:1.2rem;
  color:var(--td-cyan);
  opacity:.6
}
.leg {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--panel-brd)
}
.lg {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.68rem;
  color:var(--muted)
}
.lg i {
  width:18px;
  height:3px;
  border-radius:9px;
  display:block;
  flex:none
}
.guide {
  padding:13px 15px;
  border-radius:12px;
  font-size:.82rem;
  line-height:1.6;
  color:#bfeefb;
  background:rgba(0, 194, 212, .08);
  border:1px solid rgba(0, 194, 212, .25);
  margin-bottom:18px
}
body.light .guide {
  color:#0f2730
}
.steps-hint {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px
}
.shint {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.71rem;
  font-weight:600;
  padding:5px 11px;
  border-radius:100px;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd);
  color:var(--muted)
}
body.light .shint {
  background:rgba(15, 23, 42, .05)
}
.shint b {
  width:17px;
  height:17px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.61rem;
  background:var(--td-cyan);
  color:#022;
  flex:none
}
.tech {
  display:none
}
body[data-mode="tecnico"] .tech {
  display:block
}
body[data-mode="apresentacao"] .guide, body[data-mode="apresentacao"] .hidepres {
  display:none
}
.g2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start
}
.g3 {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px;
  align-items:start
}
@media(max-width:1000px) {
  .g2, .g3 {
    grid-template-columns:1fr
  }
}
.card {
  background:var(--panel);
  border:1px solid var(--panel-brd);
  border-radius:var(--radius);
  backdrop-filter:var(--blur);
  padding:19px
}
.card h3 {
  font-size:.95rem;
  font-weight:700;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:8px
}
.card .sub {
  font-size:.78rem;
  color:var(--muted);
  line-height:1.55
}
.lbl {
  display:block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px
}
pre {
  margin:0;
  padding:13px;
  border-radius:12px;
  background:rgba(0, 0, 0, .34);
  border:1px solid var(--panel-brd);
  font-family:var(--mono);
  font-size:.7rem;
  line-height:1.75;
  color:#9fb3d1;
  overflow:auto;
  max-height:215px;
  white-space:pre-wrap;
  word-break:break-word
}
body.light pre {
  background:rgba(15, 23, 42, .05);
  color:#334155
}
.row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--panel-brd);
  font-size:.83rem
}
.row:last-child {
  border:0
}
.row span:first-child {
  color:var(--muted)
}
.val {
  font-family:var(--mono);
  font-size:.78rem
}
.ok {
  color:#4ade80;
  font-weight:800
}
.bad {
  color:#f87171;
  font-weight:800
}
.warn {
  color:#fbbf24;
  font-weight:800
}
input[type=text], input[type=password], select, textarea {
  width:100%;
  padding:11px 13px;
  border-radius:11px;
  font-family:inherit;
  font-size:.85rem;
  color:var(--text);
  background:rgba(255, 255, 255, .05);
  border:1px solid var(--panel-brd);
  outline:none;
  transition:.2s
}
body.light input, body.light select, body.light textarea {
  background:rgba(15, 23, 42, .04)
}
input:focus, select:focus, textarea:focus {
  border-color:var(--td-cyan)
}
input.typing {
  border-color:var(--cf-orange);
  box-shadow:0 0 0 3px rgba(246, 130, 31, .14)
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  padding:12px 20px;
  border-radius:12px;
  font-size:.86rem;
  font-weight:700;
  transition:.2s
}
.btn:disabled {
  opacity:.5;
  cursor:not-allowed;
  transform:none!important
}
.btn-p {
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#022
}
.btn-p:hover:not(:disabled) {
  transform:translateY(-2px)
}
.btn-o {
  background:linear-gradient(135deg, var(--cf-orange), var(--cf-orange-2));
  color:#301500
}
.btn-o:hover:not(:disabled) {
  transform:translateY(-2px)
}
.btn-v {
  background:linear-gradient(135deg, var(--violet), #d946ef);
  color:#fff
}
.btn-v:hover:not(:disabled) {
  transform:translateY(-2px)
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.chip {
  padding:8px 13px;
  border-radius:100px;
  font-size:.73rem;
  font-weight:700;
  color:var(--text);
  background:rgba(255, 255, 255, .07);
  border:1px solid rgba(255, 255, 255, .16);
  transition:.18s
}
.chip:hover {
  color:var(--text);
  border-color:var(--td-cyan)
}
.chip.danger {
  color:#fca5a5;
  background:rgba(239, 68, 68, .12);
  border-color:rgba(239, 68, 68, .45)
}
.chip.danger:hover {
  background:rgba(239, 68, 68, .1);
  color:#fecaca
}
.chip.warn {
  color:#fbbf24;
  border-color:rgba(234, 179, 8, .4)
}
.chip.warn:hover {
  background:rgba(234, 179, 8, .1)
}
.chip.on {
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#022;
  border-color:transparent
}
.protbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border-radius:14px;
  margin-bottom:16px;
  transition:.3s;
  flex-wrap:wrap
}
.protbar.on {
  background:rgba(34, 197, 94, .09);
  border:1px solid rgba(34, 197, 94, .35)
}
.protbar.off {
  background:rgba(239, 68, 68, .09);
  border:1px solid rgba(239, 68, 68, .4)
}
.protbar .pl {
  display:flex;
  align-items:center;
  gap:12px
}
.protbar .pi {
  width:40px;
  height:40px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  flex:none
}
.protbar.on .pi {
  background:rgba(34, 197, 94, .18)
}
.protbar.off .pi {
  background:rgba(239, 68, 68, .18)
}
.protbar b {
  display:block;
  font-size:.89rem
}
.protbar span {
  display:block;
  font-size:.73rem;
  color:var(--muted);
  margin-top:1px
}
.sw {
  position:relative;
  width:52px;
  height:29px;
  border-radius:99px;
  background:rgba(255, 255, 255, .13);
  border:0;
  flex:none;
  transition:.25s
}
.sw::after {
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:23px;
  height:23px;
  border-radius:50%;
  background:#fff;
  transition:.25s
}
.sw.on {
  background:linear-gradient(135deg, var(--green), #4ade80)
}
.sw.on::after {
  transform:translateX(23px)
}
.sw.sm {
  width:44px;
  height:25px
}
.sw.sm::after {
  width:19px;
  height:19px
}
.sw.sm.on::after {
  transform:translateX(19px)
}
.brw {
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--panel-brd);
  background:#0d1b2a
}
body.light .brw {
  background:#fff
}
.bbar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  background:rgba(255, 255, 255, .05);
  border-bottom:1px solid var(--panel-brd)
}
body.light .bbar {
  background:#e2e8f0
}
.bdots {
  display:flex;
  gap:6px
}
.bdots i {
  width:10px;
  height:10px;
  border-radius:99px;
  display:block
}
.burl {
  flex:1;
  padding:6px 12px;
  border-radius:8px;
  background:rgba(0, 0, 0, .3);
  font-family:var(--mono);
  font-size:.69rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px
}
body.light .burl {
  background:#f1f5f9
}
.bshield {
  font-size:.66rem;
  font-weight:800;
  padding:3px 9px;
  border-radius:100px;
  flex:none
}
.bshield.on {
  background:rgba(34, 197, 94, .18);
  color:#4ade80
}
.bshield.off {
  background:rgba(239, 68, 68, .18);
  color:#fca5a5
}
.bview {
  padding:19px;
  min-height:240px
}
.shop-h {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:13px;
  border-bottom:1px solid var(--panel-brd);
  margin-bottom:15px
}
.shop-h b {
  font-size:.98rem;
  font-weight:800;
  color:var(--td-cyan-2)
}
.shop-h span {
  font-size:.69rem;
  color:var(--muted)
}
.field {
  margin-bottom:11px
}
.dbtable {
  width:100%;
  border-collapse:collapse;
  font-family:var(--mono);
  font-size:.66rem;
  margin-top:10px
}
.dbtable th {
  text-align:left;
  padding:7px 9px;
  color:var(--muted);
  font-size:.6rem;
  text-transform:uppercase;
  border-bottom:1px solid var(--panel-brd)
}
.dbtable td {
  padding:7px 9px;
  border-bottom:1px solid var(--panel-brd);
  color:#fca5a5
}
.dbtable tr {
  animation:leak .4s ease both
}
@keyframes leak {
  from {
    opacity:0;
    transform:translateX(-14px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.leakbox {
  padding:14px;
  border-radius:12px;
  background:rgba(239, 68, 68, .08);
  border:1px solid rgba(239, 68, 68, .35);
  margin-top:14px
}
.leakbox .lt {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.83rem;
  font-weight:800;
  color:#fca5a5
}
.blockbox {
  padding:24px 18px;
  border-radius:12px;
  background:rgba(34, 197, 94, .07);
  border:1px solid rgba(34, 197, 94, .35);
  text-align:center;
  margin-top:14px
}
.blockbox .em {
  font-size:2.5rem
}
.blockbox h4 {
  font-size:1.08rem;
  margin-top:8px;
  color:#4ade80
}
.blockbox p {
  font-size:.78rem;
  color:var(--muted);
  margin-top:6px
}
.blockbox .code {
  display:inline-block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:.69rem;
  padding:5px 11px;
  border-radius:7px;
  background:rgba(0, 0, 0, .28)
}
body.light .blockbox .code {
  background:rgba(15, 23, 42, .07)
}
.pipe {
  display:grid;
  gap:8px;
  margin-top:13px
}
.stage {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd);
  opacity:.32;
  transition:.35s
}
body.light .stage {
  background:rgba(15, 23, 42, .04)
}
.stage.act {
  opacity:1;
  border-color:rgba(0, 194, 212, .45);
  background:rgba(0, 194, 212, .07)
}
.stage.pass {
  opacity:1;
  border-color:rgba(34, 197, 94, .35)
}
.stage.stop {
  opacity:1;
  border-color:rgba(239, 68, 68, .5);
  background:rgba(239, 68, 68, .09)
}
.stage .si {
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:.83rem;
  flex:none;
  background:rgba(255, 255, 255, .07)
}
.stage.pass .si {
  background:var(--green);
  color:#022
}
.stage.stop .si {
  background:var(--red);
  color:#fff
}
.stage b {
  display:block;
  font-size:.8rem
}
.stage em {
  display:block;
  font-style:normal;
  font-size:.68rem;
  color:var(--muted);
  margin-top:1px
}
.stage .sr {
  margin-left:auto;
  font-family:var(--mono);
  font-size:.67rem;
  color:var(--muted);
  flex:none
}
.users {
  display:grid;
  gap:9px
}
.user {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px;
  border-radius:13px;
  text-align:left;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd);
  transition:.2s;
  color:inherit;
  width:100%
}
body.light .user {
  background:rgba(15, 23, 42, .04)
}
.user:hover {
  border-color:rgba(168, 85, 247, .5);
  transform:translateX(3px)
}
.user.on {
  border-color:transparent;
  background:linear-gradient(135deg, rgba(168, 85, 247, .2), rgba(217, 70, 239, .1))
}
.user .av {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.1rem;
  flex:none;
  background:rgba(168, 85, 247, .16)
}
.user .ub {
  flex:1;
  min-width:0
}
.user b {
  display:block;
  font-size:.82rem
}
.user .cred {
  font-family:var(--mono);
  font-size:.67rem;
  color:var(--td-cyan-2);
  margin-top:3px;
  word-break:break-all
}
.user .cred i {
  font-style:normal;
  color:var(--muted)
}
.ubadges {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px
}
.ub-tag {
  font-size:.59rem;
  font-weight:700;
  padding:2px 7px;
  border-radius:100px;
  white-space:nowrap
}
.ub-ok {
  background:rgba(34, 197, 94, .15);
  color:#4ade80
}
.ub-no {
  background:rgba(239, 68, 68, .15);
  color:#fca5a5
}
.ub-nt {
  background:rgba(255, 255, 255, .08);
  color:var(--muted)
}
.ub-sv {
  background:rgba(0, 194, 212, .15);
  color:var(--td-cyan-2)
}
body.light .ub-nt {
  background:rgba(15, 23, 42, .07)
}
.mfa {
  border-radius:var(--radius);
  border:1px solid var(--panel-brd);
  background:var(--panel);
  overflow:hidden;
  transition:.35s;
  opacity:.35
}
.mfa.live {
  opacity:1;
  border-color:rgba(168, 85, 247, .5)
}
.mfa-h {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 16px;
  border-bottom:1px solid var(--panel-brd);
  background:rgba(168, 85, 247, .08)
}
.mfa-h .mi {
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:1rem;
  background:rgba(168, 85, 247, .2);
  flex:none
}
.mfa-h b {
  font-size:.84rem
}
.mfa-h span {
  display:block;
  font-size:.67rem;
  color:var(--muted)
}
.mfa-b {
  padding:19px 16px;
  text-align:center
}
.mfa-code {
  display:flex;
  gap:7px;
  justify-content:center;
  margin:14px 0;
  flex-wrap:wrap
}
.mfa-d {
  width:38px;
  height:48px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:1.28rem;
  font-weight:800;
  background:rgba(0, 0, 0, .28);
  border:1px solid var(--panel-brd);
  color:var(--muted)
}
body.light .mfa-d {
  background:rgba(15, 23, 42, .06)
}
.mfa-d.fill {
  color:var(--td-cyan-2);
  border-color:rgba(0, 194, 212, .5);
  background:rgba(0, 194, 212, .1);
  animation:pop .25s ease
}
@keyframes pop {
  from {
    transform:scale(.8);
    opacity:0
  }
  to {
    transform:scale(1);
    opacity:1
  }
}
.mfa-t {
  font-size:.71rem;
  color:var(--muted)
}
.mfa-bar {
  height:4px;
  border-radius:99px;
  background:rgba(255, 255, 255, .1);
  overflow:hidden;
  margin-top:9px
}
.mfa-bar i {
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg, var(--violet), #d946ef);
  transition:width 1s linear
}
.push {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px;
  border-radius:12px;
  background:rgba(0, 0, 0, .24);
  border:1px solid var(--panel-brd);
  margin-top:14px;
  text-align:left
}
body.light .push {
  background:rgba(15, 23, 42, .05)
}
.push .pe {
  font-size:1.5rem;
  flex:none
}
.push b {
  display:block;
  font-size:.78rem
}
.push span {
  display:block;
  font-size:.67rem;
  color:var(--muted);
  word-break:break-all
}
.verdict {
  display:grid;
  place-items:center;
  text-align:center;
  min-height:195px;
  padding:23px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--panel-brd);
  transition:.3s
}
.verdict.blocked {
  border-color:rgba(239, 68, 68, .45);
  background:rgba(239, 68, 68, .07)
}
.verdict.allowed {
  border-color:rgba(34, 197, 94, .4);
  background:rgba(34, 197, 94, .06)
}
.verdict .em {
  font-size:2.7rem;
  line-height:1
}
.verdict h4 {
  font-size:1.28rem;
  margin-top:10px
}
.verdict p {
  font-size:.79rem;
  color:var(--muted);
  margin-top:6px;
  max-width:330px
}
.verdict .code {
  margin-top:11px;
  font-family:var(--mono);
  font-size:.7rem;
  padding:5px 11px;
  border-radius:7px;
  background:rgba(0, 0, 0, .28);
  opacity:.85
}
body.light .verdict .code {
  background:rgba(15, 23, 42, .07)
}
.owasp {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.62rem;
  font-weight:800;
  color:var(--cf-orange-2);
  background:rgba(246, 130, 31, .12);
  border:1px solid rgba(246, 130, 31, .32);
  padding:3px 9px;
  border-radius:100px;
  text-transform:uppercase
}
.chat {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--radius);
  background:#0b1020;
  border:1px solid var(--panel-brd)
}
body.light .chat {
  background:#fff
}
.chd {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--panel-brd)
}
.who {
  display:flex;
  align-items:center;
  gap:11px
}
.av2 {
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:1.03rem;
  background:rgba(34, 197, 94, .14);
  border:1px solid rgba(34, 197, 94, .3)
}
.who b {
  font-size:.86rem
}
.who span {
  display:block;
  font-size:.68rem;
  color:#4ade80;
  margin-top:1px
}
.msgs {
  height:310px;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.msg {
  max-width:85%;
  padding:10px 14px;
  border-radius:15px;
  font-size:.84rem;
  line-height:1.55;
  animation:fade .22s ease
}
.me {
  align-self:flex-end;
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#022;
  border-bottom-right-radius:5px;
  font-weight:500
}
.bot {
  align-self:flex-start;
  background:rgba(255, 255, 255, .07);
  border-bottom-left-radius:5px
}
body.light .bot {
  background:rgba(15, 23, 42, .05)
}
.bot.blk {
  background:rgba(239, 68, 68, .11);
  border:1px solid rgba(239, 68, 68, .32);
  color:#fecaca
}
body.light .bot.blk {
  color:#991b1b
}
.bot.cache {
  background:rgba(0, 194, 212, .1);
  border:1px solid rgba(0, 194, 212, .3)
}
.bot.fb {
  background:rgba(234, 179, 8, .1);
  border:1px solid rgba(234, 179, 8, .35)
}
.mtag {
  display:inline-block;
  margin-top:7px;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:100px
}
.mtag.c {
  background:rgba(0, 194, 212, .2);
  color:var(--td-cyan-2)
}
.mtag.b {
  background:rgba(239, 68, 68, .2);
  color:#fca5a5
}
.mtag.f {
  background:rgba(234, 179, 8, .2);
  color:#fbbf24
}
.cft {
  padding:13px;
  border-top:1px solid var(--panel-brd)
}
.inl {
  display:flex;
  gap:8px
}
.send {
  width:46px;
  border:0;
  border-radius:11px;
  font-size:1rem;
  background:linear-gradient(135deg, var(--green), #4ade80);
  color:#022;
  flex:none
}
.tgl {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd);
  margin-bottom:8px
}
body.light .tgl {
  background:rgba(15, 23, 42, .04)
}
.tgl b {
  display:block;
  font-size:.8rem
}
.tgl span {
  display:block;
  font-size:.68rem;
  color:var(--muted);
  margin-top:2px
}
.meter {
  height:8px;
  border-radius:99px;
  background:rgba(255, 255, 255, .09);
  overflow:hidden;
  margin-top:11px
}
body.light .meter {
  background:rgba(15, 23, 42, .1)
}
.meter i {
  display:block;
  height:100%;
  border-radius:99px;
  width:90%;
  transition:width .5s ease, background .3s
}
.log {
  display:grid;
  gap:6px;
  max-height:175px;
  overflow-y:auto
}
.logline {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  font-family:var(--mono);
  font-size:.67rem;
  color:var(--muted);
  background:rgba(0, 0, 0, .25);
  border:1px solid var(--panel-brd);
  animation:slide .3s
}
body.light .logline {
  background:rgba(15, 23, 42, .04)
}
@keyframes slide {
  from {
    opacity:0;
    transform:translateX(-10px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.logline b {
  font-weight:800;
  flex:none
}
.logline .lr {
  margin-left:auto;
  opacity:.6;
  flex:none
}
@media(max-width:620px) {
  .logline .lr {
    display:none
  }
}
.kpis {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:9px;
  margin-top:12px
}
@media(max-width:620px) {
  .kpis {
    grid-template-columns:repeat(2, 1fr)
  }
}
.kpi {
  padding:11px;
  border-radius:11px;
  text-align:center;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd)
}
body.light .kpi {
  background:rgba(15, 23, 42, .04)
}
.kpi b {
  display:block;
  font-size:1.03rem;
  font-weight:800;
  color:var(--td-cyan-2)
}
.kpi span {
  display:block;
  font-size:.62rem;
  color:var(--muted);
  margin-top:2px
}
.legend {
  margin-top:16px;
  padding:13px 15px;
  border-radius:12px;
  font-size:.76rem;
  line-height:1.6;
  color:var(--muted);
  background:rgba(246, 130, 31, .07);
  border:1px solid rgba(246, 130, 31, .22)
}
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:.6s cubic-bezier(.2, .7, .2, 1)
}
.reveal.in {
  opacity:1;
  transform:none
}
footer {
  border-top:1px solid var(--panel-brd);
  padding:26px 0 42px;
  text-align:center;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.8
}
.toast {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:300;
  padding:13px 19px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur);
  font-size:.84rem;
  transform:translateY(160%);
  transition:.4s;
  max-width:330px
}
.toast.show {
  transform:none
}
.mapwrap {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--panel-brd);
  background:#061b24
}
body.light .mapwrap {
  background:#e8eef2
}
#gmap {
  display:block;
  width:100%;
  height:clamp(330px, 52vh, 520px);
  cursor:crosshair
}
@media(max-width:700px) {
  #gmap {
    height:clamp(260px, 42vh, 340px)
  }
  .mapmodes {
    top:9px;
    left:9px;
    padding:3px
  }
  .mapmodes button {
    font-size:.64rem;
    padding:6px 9px
  }
  .maplegend {
    bottom:9px;
    left:9px;
    padding:6px 10px;
    gap:9px
  }
}
.mapmodes {
  position:absolute;
  top:13px;
  left:13px;
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:11px;
  background:rgba(4, 26, 32, .86);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur);
  z-index:5
}
body.light .mapmodes {
  background:rgba(255, 255, 255, .9)
}
.mapmodes button {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:.69rem;
  font-weight:700;
  padding:7px 11px;
  border-radius:8px;
  white-space:nowrap
}
.mapmodes button.on[data-mm="traffic"] {
  background:linear-gradient(135deg, #00c2d4, #28d7e6);
  color:#04222a
}
.mapmodes button.on[data-mm="attack"] {
  background:linear-gradient(135deg, #ef4444, #f87171);
  color:#fff
}
.mapmodes button.on[data-mm="latency"] {
  background:linear-gradient(135deg, #eab308, #facc15);
  color:#2a2100
}
.mapmodes button {
  transition:.2s
}
.mapmodes button:hover:not(.on) {
  color:var(--text);
  background:rgba(255, 255, 255, .08)
}
body.light .mapmodes button:hover:not(.on) {
  background:rgba(15, 23, 42, .06)
}
body.light .mapmodes button {
  color:#3d5a63
}
.maplegend {
  position:absolute;
  bottom:13px;
  left:13px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(4, 26, 32, .86);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur);
  z-index:5
}
body.light .maplegend {
  background:rgba(255, 255, 255, .9)
}
.maplegend span {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.65rem;
  color:var(--muted)
}
.maplegend i {
  width:9px;
  height:9px;
  border-radius:99px;
  display:block;
  flex:none
}
.maptip {
  position:absolute;
  pointer-events:none;
  z-index:8;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(4, 26, 32, .96);
  border:1px solid rgba(0, 194, 212, .4);
  font-size:.7rem;
  box-shadow:0 10px 30px -8px rgba(0, 0, 0, .7);
  opacity:0;
  transition:opacity .15s;
  max-width:220px
}
body.light .maptip {
  background:rgba(255, 255, 255, .98)
}
.maptip.on {
  opacity:1
}
.maptip b {
  display:block;
  font-size:.78rem;
  color:var(--td-cyan-2);
  margin-bottom:3px
}
body.light .maptip b {
  color:#0891a3
}
body.light .maptip {
  border-color:rgba(0, 150, 175, .45);
  box-shadow:0 10px 30px -10px rgba(15, 23, 42, .35)
}
.maptip em {
  display:block;
  font-style:normal;
  color:var(--muted);
  font-size:.66rem;
  line-height:1.5
}
.regiongrid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin-top:14px
}
@media(max-width:900px) {
  .regiongrid {
    grid-template-columns:repeat(2, 1fr)
  }
}
.regcard {
  padding:13px;
  border-radius:12px;
  text-align:left;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd);
  transition:.2s;
  color:inherit;
  width:100%
}
body.light .regcard {
  background:rgba(15, 23, 42, .04)
}
.regcard:hover {
  border-color:rgba(0, 194, 212, .5);
  transform:translateY(-2px)
}
.regcard.on {
  border-color:transparent;
  background:linear-gradient(135deg, rgba(0, 194, 212, .18), rgba(40, 215, 230, .08))
}
.regcard .re {
  font-size:1.2rem
}
.regcard b {
  display:block;
  font-size:.8rem;
  margin-top:5px
}
.regcard span {
  display:block;
  font-size:.66rem;
  color:var(--muted);
  margin-top:2px
}
.catbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:16px
}
.catsearch {
  position:relative;
  flex:1;
  min-width:210px
}
.catsearch input {
  width:100%;
  padding:11px 13px 11px 36px;
  border-radius:11px;
  font-size:.84rem
}
.catsearch .si {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:.85rem;
  opacity:.6;
  pointer-events:none
}
.catfilters {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.catf {
  padding:9px 14px;
  border-radius:100px;
  font-size:.73rem;
  font-weight:700;
  color:var(--text);
  background:rgba(255, 255, 255, .07);
  border:1px solid rgba(255, 255, 255, .16);
  transition:.18s;
  white-space:nowrap
}
.catf:hover {
  color:var(--text);
  border-color:var(--td-cyan)
}
.catf.on {
  color:#022;
  border-color:transparent
}
.catf .cn {
  opacity:.7;
  font-weight:600;
  margin-left:3px
}
.catgrid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:13px
}
@media(max-width:1000px) {
  .catgrid {
    grid-template-columns:repeat(2, 1fr)
  }
}
@media(max-width:640px) {
  .catgrid {
    grid-template-columns:1fr
  }
}
.pcard {
  display:flex;
  flex-direction:column;
  padding:16px;
  border-radius:14px;
  text-align:left;
  background:var(--panel);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur);
  transition:.22s;
  color:inherit;
  position:relative;
  overflow:hidden
}
.pcard::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--pc, var(--td-cyan))
}
.pcard:hover {
  transform:translateY(-3px);
  border-color:rgba(0, 194, 212, .4);
  box-shadow:0 14px 34px -14px rgba(0, 0, 0, .5)
}
.pcard.hide {
  display:none
}
.pc-top {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:10px
}
.pc-ic {
  width:40px;
  height:40px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  flex:none;
  background:var(--pcb, rgba(0, 194, 212, .12));
  border:1px solid var(--pcd, rgba(0, 194, 212, .3))
}
.pc-n {
  font-size:.92rem;
  font-weight:800;
  line-height:1.2
}
.pc-c {
  font-size:.62rem;
  font-weight:700;
  color:var(--pc, var(--td-cyan));
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:2px
}
.pc-w {
  font-size:.79rem;
  color:var(--muted);
  line-height:1.55;
  flex:1
}
.pc-more {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  font-size:.73rem;
  font-weight:700;
  color:var(--pc, var(--td-cyan))
}
.pcard:hover .pc-more {
  gap:9px
}
.pmov {
  position:fixed;
  inset:0;
  z-index:240;
  display:none;
  overflow-y:auto;
  padding:22px;
  background:rgba(3, 14, 18, .86);
  backdrop-filter:blur(8px)
}
body.light .pmov {
  background:rgba(15, 23, 42, .6)
}
.pmov.on {
  display:block
}
.pmod {
  max-width:780px;
  margin:0 auto;
  border-radius:20px;
  background:var(--bg);
  border:1px solid var(--panel-brd);
  box-shadow:0 30px 80px -18px rgba(0, 0, 0, .8);
  animation:pmIn .3s cubic-bezier(.2, .7, .2, 1);
  overflow:hidden
}
@keyframes pmIn {
  from {
    opacity:0;
    transform:translateY(24px) scale(.98)
  }
  to {
    opacity:1;
    transform:none
  }
}
.pm-h {
  display:flex;
  align-items:center;
  gap:13px;
  padding:19px;
  border-bottom:1px solid var(--panel-brd)
}
.pm-ic {
  width:48px;
  height:48px;
  border-radius:13px;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  flex:none
}
.pm-h b {
  display:block;
  font-size:1.15rem;
  font-weight:800
}
.pm-h span {
  display:block;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:2px
}
.pm-x {
  margin-left:auto;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--panel-brd);
  background:none;
  color:var(--muted);
  font-size:.9rem;
  flex:none
}
.pm-x:hover {
  color:var(--text);
  border-color:var(--red)
}
.pm-b {
  padding:19px
}
.pm-s {
  margin-bottom:17px
}
.pm-s:last-child {
  margin-bottom:0
}
.pm-l {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px
}
.pm-t {
  font-size:.87rem;
  line-height:1.7;
  color:var(--text)
}
.pm-caps {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.pm-doc {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:11px 18px;
  border-radius:11px;
  font-size:.8rem;
  font-weight:700;
  color:#022;
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2))
}
.pm-doc:hover {
  transform:translateY(-1px)
}
@media(max-width:620px) {
  .pmov {
    padding:10px
  }
  .pm-b {
    padding:15px
  }
}
.ddwrap {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--panel-brd);
  background:#061b24
}
body.light .ddwrap {
  background:#eef3f6
}
#ddChart {
  display:block;
  width:100%;
  height:clamp(230px, 32vh, 320px)
}
.ddstat {
  position:absolute;
  top:12px;
  right:13px;
  display:flex;
  gap:7px;
  z-index:4
}
.ddpill {
  padding:6px 12px;
  border-radius:100px;
  font-family:var(--mono);
  font-size:.69rem;
  font-weight:800;
  background:rgba(4, 26, 32, .88);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur)
}
body.light .ddpill {
  background:rgba(255, 255, 255, .92)
}
.ddleg {
  position:absolute;
  bottom:12px;
  left:13px;
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  padding:7px 12px;
  border-radius:10px;
  background:rgba(4, 26, 32, .88);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur);
  z-index:4
}
body.light .ddleg {
  background:rgba(255, 255, 255, .92)
}
.ddleg span {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.65rem;
  color:var(--muted)
}
.ddleg i {
  width:14px;
  height:3px;
  border-radius:9px;
  display:block;
  flex:none
}
.ddbanner {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:.4s
}
.ddbanner.on {
  opacity:1
}
.ddbanner div {
  padding:13px 24px;
  border-radius:14px;
  font-size:1.05rem;
  font-weight:800;
  background:rgba(239, 68, 68, .16);
  border:1px solid rgba(239, 68, 68, .5);
  color:#fca5a5;
  backdrop-filter:var(--blur);
  animation:ddpulse 1.4s ease-in-out infinite
}
@keyframes ddpulse {
  0%, 100% {
    transform:scale(1)
  }
  50% {
    transform:scale(1.03)
  }
}
.botscore {
  position:relative;
  padding:20px 18px 14px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur)
}
.bs-val {
  text-align:center;
  margin-bottom:14px
}
.bs-n {
  font-family:var(--mono);
  font-size:3.1rem;
  font-weight:800;
  line-height:1;
  transition:color .3s
}
.bs-lbl {
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:4px;
  transition:color .3s
}
.bs-track {
  position:relative;
  height:13px;
  border-radius:99px;
  overflow:hidden;
  margin:16px 0 9px;
  background:linear-gradient(90deg, #ef4444 0%, #f6821f 28%, #eab308 48%, #4ade80 72%, #22c55e 100%)
}
.bs-th {
  position:absolute;
  top:-4px;
  width:4px;
  height:21px;
  border-radius:9px;
  background:#fff;
  box-shadow:0 0 0 2px rgba(0, 0, 0, .35);
  transition:left .25s cubic-bezier(.2, .7, .2, 1)
}
input[type=range].bs-in {
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:26px;
  background:transparent;
  border:0;
  padding:0;
  cursor:grab;
  margin:0
}
input[type=range].bs-in:active {
  cursor:grabbing
}
input[type=range].bs-in::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--td-cyan);
  cursor:grab;
  box-shadow:0 3px 12px rgba(0, 0, 0, .45)
}
input[type=range].bs-in::-moz-range-thumb {
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--td-cyan);
  cursor:grab;
  box-shadow:0 3px 12px rgba(0, 0, 0, .45)
}
.bs-scale {
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:.63rem;
  color:var(--muted);
  margin-top:2px
}
.bs-zones {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:7px;
  margin-top:14px
}
.bs-z {
  padding:9px;
  border-radius:10px;
  text-align:center;
  border:1px solid var(--panel-brd);
  background:rgba(0, 0, 0, .2);
  transition:.25s;
  opacity:.4
}
body.light .bs-z {
  background:rgba(15, 23, 42, .04)
}
.bs-z.on {
  opacity:1;
  transform:translateY(-2px)
}
.bs-z b {
  display:block;
  font-size:.72rem;
  font-weight:800
}
.bs-z span {
  display:block;
  font-size:.6rem;
  color:var(--muted);
  margin-top:2px
}
.botp {
  display:grid;
  gap:8px
}
.bp {
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:12px;
  border-radius:12px;
  text-align:left;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd);
  transition:.2s;
  color:inherit;
  width:100%
}
body.light .bp {
  background:rgba(15, 23, 42, .04)
}
.bp:hover {
  border-color:rgba(0, 194, 212, .45);
  transform:translateX(3px)
}
.bp.on {
  border-color:transparent;
  background:linear-gradient(135deg, rgba(0, 194, 212, .18), rgba(40, 215, 230, .06))
}
.bp .be {
  font-size:1.2rem;
  flex:none;
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(255, 255, 255, .06)
}
body.light .bp .be {
  background:rgba(15, 23, 42, .05)
}
.bp b {
  display:block;
  font-size:.8rem
}
.bp span {
  display:block;
  font-size:.66rem;
  color:var(--muted);
  margin-top:2px;
  line-height:1.45
}
.bp .bsc {
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:800;
  flex:none;
  padding:3px 9px;
  border-radius:100px
}
.botsig {
  display:grid;
  gap:7px;
  margin-top:12px
}
.sig {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd);
  font-size:.75rem;
  opacity:.35;
  transition:.3s
}
body.light .sig {
  background:rgba(15, 23, 42, .04)
}
.sig.on {
  opacity:1
}
.sig.bad {
  border-color:rgba(239, 68, 68, .4);
  background:rgba(239, 68, 68, .07)
}
.sig.good {
  border-color:rgba(34, 197, 94, .35);
  background:rgba(34, 197, 94, .06)
}
.sig .sgi {
  width:24px;
  height:24px;
  border-radius:7px;
  display:grid;
  place-items:center;
  font-size:.72rem;
  flex:none;
  background:rgba(255, 255, 255, .08)
}
.sig.bad .sgi {
  background:var(--red);
  color:#fff
}
.sig.good .sgi {
  background:var(--green);
  color:#022
}
.sig b {
  font-weight:700;
  flex:1;
  min-width:0
}
.sig em {
  font-style:normal;
  font-family:var(--mono);
  font-size:.64rem;
  color:var(--muted);
  flex:none
}
.botres {
  display:grid;
  place-items:center;
  text-align:center;
  min-height:180px;
  padding:22px;
  border-radius:var(--radius);
  border:1px solid var(--panel-brd);
  background:var(--panel);
  transition:.35s
}
.botres.allow {
  border-color:rgba(34, 197, 94, .45);
  background:rgba(34, 197, 94, .07)
}
.botres.chal {
  border-color:rgba(234, 179, 8, .45);
  background:rgba(234, 179, 8, .07)
}
.botres.block {
  border-color:rgba(239, 68, 68, .45);
  background:rgba(239, 68, 68, .07)
}
.botres .em {
  font-size:2.6rem;
  line-height:1
}
.botres h4 {
  font-size:1.2rem;
  margin-top:9px
}
.botres p {
  font-size:.78rem;
  color:var(--muted);
  margin-top:6px;
  max-width:300px
}
.botres .code {
  margin-top:10px;
  font-family:var(--mono);
  font-size:.68rem;
  padding:4px 11px;
  border-radius:7px;
  background:rgba(0, 0, 0, .28)
}
body.light .botres .code {
  background:rgba(15, 23, 42, .07)
}
.lbwrap {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--panel-brd);
  background:#061b24;
  padding:18px
}
body.light .lbwrap {
  background:#eef3f6
}
.lbflow {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center
}
@media(max-width:760px) {
  .lbflow {
    grid-template-columns:1fr
  }
}
.lbsrc {
  display:grid;
  place-items:center;
  gap:8px;
  padding:14px;
  border-radius:14px;
  background:rgba(0, 194, 212, .08);
  border:1px solid rgba(0, 194, 212, .3);
  min-width:120px
}
.lbsrc .se {
  font-size:1.7rem
}
.lbsrc b {
  font-size:.76rem
}
.lbsrc span {
  font-size:.63rem;
  color:var(--muted)
}
.lborigins {
  display:grid;
  gap:9px
}
.lbo {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px;
  border-radius:13px;
  background:rgba(0, 0, 0, .22);
  border:1px solid var(--panel-brd);
  transition:.35s;
  overflow:hidden
}
body.light .lbo {
  background:rgba(255, 255, 255, .75)
}
.lbo.up {
  border-color:rgba(34, 197, 94, .4)
}
.lbo.down {
  border-color:rgba(239, 68, 68, .5);
  background:rgba(239, 68, 68, .07);
  opacity:.62
}
.lbo.act {
  box-shadow:0 0 0 2px rgba(0, 194, 212, .45)
}
.lbo .oi {
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:1.05rem;
  flex:none;
  background:rgba(255, 255, 255, .07)
}
body.light .lbo .oi {
  background:rgba(15, 23, 42, .05)
}
.lbo.up .oi {
  background:rgba(34, 197, 94, .16)
}
.lbo.down .oi {
  background:rgba(239, 68, 68, .18)
}
.lbo .ob {
  flex:1;
  min-width:0
}
.lbo b {
  display:block;
  font-size:.81rem
}
.lbo .om {
  display:block;
  font-size:.65rem;
  color:var(--muted);
  margin-top:2px;
  font-family:var(--mono)
}
.lbo .ost {
  font-size:.6rem;
  font-weight:800;
  padding:3px 9px;
  border-radius:100px;
  flex:none;
  white-space:nowrap
}
.lbo.up .ost {
  background:rgba(34, 197, 94, .18);
  color:#4ade80
}
.lbo.down .ost {
  background:rgba(239, 68, 68, .2);
  color:#fca5a5
}
.lbbar {
  height:5px;
  border-radius:99px;
  background:rgba(255, 255, 255, .08);
  overflow:hidden;
  margin-top:7px
}
body.light .lbbar {
  background:rgba(15, 23, 42, .09)
}
.lbbar i {
  display:block;
  height:100%;
  border-radius:99px;
  width:0;
  transition:width .6s cubic-bezier(.2, .7, .2, 1);
  background:linear-gradient(90deg, var(--td-cyan), var(--td-cyan-2))
}
.lbo.down .lbbar i {
  background:linear-gradient(90deg, #ef4444, #f87171)
}
.lbpkt {
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--td-cyan);
  box-shadow:0 0 10px var(--td-cyan);
  pointer-events:none;
  z-index:3;
  opacity:0
}
.lbmodes {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:13px
}
.lbm {
  padding:8px 13px;
  border-radius:100px;
  font-size:.72rem;
  font-weight:700;
  color:var(--text);
  background:rgba(255, 255, 255, .07);
  border:1px solid rgba(255, 255, 255, .16);
  transition:.18s
}
.lbm:hover {
  color:var(--text);
  border-color:var(--td-cyan)
}
.lbm.on {
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#04222a;
  border-color:transparent
}
body.light .chip {
  color:#0f2730;
  background:rgba(15, 23, 42, .05);
  border-color:rgba(15, 23, 42, .16)
}
body.light .chip:hover {
  background:rgba(15, 23, 42, .09);
  border-color:var(--td-cyan)
}
body.light .chip.danger {
  color:#b91c1c;
  background:rgba(239, 68, 68, .09);
  border-color:rgba(239, 68, 68, .4)
}
body.light .chip.danger:hover {
  background:rgba(239, 68, 68, .16);
  color:#991b1b
}
body.light .chip.warn {
  color:#a16207;
  background:rgba(234, 179, 8, .12);
  border-color:rgba(234, 179, 8, .45)
}
body.light .lbm {
  color:#0f2730;
  background:rgba(15, 23, 42, .05);
  border-color:rgba(15, 23, 42, .16)
}
body.light .lbm:hover {
  background:rgba(15, 23, 42, .09)
}
body.light .catf {
  color:#0f2730;
  background:rgba(15, 23, 42, .05);
  border-color:rgba(15, 23, 42, .16)
}
body.light .catf:hover {
  background:rgba(15, 23, 42, .09)
}
body.light .ico-btn, body.light .back {
  color:#0f2730
}
body.light .sw {
  background:rgba(15, 23, 42, .18)
}
body.light .bs-track {
  box-shadow:inset 0 0 0 1px rgba(15, 23, 42, .12)
}
.calcwrap {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:18px;
  align-items:start
}
@media(max-width:1000px) {
  .calcwrap {
    grid-template-columns:1fr
  }
}
.ctrl {
  margin-bottom:18px
}
.ctrl-h {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px
}
.ctrl-h b {
  font-size:.83rem;
  font-weight:700
}
.ctrl-v {
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:800;
  color:var(--td-cyan-2);
  white-space:nowrap
}
body.light .ctrl-v {
  color:#0e7490
}
.ctrl-s {
  font-size:.69rem;
  color:var(--muted);
  margin-top:3px;
  line-height:1.5
}
input[type=range].cin {
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:24px;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:grab
}
input[type=range].cin:active {
  cursor:grabbing
}
input[type=range].cin::-webkit-slider-runnable-track {
  height:7px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--td-cyan), var(--td-cyan-2))
}
input[type=range].cin::-moz-range-track {
  height:7px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--td-cyan), var(--td-cyan-2))
}
input[type=range].cin::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:21px;
  height:21px;
  margin-top:-7px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--td-cyan);
  box-shadow:0 2px 9px rgba(0, 0, 0, .45)
}
input[type=range].cin::-moz-range-thumb {
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--td-cyan);
  box-shadow:0 2px 9px rgba(0, 0, 0, .45)
}
.presets {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:6px
}
.preset {
  padding:8px 13px;
  border-radius:100px;
  font-size:.72rem;
  font-weight:700;
  color:var(--text);
  background:rgba(255, 255, 255, .07);
  border:1px solid rgba(255, 255, 255, .16);
  transition:.18s
}
.preset:hover {
  border-color:var(--td-cyan);
  color:var(--td-cyan)
}
.preset.on {
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#04222a;
  border-color:transparent
}
body.light .preset {
  color:#0f2730;
  background:rgba(15, 23, 42, .05);
  border-color:rgba(15, 23, 42, .16)
}
.vs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
@media(max-width:620px) {
  .vs {
    grid-template-columns:1fr
  }
}
.vsc {
  padding:17px;
  border-radius:15px;
  border:1px solid var(--panel-brd);
  background:rgba(0, 0, 0, .2);
  position:relative;
  overflow:hidden
}
body.light .vsc {
  background:rgba(15, 23, 42, .04)
}
.vsc::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--vc, var(--muted))
}
.vsc.win {
  border-color:rgba(34, 197, 94, .45);
  background:rgba(34, 197, 94, .07)
}
.vsc.lose {
  border-color:rgba(239, 68, 68, .35);
  background:rgba(239, 68, 68, .06)
}
.vsc-h {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px
}
.vsc-h .ve {
  font-size:1.25rem
}
.vsc-h b {
  font-size:.88rem;
  font-weight:800
}
.vsc-tot {
  font-family:var(--mono);
  font-size:1.85rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em
}
.vsc-tot small {
  font-size:.8rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0
}
.vsc-brk {
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--panel-brd);
  display:grid;
  gap:6px
}
.brk {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.73rem
}
.brk span:first-child {
  color:var(--muted)
}
.brk b {
  font-family:var(--mono);
  font-weight:700;
  font-size:.74rem
}
.brk.free b {
  color:#4ade80
}
.brk.hot b {
  color:#f87171
}
.saving {
  margin-top:14px;
  padding:18px;
  border-radius:15px;
  text-align:center;
  background:linear-gradient(135deg, rgba(34, 197, 94, .14), rgba(0, 194, 212, .08));
  border:1px solid rgba(34, 197, 94, .4)
}
.saving .sl {
  font-size:.71rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#4ade80
}
.saving .sv {
  font-family:var(--mono);
  font-size:2.15rem;
  font-weight:800;
  color:#4ade80;
  line-height:1.15;
  margin:5px 0
}
body.light .saving .sv, body.light .saving .sl {
  color:#15803d
}
.saving .sy {
  font-size:.78rem;
  color:var(--muted)
}
.saving .sy b {
  color:var(--text);
  font-family:var(--mono)
}
.srcnote {
  margin-top:13px;
  padding:11px 14px;
  border-radius:11px;
  font-size:.7rem;
  line-height:1.6;
  color:var(--muted);
  background:rgba(0, 0, 0, .2);
  border:1px solid var(--panel-brd)
}
body.light .srcnote {
  background:rgba(15, 23, 42, .04)
}
.srcnote a {
  color:var(--td-cyan);
  font-weight:700
}
.srcnote a:hover {
  text-decoration:underline
}
.ratetab {
  width:100%;
  border-collapse:collapse;
  font-size:.74rem;
  margin-top:10px
}
.ratetab th {
  text-align:left;
  padding:7px 9px;
  font-size:.63rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  border-bottom:1px solid var(--panel-brd)
}
.ratetab td {
  padding:7px 9px;
  border-bottom:1px solid var(--panel-brd);
  font-family:var(--mono);
  font-size:.71rem
}
.ratetab td:first-child {
  font-family:inherit;
  color:var(--muted)
}
.ratetab .hi {
  color:#4ade80;
  font-weight:800
}
.costbox {
  margin-top:13px;
  padding:14px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(248, 113, 113, .1), rgba(251, 191, 36, .06));
  border:1px solid rgba(248, 113, 113, .35)
}
.costbox .ct {
  font-size:.76rem;
  font-weight:800;
  color:#fca5a5;
  margin-bottom:10px
}
body.light .costbox .ct {
  color:#b91c1c
}
.cgrid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px
}
@media(max-width:560px) {
  .cgrid {
    grid-template-columns:1fr
  }
}
.cc {
  padding:10px;
  border-radius:9px;
  text-align:center;
  background:rgba(0, 0, 0, .24);
  border:1px solid var(--panel-brd)
}
body.light .cc {
  background:rgba(255, 255, 255, .72)
}
.cc b {
  display:block;
  font-family:var(--mono);
  font-size:1.02rem;
  font-weight:800;
  color:#fca5a5
}
body.light .cc b {
  color:#b91c1c
}
.cc span {
  display:block;
  font-size:.6rem;
  color:var(--muted);
  margin-top:3px;
  line-height:1.4
}
.csrc {
  font-size:.63rem;
  color:var(--muted);
  margin-top:9px;
  line-height:1.55;
  font-style:italic
}
.sasewrap {
  display:grid;
  grid-template-columns:190px 1fr 190px;
  gap:14px;
  align-items:start
}
@media(max-width:1100px) {
  .sasewrap {
    grid-template-columns:1fr
  }
}
.sacol {
  display:grid;
  gap:11px
}
.sacap {
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  margin-top:3px
}
.sabox {
  border:1px solid var(--panel-brd);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden
}
.sabox-h {
  font-size:.71rem;
  font-weight:800;
  text-align:center;
  padding:8px;
  border-bottom:1px solid var(--panel-brd);
  background:rgba(255, 255, 255, .04)
}
body.light .sabox-h {
  background:rgba(15, 23, 42, .04)
}
.sabox-b {
  padding:7px;
  display:grid;
  gap:5px
}
.saopt {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border-radius:9px;
  background:transparent;
  border:1px solid transparent;
  font-family:inherit;
  font-size:.72rem;
  color:var(--text);
  text-align:left;
  width:100%;
  transition:.18s
}
.saopt:hover {
  background:rgba(255, 255, 255, .06)
}
body.light .saopt {
  color:#0f2730
}
body.light .saopt:hover {
  background:rgba(15, 23, 42, .05)
}
.saopt.on {
  background:rgba(0, 194, 212, .14);
  border-color:rgba(0, 194, 212, .5)
}
.saopt.dst.on {
  background:rgba(246, 130, 31, .14);
  border-color:rgba(246, 130, 31, .5)
}
.saopt .sae {
  font-size:1rem;
  flex:none
}
.saplat {
  border:2px solid var(--cf-orange);
  border-radius:14px;
  padding:13px;
  background:rgba(246, 130, 31, .04)
}
.saplat-h {
  text-align:center;
  font-size:.97rem;
  font-weight:800;
  margin-bottom:11px
}
.sasvcs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px
}
@media(max-width:700px) {
  .sasvcs {
    grid-template-columns:1fr
  }
}
.sagrp {
  border:1px solid rgba(0, 194, 212, .25);
  border-radius:11px;
  background:rgba(0, 194, 212, .05);
  overflow:hidden
}
.sagrp-h {
  font-size:.7rem;
  font-weight:800;
  text-align:center;
  padding:7px;
  border-bottom:1px solid rgba(0, 194, 212, .2)
}
.sagrp-b {
  padding:7px;
  display:grid;
  gap:5px
}
.sasvc {
  position:relative;
  padding:7px 9px;
  border-radius:8px;
  font-size:.7rem;
  border:1px solid transparent;
  transition:.3s;
  opacity:.4
}
.sasvc .sanm {
  font-weight:600
}
.sasvc .sawhy {
  display:none;
  font-size:.63rem;
  color:var(--muted);
  margin-top:3px;
  line-height:1.45
}
.sasvc.on {
  opacity:1;
  background:rgba(34, 197, 94, .12);
  border-color:rgba(34, 197, 94, .45)
}
.sasvc.on .sawhy {
  display:block
}
.sasvc.block {
  opacity:1;
  background:rgba(239, 68, 68, .14);
  border-color:rgba(239, 68, 68, .55)
}
.sasvc.block .sawhy {
  display:block;
  color:#fca5a5
}
body.light .sasvc.block .sawhy {
  color:#b91c1c
}
.sasvc.warn {
  opacity:1;
  background:rgba(251, 191, 36, .13);
  border-color:rgba(251, 191, 36, .5)
}
.sasvc.warn .sawhy {
  display:block;
  color:#d97706
}
.sasvc .satag {
  position:absolute;
  right:7px;
  top:6px;
  font-size:.55rem;
  font-weight:800;
  padding:1px 6px;
  border-radius:100px;
  background:rgba(34, 197, 94, .2);
  color:#4ade80
}
.sasvc.block .satag {
  background:rgba(239, 68, 68, .2);
  color:#f87171
}
.sasvc.warn .satag {
  background:rgba(251, 191, 36, .2);
  color:#fbbf24
}
.sagrp.wide {
  grid-column:1/-1;
  margin-top:11px
}
.sagrp.wide .sagrp-b {
  grid-template-columns:1fr 1fr
}
@media(max-width:700px) {
  .sagrp.wide .sagrp-b {
    grid-template-columns:1fr
  }
}
.sagrp.pol {
  border-color:rgba(168, 85, 247, .35);
  background:rgba(168, 85, 247, .06)
}
.sagrp.pol .sagrp-h {
  border-bottom-color:rgba(168, 85, 247, .28)
}
.saarrow {
  margin-top:12px;
  text-align:center
}
.saarrow-bar {
  height:5px;
  border-radius:99px;
  background:rgba(255, 255, 255, .1);
  overflow:hidden;
  margin:6px 0
}
body.light .saarrow-bar {
  background:rgba(15, 23, 42, .1)
}
.saarrow-bar i {
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  transition:width .5s ease;
  background:linear-gradient(90deg, var(--td-cyan), var(--cf-orange))
}
.saarrow b {
  font-size:.7rem;
  font-weight:800;
  color:var(--td-cyan-2)
}
body.light .saarrow b {
  color:#0e7490
}
.saarrow span {
  font-size:.63rem;
  color:var(--muted)
}
.sascen {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:12px
}
.sasc {
  padding:8px 13px;
  border-radius:100px;
  font-size:.72rem;
  font-weight:700;
  color:var(--text);
  background:rgba(255, 255, 255, .07);
  border:1px solid rgba(255, 255, 255, .16);
  transition:.18s
}
body.light .sasc {
  color:#0f2730;
  background:rgba(15, 23, 42, .05);
  border-color:rgba(15, 23, 42, .16)
}
.sasc:hover {
  border-color:var(--td-cyan)
}
.sasc.on {
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2));
  color:#04222a;
  border-color:transparent
}
.satgl {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  color:var(--muted);
  padding:8px 13px;
  border-radius:100px;
  background:rgba(255, 255, 255, .05);
  border:1px solid var(--panel-brd)
}
body.light .satgl {
  background:rgba(15, 23, 42, .04)
}
.satgl input {
  accent-color:var(--cf-orange);
  cursor:pointer
}
.savs {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}@media(max-width:760px) {.savs {grid-template-columns:1fr}}.savsc {padding:15px;border-radius:13px;border:1px solid var(--panel-brd);background:rgba(0,0,0,.2);position:relative;overflow:hidden}body.light .savsc {background:rgba(15,23,42,.04)}.savsc::before {content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--vc,var(--muted))}.savsc.old {border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.06);--vc:#f87171}.savsc.new {border-color:rgba(74,222,128,.42);background:rgba(74,222,128,.07);--vc:#4ade80}.savsc-h {display:flex;align-items:center;gap:8px;margin-bottom:10px}.savsc-h b {font-size:.82rem;font-weight:800}.savsc-h .ve {font-size:1.1rem}.savsl {display:grid;gap:6px}.savsi {display:flex;align-items:flex-start;gap:8px;font-size:.72rem;line-height:1.5;color:var(--muted)}.savsi i {font-style:normal;flex:none;font-size:.78rem}.savsc.old .savsi i {color:#f87171}.savsc.new .savsi i {color:#4ade80}.samet {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px}@media(max-width:620px) {.samet {grid-template-columns:repeat(2,1fr)}}.samk {padding:11px;border-radius:11px;text-align:center;background:rgba(0,0,0,.22);border:1px solid var(--panel-brd)}body.light .samk {background:rgba(255,255,255,.72)}.samk b {display:block;font-family:var(--mono);font-size:1.02rem;font-weight:800;color:var(--td-cyan-2)}body.light .samk b {color:#0e7490}.samk span {display:block;font-size:.6rem;color:var(--muted);margin-top:3px;line-height:1.4}.sabadges {display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.sabg {display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;padding:5px 11px;border-radius:100px;background:rgba(0,194,212,.1);border:1px solid rgba(0,194,212,.28);color:var(--td-cyan-2)}body.light .sabg {color:#0e7490}.sasrc {margin-top:12px;padding:11px 13px;border-radius:11px;font-size:.67rem;line-height:1.6;color:var(--muted);background:rgba(0,0,0,.2);border:1px solid var(--panel-brd)}body.light .sasrc {background:rgba(15,23,42,.04)}.sasrc a {color:var(--td-cyan);font-weight:700}.sasrc a:hover {text-decoration:underline}

/* ===================== LAB 3D (v3) ===================== */

/* Tilt em cards (aplicado por JS) */
.card.tilt {
  position:relative;
  will-change:transform;
  border-color:rgba(0, 194, 212, .35);
  box-shadow:0 22px 44px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 194, 212, .12)
}
.card.tilt::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .09), transparent 55%)
}
/* ---------- Palco 3D genérico ---------- */
.fx-stage {
  position:relative;
  margin-top:16px;
  border-radius:var(--radius);
  border:1px solid var(--panel-brd);
  background:radial-gradient(ellipse at 50% 120%, rgba(0, 194, 212, .12), transparent 60%), #061b24;
  overflow:hidden;
  perspective:1100px
}
body.light .fx-stage {
  background:radial-gradient(ellipse at 50% 120%, rgba(0, 194, 212, .12), transparent 60%), #eef3f6
}
.fx-stage .fx-floor {
  position:absolute;
  inset:auto 0 0 0;
  height:55%;
  background-image:linear-gradient(rgba(0, 194, 212, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 194, 212, .13) 1px, transparent 1px);
  background-size:38px 38px;
  transform:perspective(500px) rotateX(62deg);
  transform-origin:50% 100%;
  mask-image:linear-gradient(transparent, #000 40%);
  -webkit-mask-image:linear-gradient(transparent, #000 40%);
  pointer-events:none
}
.fx-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2
}
.fx-row {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  align-items:center;
  gap:14px;
  padding:22px 18px 18px;
  min-height:290px;
  transform-style:preserve-3d
}
@media(max-width:760px) {
  .fx-row {
    grid-template-columns:1fr;
    gap:10px
  }
}
.fx-node {
  text-align:center;
  font-size:.7rem;
  color:var(--muted);
  transform-style:preserve-3d
}
.fx-node b {
  display:block;
  color:var(--text);
  font-size:.78rem;
  margin-top:8px
}
.fx-node small {
  display:block;
  font-family:var(--mono);
  font-size:.62rem
}
/* botnet */
.fx-bots {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  width:min(150px, 100%);
  margin:0 auto;
  transform:rotateY(22deg);
  transform-style:preserve-3d
}
.fx-bots i {
  display:block;
  aspect-ratio:1;
  border-radius:6px;
  background:rgba(239, 68, 68, .14);
  border:1px solid rgba(239, 68, 68, .35);
  transition:.3s
}
.fx-stage.attacking .fx-bots i {
  animation:fxbot .5s ease-in-out infinite alternate;
  background:rgba(239, 68, 68, .5);
  box-shadow:0 0 14px rgba(239, 68, 68, .55)
}
.fx-bots i:nth-child(2n) {
  animation-delay:.12s
}
.fx-bots i:nth-child(3n) {
  animation-delay:.25s
}
@keyframes fxbot {
  from {
    transform:translateZ(0)
  }
  to {
    transform:translateZ(14px)
  }
}
/* escudo (borda Cloudflare) */
.fx-shield {
  width:104px;
  height:118px;
  margin:0 auto;
  display:grid;
  place-items:center;
  font-size:2rem;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(160deg, rgba(246, 130, 31, .35), rgba(246, 130, 31, .08));
  border:1px solid rgba(246, 130, 31, .6);
  transform:rotateY(-18deg);
  transition:.4s;
  position:relative
}
.fx-shield::before {
  content:'';
  position:absolute;
  inset:5px;
  clip-path:inherit;
  border:1px solid rgba(255, 255, 255, .18)
}
.fx-shield.on {
  box-shadow:0 0 40px rgba(246, 130, 31, .55), inset 0 0 30px rgba(246, 130, 31, .35)
}
.fx-stage.attacking .fx-shield.on {
  animation:fxshield .7s ease-in-out infinite alternate
}
@keyframes fxshield {
  from {
    box-shadow:0 0 30px rgba(246, 130, 31, .45), inset 0 0 25px rgba(246, 130, 31, .3)
  }
  to {
    box-shadow:0 0 70px rgba(250, 174, 64, .9), inset 0 0 45px rgba(250, 174, 64, .55)
  }
}
.fx-shield.off {
  filter:grayscale(1);
  opacity:.35;
  border-style:dashed
}
/* site de origem (janela) */
.fx-site {
  transform:rotateY(-14deg) rotateX(2deg);
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3, .8, .3, 1), filter .6s, opacity .6s;
  box-shadow:0 30px 60px -30px rgba(0, 0, 0, .8);
  position:relative
}
.fx-site .bview {
  min-height:150px;
  padding:14px;
  position:relative
}
.fx-site .sk {
  height:9px;
  border-radius:5px;
  background:rgba(255, 255, 255, .12);
  margin-bottom:8px
}
body.light .fx-site .sk {
  background:rgba(15, 23, 42, .12)
}
.fx-site .sk.w60 {
  width:60%
}
.fx-site .sk.w80 {
  width:80%
}
.fx-site .sk.hero {
  height:46px;
  background:linear-gradient(135deg, rgba(0, 194, 212, .35), rgba(246, 130, 31, .3))
}
.fx-http {
  position:absolute;
  top:10px;
  right:10px;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:800;
  padding:3px 8px;
  border-radius:100px;
  background:rgba(34, 197, 94, .18);
  color:#4ade80
}
.fx-site.slow {
  animation:fxjitter .18s linear infinite
}
.fx-site.slow .fx-http {
  background:rgba(234, 179, 8, .2);
  color:#fbbf24
}
.fx-site.down {
  transform:rotateY(-14deg) rotateX(58deg) translateY(40px) translateZ(-60px);
  filter:grayscale(1) brightness(.6);
  opacity:.75
}
.fx-site.down .fx-http {
  background:rgba(239, 68, 68, .25);
  color:#fca5a5
}
.fx-site.down .fx-503 {
  opacity:1
}
.fx-503 {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:900;
  color:#fca5a5;
  background:rgba(20, 0, 0, .55);
  opacity:0;
  transition:.4s;
  padding:10px
}
.fx-503 span {
  font-size:1.6rem;
  font-family:var(--mono)
}
.fx-503 small {
  display:block;
  font-size:.66rem;
  font-weight:600;
  color:#fecaca
}
@keyframes fxjitter {
  0% {
    transform:rotateY(-14deg) rotateX(2deg) translate(0, 0)
  }
  25% {
    transform:rotateY(-13deg) rotateX(3deg) translate(2px, -1px)
  }
  50% {
    transform:rotateY(-15deg) rotateX(1deg) translate(-2px, 1px)
  }
  75% {
    transform:rotateY(-14deg) rotateX(2.5deg) translate(1px, 2px)
  }
  100% {
    transform:rotateY(-14deg) rotateX(2deg) translate(0, 0)
  }
}
.fx-caption {
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:4;
  font-size:.66rem;
  color:var(--muted);
  padding:5px 10px;
  border-radius:8px;
  background:rgba(4, 26, 32, .8);
  border:1px solid var(--panel-brd)
}
body.light .fx-caption {
  background:rgba(255, 255, 255, .9)
}
/* ---------- RBI (Navegador remoto) ---------- */
.rbi-stage {
  position:relative;
  margin-top:16px;
  border-radius:var(--radius);
  border:1px solid var(--panel-brd);
  background:radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, .14), transparent 55%), #061b24;
  overflow:hidden;
  perspective:1300px
}
body.light .rbi-stage {
  background:radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, .14), transparent 55%), #eef3f6
}
.rbi-row {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.2fr 1fr 1.2fr;
  align-items:center;
  gap:16px;
  padding:26px 18px 20px;
  min-height:330px;
  transform-style:preserve-3d
}
@media(max-width:820px) {
  .rbi-row {
    grid-template-columns:1fr
  }
  .rbi-win, .rbi-edge {
    transform:none!important
  }
}
.rbi-win {
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.3, .8, .3, 1), filter .5s;
  box-shadow:0 30px 60px -30px rgba(0, 0, 0, .85)
}
.rbi-win.dev {
  transform:rotateY(18deg) translateZ(10px)
}
.rbi-win.web {
  transform:rotateY(-18deg) translateZ(10px)
}
.rbi-win .bview {
  min-height:170px;
  padding:14px;
  position:relative;
  overflow:hidden
}
.rbi-win .sk {
  height:9px;
  border-radius:5px;
  background:rgba(255, 255, 255, .12);
  margin-bottom:8px
}
body.light .rbi-win .sk {
  background:rgba(15, 23, 42, .12)
}
.rbi-win .sk.w60 {
  width:60%
}
.rbi-win .sk.w80 {
  width:80%
}
.rbi-win .sk.hero {
  height:44px;
  background:linear-gradient(135deg, rgba(56, 189, 248, .35), rgba(168, 85, 247, .3))
}
/* pixel stream: scanlines sobre a janela do dispositivo quando isolado */
.rbi-win.dev.stream .bview::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(56, 189, 248, .10) 0 1px, transparent 1px 3px);
  animation:rbiscan 1.2s linear infinite;
  mix-blend-mode:screen
}
@keyframes rbiscan {
  from {
    background-position:0 0
  }
  to {
    background-position:0 3px
  }
}
.rbi-badge {
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:800;
  padding:3px 8px;
  border-radius:100px;
  background:rgba(56, 189, 248, .18);
  color:#7dd3fc
}
.rbi-badge.bad {
  background:rgba(239, 68, 68, .22);
  color:#fca5a5
}
.rbi-badge.ok {
  background:rgba(34, 197, 94, .2);
  color:#4ade80
}
/* script malicioso */
.rbi-mal {
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  font-family:var(--mono);
  font-size:.6rem;
  color:#fca5a5;
  background:rgba(239, 68, 68, .1);
  border:1px dashed rgba(239, 68, 68, .5);
  border-radius:8px;
  padding:6px 8px;
  opacity:0;
  transform:translateY(8px);
  transition:.4s
}
.rbi-mal.show {
  opacity:1;
  transform:none
}
/* borda: navegador isolado */
.rbi-edge {
  position:relative;
  text-align:center;
  padding:16px 12px;
  border-radius:16px;
  border:1px solid rgba(246, 130, 31, .5);
  background:linear-gradient(160deg, rgba(246, 130, 31, .18), rgba(246, 130, 31, .04));
  transform:translateZ(60px);
  transform-style:preserve-3d;
  transition:.5s;
  font-size:.7rem;
  color:var(--muted)
}
.rbi-edge b {
  display:block;
  color:var(--text);
  font-size:.78rem
}
.rbi-edge .ic {
  font-size:1.8rem;
  display:block;
  margin-bottom:4px
}
.rbi-edge.on {
  box-shadow:0 0 44px rgba(246, 130, 31, .45)
}
.rbi-edge.off {
  filter:grayscale(1);
  opacity:.35;
  border-style:dashed
}
.rbi-edge .sand {
  margin:10px auto 0;
  width:82%;
  height:44px;
  border-radius:8px;
  border:1px solid rgba(255, 255, 255, .2);
  background:rgba(0, 0, 0, .25);
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:.6rem;
  color:#fcd34d;
  overflow:hidden;
  position:relative
}
.rbi-edge .sand.burn {
  animation:rbiburn .7s ease-in-out infinite alternate
}
@keyframes rbiburn {
  from {
    box-shadow:inset 0 0 12px rgba(239, 68, 68, .4)
  }
  to {
    box-shadow:inset 0 0 26px rgba(239, 68, 68, .9)
  }
}
/* dispositivo comprometido */
.rbi-win.dev.pwned {
  animation:fxjitter .16s linear infinite;
  filter:hue-rotate(-40deg) saturate(1.6)
}
.rbi-win.dev.pwned .bview {
  background:repeating-linear-gradient(135deg, rgba(239, 68, 68, .15) 0 6px, transparent 6px 12px), #0d1b2a
}
.rbi-alert {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:900;
  color:#fca5a5;
  background:rgba(20, 0, 0, .6);
  opacity:0;
  transition:.4s;
  padding:10px;
  z-index:3
}
.rbi-win.dev.pwned .rbi-alert {
  opacity:1
}
.rbi-alert span {
  font-size:1.3rem
}
.rbi-alert small {
  display:block;
  font-size:.64rem;
  font-weight:600;
  color:#fecaca
}
.rbi-ctl {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:14px
}
.rbi-ctl .burl-in {
  flex:1;
  min-width:220px;
  padding:9px 12px;
  border-radius:9px;
  border:1px solid var(--panel-brd);
  background:rgba(0, 0, 0, .3);
  color:var(--text);
  font-family:var(--mono);
  font-size:.72rem
}
body.light .rbi-ctl .burl-in {
  background:#fff
}
.rbi-flow {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:12px
}
@media(max-width:700px) {
  .rbi-flow {
    grid-template-columns:1fr
  }
}
.rbi-step {
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--panel-brd);
  background:rgba(255, 255, 255, .03);
  font-size:.7rem;
  color:var(--muted);
  transition:.3s
}
.rbi-step b {
  display:block;
  color:var(--text);
  font-size:.74rem;
  margin-bottom:2px
}
.rbi-step.on {
  border-color:rgba(56, 189, 248, .6);
  background:rgba(56, 189, 248, .1)
}
.rbi-step.bad {
  border-color:rgba(239, 68, 68, .6);
  background:rgba(239, 68, 68, .1)
}
/* ---------- Mapa: alternador 2D / 3D ---------- */
.mapview {
  position:absolute;
  top:13px;
  right:13px;
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:11px;
  background:rgba(4, 26, 32, .86);
  border:1px solid var(--panel-brd);
  backdrop-filter:var(--blur);
  z-index:5
}
body.light .mapview {
  background:rgba(255, 255, 255, .9)
}
.mapview button {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:.69rem;
  font-weight:700;
  padding:7px 11px;
  border-radius:8px
}
.mapview button.on {
  background:linear-gradient(135deg, #60a5fa, #93c5fd);
  color:#001433
}
#gmap3d {
  display:none;
  width:100%;
  height:clamp(330px, 52vh, 520px)
}
.mapwrap.g3d #gmap3d {
  display:block
}
.mapwrap.g3d #gmap, .mapwrap.g3d .maptip {
  display:none
}
.mapwrap.g3d .mapmodes {
  opacity:.45;
  pointer-events:none
}
@media(prefers-reduced-motion:reduce) {
  .fx-stage.attacking .fx-bots i, .fx-stage.attacking .fx-shield.on, .fx-site.slow, .rbi-win.dev.pwned, .rbi-edge .sand.burn, .rbi-win.dev.stream .bview::after, .rbi-act.blocked {
    animation:none!important
  }
}
/* ===== v5 · RBI: politica de isolamento + acoes do usuario ===== */
.rbi-acts {
  display:none;
  position:relative;
  z-index:2;
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(255, 255, 255, .14)
}
.rbi-acts.show {
  display:block
}
.rbi-acts-t {
  margin:0 0 6px;
  font-size:.66rem;
  font-weight:700;
  color:var(--muted)
}
.rbi-acts-row {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.rbi-act {
  font:inherit;
  font-size:.66rem;
  font-weight:700;
  padding:6px 9px;
  border-radius:8px;
  border:1px solid rgba(125, 211, 252, .35);
  background:rgba(125, 211, 252, .1);
  color:var(--text);
  cursor:pointer;
  transition:transform .15s, background .15s, border-color .15s
}
.rbi-act:hover, .rbi-act:focus-visible {
  background:rgba(125, 211, 252, .22);
  transform:translateY(-1px)
}
.rbi-act:focus-visible {
  outline:2px solid #7dd3fc;
  outline-offset:2px
}
.rbi-act.blocked {
  border-color:#ef4444;
  background:rgba(239, 68, 68, .25);
  animation:rbShake .4s
}
.rbi-act.ok {
  border-color:#4ade80;
  background:rgba(74, 222, 128, .22)
}
.rbi-act.leak {
  border-color:#f87171;
  background:rgba(239, 68, 68, .35)
}
@keyframes rbShake {
  0%, 100% {transform:translateX(0)}
  25% {transform:translateX(-4px)}
  75% {transform:translateX(4px)}
}
.rbi-verdict {
  display:none;
  margin-top:8px;
  padding:7px 9px;
  border-radius:8px;
  font-size:.66rem;
  font-weight:700;
  line-height:1.35
}
.rbi-verdict.show {
  display:block
}
.rbi-verdict.ok {
  background:rgba(74, 222, 128, .14);
  color:#bbf7d0;
  border:1px solid rgba(74, 222, 128, .4)
}
.rbi-verdict.bad {
  background:rgba(239, 68, 68, .16);
  color:#fecaca;
  border:1px solid rgba(239, 68, 68, .45)
}
.rbi-verdict.leak {
  background:rgba(239, 68, 68, .3);
  color:#fff;
  border:1px solid #ef4444
}
body.light .rbi-verdict.ok {
  color:#14532d
}
body.light .rbi-verdict.bad {
  color:#7f1d1d
}
.rbi-polchips {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px;
  margin-top:8px
}
.rbi-polchips .chip {
  font-size:.7rem;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(239, 68, 68, .18);
  border:1px solid rgba(239, 68, 68, .4)
}
.rbi-polchips .chip.none {
  font-size:.62rem;
  color:var(--muted);
  background:transparent;
  border-color:var(--panel-brd)
}
.rbi-pol {
  display:grid;
  gap:8px;
  margin-top:12px
}
.rbi-polrow {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:11px;
  border:1px solid var(--panel-brd);
  background:rgba(0, 0, 0, .18);
  cursor:pointer;
  transition:border-color .15s
}
body.light .rbi-polrow {
  background:rgba(15, 23, 42, .04)
}
.rbi-polrow:hover {
  border-color:rgba(246, 130, 31, .5)
}
.rbi-polrow input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none
}
.rbi-polrow .tg {
  flex:0 0 34px;
  height:20px;
  border-radius:999px;
  background:rgba(148, 163, 184, .35);
  position:relative;
  transition:background .2s
}
.rbi-polrow .tg::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s
}
.rbi-polrow input:checked + .tg {
  background:#ef4444
}
.rbi-polrow input:checked + .tg::after {
  transform:translateX(14px)
}
.rbi-polrow input:focus-visible + .tg {
  outline:2px solid #7dd3fc;
  outline-offset:2px
}
.rbi-polrow .tx b {
  display:block;
  font-size:.76rem
}
.rbi-polrow .tx small {
  display:block;
  font-size:.64rem;
  color:var(--muted)
}
.rbi-polrow input:checked ~ .tx b::after {
  content:" · 🚫";
  font-size:.66rem
}
.rbi-polbtns {
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap
}
.rbi-polbtns .btn {
  padding:7px 12px;
  font-size:.74rem
}
#p-rbi .kpis {
  grid-template-columns:repeat(5, 1fr)
}
@media(max-width:620px) {
  #p-rbi .kpis {
    grid-template-columns:repeat(2, 1fr)
  }
}
.rbi-polnote {
  margin:10px 0 0;
  font-size:.64rem;
  line-height:1.45;
  color:var(--muted)
}

/* ===================================================================
   LAB v6.1 · Proporção da página / barra de abas compacta
   Problema: a barra fixa (.tabwrap) quebrava em 2-3 linhas (11 abas +
   rótulos de grupo + Kill Chain/Tour/modos) e, somada ao nav (62px),
   ocupava ~280px fixos da tela — em 1366x768 sobrava menos da metade
   da altura para a demo. Agora: 1 linha rolável (~66px) + nav = ~128px.
   =================================================================== */

/* ---- hero do lab: mais baixo, deixa as abas visíveis já no 1º scroll ---- */
header.hero {
  padding:82px 0 16px!important;
}
header.hero h1 {
  font-size:clamp(1.6rem, 3.4vw, 2.4rem)!important;
}
header.hero p {
  margin-top:8px!important;
  font-size:clamp(.88rem, 1.4vw, .98rem)!important;
}
.netbar {
  margin-top:14px!important;
}
.ns {
  padding:9px 10px!important;
}
.ns b {
  font-size:.95rem!important;
}
/* modo Apresentação: esconde o hero; a demo começa logo abaixo das abas */
body[data-mode="apresentacao"] header.hero {
  display:none;
}
/* painéis: ao trocar de aba, o topo do painel fica logo abaixo da barra fixa */
.pane {
  scroll-margin-top:calc(var(--lab-sticky) + 12px);
}
main {
  padding-top:16px!important;
}

/* ===================================================================
   LAB v7.1 · DDoS: controles (vetor + disparar) ao lado da demonstração
   =================================================================== */
.ddlab {
  display:grid;
  grid-template-columns:minmax(260px, 330px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.ddctl {
  display:flex;
  flex-direction:column;
  gap:12px;
  position:sticky;
  top:calc(var(--lab-sticky, 128px) + 12px);
}
.ddctl .protbar {
  margin:0!important;
}
.ddctl .ddvecc {
  padding:14px!important;
}
.ddctl .ddvecc h3 {
  font-size:.92rem;
}
.ddctl .ddvecc .sub {
  font-size:.7rem;
}
.ddview {
  min-width:0;
}
.ddview .ddwrap {
  margin-top:0;
}
.ddview #ddChart {
  height:clamp(200px, 28vh, 280px);
}
.ddview .fx-stage {
  margin-top:12px;
}
/* metricas abaixo: KPIs | evento + log */
.ddmeta .kpis {
  grid-template-columns:repeat(4, 1fr);
}
/* ---------- tablets / celulares ---------- */
@media(max-width:980px) {
  .ddlab {
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .ddctl {
    position:static;
    display:contents;            /* filhos viram itens diretos de .ddlab */
  }
  .ddctl .protbar {
    order:1;
  }
  .ddctl .ddvecc {
    order:2;
  }
  .ddview {
    order:3;
  }
  /* vetores em faixa horizontal compacta */

}
@media(max-width:640px) {
  .ddmeta .kpis {
    grid-template-columns:repeat(2, 1fr);
  }
  .ddview #ddChart {
    height:200px;
  }
  .fx-row {
    min-height:0!important;
    padding:14px 12px!important;
  }
}
/* ---------- otimizações gerais de mobile do laboratório ---------- */
@media(max-width:700px) {
  .container {
    padding-left:14px!important;
    padding-right:14px!important;
  }
  header.hero {
    padding:76px 0 12px!important;
  }
  header.hero h1 {
    font-size:1.45rem!important;
  }
  .netbar {
    grid-template-columns:repeat(3, 1fr)!important;
    gap:6px!important;
  }
  .ns {
    padding:8px 6px!important;
  }
  .ns b {
    font-size:.85rem!important;
  }
  .sec-head h2 {
    font-size:1.25rem!important;
  }
  .sec-head p, .guide {
    font-size:.82rem!important;
  }
  .steps-hint {
    gap:6px!important;
  }
  .card {
    padding:14px!important;
  }
  .kpis {
    grid-template-columns:repeat(2, 1fr)!important;
  }
  pre {
    font-size:.66rem!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .log {
    max-height:220px;
    overflow:auto;
  }
  .protbar {
    flex-wrap:wrap;
    gap:8px;
  }
  .protbar .sw {
    flex:none;
  }
  /* alvos de toque >= 44px */
  .sw, .btn {
    min-height:40px;
  }
  .toast {
    left:12px!important;
    right:12px!important;
    max-width:none!important;
  }
}

/* ===================================================================
   LAB v7.2 · RBI: barra de endereço interativa no dispositivo de Alice
   =================================================================== */
.rbi-bbar {
  flex-wrap:wrap;
  gap:8px 10px!important;
  padding:9px 11px!important;
}
.rbi-devtag {
  font-family:var(--mono);
  font-size:.62rem;
  color:var(--muted);
  padding:3px 8px;
  border-radius:6px;
  background:rgba(255, 255, 255, .06);
  border:1px solid var(--panel-brd);
  white-space:nowrap;
}
.rbi-omni {
  flex:1 1 100%;
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
  padding:0 0 0 9px!important;
  background:rgba(0, 0, 0, .35)!important;
  border:1px solid var(--panel-brd);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.rbi-omni:focus-within {
  border-color:var(--td-cyan);
  box-shadow:0 0 0 3px rgba(0, 194, 212, .18);
}
.rbi-omni.bad {
  border-color:#f87171;
}
.rbi-omni.loading .rbi-omni-prog {
  transform:scaleX(1);
}
.rbi-omni-lock {
  font-size:.7rem;
  flex:none;
  opacity:.8;
}
.rbi-omni-in {
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--text);
  font-family:var(--mono);
  font-size:.72rem;
  padding:8px 4px;
  outline:none;
}
.rbi-omni-in::placeholder {
  color:var(--muted);
  opacity:.8;
}
.rbi-omni-go {
  flex:none;
  border:0;
  min-width:36px;
  height:100%;
  padding:8px 10px;
  font-size:.95rem;
  font-weight:800;
  color:#301500;
  background:linear-gradient(135deg, var(--cf-orange), var(--cf-orange-2));
  cursor:pointer;
}
.rbi-omni-go:disabled {
  opacity:.6;
  cursor:progress;
}
.rbi-omni-go:focus-visible {
  outline:2px solid #fff;
  outline-offset:-3px;
}
.rbi-omni-prog {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg, var(--td-cyan), var(--cf-orange));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 2.6s linear;
}
.rbi-omni-help {
  min-height:0;
  padding:0 12px;
  font-size:.62rem;
  color:var(--muted);
}
.rbi-omni-help.bad {
  color:#f87171;
  padding:5px 12px;
}
.rbi-omni-help:empty {
  display:none;
}
body.light .rbi-omni {
  background:rgba(15, 23, 42, .05)!important;
}
body.light .rbi-devtag {
  background:rgba(15, 23, 42, .05);
}
/* a janela do dispositivo deixa de inclinar enquanto se digita (legibilidade) */
.rbi-win.dev:focus-within {
  transform:none;
}
@media(max-width:700px) {
  .rbi-omni-in {
    font-size:.68rem;
  }
  .rbi-devtag {
    display:none;
  }
}

/* ===================================================================
   LAB v7.7 · Menu de demonstracoes (unica fonte de verdade)
   Linha 1 (.lm-top): categorias (segmentado) + modos de exibicao.
   Linha 2 (.tabs):   demonstracoes da categoria ativa, em chips.
   Sem !important: as regras antigas do menu foram removidas no build.
   =================================================================== */
.tabwrap {
  position:sticky;
  top:var(--lab-nav-h, 62px);
  z-index:90;
  background:var(--lm-bg);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lm-line);
}
body[data-mode="apresentacao"] .tabwrap {
  margin-top:var(--lab-nav-h, 62px);
}
.tabwrap .container {
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:1280px;
  padding:10px 24px 12px;
}
/* ---- linha 1 ---- */
.lm-top {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.tgbar, .modes {
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:14px;
  background:var(--lm-fill);
  border:1px solid var(--lm-line);
}
.tgbar {
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
}
.tgbar::-webkit-scrollbar {
  display:none;
}
.tgbtn, .modes button, .tab {
  font:inherit;
  cursor:pointer;
  border:0;
  background:transparent;
  color:var(--lm-mute);
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.tgbtn:focus-visible, .modes button:focus-visible, .tab:focus-visible {
  outline:2px solid var(--td-cyan);
  outline-offset:2px;
}
.tgbtn {
  gap:8px;
  min-height:38px;
  padding:0 14px 0 12px;
  border-radius:10px;
  font-size:.8rem;
  font-weight:700;
}
.tgbtn:hover {
  color:var(--lm-ink);
  background:var(--lm-hover);
}
.tgbtn.on {
  color:var(--tab-ink);
  background:linear-gradient(135deg, var(--tab-a), var(--tab-b));
  box-shadow:0 6px 16px -8px var(--tab-a);
}
.tgbtn .tgi {
  font-style:normal;
  font-size:1rem;
  line-height:1;
}
.tgbtn .tgn {
  font-style:normal;
  font-size:.62rem;
  font-weight:800;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(255, 255, 255, .12);
}
.tgbtn.on .tgn {
  background:rgba(0, 0, 0, .18);
}
.tright {
  margin-left:auto;
  display:flex;
  align-items:center;
}
.modes button {
  min-height:38px;
  padding:0 13px;
  border-radius:10px;
  font-size:.74rem;
  font-weight:700;
}
.modes button:hover {
  color:var(--lm-ink);
  background:var(--lm-hover);
}
.modes button.on {
  color:var(--lm-ink);
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--lm-line);
}
/* ---- linha 2: demonstracoes ---- */
.tabs {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.tgroup, .tgsep, .tglabel, .tabnav {
  display:none;
}
.tgroup.on {
  display:contents;
}
.tgitems {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tab {
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--lm-line);
  background:var(--lm-fill);
  color:var(--lm-ink);
  font-size:.82rem;
  font-weight:600;
}
.tab:hover {
  border-color:var(--tab-a);
  background:var(--lm-hover);
}
.tab.on {
  color:var(--tab-ink);
  background:linear-gradient(135deg, var(--tab-a), var(--tab-b));
  border-color:transparent;
  font-weight:700;
  box-shadow:0 8px 20px -10px var(--tab-a);
}
.tab:active {
  transform:translateY(1px);
}
.tab[data-t="waf"] {
  --tab-a:#f6821f;
  --tab-b:#faae40;
  --tab-ink:#2a1200;
}
.tab[data-t="ddos"] {
  --tab-a:#f87171;
  --tab-b:#fca5a5;
  --tab-ink:#2a0000;
}
.tab[data-t="bot"] {
  --tab-a:#c084fc;
  --tab-b:#d8b4fe;
  --tab-ink:#1a0033;
}
.tab[data-t="sase"] {
  --tab-a:#a5b4fc;
  --tab-b:#c7d2fe;
  --tab-ink:#0f1442;
}
.tab[data-t="access"] {
  --tab-a:#c084fc;
  --tab-b:#e879f9;
  --tab-ink:#1a0033;
}
.tab[data-t="ai"] {
  --tab-a:#22c55e;
  --tab-b:#4ade80;
  --tab-ink:#032612;
}
.tab[data-t="rbi"] {
  --tab-a:#38bdf8;
  --tab-b:#7dd3fc;
  --tab-ink:#03203a;
}
.tab[data-t="lb"] {
  --tab-a:#00c2d4;
  --tab-b:#28d7e6;
  --tab-ink:#04222a;
}
.tab[data-t="map"] {
  --tab-a:#60a5fa;
  --tab-b:#93c5fd;
  --tab-ink:#001433;
}
.tab[data-t="cat"] {
  --tab-a:#eab308;
  --tab-b:#facc15;
  --tab-ink:#2a2100;
}
.tab[data-t="calc"] {
  --tab-a:#4ade80;
  --tab-b:#86efac;
  --tab-ink:#052e13;
}
.tgbtn[data-g="1"] {
  --tab-a:#f6821f;
  --tab-b:#faae40;
  --tab-ink:#2a1200;
}
.tgbtn[data-g="2"] {
  --tab-a:#a78bfa;
  --tab-b:#c4b5fd;
  --tab-ink:#1a0033;
}
.tgbtn[data-g="3"] {
  --tab-a:#00c2d4;
  --tab-b:#28d7e6;
  --tab-ink:#04222a;
}
.tgbtn[data-g="4"] {
  --tab-a:#60a5fa;
  --tab-b:#93c5fd;
  --tab-ink:#001433;
}
/* ---- tablets ---- */
@media(max-width:1080px) {
  :root {
    --lab-tabs-h:118px;
  }
  .tgbtn {
    padding:0 11px 0 10px;
    font-size:.76rem;
  }
  .tab {
    padding:0 14px;
    font-size:.8rem;
  }
}
/* ---- celular: categorias em 4 colunas, modos em linha propria, chips em 2 colunas ---- */
@media(max-width:760px) {
  :root {
    --lab-tabs-h:186px;
  }
  .tabwrap .container {
    gap:8px;
    padding:8px 14px 10px;
  }
  .lm-top {
    gap:8px;
  }
  .tgbar {
    width:100%;
    overflow:visible;
  }
  .tgbtn {
    flex:1 1 0;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:6px 4px;
    font-size:.66rem;
    line-height:1.15;
    text-align:center;
    white-space:normal;
  }
  .tgbtn .tgn {
    display:none;
  }
  .tright {
    width:100%;
    margin-left:0;
  }
  .modes {
    width:100%;
  }
  .modes button {
    flex:1 1 0;
    justify-content:center;
    min-height:34px;
    padding:0 6px;
    font-size:.7rem;
  }
  .tabs, .tgitems {
    gap:6px;
  }
  .tab {
    flex:1 1 calc(50% - 3px);
    justify-content:center;
    min-height:38px;
    padding:0 10px;
    font-size:.78rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  .tgbtn, .modes button, .tab {
    transition:none;
  }
}

/* ===================================================================
   LAB v7.8 · DDoS: seletor de vetores agrupado por camada + ficha
   =================================================================== */
.ddvec {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.dvg {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dvg-t {
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 2px 2px;
}
.ddv {
  display:grid;
  grid-template-columns:24px minmax(0, 1fr) auto 16px;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:7px 10px;
  border-radius:10px;
  text-align:left;
  color:var(--text);
  background:rgba(0, 0, 0, .18);
  border:1px solid var(--panel-brd);
  cursor:pointer;
  transition:border-color .18s, background .18s, transform .18s;
}
body.light .ddv {
  background:rgba(15, 23, 42, .04);
}
.ddv:hover {
  border-color:rgba(239, 68, 68, .5);
  transform:translateX(2px);
}
.ddv:focus-visible {
  outline:2px solid var(--td-cyan);
  outline-offset:2px;
}
.ddv .de {
  font-size:1.05rem;
  line-height:1;
  text-align:center;
}
.ddv .dvn {
  font-weight:700;
  font-size:.78rem;
  line-height:1.25;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ddv .dvm {
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  padding:2px 7px;
  border-radius:100px;
  background:rgba(239, 68, 68, .14);
  color:#fca5a5;
  white-space:nowrap;
}
body.light .ddv .dvm {
  background:rgba(239, 68, 68, .1);
  color:#b91c1c;
}
.ddv .dvchk {
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid var(--panel-brd);
  position:relative;
  transition:border-color .18s, background .18s;
}
.ddv.on {
  border-color:rgba(239, 68, 68, .7);
  background:linear-gradient(90deg, rgba(239, 68, 68, .22), rgba(246, 130, 31, .08));
}
.ddv.on .dvchk {
  border-color:#ef4444;
  background:#ef4444;
  box-shadow:inset 0 0 0 3px rgba(0, 0, 0, .35);
}
body.light .ddv.on .dvchk {
  box-shadow:inset 0 0 0 3px #fff;
}
.ddv.rec .dvm {
  background:rgba(250, 204, 21, .16);
  color:#fde047;
}
body.light .ddv.rec .dvm {
  background:rgba(202, 138, 4, .14);
  color:#854d0e;
}
.ddv.rec.on {
  border-color:rgba(250, 204, 21, .75);
  background:linear-gradient(90deg, rgba(239, 68, 68, .22), rgba(250, 204, 21, .12));
}
/* ficha do vetor selecionado */
.ddvinfo {
  margin-top:10px;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(239, 68, 68, .28);
  background:rgba(239, 68, 68, .06);
}
body.light .ddvinfo {
  background:rgba(239, 68, 68, .04);
}
.dvi-h {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.dvi-h .de {
  font-size:1.1rem;
  line-height:1;
}
.dvi-h b {
  font-size:.84rem;
}
.dvi-tag {
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:100px;
  background:rgba(250, 204, 21, .18);
  color:#fde047;
}
body.light .dvi-tag {
  background:rgba(202, 138, 4, .14);
  color:#854d0e;
}
.ddvinfo p {
  margin:7px 0 0;
  font-size:.7rem;
  line-height:1.5;
  color:var(--muted);
}
.dvi-k {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
  margin:10px 0 0;
}
.dvi-k div {
  min-width:0;
}
.dvi-k dt {
  font-size:.56rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.dvi-k dd {
  margin:1px 0 0;
  font-size:.7rem;
  font-weight:700;
  font-family:var(--mono);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.dvi-k div:last-child {
  grid-column:1 / -1;
}
/* ---------- tablets / celulares: lista em grade, ficha abaixo ---------- */
@media(max-width:980px) {
  .ddvec {
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px 12px;
  }
  .dvg {
    flex:1 1 260px;
  }
  .ddv {
    min-height:40px;
  }
}
@media(max-width:640px) {
  .ddvec {
    flex-direction:column;
  }
  .ddv .dvm {
    display:none;
  }
  .dvi-k {
    grid-template-columns:1fr 1fr;
  }
}
@media(prefers-reduced-motion: reduce) {
  .ddv, .ddv .dvchk {
    transition:none;
  }
  .ddv:hover {
    transform:none;
  }
}

/* ===================================================================
   LAB v7.9 · DDoS: botão "Disparar" dentro do ambiente (barra de comando)
   =================================================================== */
.ddcmd {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px 10px 16px;
  margin-bottom:12px;
  border:1px solid var(--panel-brd);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(246, 130, 31, .10), rgba(0, 194, 212, .06));
  position:relative;
}
.ddcmd::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid transparent;
  pointer-events:none;
}
.ddcmd.run::before {
  border-color:rgba(239, 68, 68, .55);
  animation:ddcmdPulse 1.1s ease-in-out infinite;
}
@keyframes ddcmdPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow:0 0 0 6px rgba(239, 68, 68, .18); }
}
.ddcmd-st {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  min-width:0;
}
.ddcmd-k {
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cf-orange-2);
  flex-basis:100%;
}
.ddcmd-v {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:.88rem;
}
.ddcmd-v .de {
  font-size:1.05rem;
  line-height:1;
}
.ddcmd-v b {
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}
.ddcmd-v em {
  font-style:normal;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:.72rem;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0, 194, 212, .14);
  color:var(--td-cyan-2);
  white-space:nowrap;
}
.ddcmd-p {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.74rem;
  font-weight:700;
  padding:3px 10px 3px 8px;
  border-radius:999px;
  border:1px solid rgba(34, 197, 94, .4);
  color:#86efac;
  background:rgba(34, 197, 94, .1);
}
.ddcmd-p i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.ddcmd-p.off {
  border-color:rgba(239, 68, 68, .45);
  color:#fca5a5;
  background:rgba(239, 68, 68, .1);
}
.ddcmd-p.off i {
  background:var(--red);
  box-shadow:0 0 8px var(--red);
}
.ddcmd-go {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  flex:none;
}
.ddcmd #ddGo {
  min-height:48px;
  min-width:196px;
  font-size:.92rem;
  padding:12px 22px;
  box-shadow:0 8px 22px -8px rgba(246, 130, 31, .7);
}
.ddcmd #ddGo:disabled {
  opacity:.8;
  cursor:progress;
  background:linear-gradient(135deg, #b91c1c, var(--red));
  color:#fff;
}
.ddcmd-h {
  font-size:.62rem;
  color:var(--muted);
  text-align:right;
  line-height:1.3;
  max-width:220px;
}
body.light .ddcmd {
  background:linear-gradient(135deg, rgba(246, 130, 31, .10), rgba(0, 194, 212, .08));
  border-color:rgba(0, 0, 0, .1);
}
body.light .ddcmd-k {
  color:#b45309;
}
body.light .ddcmd-v em {
  background:rgba(0, 150, 170, .12);
  color:#036c7a;
}
body.light .ddcmd-p {
  color:#166534;
  background:rgba(34, 197, 94, .12);
}
body.light .ddcmd-p.off {
  color:#991b1b;
  background:rgba(239, 68, 68, .1);
}
/* ---------- tablets / celulares ---------- */
@media(max-width:980px) {
  .ddview {
    order:3;
  }
  .ddcmd {
    position:sticky;
    top:calc(var(--lab-top, 128px));
    z-index:55;
    background:linear-gradient(135deg, rgba(14, 50, 62, .97), rgba(6, 30, 38, .97));
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  body.light .ddcmd {
    background:rgba(244, 247, 249, .97);
  }
  .ddcmd-h {
    display:none;
  }
}
@media(max-width:640px) {
  .ddcmd {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px 12px;
  }
  .ddcmd-k {
    display:none;
  }
  .ddcmd-v b {
    max-width:46vw;
  }
  .ddcmd-go {
    align-items:stretch;
  }
  .ddcmd #ddGo {
    width:100%;
    min-width:0;
  }
}
@media(prefers-reduced-motion:reduce) {
  .ddcmd.run::before {
    animation:none;
    box-shadow:0 0 0 3px rgba(239, 68, 68, .25);
  }
}

/* v7.5 · skip link (visivel apenas com foco por teclado) */
.skip-link{position:absolute;left:12px;top:-100px;z-index:10000;padding:10px 16px;border-radius:10px;
  background:#f6821f;color:#111;font:600 14px/1 system-ui,sans-serif;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:top .15s}
.skip-link:focus,.skip-link:focus-visible{top:12px;outline:3px solid #fff;outline-offset:2px}

/* ===================================================================
   LAB v8.9 · Navegação em trilho lateral (desktop)
   >= 1100px: todas as 12 demonstrações ficam visíveis de uma vez em uma
   coluna fixa à esquerda, agrupadas por categoria (títulos, não filtros).
   < 1100px: permanece a barra superior compacta (categorias + chips).
   Sem !important. Mesmo DOM, mesma API go()/labMenu.
   =================================================================== */
.sb-head, .tglabel {
  display:none;
}
.tab[data-t="fai"] {
  --tab-a:#f472b6;
  --tab-b:#f9a8d4;
  --tab-ink:#3b0a24;
}
@media(min-width:1100px) {
  :root {
    --lab-tabs-h:0px;
    --lab-side-w:264px;
  }
  .lab-shell {
    display:grid;
    grid-template-columns:var(--lab-side-w) minmax(0, 1fr);
    align-items:start;
    gap:28px;
    max-width:1280px;
    margin:0 auto;
    padding:22px 24px 0;
  }
  body[data-mode="apresentacao"] .lab-shell {
    padding-top:calc(var(--lab-nav-h, 62px) + 18px);
  }
  body[data-mode="apresentacao"] .tabwrap {
    margin-top:16px;
  }
  .lab-shell > main {
    min-width:0;
  }
  /* alinha o topo do trilho com o padding-top de <main> (16px) */
  .lab-shell > .tabwrap {
    margin-top:16px;
  }
  .lab-shell > main > .container {
    max-width:none;
    padding:0;
  }
  /* trilho */
  .tabwrap {
    position:sticky;
    top:calc(var(--lab-nav-h, 62px) + 14px);
    z-index:40;
    max-height:calc(100vh - var(--lab-nav-h, 62px) - 28px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    background:var(--lm-bg);
    border:1px solid var(--lm-line);
    border-radius:18px;
    box-shadow:0 18px 40px -28px rgba(0, 0, 0, .6);
  }
  .tabwrap .container {
    gap:14px;
    padding:14px;
  }
  /* linha 1 → somente os modos de exibição, em largura total */
  .lm-top {
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .tgbar {
    display:none;
  }
  .tright {
    margin-left:0;
    display:block;
  }
  .modes {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }
  .modes button {
    justify-content:center;
    padding:0 6px;
    font-size:.7rem;
  }
  /* lista completa */
  .tabs {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .sb-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:2px 4px 0;
    color:var(--lm-mute);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .sb-head .tgn {
    font-style:normal;
    font-size:.62rem;
    font-weight:800;
    min-width:18px;
    height:18px;
    padding:0 6px;
    border-radius:9px;
    display:grid;
    place-items:center;
    background:var(--lm-fill);
    border:1px solid var(--lm-line);
  }
  .tgroup, .tgroup.on {
    display:block;
  }
  .tgsep {
    display:none;
  }
  .tglabel {
    display:flex;
    align-items:center;
    gap:7px;
    margin:0 0 6px;
    padding:0 4px;
    color:var(--lm-mute);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.04em;
  }
  .tglabel .tgi {
    font-style:normal;
    font-size:.9rem;
    line-height:1;
  }
  .tgroup.on .tglabel {
    color:var(--lm-ink);
  }
  .tgitems {
    flex-direction:column;
    gap:4px;
  }
  .tab {
    width:100%;
    justify-content:flex-start;
    min-height:40px;
    padding:0 12px;
    border-radius:11px;
    border-color:transparent;
    background:transparent;
    white-space:normal;
    text-align:left;
    line-height:1.2;
  }
  .tab:hover {
    background:var(--lm-hover);
    border-color:var(--lm-line);
  }
  .tab.on {
    box-shadow:0 10px 22px -12px var(--tab-a);
  }
  .tab:active {
    transform:none;
  }
  /* indicador lateral da demo ativa */
  .tab.on::before {
    content:"";
    width:3px;
    height:18px;
    margin-left:-6px;
    border-radius:3px;
    background:var(--tab-ink);
    opacity:.55;
  }
}
/* telas largas: um pouco mais de respiro para o conteúdo */
@media(min-width:1500px) {
  :root {
    --lab-side-w:280px;
  }
  .lab-shell {
    max-width:1400px;
  }
}
/* altura reduzida (notebooks em apresentação): compacta o trilho */
@media(min-width:1100px) and (max-height:760px) {
  .tabwrap .container {
    gap:10px;
  }
  .tabs {
    gap:8px;
  }
  .tab {
    min-height:34px;
    font-size:.78rem;
  }
  .modes button {
    min-height:32px;
  }
}

/* ===================================================================
   LAB v8.10 · Trilho lateral: recolher o menu e minimizar categorias
   - .lab-shell.sb-min  -> trilho estreito (so icones, com title/aria-label)
   - .tgroup.fold       -> categoria minimizada (lista oculta)
   Ambos so existem no desktop (>= 1100px); abaixo disso o DOM volta a ser a barra
   superior e as classes nao tem efeito.
   =================================================================== */
.sb-tgl, .tglabel .chev {
  display:none;
}
.tbi {
  font-style:normal;
  line-height:1;
}
@media(min-width:1100px) {
  .lab-shell {
    transition:grid-template-columns .22s ease;
  }
  .lab-shell.sb-min {
    --lab-side-w:68px;
  }
  .sb-head {
    gap:6px;
  }
  .sb-ttl {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .sb-tgl {
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    flex:0 0 auto;
    margin-right:-4px;
    border-radius:9px;
    border:1px solid var(--lm-line);
    background:var(--lm-fill);
    color:var(--lm-mute);
    cursor:pointer;
    transition:background .18s, color .18s, transform .22s;
  }
  .sb-tgl:hover {
    color:var(--lm-ink);
    background:var(--lm-hover);
  }
  .sb-tgl:focus-visible {
    outline:2px solid var(--td-cyan);
    outline-offset:2px;
  }
  .sb-min .sb-tgl svg {
    transform:rotate(180deg);
  }
  /* categoria = botao que recolhe/expande */
  .tglabel {
    width:100%;
    font:inherit;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.04em;
    border:0;
    border-radius:9px;
    background:transparent;
    cursor:pointer;
    padding:6px 4px;
    margin:0 0 4px;
    transition:background .18s, color .18s;
  }
  .tglabel:hover {
    color:var(--lm-ink);
    background:var(--lm-hover);
  }
  .tglabel:focus-visible {
    outline:2px solid var(--td-cyan);
    outline-offset:2px;
  }
  .tglabel .chev {
    display:block;
    margin-left:auto;
    opacity:.7;
    transition:transform .2s;
  }
  .tgroup.fold .tglabel .chev {
    transform:rotate(-90deg);
  }
  .tgroup.fold .tgitems {
    display:none;
  }
  /* categoria minimizada que contem a demo ativa: ponto colorido no titulo */
  .tgroup.fold.on .tglabel::after {
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--td-cyan);
    margin-left:6px;
    flex:0 0 auto;
  }
  /* ---- trilho recolhido: so icones ---- */
  .sb-min .tabwrap .container {
    padding:12px 10px;
    gap:10px;
  }
  .sb-min .sb-head {
    justify-content:center;
    padding:0;
  }
  .sb-min .sb-ttl, .sb-min .lm-top, .sb-min .tglabel span, .sb-min .tglabel .chev, .sb-min .tab span {
    display:none;
  }
  .sb-min .sb-tgl {
    margin-right:0;
  }
  .sb-min .tglabel {
    justify-content:center;
    padding:4px 0;
    margin:0 0 2px;
    font-size:.95rem;
  }
  .sb-min .tglabel .tgi {
    font-size:1rem;
  }
  .sb-min .tgroup.fold.on .tglabel::after {
    margin-left:3px;
  }
  .sb-min .tab {
    justify-content:center;
    padding:0;
    min-height:42px;
    font-size:1.1rem;
  }
  .sb-min .tab.on::before {
    position:absolute;
    left:-6px;
    margin:0;
  }
  .sb-min .tab {
    position:relative;
  }
}

/* v8.21 · menu do laboratorio = menu do showcase (mesmos itens, ancoras do showcase, 'Laboratorio' ativo) */
.nav-links { display:flex; align-items:center; gap:2px; min-width:0; }
.nav-links a { font-size:.8rem; color:var(--muted); padding:8px 12px; border-radius:9px; transition:.2s; white-space:nowrap; font-weight:500; text-decoration:none; }
.nav-links a:hover { color:var(--text); background:rgba(255,255,255,.06); }
body.light .nav-links a:hover { background:rgba(15,23,42,.05); }
.nav-links .sep { width:1px; height:18px; background:var(--panel-brd); margin:0 6px; }
.nav-links a.nav-primary { color:var(--td-cyan); font-weight:700; }
.nav-links a.nav-lab { color:var(--cf-orange-2, #f6821f); font-weight:700; background:rgba(246,130,31,.1); border:1px solid rgba(246,130,31,.3); }
.nav-links a.nav-lab:hover, .nav-links a.nav-lab[aria-current="page"] { background:rgba(246,130,31,.2); color:var(--cf-orange-2, #f6821f); }
.nav-group { position:relative; }
.nav-trig { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); padding:8px 12px; border-radius:9px; background:none; border:0; font-family:inherit; font-weight:500; cursor:pointer; transition:.2s; white-space:nowrap; }
.nav-trig:hover, .nav-group.open .nav-trig { color:var(--text); background:rgba(255,255,255,.06); }
body.light .nav-trig:hover, body.light .nav-group.open .nav-trig { background:rgba(15,23,42,.05); }
.nav-trig .car { font-size:.58rem; opacity:.7; transition:.25s; }
.nav-group.open .nav-trig .car { transform:rotate(180deg); }
.nav-drop { position:absolute; top:calc(100% + 9px); left:0; min-width:210px; display:none; grid-template-columns:1fr; gap:2px; padding:8px; border-radius:13px; background:rgba(6,39,48,.98); border:1px solid var(--panel-brd); box-shadow:0 18px 44px -12px rgba(0,0,0,.6); backdrop-filter:var(--blur); z-index:120; }
body.light .nav-drop { background:rgba(255,255,255,.98); box-shadow:0 18px 44px -14px rgba(15,23,42,.25); }
.nav-group.open .nav-drop { display:grid; }
.nav-drop a { display:flex; align-items:center; gap:9px; }
.nav-drop .di { width:19px; text-align:center; opacity:.85; flex:none; }
.menu-toggle { display:none; }
@media(max-width:1240px) {
  .nav-links { position:fixed; top:66px; right:12px; left:12px; flex-direction:column; align-items:stretch; gap:4px; padding:12px; background:rgba(6,39,48,.97); border:1px solid var(--panel-brd); border-radius:14px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s; max-height:80vh; overflow-y:auto; }
  body.light .nav-links { background:rgba(255,255,255,.98); }
  .nav-links.open { transform:none; opacity:1; pointer-events:auto; }
  .nav-links a { padding:11px 14px; font-size:.9rem; }
  .nav-links .sep { display:none; }
  .menu-toggle { display:grid; place-items:center; }
  .nav-group { width:100%; }
  .nav-trig { width:100%; justify-content:space-between; padding:11px 14px; font-size:.9rem; }
  .nav-drop { position:static; display:grid; max-height:0; overflow:hidden; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; transition:max-height .3s ease; }
  .nav-group.open .nav-drop { max-height:420px; padding:4px 0 6px 12px; }
  .nav-drop a { border-left:2px solid var(--panel-brd); border-radius:0 9px 9px 0; }
}
@media (prefers-reduced-motion: reduce) { .nav-links, .nav-trig .car, .nav-drop { transition:none; } }

/* v8.24 · modo claro: estados ok/alerta/erro com texto legivel (antes usavam a paleta pastel do tema escuro) */
body.light .tdx .tdx-tag { color:#0b6c76; }
body.light .blockbox h4, body.light .brk.free b, body.light .bshield.on, body.light .fx-http, body.light .k-ai,
body.light .lbo.up .ost, body.light .ok, body.light .ratetab .hi, body.light .rbi-badge.ok, body.light .sasvc .satag,
body.light .savsc.new .savsi i, body.light .ub-ok, body.light .who span { color:#15803d; }
body.light .bshield.off, body.light .dbtable td, body.light .ddbanner div, body.light .fx-503, body.light .fx-503 small,
body.light .fx-site.down .fx-http, body.light .lbo.down .ost, body.light .leakbox .lt, body.light .mtag.b,
body.light .rbi-badge.bad, body.light .rbi-mal, body.light .ub-no, body.light .rbi-alert, body.light .rbi-alert small,
body.light .bad, body.light .brk.hot b, body.light .rbi-omni-help.bad, body.light .sasvc.block .satag,
body.light .sasvc.block .sawhy, body.light .savsc.old .savsi i { color:#b91c1c; }
body.light .rbi-verdict.leak { background:rgba(239,68,68,.12); color:#b91c1c; }
body.light .rbi-edge .sand, body.light .fx-site.slow .fx-http, body.light .mtag.f, body.light .sasvc.warn .satag,
body.light .warn, body.light .sasvc.warn .sawhy { color:#a16207; }
body.light .rbi-badge { color:#0e7490; }
body.light .k-ac { color:#7e22ce; }

/* v8.26 · modo claro (2a rodada): destaques ciano/laranja das variaveis e ex-estilos inline */
.c-ok{color:var(--c-ok)} .c-bad{color:var(--c-bad)} .c-warn{color:var(--c-warn)}
.fcredit{color:var(--td-cyan);font-weight:600;margin-top:6px;opacity:.85}
body.light .fcredit{color:#0b6c76;opacity:1}
body.light .btag, body.light .badge, body.light .cap, body.light .ar, body.light .back:hover, body.light .preset:hover,
body.light .srcnote a, body.light .sasrc a, body.light .nav-links a.nav-primary { color:#0b6c76; }
body.light .ns b, body.light .az.mid .az-t, body.light .shop-h b, body.light .user .cred, body.light .ub-sv,
body.light .mfa-d.fill, body.light .mtag.c, body.light .kpi b, body.light .pc-c, body.light .pc-more { color:#0e7490; }
body.light .k-waf, body.light .ana .at, body.light .owasp,
body.light .nav-links a.nav-lab, body.light .nav-links a.nav-lab:hover, body.light .nav-links a.nav-lab[aria-current="page"] { color:#c2410c; }
body.light .fx-503 { background:rgba(185,28,28,.08); }
body.light .rbi-alert { background:rgba(185,28,28,.08); }

/* v8.29 · modo claro: menu do laboratorio (categorias, modos, abas) e barra superior legiveis */
body.light nav { background:rgba(244,247,249,.92); }
body.light .brand .bname, body.light .lang button, body.light .ico-btn { color:#0f2730; }
body.light .brand .btag { color:#0b6c76; }
body.light .lang button.on { color:#022; }
body.light .tgbtn, body.light .modes button { color:#3b5560; }
body.light .tgbtn:hover, body.light .modes button:hover, body.light .modes button.on, body.light .tab { color:#0f2730; }
body.light .tgbtn .tgn { background:rgba(15,23,42,.10); }
body.light .tgbtn.on .tgn { background:rgba(0,0,0,.14); }
body.light .tab.on { color:var(--tab-ink); }
body.light .tglabel, body.light .sec-head .kicker { color:#3b5560; }

/* v8.23 · barra do lab = barra do showcase (logo TD SYNNEX, idiomas com bandeira) */
.cobrand{display:flex;align-items:center;gap:14px;flex:none}
.cobrand .brand-home{display:block;border-radius:10px}
.cobrand .brand-home:hover{background:transparent}
.tdx{display:flex;flex-direction:column;line-height:1;gap:4px}
.tdx .tdx-logo img{width:170px;height:auto;display:block}
.tdx .tdx-logo .tdx-dark{display:block}
.tdx .tdx-logo .tdx-light{display:none}
body.light .tdx .tdx-logo .tdx-dark{display:none}
body.light .tdx .tdx-logo .tdx-light{display:block}
.tdx .tdx-tag{font-size:.56rem;color:var(--td-cyan);letter-spacing:.16em;text-transform:uppercase;font-weight:600}
@media(max-width:920px){.tdx .tdx-tag{display:none}}
@media(max-width:560px){.tdx .tdx-logo img{width:132px}}
.lang-switch{display:flex;gap:3px;background:var(--panel);border:1px solid var(--panel-brd);border-radius:10px;padding:3px}
.lang-btn{display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:7px;font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:transparent;font-family:inherit;transition:.2s}
.lang-btn .flag svg{display:block;width:19px;height:13px;border-radius:2px}
.lang-btn.active{background:linear-gradient(135deg,var(--td-cyan),var(--td-cyan-2,var(--td-cyan)));color:#022}
.ico-btn.theme-btn{width:36px;height:33px;font-size:1rem}
@media(max-width:560px){.lang-btn{padding:6px 7px}.lang-btn .flag{display:none}}