/* =========================================================
   PLAYER STORE — black neon
   ========================================================= */

:root{
  --bg:          #05070b;
  --bg-2:        #090d14;
  --panel:       rgba(14,19,28,.72);
  --panel-solid: #0e131c;
  --linha:       rgba(255,255,255,.09);
  --linha-forte: rgba(255,255,255,.18);

  --txt:         #eef2f8;
  --txt-2:       #97a3b6;
  --txt-3:       #5f6b7d;

  --prata-1:     #ffffff;
  --prata-2:     #d6dde8;
  --prata-3:     #8e99a9;

  --neon:        #6ee7ff;
  --neon-2:      #a78bfa;
  --ok:          #28e07a;
  --erro:        #ff4d5e;
  --alerta:      #fbbf24;

  --raio:        16px;
  --raio-sm:     10px;
  --sombra:      0 18px 50px -12px rgba(0,0,0,.85);
  --fonte:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--fonte);
  background:var(--bg);
  color:var(--txt);
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* grid de 1 coluna: empurra o rodape para o fim sem afetar a largura.
     Os elementos de fundo (canvas/brilhos/grade) sao position:fixed,
     entao nao ocupam linha nenhuma do grid. */
  display:grid;
  grid-template-columns:100%;
  align-content:start;
}
/* o miolo cresce e empurra o rodape para baixo */
body > main,
body > .login-box{ align-self:start; }
body{ grid-template-rows:auto 1fr auto; }

/* ---------- Fundo: partículas + brilhos ---------- */
#particulas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.brilhos{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.brilhos::before,
.brilhos::after{
  content:'';
  position:absolute;
  width:clamp(280px,45vw,620px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(110px);
  opacity:.16;
}
.brilhos::before{
  top:-14%; left:-10%;
  background:radial-gradient(circle,var(--neon),transparent 66%);
  animation:flutua 17s ease-in-out infinite;
}
.brilhos::after{
  bottom:-18%; right:-12%;
  background:radial-gradient(circle,var(--neon-2),transparent 66%);
  animation:flutua 21s ease-in-out infinite reverse;
}
@keyframes flutua{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(4%,-6%) scale(1.12); }
}

/* grade sutil */
.grade{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}

/* ---------- Layout ---------- */
.wrap{
  position:relative;
  z-index:1;
  width:min(1120px,100% - 32px);
  margin-inline:auto;
}

.topo{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(5,7,11,.72);
  border-bottom:1px solid var(--linha);
}
.topo-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.marca{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
}
.marca-icone{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:11px;
  background:linear-gradient(145deg,#1b2230,#0a0e15);
  border:1px solid var(--linha-forte);
  box-shadow:0 0 22px -6px rgba(110,231,255,.45), inset 0 1px 0 rgba(255,255,255,.1);
  flex-shrink:0;
}
.marca-icone svg{ width:21px; height:21px; }
.marca-txt strong{
  display:block;
  font-size:.98rem;
  font-weight:800;
  letter-spacing:.14em;
  background:linear-gradient(180deg,var(--prata-1) 12%,var(--prata-3) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.15;
}
.marca-txt span{
  display:block;
  font-size:.62rem;
  letter-spacing:.34em;
  color:var(--txt-3);
  text-transform:uppercase;
}

.link-admin{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border-radius:10px;
  border:1px solid var(--linha-forte);
  background:rgba(255,255,255,.035);
  color:var(--txt-2);
  font-size:.8rem;
  font-weight:600;
  text-decoration:none;
  transition:.22s;
  white-space:nowrap;
}
.link-admin:hover{
  color:var(--txt);
  border-color:rgba(110,231,255,.5);
  background:rgba(110,231,255,.07);
  box-shadow:0 0 22px -8px rgba(110,231,255,.6);
}
.link-admin svg{ width:15px; height:15px; }

/* ---------- Hero ---------- */
.hero{
  text-align:center;
  padding:clamp(48px,9vw,92px) 0 clamp(30px,5vw,46px);
}
.selo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 15px;
  border-radius:999px;
  border:1px solid var(--linha-forte);
  background:rgba(255,255,255,.04);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--txt-2);
  margin-bottom:24px;
}
.selo .ponto{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 10px var(--ok);
  animation:pulso 2s infinite;
}
@keyframes pulso{ 0%,100%{opacity:1} 50%{opacity:.35} }

