/* ============================================================================
   Painel ZapStatus — Design "NEON STATUS", padrão AAA da casa.
   ----------------------------------------------------------------------------
   Filosofia herdada do DESIGN.md do BRFBET: "o oposto de SaaS clean". Tudo tem
   PESO e PRESENÇA — luz volumétrica respirando, molduras que emolduram de
   verdade, botões que parecem ligados na tomada, materiais ricos (vidro, cromo,
   glow). Aqui a alma é VERDE NEON (marca ZapStatus/WhatsApp), não roxo.
   Densidade 6 · Motion coreografado.
   ========================================================================== */
:root{
  /* fundos verde-noite, nunca preto puro */
  --meia-noite:#04100a;
  --painel:#071810;
  --celula:#0c2417;
  --celula-alta:#123020;
  --linha:rgba(0,231,80,.14);
  --linha-forte:rgba(0,231,80,.32);
  /* marca — verde neon (gradientes são a marca) */
  --neon:#00e750;
  --neon-claro:#5cff92;
  --neon-escuro:#00a838;
  --verde-vidro:#00ff6a;
  /* texto */
  --tx:#eafff1;
  --tx2:#8fc7a5;
  --tx3:#4d7460;
  --erro:#ff5573;
  --sombra-neon:0 0 30px rgba(0,231,80,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--meia-noite);color:var(--tx);
  font:400 17px/1.5 "Outfit","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100vh;
}
/* luz volumétrica de fundo — respira, presente em toda tela */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(0,231,80,.18), transparent 60%),
    radial-gradient(900px 600px at 92% 108%, rgba(0,231,80,.10), transparent 62%),
    radial-gradient(700px 500px at 4% 60%, rgba(0,180,120,.07), transparent 65%);
  animation:respira 9s ease-in-out infinite;
}
/* grade neon em perspectiva no chão da tela */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(0,231,80,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,231,80,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,transparent 60%,#000 100%);
}
@keyframes respira{0%,100%{opacity:.85}50%{opacity:1}}
a{color:var(--neon);text-decoration:none}
.carregando{min-height:100vh;display:grid;place-items:center;color:var(--tx2);font-size:20px;letter-spacing:2px;text-transform:uppercase}

/* ════════════ AUTH ════════════ */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{
  width:100%;max-width:430px;position:relative;
  background:linear-gradient(180deg,var(--painel),var(--meia-noite));
  border:1px solid var(--linha-forte);border-radius:26px;padding:38px 34px;
  box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06),
             0 0 0 1px rgba(0,231,80,.05);
}
/* reflexo de vidro curvo no topo do card */
.auth-card::before{
  content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 40%);
}
.logo-topo{display:block;margin:0 auto 20px;height:74px;filter:drop-shadow(0 4px 24px rgba(0,231,80,.4))}
.auth-sub{text-align:center;color:var(--tx2);margin-bottom:28px;font-size:18px}
.campo{margin-bottom:16px;position:relative}
.campo label{display:block;font-weight:600;font-size:13.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--tx2);margin-bottom:7px}
.campo input{
  width:100%;background:var(--celula);border:1.5px solid var(--linha);
  border-radius:13px;padding:14px 16px;color:var(--tx);font:inherit;font-size:17px;
  transition:border-color .18s,box-shadow .18s;
}
.campo input::placeholder{color:var(--tx3)}
.campo input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,231,80,.14),0 0 20px rgba(0,231,80,.12)}
/* olhinho */
.olho{position:absolute;right:12px;top:34px;width:34px;height:34px;display:grid;place-items:center;
  cursor:pointer;color:var(--tx2);border-radius:8px;transition:color .15s}
