@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
/* =====================================================================
   skin.css — InstaBooster (Núcleo da Meta). Injetado pelo sidecar nginx.
   Painel logado: aurora + partículas + vidro.
   Login: layout real (HTML/CSS) reproduzindo o mockup, responsivo.
   100% removível (tira o sidecar).
   ===================================================================== */
:root{
  --nm-grad:linear-gradient(100deg,#a78bfa 0%,#e549b0 45%,#f59e0b 100%);
  --nm-cta:linear-gradient(90deg,#ff1f8e 0%,#ff4d6d 45%,#ffb020 100%);
}

/* ============================ PAINEL LOGADO ============================ */
html.dark body:not(.nm-login)::before{
  content:""; position:fixed; inset:-10vh -10vw; z-index:0; pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 12% 8%, rgba(139,92,246,.26), transparent 60%),
    radial-gradient(40vw 40vw at 88% 0%, rgba(229,73,176,.22), transparent 60%),
    radial-gradient(48vw 44vw at 78% 92%, rgba(245,158,11,.14), transparent 62%),
    radial-gradient(44vw 44vw at 6% 96%, rgba(34,211,238,.14), transparent 60%); }
html.dark body:not(.nm-login)::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:26px 26px; mask-image:radial-gradient(70% 70% at 50% 40%, #000 55%, transparent 100%); }
html.dark body:not(.nm-login) > *:not(.nm-fx){ position:relative; z-index:1; }
.nm-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; }
body.nm-login .nm-fx{ display:none!important; }
html.dark body:not(.nm-login) :is(.bg-black,.bg-zinc-950,.bg-neutral-950,.bg-gray-950){ background-color:rgba(10,9,16,.72)!important; }
html.dark body:not(.nm-login) :is(.bg-zinc-900,.bg-neutral-900,.bg-gray-900,.bg-zinc-800){
  background-color:rgba(24,22,34,.60)!important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.07)!important; }
html.dark body:not(.nm-login) button:is(.bg-indigo-600,.bg-violet-600,.bg-indigo-500,.bg-violet-500,.bg-purple-600,.bg-blue-600),
html.dark body:not(.nm-login) a:is(.bg-indigo-600,.bg-violet-600){
  background-image:var(--nm-grad)!important; background-color:transparent!important; border:none!important;
  box-shadow:0 8px 26px -8px rgba(229,73,176,.55)!important; }
html.dark body:not(.nm-login) :is(h1.text-2xl,h1.text-3xl,.text-3xl.font-bold,.text-4xl.font-bold){
  background:var(--nm-grad); -webkit-background-clip:text; background-clip:text; color:transparent!important; }