.hero h1{
  font-size:clamp(2.5rem,8.5vw,5.4rem);
  font-weight:900;
  letter-spacing:.02em;
  line-height:.98;
  background:linear-gradient(180deg,#fff 8%,#c9d2de 42%,#798393 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 26px rgba(160,190,230,.22));
}
.hero h1 .fina{
  display:block;
  font-size:.42em;
  font-weight:700;
  letter-spacing:.42em;
  margin-top:6px;
  padding-left:.42em;
  background:linear-gradient(180deg,#e8edf5,#6f7b8c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  max-width:560px;
  margin:20px auto 0;
  color:var(--txt-2);
  font-size:clamp(.92rem,2.2vw,1.04rem);
}
.hero p b{ color:var(--txt); font-weight:700; }

/* ---------- Cards de estatística ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin:34px 0 8px;
}
.stat{
  padding:16px 14px;
  border-radius:var(--raio-sm);
  border:1px solid var(--linha);
  background:var(--panel);
  backdrop-filter:blur(10px);
  text-align:center;
}
.stat b{
  display:block;
  font-size:1.6rem;
  font-weight:800;
  background:linear-gradient(180deg,#fff,#8e99a9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat span{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--txt-3);
}

/* ---------- Card principal ---------- */
.card{
  position:relative;
  border-radius:var(--raio);
  border:1px solid var(--linha);
  background:var(--panel);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--sombra);
  padding:clamp(22px,4.5vw,38px);
  margin-bottom:56px;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(110,231,255,.65),transparent);
}

.card-topo{
  text-align:center;
  margin-bottom:28px;
  padding-bottom:22px;
  border-bottom:1px solid var(--linha);
}
.card-topo h2{
  font-size:clamp(1.25rem,3.4vw,1.6rem);
  font-weight:800;
  letter-spacing:-.01em;
}
.card-topo p{
  color:var(--txt-2);
  font-size:.9rem;
  margin-top:6px;
}

/* ---------- Formulário ---------- */
.campo{ margin-bottom:20px; }

.rotulo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--txt-2);
  margin-bottom:9px;
}
.rotulo svg{ width:15px; height:15px; color:var(--neon); flex-shrink:0; }
.rotulo .opc{
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--txt-3);
  font-size:.74rem;
}

input[type=text],
input[type=password],
textarea,
select{
  width:100%;
  padding:13px 15px;
  border-radius:var(--raio-sm);
  border:1px solid var(--linha-forte);
  background:rgba(0,0,0,.42);
  color:var(--txt);
  font-family:inherit;
  font-size:.95rem;
  transition:.22s;
  outline:none;
}
input::placeholder, textarea::placeholder{ color:var(--txt-3); }

input:focus, textarea:focus, select:focus{
  border-color:rgba(110,231,255,.65);
  background:rgba(0,0,0,.6);
  box-shadow:0 0 0 3px rgba(110,231,255,.12), 0 0 26px -10px rgba(110,231,255,.7);
}

textarea{ resize:vertical; min-height:130px; line-height:1.6; }

.contador{
  display:block;
  text-align:right;
  font-size:.72rem;
  color:var(--txt-3);
  margin-top:6px;
}