.olho:hover{color:var(--neon)}
.olho svg{width:22px;height:22px}
/* medidor de força */
.forca{display:flex;gap:5px;margin-top:9px}
.forca span{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.08);transition:background .25s}
.forca.f1 span:nth-child(1){background:var(--erro)}
.forca.f2 span:nth-child(-n+2){background:#ffb020}
.forca.f3 span:nth-child(-n+3){background:var(--neon)}
.forca.f4 span{background:var(--neon)}
.regras{list-style:none;margin-top:10px;font-size:14px;color:var(--tx3);display:grid;gap:3px}
.regras li.ok{color:var(--neon)}
.regras li::before{content:"○ ";}
.regras li.ok::before{content:"● "}

.btn{
  width:100%;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--neon-claro),var(--neon) 42%,var(--neon-escuro));
  color:#04150a;font-weight:800;font-size:19px;letter-spacing:.4px;
  border:none;border-radius:14px;padding:16px;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,231,80,.32),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(0,231,80,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.btn:active{transform:translateY(0) scale(.98);filter:brightness(.95)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
/* brilho que varre o botão */
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:varre 3.4s ease-in-out infinite}
@keyframes varre{0%,72%{left:-60%}86%,100%{left:130%}}
.troca{text-align:center;margin-top:20px;color:var(--tx2)}
.troca a{font-weight:700}
.msg-erro{background:rgba(255,85,115,.1);border:1px solid rgba(255,85,115,.4);color:#ffb3c1;
  border-radius:12px;padding:12px 15px;margin-bottom:18px;font-size:16px;display:none}
.msg-erro.on{display:block;animation:tremor .3s}
@keyframes tremor{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ════════════ APP LOGADO ════════════ */
.top{
  display:flex;align-items:center;gap:14px;padding:14px 22px;
  border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20;
  background:rgba(4,16,10,.82);backdrop-filter:blur(14px);
}
.top .logo-top{height:38px;filter:drop-shadow(0 2px 12px rgba(0,231,80,.4))}
.top .eu{margin-left:auto;color:var(--tx2);font-weight:600}
.top .sair{background:var(--celula);border:1px solid var(--linha);color:var(--tx2);
  border-radius:11px;padding:8px 16px;cursor:pointer;font:inherit;font-weight:600;transition:.15s}
.top .sair:hover{border-color:var(--linha-forte);color:var(--tx)}
.painel{max-width:1060px;margin:0 auto;padding:30px 22px;display:grid;grid-template-columns:1fr 380px;gap:26px}
@media(max-width:860px){.painel{grid-template-columns:1fr}}

.card{
  position:relative;background:linear-gradient(180deg,var(--painel),rgba(4,16,10,.6));
  border:1px solid var(--linha);border-radius:20px;padding:26px;margin-bottom:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  animation:sobe .5s ease both;
}
.card::before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 38%)}
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card:nth-child(2){animation-delay:.08s}
.card h2{font-family:"Anton","Outfit",sans-serif;font-size:25px;letter-spacing:.6px;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#fff,var(--neon-claro));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px rgba(0,231,80,.25))}
.card h2 .ico{-webkit-text-fill-color:initial;font-size:22px}
.card .dica{color:var(--tx2);font-size:15.5px;margin:6px 0 20px}

.forte{display:block;font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--tx2);margin:18px 0 8px}

/* cores — chips premium com glow ao selecionar */
/* grade FIXA 4 colunas x 3 fileiras (12 cores) */
.cores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:264px}
.cor{width:46px;height:46px;border-radius:14px;cursor:pointer;position:relative;
  border:2px solid rgba(255,255,255,.12);transition:transform .15s,box-shadow .2s;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.25),inset 0 -3px 8px rgba(0,0,0,.4)}
.cor:hover{transform:translateY(-3px) scale(1.05)}
.cor.sel{border-color:#fff;transform:translateY(-3px) scale(1.08);
  box-shadow:0 0 0 3px var(--neon),0 8px 24px var(--cor-glow,rgba(0,231,80,.5)),inset 0 2px 6px rgba(255,255,255,.3)}
.cor.sel::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:22px;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* dropzone de logo */
.dropzone{border:2px dashed var(--linha-forte);border-radius:16px;padding:28px;text-align:center;
  cursor:pointer;color:var(--tx2);transition:border-color .18s,background .18s;background:rgba(0,231,80,.02)}
.dropzone:hover{border-color:var(--neon);background:rgba(0,231,80,.06)}
.dropzone.tem{padding:16px}
.logo-preview{max-height:96px;margin:0 auto;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}