html.dark body ::-webkit-scrollbar{ width:10px; height:10px; }
html.dark body ::-webkit-scrollbar-thumb{ background:linear-gradient(#6d4bd1,#b5368c); border-radius:20px; border:2px solid transparent; background-clip:content-box; }

/* ================================ LOGIN ================================ */
body.nm-login{
  font-family:"Poppins",system-ui,sans-serif!important; color:#fff;
  background:
    radial-gradient(60vw 60vh at 100% 0%, rgba(120,8,110,.55), transparent 60%),
    radial-gradient(45vw 50vh at 52% 0%, rgba(80,45,190,.40), transparent 65%),
    radial-gradient(50vw 50vh at 100% 100%, rgba(70,6,70,.45), transparent 60%),
    radial-gradient(40vw 40vh at 0% 30%, rgba(30,20,90,.35), transparent 65%),
    #04030c!important;
  min-height:100vh;
  display:grid!important; grid-template-columns:minmax(0,1fr) minmax(380px,520px);
  column-gap:3vw; align-items:center; padding:0 5vw 0 6vw!important; overflow-x:hidden; }

/* ---- coluna esquerda: textos + arte ---- */
.nm-stage{ grid-column:1; grid-row:1; position:relative; min-height:100vh; display:flex; align-items:center; pointer-events:none; }
.nm-artimg{ position:absolute; top:0; right:-3vw; height:100vh; width:auto; z-index:0; }
.nm-text{ position:relative; z-index:2; max-width:640px; display:flex; flex-direction:column; gap:22px; padding:4vh 0; }
.nm-logo{ width:min(360px,70%); height:auto; }
.nm-pill{ display:inline-flex; align-items:center; gap:10px; width:max-content; padding:9px 20px; border-radius:999px;
  border:1px solid rgba(255,90,140,.55); background:rgba(40,8,30,.35); color:#f5c6e8; font-size:14px; font-weight:500; letter-spacing:.8px;
  box-shadow:0 0 22px -6px rgba(255,60,140,.55); }
.nm-pill svg{ width:18px; height:18px; }
.nm-h1{ margin:0; font-weight:800; font-size:clamp(38px,3.9vw,72px); line-height:1.04; letter-spacing:-1.5px; color:#fff; }
.nm-h1 .w{ background:linear-gradient(180deg,#ffffff 0%,#d9d6e6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nm-h1 .g{ background:linear-gradient(90deg,#ffb020 0%,#ff6a3d 40%,#ff2d8f 75%,#ff2d8f 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nm-sub{ margin:0; color:#d6d2e4; font-size:clamp(15px,1.15vw,20px); line-height:1.5; max-width:34ch; font-weight:400; }
.nm-chips{ display:flex; align-items:flex-start; margin-top:8px; }
.nm-chip{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; width:122px; color:#fff; font-size:15px; line-height:1.3; font-weight:500; }
.nm-chip + .nm-chip{ border-left:1px solid rgba(255,255,255,.12); }
.nm-chip .ic{ width:68px; height:68px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(rgba(25,8,32,.92),rgba(25,8,32,.92)) padding-box, linear-gradient(140deg,#ff2d8f,#a855f7) border-box;
  border:1.5px solid transparent; box-shadow:0 0 26px -8px rgba(255,45,143,.6); }
.nm-chip .ic svg{ width:34px; height:34px; }

/* ---- coluna direita: o card do app ---- */
body.nm-login main{ grid-column:2; grid-row:1; margin:0!important; max-width:none!important; width:100%!important; padding:4vh 0!important; position:relative; z-index:3; }
body.nm-login main > div{ margin:0!important; max-width:none!important; width:100%!important; }
body.nm-login .nm-card{
  padding:44px 40px 26px!important; border-radius:26px!important; border:1.5px solid transparent!important;
  background:linear-gradient(rgba(13,9,24,.94),rgba(13,9,24,.94)) padding-box,
             linear-gradient(150deg,rgba(168,85,247,.85) 0%,rgba(236,72,153,.55) 45%,rgba(249,115,22,.75) 100%) border-box!important;
  box-shadow:0 0 60px -12px rgba(236,72,153,.45), 0 40px 100px -40px rgba(0,0,0,.9)!important; }
body.nm-login .nm-card > :not(form):not([class^="nm-"]){ display:none!important; }   /* esconde o cabeçalho original (o "N") */

.nm-ch{ text-align:center; }
.nm-lock{ width:68px; height:68px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(168,85,247,.35); box-shadow:0 0 34px -8px rgba(168,85,247,.6); }
.nm-lock svg{ width:28px; height:28px; }
.nm-title{ margin:0; font-size:clamp(26px,2.1vw,36px); font-weight:700; letter-spacing:-.5px; color:#fff; }
.nm-desc{ margin:8px 0 28px; color:#bdb8cf; font-size:15px; }
.nm-label{ display:block; text-align:left; font-size:15px; font-weight:600; color:#fff; margin-bottom:10px; }

body.nm-login .nm-card form{ position:relative; display:flex; flex-direction:column; gap:22px; }
body.nm-login .nm-card form input[data-nmpass]{
  height:58px!important; width:100%!important; border-radius:12px!important; font-size:15px!important; color:#fff!important;
  background:rgba(8,6,18,.85) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") no-repeat 20px center / 20px!important;
  border:1px solid rgba(168,140,255,.38)!important; padding:0 52px 0 58px!important; box-shadow:none!important; outline:none!important; }
body.nm-login .nm-card form input[data-nmpass]::placeholder{ color:#8f89a6!important; }
body.nm-login .nm-card form input[data-nmpass]:focus{ border-color:rgba(255,45,143,.7)!important; box-shadow:0 0 0 3px rgba(255,45,143,.16)!important; }
body.nm-login .nm-card form button[type="submit"], body.nm-login .nm-card form button:not(.nm-eye){
  height:58px!important; width:100%!important; border-radius:12px!important; border:none!important;
  background:var(--nm-cta)!important; color:#fff!important; font-size:18px!important; font-weight:600!important;
  display:flex!important; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 12px 34px -10px rgba(255,45,143,.65)!important; cursor:pointer; }
body.nm-login .nm-card form button:not(.nm-eye)::after{ content:"→"; font-size:22px; line-height:1; }
.nm-eye{ position:absolute; right:16px; width:30px; height:30px; background:none!important; border:none!important; box-shadow:none!important;
  color:#cfc8e6; cursor:pointer; display:grid; place-items:center; padding:0; z-index:2; }
.nm-eye svg{ width:22px; height:22px; }

.nm-cf{ margin-top:28px; }
.nm-links{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; border-top:1px solid rgba(255,255,255,.08); gap:10px; flex-wrap:wrap; }
.nm-links a{ display:inline-flex; align-items:center; gap:9px; color:#a5b4fc; font-size:13.5px; text-decoration:none; white-space:nowrap; }
.nm-links a svg{ width:20px; height:20px; }
.nm-links .sep{ width:1px; height:22px; background:rgba(255,255,255,.12); }
.nm-trust{ display:grid; grid-template-columns:repeat(3,1fr); border-radius:16px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); padding:18px 6px; }
.nm-trust .t{ text-align:center; padding:0 6px; }
.nm-trust .t + .t{ border-left:1px solid rgba(255,255,255,.08); }
.nm-trust .t svg{ width:30px; height:30px; margin-bottom:8px; }
.nm-trust b{ display:block; font-size:14px; font-weight:600; color:#fff; }
.nm-trust span{ display:block; font-size:12px; color:#a7a2ba; margin-top:3px; }

.nm-footer{ text-align:center; margin-top:28px; position:relative; }
.nm-footer::before{ content:""; display:block; height:1px; margin:0 8% 16px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); }
.nm-footer b{ font-size:19px; font-weight:700; color:#fff; }
.nm-footer b i{ font-style:normal; background:linear-gradient(90deg,#ff2d8f,#ff8a3d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nm-footer p{ margin:4px 0 0; color:#a7a2ba; font-size:13px; }
.nm-footer p em{ font-style:normal; color:#a78bfa; }

/* ---- telas médias: texto um pouco menor ---- */
@media (max-width:1350px){
  .nm-chip{ width:104px; font-size:13.5px; }
  .nm-chip .ic{ width:58px; height:58px; }
  body.nm-login .nm-card{ padding:36px 30px 22px!important; }
}
/* ---- tablet e celular: empilha (arte+texto em cima, card embaixo) ---- */
@media (max-width:1100px){
  body.nm-login{ display:flex!important; flex-direction:column; align-items:center; padding:28px 18px 36px!important; }
  .nm-stage{ order:-1; min-height:0; width:100%; max-width:640px; justify-content:center; }
  .nm-artimg{ left:50%; right:auto; transform:translateX(-50%); height:100%; max-height:620px; opacity:.45;
    -webkit-mask-image:linear-gradient(#000 40%,transparent); mask-image:linear-gradient(#000 40%,transparent); }
  .nm-text{ align-items:center; text-align:center; padding:8px 0 26px; }
  .nm-sub{ max-width:42ch; }
  .nm-chips{ flex-wrap:wrap; justify-content:center; row-gap:16px; }
  body.nm-login main{ width:100%!important; max-width:480px; padding:0!important; }
}
@media (max-width:520px){
  .nm-h1{ font-size:34px; letter-spacing:-.8px; }
  .nm-chip{ width:50%; } .nm-chip + .nm-chip{ border-left:none; }
  body.nm-login .nm-card{ padding:30px 20px 18px!important; }
  .nm-links{ justify-content:center; } .nm-links .sep{ display:none; }
  .nm-trust{ grid-template-columns:1fr; row-gap:14px; } .nm-trust .t + .t{ border-left:none; }
}
@media (prefers-reduced-motion: reduce){ .nm-fx{ display:none!important; } }

/* esconde o card antigo até o skin montar (com fallback de 2,5s: login nunca trava) */
html.nm-lp body:not(.nm-login) main{ opacity:0; animation:nmShow 0s 2.5s forwards; }
@keyframes nmShow{ to{ opacity:1; } }

/* ---- acabamento v11 ---- */
.nm-trust .t svg{ display:block; margin:0 auto 8px; }
.nm-links{ flex-wrap:nowrap; gap:6px; }
.nm-links a{ font-size:12.5px; gap:7px; }
.nm-links a svg{ width:18px; height:18px; flex:none; }
.nm-links .sep{ flex:none; }
@media (max-width:1500px){ .nm-artimg{ right:-6vw; } .nm-h1{ font-size:clamp(36px,3.5vw,64px); } }
/* telas baixas (notebook): tudo mais compacto pra caber sem rolar */
@media (min-width:1101px) and (max-height:900px){
  .nm-text{ gap:16px; } .nm-logo{ width:min(300px,62%); } .nm-sub{ font-size:16px; }
  .nm-h1{ font-size:clamp(34px,3.3vw,58px); } .nm-chip .ic{ width:56px; height:56px; } .nm-chip .ic svg{ width:28px; height:28px; }
  body.nm-login .nm-card{ padding:28px 32px 20px!important; }
  .nm-lock{ width:56px; height:56px; margin-bottom:14px; } .nm-lock svg{ width:24px; height:24px; }
  .nm-title{ font-size:28px; } .nm-desc{ margin:6px 0 18px; font-size:14px; }
  body.nm-login .nm-card form{ gap:14px; }
  body.nm-login .nm-card form input[data-nmpass], body.nm-login .nm-card form button:not(.nm-eye){ height:52px!important; }
  .nm-cf{ margin-top:18px; } .nm-links{ padding:14px 0; } .nm-trust{ padding:12px 4px; } .nm-trust .t svg{ width:24px; height:24px; margin-bottom:5px; }
  .nm-footer{ margin-top:16px; } .nm-footer b{ font-size:17px; }
  body.nm-login main{ padding:2vh 0!important; }
}
@media (max-width:1100px){ body.nm-login main{ max-width:560px!important; } }
@media (max-width:520px){
  .nm-links{ flex-wrap:wrap; justify-content:center; gap:10px 16px; }
  body.nm-login .nm-card form input[data-nmpass]{ font-size:14px!important; padding-right:46px!important; }
}

/* =====================================================================
   PAINEL LOGADO v12 — mesma pegada do login (menu, celular, botões, cards)
   ===================================================================== */
html.dark body:not(.nm-login){ font-family:"Poppins",system-ui,sans-serif!important; }
/* ---- menu lateral (desktop) e gaveta (celular) ---- */
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0.z-40 > .absolute.left-0){
  background:linear-gradient(180deg,rgba(38,12,58,.94) 0%,rgba(14,9,26,.96) 38%,rgba(8,6,16,.97) 100%)!important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-right:none!important; box-shadow:inset -1px 0 0 rgba(168,85,247,.28), 14px 0 50px -24px rgba(236,72,153,.35)!important;
  overflow-y:auto!important; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#6d3bb0 transparent; }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0.z-40 > .absolute.left-0)::before{
  content:""; position:absolute; left:-30%; top:-60px; width:160%; height:220px; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,45,143,.28),transparent); }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0.z-40 > .absolute.left-0)::before{ z-index:0; }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0.z-40 > .absolute.left-0) > :not(.absolute):not(.fixed){ position:relative; z-index:1; }
/* títulos de seção (GERENCIAR / SISTEMA) */
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav p.uppercase{
  background:linear-gradient(90deg,#ff4fa3,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent!important; letter-spacing:.16em!important; }
/* itens */
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav a.group{
  border-radius:12px!important; color:#bdb6d2!important; font-size:13.5px!important; padding-top:9px!important; padding-bottom:9px!important;
  transition:background .25s, color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s!important; }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav a.group svg{ color:#9089ab; transition:transform .35s cubic-bezier(.2,.8,.2,1), color .2s, filter .2s; }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav a.group:hover{ background:rgba(255,255,255,.06)!important; color:#fff!important; transform:translateX(5px); }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav a.group:hover svg{ color:#ff4fa3; transform:scale(1.15) rotate(-8deg); filter:drop-shadow(0 0 6px rgba(255,79,163,.7)); }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav a.group[aria-current="page"]{
  color:#fff!important; background:linear-gradient(90deg,rgba(255,31,142,.26),rgba(168,85,247,.16) 60%,rgba(168,85,247,.04))!important;
  box-shadow:inset 0 0 0 1px rgba(255,79,163,.28), 0 10px 28px -14px rgba(255,31,142,.7)!important; }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav a.group[aria-current="page"] svg{ color:#ff4fa3!important; filter:drop-shadow(0 0 7px rgba(255,79,163,.8)); }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) nav a.group[aria-current="page"] > .absolute{
  background:linear-gradient(180deg,#ff1f8e,#ffb020)!important; box-shadow:0 0 12px rgba(255,31,142,.9); width:3px!important; border-radius:3px; animation:nmPulse 2.4s ease-in-out infinite; }
@keyframes nmPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
/* rodapé do menu (Conectar Instagram / Tema) */
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) :is(button,a):not(.group){ transition:color .2s, transform .2s; }
html.dark body:not(.nm-login) :is(aside, .fixed.inset-0) :is(button,a):not(.group):hover{ color:#fff!important; }

/* ---- celular: cabeçalho em vidro, gaveta deslizando, fundo desfocado ---- */
html.dark body:not(.nm-login) header.sticky{
  background:rgba(10,7,20,.72)!important; backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:none!important; box-shadow:0 1px 0 rgba(168,85,247,.28), 0 10px 30px -18px rgba(236,72,153,.5)!important; }
html.dark body:not(.nm-login) header.sticky button{ color:#fff!important; border-radius:12px!important; background:rgba(255,255,255,.06)!important; }
html.dark body:not(.nm-login) .fixed.inset-0.z-40 > .absolute.inset-0{
  background:rgba(4,2,10,.55)!important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:nmFade .25s ease both; }
html.dark body:not(.nm-login) .fixed.inset-0.z-40 > .absolute.left-0{ animation:nmSlide .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nmSlide{ from{ transform:translateX(-100%) } to{ transform:none } }
@keyframes nmFade{ from{ opacity:0 } to{ opacity:1 } }

/* ---- botões principais: degradê do login ---- */
html.dark body:not(.nm-login) :is(a,button):is([class~="bg-indigo-500"],[class~="bg-indigo-600"],[class~="bg-violet-500"],[class~="bg-violet-600"],[class~="bg-purple-600"]){
  background:var(--nm-cta)!important; color:#fff!important; border:none!important;
  box-shadow:0 10px 28px -10px rgba(255,31,142,.65)!important; transition:transform .2s, filter .2s, box-shadow .25s!important; }
html.dark body:not(.nm-login) :is(a,button):is([class~="bg-indigo-500"],[class~="bg-indigo-600"],[class~="bg-violet-500"],[class~="bg-violet-600"],[class~="bg-purple-600"]):hover{
  transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 16px 34px -10px rgba(255,31,142,.75)!important; }

/* ---- títulos das páginas no degradê do mockup ---- */
html.dark body:not(.nm-login) main h1{
  background:linear-gradient(90deg,#ffb020 0%,#ff6a3d 35%,#ff2d8f 75%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; }

/* ---- cards com borda degradê (sem mexer nos avisos coloridos) ---- */
html.dark body:not(.nm-login) main .rounded-2xl.border:not([class*="red-"]):not([class*="rose-"]):not([class*="amber-"]):not([class*="emerald-"]):not([class*="green-"]):not([class*="yellow-"]){
  background:linear-gradient(rgba(16,11,30,.74),rgba(16,11,30,.74)) padding-box,
             linear-gradient(150deg,rgba(168,85,247,.42),rgba(236,72,153,.16) 50%,rgba(249,115,22,.32)) border-box!important;
  border-color:transparent!important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9)!important; }
/* ---- campos no estilo do login ---- */
html.dark body:not(.nm-login) main :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea){
  background-color:rgba(8,6,18,.75)!important; border-color:rgba(168,140,255,.26)!important; border-radius:12px!important; color:#fff!important; }
html.dark body:not(.nm-login) main :is(input,select,textarea):focus{ border-color:rgba(255,45,143,.7)!important; box-shadow:0 0 0 3px rgba(255,45,143,.16)!important; outline:none!important; }
html.dark body:not(.nm-login) main input:is([type=checkbox],[type=radio]){ accent-color:#ff2d8f; }
/* links de texto no conteúdo */
html.dark body:not(.nm-login) main a:not([class*="bg-"]):not(.group){ color:#ff7ac0; }
/* fundo um pouco mais vivo no celular */
@media (max-width:1023px){ html.dark body:not(.nm-login)::before{ opacity:1.35; filter:saturate(1.2); } }
@media (prefers-reduced-motion: reduce){ html.dark body:not(.nm-login) *{ animation:none!important; transition:none!important; } }