/* ---------- Seletor de tipo ---------- */
.tipos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px;
}
.tipo input{ position:absolute; opacity:0; pointer-events:none; }
.tipo label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 11px;
  border-radius:var(--raio-sm);
  border:1px solid var(--linha-forte);
  background:rgba(0,0,0,.34);
  cursor:pointer;
  text-align:center;
  transition:.22s;
  height:100%;
}
.tipo label:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.045);
  transform:translateY(-2px);
}
.tipo label svg{
  width:24px; height:24px;
  color:var(--txt-2);
  transition:.22s;
}
.tipo label strong{
  font-size:.83rem;
  font-weight:700;
}
.tipo label small{
  font-size:.7rem;
  color:var(--txt-3);
  line-height:1.35;
}
.tipo input:checked + label{
  border-color:var(--cor);
  background:color-mix(in srgb, var(--cor) 11%, transparent);
  box-shadow:0 0 28px -10px var(--cor), inset 0 0 0 1px color-mix(in srgb,var(--cor) 30%,transparent);
}
.tipo input:checked + label svg{ color:var(--cor); }
.tipo input:focus-visible + label{ outline:2px solid var(--neon); outline-offset:2px; }

/* ---------- Estrelas ---------- */
.bloco-nota{
  display:none;
  animation:aparece .3s ease;
}
.bloco-nota.on{ display:block; }

.estrelas{
  display:flex;
  gap:7px;
  justify-content:flex-start;
}
.estrelas input{ position:absolute; opacity:0; pointer-events:none; }
.estrelas label{
  cursor:pointer;
  line-height:0;
  transition:.18s;
}
.estrelas label svg{
  width:32px; height:32px;
  color:var(--txt-3);
  transition:.18s;
}
.estrelas label:hover svg{ transform:scale(1.14); }
.estrelas label.ativa svg{
  color:var(--alerta);
  filter:drop-shadow(0 0 9px rgba(251,191,36,.65));
}

/* ---------- Botão ---------- */
.btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 22px;
  border:none;
  border-radius:var(--raio-sm);
  background:linear-gradient(180deg,#f4f7fb,#aeb9c8);
  color:#05070b;
  font-family:inherit;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.22s;
  box-shadow:0 10px 32px -12px rgba(200,220,255,.55);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(200,220,255,.75);
}
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn svg{ width:17px; height:17px; }

.btn-linha{
  background:transparent;
  border:1px solid var(--linha-forte);
  color:var(--txt-2);
  box-shadow:none;
}
.btn-linha:hover{
  color:var(--txt);
  border-color:rgba(110,231,255,.5);
  background:rgba(110,231,255,.07);
  box-shadow:0 0 24px -10px rgba(110,231,255,.7);
}