input[type=text]{width:100%;background:var(--celula);border:1.5px solid var(--linha);
  border-radius:13px;padding:13px 16px;color:var(--tx);font:inherit;transition:border-color .18s,box-shadow .18s}
input[type=text]:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,231,80,.14)}

.salvar-linha{margin-top:20px;display:flex;align-items:center;gap:14px}
.salvar-linha .btn{width:auto;padding:14px 30px}
.salvo{color:var(--neon);font-weight:700;opacity:0;transform:translateX(-8px);transition:.3s}
.salvo.show{opacity:1;transform:none}

/* conexão wpp */
.conexao{display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:14px;
  background:var(--celula);border:1px solid var(--linha)}
.bolinha{width:13px;height:13px;border-radius:50%;background:var(--tx3);flex:0 0 auto;position:relative}
.bolinha.on{background:var(--neon);box-shadow:0 0 12px var(--neon)}
.bolinha.on::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--neon);animation:pulso 1.6s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(2);opacity:0}}
.btn-conectar{margin-left:auto;background:var(--celula-alta);border:1px solid var(--linha-forte);
  color:var(--neon);font-weight:700;border-radius:11px;padding:9px 18px;cursor:pointer;font:inherit;transition:.15s}
.btn-conectar:hover{background:rgba(0,231,80,.12);box-shadow:0 0 16px rgba(0,231,80,.2)}

/* ════ prévia — moldura de celular premium ════ */
.previa-col{position:sticky;top:88px;align-self:start}
.previa-tit{font-family:"Anton";font-size:16px;letter-spacing:2px;text-transform:uppercase;
  color:var(--tx2);text-align:center;margin-bottom:14px}
.phone{position:relative;margin:0 auto;width:100%;max-width:320px;
  border-radius:40px;padding:9px;background:linear-gradient(160deg,#1a2a20,#0a140d);
  box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 0 1px rgba(0,231,80,.18),0 0 60px rgba(0,231,80,.12);
}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:32%;height:20px;background:#0a140d;border-radius:0 0 14px 14px;z-index:3}
.phone-tela{border-radius:32px;overflow:hidden;background:#000;aspect-ratio:1080/1920;position:relative}
.phone-tela img{width:100%;display:block}
.phone-carregando{position:absolute;inset:0;display:grid;place-items:center;color:var(--tx3);
  font-size:15px;letter-spacing:1px;background:var(--painel)}
.spinner{width:34px;height:34px;border:3px solid rgba(0,231,80,.2);border-top-color:var(--neon);
  border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.previa-status{text-align:center;color:var(--tx2);font-size:14.5px;margin-top:14px;min-height:20px}

/* barra de rede indeterminada no topo durante fetch */
.rede{position:fixed;top:0;left:0;right:0;height:3px;z-index:99;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .2s}
.rede.on{opacity:1}
.rede::before{content:"";position:absolute;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);animation:rede 1s ease-in-out infinite}
@keyframes rede{0%{left:-40%}100%{left:100%}}

/* botão flutuante "Instalar app" (aparece quando o PWA é instalável) */
.btn-instalar{
  position:fixed;bottom:20px;right:20px;z-index:80;
  background:linear-gradient(180deg,var(--neon-claro),var(--neon-escuro));
  color:#04150a;font-weight:800;font-size:16px;border:none;border-radius:14px;
  padding:13px 26px;cursor:pointer;font-family:inherit;
  box-shadow:0 12px 34px rgba(0,231,80,.5);animation:sobe-inst .4s ease both,respira-inst 2.4s ease-in-out infinite}
@keyframes sobe-inst{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes respira-inst{0%,100%{box-shadow:0 12px 34px rgba(0,231,80,.5)}50%{box-shadow:0 12px 44px rgba(0,231,80,.75)}}

/* ════════════ DRAWER / MENU LATERAL (padrão painel profissional) ════════════ */
/* hambúrguer FIXO acima do drawer: 3 riscos → SETA ← quando aberto */
.hamburguer{position:fixed;top:12px;left:14px;z-index:70;
  width:44px;height:44px;background:var(--celula);border:1px solid var(--linha);
  border-radius:12px;cursor:pointer;display:grid;place-items:center;gap:5px;padding:11px;transition:.15s}
.hamburguer:hover{border-color:var(--linha-forte);box-shadow:0 0 14px rgba(0,231,80,.2)}
.hamburguer span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--neon);
  transition:transform .3s cubic-bezier(.5,.1,.3,1.2),width .3s,opacity .2s;transform-origin:center}
/* aberto: risco de cima e de baixo viram as pontas da seta; o do meio é a haste */
.hamburguer.x span:nth-child(1){width:13px;transform:translate(-4px,5.5px) rotate(-45deg)}
.hamburguer.x span:nth-child(2){width:20px}
.hamburguer.x span:nth-child(3){width:13px;transform:translate(-4px,-5.5px) rotate(45deg)}
/* a topbar abre espaço pro botão fixo */
.top{padding-left:74px !important}

.drawer{
  position:fixed;top:0;left:0;bottom:0;width:280px;z-index:60;
  background:linear-gradient(180deg,var(--painel),var(--meia-noite));
  border-right:1px solid var(--linha-forte);
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.5,.1,.25,1);
  display:flex;flex-direction:column;padding:20px 16px;
  box-shadow:20px 0 60px rgba(0,0,0,.5);
}
.drawer.aberto{transform:none}
.drawer-topo{padding:6px 8px 18px 56px;border-bottom:1px solid var(--linha);margin-bottom:14px}
.drawer-topo .logo-top{height:40px;filter:drop-shadow(0 2px 12px rgba(0,231,80,.4))}
.menu{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
.menu-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:none;border:none;border-radius:12px;padding:13px 14px;cursor:pointer;
  color:var(--tx2);font:inherit;font-size:16.5px;font-weight:600;transition:.15s;position:relative}
