/* Painel animado de segurança: perfis, permissões, gravação e selos */
.wsg{
  --g-bg:#0A1330; --g-card:#111C42; --g-card-2:#16224F; --g-line:#22305E;
  --g-fg:#F4F6FB; --g-fg-2:#A9B4D4; --g-fg-3:#8792B5;
  --g-blue:#8EA6FF; --g-blue-strong:#1F4FD8; --g-blue-2:#3A63F2; --g-ice:#B7C6FF;
  --g-ok:#7FE0B0; --g-red:#FF8A93; --g-wa:#25D366;
  --g-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  position:relative; background:var(--g-bg); color:var(--g-fg); border:1px solid var(--g-line); border-radius:22px; padding:18px;
  box-shadow:0 40px 80px -40px rgba(10,19,48,.55), 0 2px 4px rgba(10,19,48,.12);
  display:grid; gap:12px; overflow:hidden; isolation:isolate; font-size:13px; line-height:1.35; text-align:left;
}
.wsg *{box-sizing:border-box}
.wsg svg{width:100%; height:100%; display:block}
.wsg__grid{position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(142,166,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(142,166,255,.07) 1px,transparent 1px);
  background-size:26px 26px; -webkit-mask-image:radial-gradient(80% 70% at 70% 0,#000,transparent); mask-image:radial-gradient(80% 70% at 70% 0,#000,transparent)}
.wsg__glow{position:absolute; inset:-35% -20% auto auto; width:70%; aspect-ratio:1; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(58,99,242,.3),transparent)}

.wsg__head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.wsg__title{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; letter-spacing:-.2px}
.wsg__shield{width:30px; height:30px; padding:6px; border-radius:9px; color:var(--g-ice); background:#1A2758; border:1px solid #2A3A78; position:relative}
.wsg__shield::after{content:""; position:absolute; inset:-1px; border-radius:9px; border:1px solid var(--g-blue); opacity:0; animation:wsg-ring 2.4s ease-out infinite}
.wsg__live{font-family:var(--g-mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--g-ok);
  background:rgba(127,224,176,.08); border:1px solid rgba(127,224,176,.3); border-radius:999px; padding:5px 10px; display:inline-flex; align-items:center; gap:7px}
.wsg__live i{width:7px; height:7px; border-radius:50%; background:var(--g-ok); animation:wsg-live 1.8s infinite}

/* Abas de perfil */
.wsg__tabs{position:relative; display:flex; gap:4px; padding:4px; background:#0D1738; border:1px solid var(--g-line); border-radius:12px}
.wsg__ind{position:absolute; left:0; top:4px; bottom:4px; border-radius:9px; background:linear-gradient(135deg,var(--g-blue-strong),var(--g-blue-2));
  box-shadow:0 8px 20px -8px rgba(31,79,216,.9); transition:transform .5s cubic-bezier(.6,0,.2,1), width .5s cubic-bezier(.6,0,.2,1)}
.wsg__tab{position:relative; flex:1; text-align:center; padding:7px 6px; font-size:12px; font-weight:600; color:var(--g-fg-3); border-radius:9px; transition:color .3s; white-space:nowrap}
.wsg__tab.is-on{color:#fff}

.wsg__who{display:flex; align-items:center; gap:10px; padding:2px 2px 0}
.wsg__av{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; background:var(--g-blue-strong); color:#fff; border:1px solid var(--g-blue-2); flex:none}
.wsg__who b{display:block; font-size:13px; font-weight:600}
.wsg__who small{font-family:var(--g-mono); font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--g-fg-3)}
.wsg__key{margin-left:auto; width:26px; height:26px; padding:5px; border-radius:8px; color:var(--g-ok); background:rgba(127,224,176,.08); border:1px solid rgba(127,224,176,.25)}

/* Lista de permissões */
.wsg__list{position:relative; display:grid; gap:7px}
.wsg__scan{position:absolute; left:-18px; right:-18px; height:46px; top:-46px; pointer-events:none; z-index:2; opacity:0;
  background:linear-gradient(180deg,transparent,rgba(58,99,242,.22) 70%,rgba(142,166,255,.75) 98%,transparent)}
.wsg.is-scan .wsg__scan{animation:wsg-scan 1.25s cubic-bezier(.45,0,.3,1)}
.wsg-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; background:var(--g-card); border:1px solid var(--g-line);
  border-radius:12px; padding:9px 10px; transition:background .35s, border-color .35s, opacity .35s}
.wsg-row__ic{width:28px; height:28px; padding:6px; border-radius:8px; color:var(--g-ice); background:#1A2758; border:1px solid #2A3A78; transition:color .35s, background .35s}
.wsg-row__nm{font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.wsg-row.is-off{background:rgba(17,28,66,.55)}
.wsg-row.is-off .wsg-row__nm{color:var(--g-fg-3)}
.wsg-row.is-off .wsg-row__ic{color:var(--g-fg-3); background:#131D45}
.wsg-st{display:inline-flex; align-items:center; gap:6px; font-family:var(--g-mono); font-size:10px; letter-spacing:.8px; text-transform:uppercase;
  border-radius:999px; padding:4px 9px 4px 7px; border:1px solid var(--g-line); color:var(--g-fg-3); white-space:nowrap; min-width:104px; justify-content:center}
.wsg-st__ic{width:12px; height:12px; flex:none}
.wsg-st__ic:empty{display:none}
.wsg-st.is-ok{color:var(--g-ok); border-color:rgba(127,224,176,.35); background:rgba(127,224,176,.08)}
.wsg-st.is-no{color:var(--g-red); border-color:rgba(255,138,147,.3); background:rgba(255,138,147,.07)}
.wsg-st.is-check{color:var(--g-blue); border-color:#2A3A78; background:transparent}
.wsg-st.is-check .wsg-st__ic{display:none}
.wsg-st.is-check .wsg-st__tx::after{content:"…"; animation:wsg-blink .6s steps(2) infinite}
.wsg-st.is-flip{animation:wsg-flip .4s cubic-bezier(.2,.9,.3,1.3)}

/* Gravação */
.wsg__rec{display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:11px; padding:10px; border-radius:12px;
  border:1px solid #2F48A8; background:linear-gradient(90deg,rgba(31,79,216,.2),var(--g-card) 75%); position:relative; transition:filter .4s, opacity .4s}
.wsg__play{width:30px; height:30px; padding:8px 7px 8px 9px; border-radius:50%; background:var(--g-blue-strong); color:#fff}
.wsg__rmeta b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap}
.wsg__rmeta small{font-size:11px; color:var(--g-fg-3); white-space:nowrap}
.wsg__wave{display:flex; align-items:center; gap:2px; height:24px; min-width:0; overflow:hidden; justify-content:flex-end}
.wsg__wave i{width:3px; border-radius:2px; background:var(--g-blue); flex:none; transform-origin:center; animation:wsg-wave 1.1s ease-in-out infinite}
.wsg__rt{font-family:var(--g-mono); font-size:11px; color:var(--g-fg-2); font-variant-numeric:tabular-nums}
.wsg__rec::after{content:"Bloqueado para este perfil"; position:absolute; inset:0; border-radius:12px; display:grid; place-items:center;
  font-family:var(--g-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--g-red);
  background:rgba(10,19,48,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .4s}
.wsg__rec.is-locked::after{opacity:1}
.wsg__rec.is-locked .wsg__wave i{animation-play-state:paused}

/* Selos */
.wsg__badges{display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--g-line); padding-top:12px}
.wsg-b{display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--g-fg-2); border:1px solid var(--g-line); border-radius:999px; padding:5px 10px 5px 6px; background:rgba(17,28,66,.6)}
.wsg-b>span{width:18px; height:18px; padding:3px; border-radius:50%; background:#1A2758; color:var(--g-ice); flex:none}
.wsg-b.wa>span{background:var(--g-wa); color:#fff; padding:3.5px}

.wsg.is-paused *, .wsg.is-paused *::after{animation-play-state:paused!important}

@keyframes wsg-ring{0%{opacity:.9; transform:scale(1)}70%,100%{opacity:0; transform:scale(1.5)}}
@keyframes wsg-live{0%{box-shadow:0 0 0 0 rgba(127,224,176,.55)}70%{box-shadow:0 0 0 7px rgba(127,224,176,0)}100%{box-shadow:0 0 0 0 rgba(127,224,176,0)}}
@keyframes wsg-scan{0%{top:-46px; opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%; opacity:0}}
@keyframes wsg-flip{0%{transform:scale(.8); opacity:.3}100%{transform:none; opacity:1}}
@keyframes wsg-spin{to{transform:rotate(360deg)}}
@keyframes wsg-blink{50%{opacity:0}}
@keyframes wsg-wave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

@media (max-width:480px){
  .wsg{padding:14px; border-radius:18px}
  .wsg__tab{font-size:11px; padding:7px 2px}
  .wsg-st{min-width:0; padding:4px 7px}
  .wsg-st__tx{display:none}
  .wsg-st{width:30px; height:24px; padding:0}
  .wsg-st.is-check::before{content:""; width:11px; height:11px; border-radius:50%; border:2px solid #2A3A78; border-top-color:var(--g-blue); animation:wsg-spin .6s linear infinite}
  .wsg__rec{grid-template-columns:auto 1fr auto}
  .wsg__wave{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wsg *, .wsg *::after{animation:none!important; transition:none!important}
}