/* ---------- Avisos ---------- */
.aviso{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:14px 16px;
  border-radius:var(--raio-sm);
  font-size:.88rem;
  margin-bottom:22px;
  border:1px solid;
  animation:aparece .35s ease;
}
.aviso svg{ width:19px; height:19px; flex-shrink:0; margin-top:1px; }
.aviso-ok{
  border-color:rgba(40,224,122,.4);
  background:rgba(40,224,122,.09);
  color:#9df3c4;
}
.aviso-erro{
  border-color:rgba(255,77,94,.4);
  background:rgba(255,77,94,.09);
  color:#ffb3ba;
}
@keyframes aparece{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---------- Rodapé ---------- */
.rodape{
  position:relative;
  z-index:1;
  border-top:1px solid var(--linha);
  padding:26px 0;
  text-align:center;
  color:var(--txt-3);
  font-size:.8rem;
}
.rodape b{
  background:linear-gradient(180deg,#fff,#8e99a9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:.1em;
}

/* ---------- Botão flutuante WhatsApp ---------- */
.zap{
  position:fixed;
  right:18px; bottom:18px;
  z-index:60;
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#1b2230,#0a0e15);
  border:1px solid var(--linha-forte);
  box-shadow:0 0 26px -8px rgba(40,224,122,.7);
  color:var(--ok);
  transition:.22s;
}
.zap:hover{ transform:scale(1.08); }
.zap svg{ width:25px; height:25px; }

/* =========================================================
   ADMIN
   ========================================================= */
.login-box{
  position:relative;
  z-index:1;
  width:min(400px,100% - 32px);
  margin:clamp(50px,12vh,120px) auto;
}

.admin-topo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:22px 0;
}
.admin-topo h1{
  font-size:1.35rem;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-topo h1 svg{ width:22px; height:22px; color:var(--neon); }

.acoes-topo{ display:flex; gap:9px; flex-wrap:wrap; }
.acoes-topo .link-admin{ font-size:.78rem; }

/* filtros */
.filtros{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--linha-forte);
  background:rgba(255,255,255,.035);
  color:var(--txt-2);
  font-size:.79rem;
  font-weight:600;
  text-decoration:none;
  transition:.2s;
  white-space:nowrap;
}
.chip:hover{ color:var(--txt); border-color:var(--linha-forte); background:rgba(255,255,255,.07); }
.chip.on{
  color:#05070b;
  background:linear-gradient(180deg,#f4f7fb,#b6c1d0);
  border-color:transparent;
  font-weight:800;
}
.chip .num{
  font-size:.72rem;
  opacity:.7;
}

.busca{
  display:flex;
  gap:9px;
  margin-bottom:22px;
}
.busca input{ flex:1; }
.busca button{ width:auto; padding-inline:22px; }

/* lista de mensagens */
.msgs{ display:grid; gap:13px; margin-bottom:40px; }

.msg{
  position:relative;
  border-radius:var(--raio);
  border:1px solid var(--linha);
  background:var(--panel);
  backdrop-filter:blur(12px);
  padding:18px 20px;
  border-left:3px solid var(--cor,#9aa3b2);
  transition:.2s;
}
.msg:hover{ border-color:var(--linha-forte); }
.msg.lido{ opacity:.58; }

.msg-cab{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-bottom:11px;
}
.msg-nome{
  font-weight:800;
  font-size:1rem;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:1px solid color-mix(in srgb,var(--cor) 45%,transparent);
  background:color-mix(in srgb,var(--cor) 13%,transparent);
  color:var(--cor);
}
.tag svg{ width:12px; height:12px; }
.msg-data{
  margin-left:auto;
  font-size:.75rem;
  color:var(--txt-3);
  white-space:nowrap;
}

.msg-meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  font-size:.78rem;
  color:var(--txt-3);
  margin-bottom:10px;
}
.msg-meta span{ display:inline-flex; align-items:center; gap:5px; }
.msg-meta svg{ width:13px; height:13px; }

.msg-txt{
  color:var(--txt);
  font-size:.93rem;
  white-space:pre-wrap;
  word-break:break-word;
  padding:13px 15px;
  border-radius:var(--raio-sm);
  background:rgba(0,0,0,.35);
  border:1px solid var(--linha);
}

.msg-nota{
  display:inline-flex;
  gap:2px;
  margin-bottom:10px;
}
.msg-nota svg{ width:15px; height:15px; color:var(--alerta); }
.msg-nota svg.off{ color:var(--txt-3); }

.msg-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--linha);
}
.mini{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 13px;
  border-radius:8px;
  border:1px solid var(--linha-forte);
  background:rgba(255,255,255,.035);
  color:var(--txt-2);
  font-family:inherit;
  font-size:.76rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:.2s;
}
.mini:hover{ color:var(--txt); background:rgba(255,255,255,.08); }
.mini svg{ width:13px; height:13px; }
.mini-ok:hover  { border-color:rgba(40,224,122,.55);  color:#9df3c4; background:rgba(40,224,122,.1); }
.mini-del:hover { border-color:rgba(255,77,94,.55);   color:#ffb3ba; background:rgba(255,77,94,.1); }

.vazio{
  text-align:center;
  padding:60px 20px;
  color:var(--txt-3);
}
.vazio svg{ width:44px; height:44px; margin-bottom:14px; opacity:.4; }
.vazio p{ font-size:.92rem; }

/* paginação */
.paginas{
  display:flex;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

/* ---------- Responsivo ---------- */
@media (max-width:620px){
  .topo-in{ padding:12px 0; }
  .marca-txt span{ display:none; }
  .msg-data{ margin-left:0; width:100%; }
  .card{ padding:20px 16px; }
  .estrelas label svg{ width:28px; height:28px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}