.menu-item:hover{background:var(--celula);color:var(--tx)}
.menu-item.ativo{background:linear-gradient(90deg,rgba(0,231,80,.16),rgba(0,231,80,.04));
  color:var(--tx);box-shadow:inset 3px 0 0 var(--neon)}
.menu-item.ativo .mi-ico{filter:drop-shadow(0 0 8px var(--neon))}
.mi-ico{font-size:20px;width:24px;text-align:center;flex:0 0 auto}
.mi-nome{flex:1}
.menu-item.breve{opacity:.62}
.mi-breve{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--tx3);background:var(--celula);border:1px solid var(--linha);border-radius:6px;padding:2px 7px}
.menu-sair{margin-top:10px;background:var(--celula);border:1px solid var(--linha);
  color:var(--tx2);border-radius:12px;padding:13px;cursor:pointer;font:inherit;font-weight:600;transition:.15s}
.menu-sair:hover{border-color:var(--erro);color:#ffb3c1}

.overlay{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.on{opacity:1;pointer-events:auto}

/* área de conteúdo — desliza ao trocar de seção */
.conteudo{min-height:calc(100vh - 68px)}
.conteudo.entra{animation:desliza-sec .34s cubic-bezier(.4,0,.2,1)}
@keyframes desliza-sec{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.wrap-sec{max-width:1060px;margin:0 auto;padding:28px 22px;display:grid;grid-template-columns:1fr;gap:0}
.painel-marca{grid-template-columns:1fr 380px;gap:26px;align-items:start}
@media(max-width:860px){.painel-marca{grid-template-columns:1fr}}

/* seção "em breve" */
.breve-card{text-align:center;padding:56px 30px}
.breve-ico{font-size:56px;margin-bottom:14px;filter:grayscale(.3);opacity:.8}
/* atalhos do início */
.atalhos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
@media(max-width:640px){.atalhos{grid-template-columns:1fr}}
.atalho{display:flex;align-items:center;gap:12px;background:var(--celula);border:1px solid var(--linha);
  border-radius:16px;padding:20px;cursor:pointer;font:inherit;font-size:18px;font-weight:700;color:var(--tx);
  transition:.15s}
.atalho:hover{border-color:var(--neon);box-shadow:0 0 20px rgba(0,231,80,.16);transform:translateY(-2px)}
.atalho span{font-size:26px}

/* status do código de indicação no cadastro */
.convite-status{font-size:14px;margin-top:7px;min-height:18px;font-weight:600;transition:color .2s}
.convite-status.checando{color:var(--tx3)}
.convite-status.ok{color:var(--neon)}
.convite-status.ruim{color:var(--erro)}


/* ════════════ CONEXÃO — QR no painel ════════════ */
.qr-area{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.qr-box{background:#fff;border-radius:18px;padding:14px;flex:0 0 auto;
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 0 1px rgba(0,231,80,.25),0 0 40px rgba(0,231,80,.14);
  animation:sobe .4s ease both}
.qr-box img{width:224px;height:224px;display:block}
.qr-passos{flex:1;min-width:230px}
.qr-tit{font-weight:800;font-size:18px;margin-bottom:10px}
.qr-passos ol{margin-left:20px;color:var(--tx2);display:grid;gap:7px;font-size:16.5px}
.qr-passos b{color:var(--tx)}
.qr-nota{color:var(--tx3);font-size:14.5px;margin-top:12px}
.conexao.ok{border-color:rgba(0,231,80,.4);background:rgba(0,231,80,.06)}
.btn-conectar.desligar{color:#ffb3c1;border-color:rgba(255,85,115,.35)}
.btn-conectar.desligar:hover{background:rgba(255,85,115,.1);box-shadow:0 0 14px rgba(255,85,115,.15)}


/* ════════════ PERFIS ════════════ */
.perfis-grid{display:grid;gap:12px;margin-bottom:6px}
.perfil-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--celula);
  border:1px solid var(--linha);border-radius:16px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--tx);transition:.15s}
.perfil-card:hover{border-color:var(--neon);box-shadow:0 0 18px rgba(0,231,80,.15);transform:translateY(-2px)}
.pc-logo{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:24px;overflow:hidden;flex:0 0 auto}
.pc-logo img{width:100%;height:100%;object-fit:contain}
.pc-info{flex:1;display:grid;gap:2px}
.pc-info b{font-size:18px}
.pc-info small{color:var(--tx2)}
.pc-cor{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);flex:0 0 auto}
.pc-abrir{font-size:26px;color:var(--tx3)}
.voltar{background:none;border:none;color:var(--tx2);font:inherit;font-weight:700;font-size:16px;cursor:pointer;margin-bottom:12px;padding:6px 2px}
.voltar:hover{color:var(--neon)}
.perfil-titulo{align-items:center}
.pt-logo{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center;overflow:hidden;flex:0 0 auto;-webkit-text-fill-color:initial}
.pt-logo img{width:100%;height:100%;object-fit:contain}
.perfil-titulo em{font-style:normal}
.num-bloco{margin-bottom:12px}


/* ════════════ AGENDA ════════════ */
.agenda-linha{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.switch{position:relative;width:52px;height:28px;display:inline-block;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--celula-alta);border:1px solid var(--linha);border-radius:99px;cursor:pointer;transition:.2s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--tx3);transition:.2s}
.switch input:checked+i{background:rgba(0,231,80,.22);border-color:var(--neon)}
.switch input:checked+i::after{left:27px;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--celula-alta);border:1px solid var(--linha-forte);
  border-radius:99px;padding:8px 15px;font-weight:800;font-size:17px}
.chip.mini{padding:4px 11px;font-size:14px;font-weight:700}
.chip button{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:15px;font-family:inherit}
.chip button:hover{color:var(--erro)}
.add-hora{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.add-hora input[type=time]{background:var(--celula);border:1.5px solid var(--linha);border-radius:11px;
  padding:10px 13px;color:var(--tx);font:inherit;font-size:17px;color-scheme:dark}
.add-hora input[type=time]:focus{outline:none;border-color:var(--neon)}


/* aviso de horário fora da janela recomendada */
.aviso-hora{margin-top:14px;background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.4);
  border-radius:14px;padding:16px 18px;animation:sobe .3s ease both}
.aviso-hora p{color:#ffd489;font-size:16px}
.aviso-hora b{color:#ffe3b0}
.aviso-botoes{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}


/* ════════════ PUBLICAÇÕES FIXAS ════════════ */
.fx-tipo{display:flex;gap:10px;margin-bottom:16px}
.fx-tipo button{background:var(--celula);border:1px solid var(--linha);color:var(--tx2);
  border-radius:11px;padding:10px 18px;cursor:pointer;font:inherit;font-weight:700;transition:.15s}
.fx-tipo button.sel{background:rgba(0,231,80,.14);border-color:var(--neon);color:var(--tx)}
.fx-form textarea{width:100%;background:var(--celula);border:1.5px solid var(--linha);border-radius:13px;
  padding:13px 16px;color:var(--tx);font:inherit;resize:vertical}
.fx-form textarea:focus{outline:none;border-color:var(--neon)}
.fx-cores{max-width:264px}
.fx-cores .cor{width:34px;height:34px;border-radius:10px}
.dias-toggle{display:flex;gap:8px;flex-wrap:wrap}
.dias-toggle button{width:52px;padding:10px 0;background:var(--celula);border:1px solid var(--linha);
  color:var(--tx2);border-radius:11px;cursor:pointer;font:inherit;font-weight:700;transition:.15s}
.dias-toggle button.sel{background:rgba(0,231,80,.16);border-color:var(--neon);color:var(--tx);
  box-shadow:0 0 10px rgba(0,231,80,.2)}
.fx-item{display:flex;align-items:center;gap:14px;background:var(--celula);border:1px solid var(--linha);
  border-radius:14px;padding:12px 14px;margin-bottom:10px}
.fx-item.off{opacity:.55}
.fx-thumb{width:52px;height:52px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.fx-thumb.texto{display:grid;place-items:center;font-size:22px}
.fx-info{flex:1;display:grid;gap:2px;min-width:0}
.fx-info b{font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-info small{color:var(--tx2)}
.switch.mini{width:44px;height:24px}
.switch.mini i::after{width:16px;height:16px}
.switch.mini input:checked+i::after{left:23px}
.fx-del{background:none;border:1px solid var(--linha);color:var(--tx3);border-radius:9px;
  width:34px;height:34px;cursor:pointer;font:inherit;transition:.15s}
.fx-del:hover{color:#ffb3c1;border-color:rgba(255,85,115,.4)}


/* gaveta da cor da arte: fechada mostra só a selecionada */
.cor-gaveta{display:flex;align-items:center;gap:12px;width:100%;max-width:264px;
  background:var(--celula);border:1.5px solid var(--linha);border-radius:13px;
  padding:11px 15px;cursor:pointer;font:inherit;font-weight:700;color:var(--tx);
  text-transform:capitalize;transition:border-color .15s}
.cor-gaveta:hover{border-color:var(--linha-forte)}
.cor-atual{width:26px;height:26px;border-radius:9px;flex:0 0 auto;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.28),inset 0 -2px 5px rgba(0,0,0,.35)}
.cg-seta{margin-left:auto;color:var(--tx3);transition:transform .22s}
.cor-gaveta.aberta{border-color:var(--neon)}
.cor-gaveta.aberta .cg-seta{transform:rotate(180deg)}
.cores.recolhivel{overflow:hidden;max-height:0;opacity:0;margin-top:0;
  transition:max-height .28s ease,opacity .2s,margin-top .2s}
.cores.recolhivel.aberta{max-height:320px;opacity:1;margin-top:12px;padding-bottom:6px}
/* na gaveta os chips são um pouco menores — 3 fileiras sem corte */
.cores.recolhivel .cor{width:40px;height:40px;border-radius:12px}
.cores.recolhivel{gap:10px;max-width:246px;padding:5px}
.cores.recolhivel .cor.sel::after{font-size:19px}
/* DENTRO da gaveta o chip NÃO cresce nem levita (o selecionado escalava e o
   overflow:hidden cortava ele — apontado pelo dono). Fica só ✓ + anel de glow,
   e o padding do container dá espaço pro anel respirar. */
.cores.recolhivel .cor:hover{transform:none}
.cores.recolhivel .cor.sel{transform:none}


/* ═══════ ícones do pack próprio ═══════ */
.mi-ico img{width:26px;height:26px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.menu-item.ativo .mi-ico img{filter:drop-shadow(0 0 8px var(--neon))}
.ico-img{width:30px;height:30px;object-fit:contain;vertical-align:-7px;margin-right:2px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.breve-ico img{width:72px;height:72px;object-fit:contain}
.atalho img{width:34px;height:34px;object-fit:contain}

/* ═══════ trilha de preço (apresentação premium) ═══════ */
.plano-trilha{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:4px 0 22px}
.pt-item{display:flex;align-items:center;gap:12px;flex:1;min-width:170px;
  background:linear-gradient(180deg,var(--celula-alta),var(--celula));
  border:1px solid var(--linha);border-radius:16px;padding:12px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.25)}
.pt-selo{font-family:"Anton","Outfit",sans-serif;font-size:19px;letter-spacing:.5px;
  border-radius:11px;padding:8px 11px;flex:0 0 auto;color:#04150a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 14px rgba(0,0,0,.35)}
.pt-selo.cheio{background:linear-gradient(180deg,#f4fff8,#c9d6cd);color:#0a1f12}
.pt-selo.off{background:linear-gradient(180deg,var(--neon-claro),var(--neon-escuro));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 16px rgba(0,231,80,.4)}
.pt-selo.off2{background:linear-gradient(180deg,#7ff2f2,#00a3a3)}
.pt-selo.inline{font-size:13px;padding:3px 8px;border-radius:7px;vertical-align:1px}
.pt-txt{display:grid;gap:1px;line-height:1.2}
.pt-txt b{font-size:16.5px}
.pt-txt small{color:var(--tx2);font-size:13.5px}
.pt-liga{align-self:center;color:var(--tx3);font-size:22px;font-weight:800}
@media(max-width:700px){.pt-liga{display:none}}


/* ════════════ ASSINATURA — cupom ════════════ */
.cupom-card{max-width:720px}
.cupom{border:1px solid var(--linha);border-radius:16px;overflow:hidden;margin-bottom:18px}
.cupom-linha{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--linha);background:var(--celula)}
.cupom-linha:nth-child(even){background:rgba(255,255,255,.02)}
.cupom-linha:last-child{border-bottom:none}
.cupom-linha.venc{opacity:.55}
.cl-tipo{font-family:"Anton","Outfit",sans-serif;font-size:14px;letter-spacing:.6px;
  border-radius:8px;padding:5px 10px;color:#04150a}
.cl-tipo.classico{background:linear-gradient(180deg,#f4fff8,#c9d6cd)}
.cl-tipo.multi{background:linear-gradient(180deg,#7ff2f2,#00a3a3)}
.cl-tipo.group{background:linear-gradient(180deg,var(--neon-claro),var(--neon-escuro))}
.cl-tipo.fixas{background:linear-gradient(180deg,#ffd98a,#d99a1f)}
.cl-id{color:var(--tx);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-vence{color:var(--tx3);font-size:14px;white-space:nowrap}
.cl-valor{font-weight:800;font-size:17px;white-space:nowrap}
@media(max-width:620px){.cupom-linha{grid-template-columns:auto 1fr auto}.cl-vence{display:none}}
.cupom-total{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.periodos{display:flex;gap:8px}
.periodos button{background:var(--celula);border:1px solid var(--linha);color:var(--tx2);
  border-radius:11px;padding:9px 16px;cursor:pointer;font:inherit;font-weight:700;transition:.15s}
.periodos button.sel{background:rgba(0,231,80,.15);border-color:var(--neon);color:var(--tx)}
.total-linha{display:flex;align-items:baseline;gap:14px}
.total-linha span{color:var(--tx2);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:14px}
.total-linha b{font-family:"Anton","Outfit",sans-serif;font-size:30px;letter-spacing:.5px;
  background:linear-gradient(180deg,#fff,var(--neon-claro));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}

.venc-info{color:var(--tx3);font-size:13.5px;margin-top:7px}