/* ============================================================
   SocialMonster — componentes das telas internas, SOBRE o panel.min.css REAL do panel_v2.
   Carrega DEPOIS do panel.min.css (mesma especificidade -> vence). Tokens em variáveis que
   viram no .dark, então as 23 telas internas herdam dark mode sem editar cada uma.
   ============================================================ */
:root{
  --roxo:#9320D0; --laranja:#FF6324; --grad:linear-gradient(103deg,#9320D0,#FF6324);
  --ink:#0f172a; --txt:#334155; --mut:#64748b; --line:#e8edf3; --card:#ffffff; --bg:#f1f5f9;
  --soft:#f4f1fb; --soft-line:#ece7f7; --soft-ink:#475569;
}
.dark{
  --ink:#f1f5f9; --txt:#cbd5e1; --mut:#94a3b8; --line:#1e293b; --card:#0f172a; --bg:#020617;
  --soft:#1e293b; --soft-line:#334155; --soft-ink:#cbd5e1;
}

/* Safety-net: opacidades de marca + shadow-brand (caso o purge do panel.min.css não as tenha) */
.bg-roxo\/5{background-color:rgba(147,32,208,.05)}
.bg-roxo\/6{background-color:rgba(147,32,208,.06)}
.bg-roxo\/8{background-color:rgba(147,32,208,.08)}
.bg-roxo\/10{background-color:rgba(147,32,208,.10)}
.bg-laranja\/10{background-color:rgba(255,99,36,.10)}
.shadow-brand{box-shadow:0 16px 32px -16px rgba(147,32,208,.45)}
.bg-roxo{background-color:#9320D0}

/* ===== Auth split-screen (classes do auth_v2 real, ausentes do panel.min.css) ===== */
.p-12{padding:3rem}
.-top-20{top:-5rem}.-left-20{left:-5rem}.-bottom-24{bottom:-6rem}.-right-16{right:-4rem}
.h-80{height:20rem}.w-72{width:18rem}.h-72{height:18rem}
.opacity-40{opacity:.4}
.bg-white\/30{background-color:hsla(0,0%,100%,.3)}
.bg-green-100{background-color:#dcfce7}
.-space-x-2>:not([hidden])~:not([hidden]){margin-left:-.5rem}
.max-w-sm{max-width:24rem}
.overflow-visible{overflow:visible}
.object-cover{-o-object-fit:cover;object-fit:cover}
@media (min-width:640px){.sm\:p-12{padding:3rem}}
@media (min-width:1024px){.lg\:flex{display:flex}}
.blob{position:absolute;border-radius:9999px;filter:blur(70px);opacity:.5;z-index:0}
@keyframes smfloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float{animation:smfloat 5s ease-in-out infinite}
.float-slow{animation:smfloat 7s ease-in-out infinite}
.inp{width:100%;border:1.5px solid #e2e8f0;border-radius:.85rem;padding:.8rem 1rem;transition:.15s;outline:none;background:#fff;color:#0f172a;font-size:14px}
.inp:focus{border-color:#9320d0;box-shadow:0 0 0 4px rgba(147,32,208,.15)}
.hearts{position:absolute;bottom:24px;right:42px;z-index:30;width:60px;height:120px}
.hearts span{position:absolute;bottom:0;font-size:20px;color:#ff6324;opacity:0;animation:smrise 3.4s ease-in infinite}
.hearts span:nth-child(2){left:22px;animation-delay:.9s;color:#9320d0}
.hearts span:nth-child(3){left:-16px;animation-delay:1.7s}
.hearts span:nth-child(4){left:30px;animation-delay:2.4s;color:#9320d0}
.hearts span:nth-child(5){left:8px;animation-delay:1.2s}
@keyframes smrise{0%{transform:translateY(0) scale(.6);opacity:0}18%{opacity:1}to{transform:translateY(-130px) scale(1.15);opacity:0}}
#sm-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:smdraw 2.2s ease-out forwards}
@keyframes smdraw{to{stroke-dashoffset:0}}
#sm-area{animation:smfadein 1s ease-out 1.6s forwards}
@keyframes smfadein{to{opacity:1}}
.dot-pulse{animation:smpulse 1.6s ease-in-out infinite}
@keyframes smpulse{0%,to{r:5;opacity:1}50%{r:9;opacity:.55}}

/* ===== SweetAlert2 — tema SocialMonster (copiado do panel_v2 real) ===== */
.swal2-container.swal2-backdrop-show{background:rgba(15,23,42,.5)!important;backdrop-filter:blur(3px)!important}
.swal2-popup{font-family:'Poppins',ui-sans-serif,sans-serif!important;border-radius:26px!important;padding:2rem 1.75rem 1.75rem!important;box-shadow:0 28px 65px -15px rgba(147,32,208,.4)!important}
.swal2-title{font-weight:800!important;color:#0f172a!important;font-size:1.4rem!important;padding-top:.4rem!important}
.swal2-html-container{color:#475569!important;font-size:.98rem!important;line-height:1.6!important;margin-top:.45rem!important}
.swal2-actions{margin-top:1.5rem!important;gap:.6rem!important}
.swal2-styled.swal2-confirm{background:linear-gradient(103deg,#9320d0,#ff6324)!important;color:#fff!important;border:0!important;border-radius:14px!important;font-weight:700!important;font-size:.95rem!important;padding:.74rem 1.8rem!important;box-shadow:0 14px 28px -10px rgba(147,32,208,.55)!important;transition:filter .15s,transform .15s!important}
.swal2-styled.swal2-confirm:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important}
.swal2-styled.swal2-confirm:focus{box-shadow:0 0 0 3px rgba(147,32,208,.35)!important}
.swal2-styled.swal2-cancel{background:#f1f5f9!important;color:#475569!important;border:0!important;border-radius:14px!important;font-weight:700!important;padding:.74rem 1.8rem!important}
.swal2-icon{border-width:.2rem!important;margin-top:.6rem!important}
.swal2-icon.swal2-info,.swal2-icon.swal2-question{border-color:#9320d0!important;color:#9320d0!important}
.swal2-icon.swal2-warning{border-color:#ff6324!important;color:#ff6324!important}
.swal2-icon.swal2-success{border-color:rgba(22,163,74,.35)!important}
.swal2-icon.swal2-success [class^='swal2-success-line']{background-color:#16a34a!important}
.swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(22,163,74,.3)!important}
.swal2-icon.swal2-error{border-color:rgba(244,63,94,.45)!important}
.swal2-icon.swal2-error [class^='swal2-x-mark-line']{background-color:#f43f5e!important}
.swal2-timer-progress-bar{background:linear-gradient(103deg,#9320d0,#ff6324)!important}
.dark .swal2-popup{background:#0f172a!important;box-shadow:0 28px 65px -15px rgba(0,0,0,.7)!important}
.dark .swal2-title{color:#f1f5f9!important}
.dark .swal2-html-container{color:#cbd5e1!important}
.dark .swal2-styled.swal2-cancel{background:#1e293b!important;color:#cbd5e1!important}

/* ===== Cartões / tiles ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;margin-bottom:20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card h2{margin:0 0 14px;font-size:16px;color:var(--ink);font-weight:700}
/* só vira auto-fit quando NÃO há grid-cols-* explícito (não atropela o Tailwind) */
.grid:not([class*="grid-cols"]){display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.stat .n{font-size:26px;font-weight:800;color:var(--ink);line-height:1.1}
.stat .l{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-top:5px}

/* ===== Form ===== */
label{display:block;font-size:13px;color:var(--txt);font-weight:600;margin:12px 0 6px}
input,select,textarea{width:100%;padding:10px 13px;background:var(--card);border:1px solid var(--line);border-radius:11px;color:var(--ink);font-size:14px;font-family:inherit;outline:none;box-shadow:none}
input:focus,select:focus,textarea:focus{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(147,32,208,.15)}
input[disabled]{background:var(--bg);color:var(--mut)}
input[type=checkbox]{width:auto}

/* ===== Botões (sistema opt-in; `body button` 0,0,2 vence o preflight 0,0,1; inline ainda sobrescreve) ===== */
body button, body .btn{
  background-color:#9320D0;background-image:linear-gradient(103deg,#9320D0,#FF6324);
  color:#fff;border:0;padding:10px 18px;border-radius:11px;font-weight:600;font-size:14px;
  font-family:inherit;cursor:pointer;display:inline-block;text-align:center;line-height:1.2;
  text-decoration:none;transition:filter .15s,transform .15s;box-shadow:0 12px 24px -14px rgba(147,32,208,.5)
}
body button:hover, body .btn:hover{filter:brightness(1.07);transform:translateY(-1px);text-decoration:none}
.btn-soft{background-color:var(--soft);background-image:none;color:var(--soft-ink);box-shadow:none;
  border:1px solid var(--soft-line);padding:7px 13px;border-radius:10px;font-size:13px}
.btn-soft:hover{background-color:var(--soft-line);filter:none;transform:none}
.btn-link{background:none;background-image:none;box-shadow:none;color:var(--mut);border:0;padding:0;border-radius:0;font-size:12px;font-weight:600}
.btn-link:hover{color:var(--roxo);filter:none;transform:none;text-decoration:underline}
.btn-link.danger{color:#e2554f}.btn-link.danger:hover{color:#f87171}
/* Botões-ícone/ghost do shell (tema, menu, user) — anulam o gradiente padrão de `body button` */
.uibtn{background:none!important;background-image:none!important;box-shadow:none!important;color:inherit;font-weight:inherit;text-align:inherit}
/* Compat: botões secundários inline com #f6f4fc espalhados nas telas */
button[style*="f6f4fc"], a[style*="f6f4fc"]{background-color:var(--soft)!important;color:var(--soft-ink)!important;box-shadow:none;border:1px solid var(--soft-line);border-radius:10px;font-weight:600}
button[style*="f6f4fc"]:hover, a[style*="f6f4fc"]:hover{filter:none;transform:none;border-color:var(--roxo)}

/* ===== Tabelas no estilo REAL do panel_v2 (páginas portadas usam class="tbl-real") ===== */
table.tbl-real th{background:transparent!important;color:#94a3b8!important;border-bottom:1px solid #f1f5f9!important;text-transform:uppercase;font-size:11px;letter-spacing:.03em}
.dark table.tbl-real th{color:#64748b!important;border-color:#1e293b!important}
table.tbl-real td{border-top:0!important;border-bottom:1px solid #f8fafc}
.dark table.tbl-real td{border-color:rgba(30,41,59,.5)}
table.tbl-real tbody tr:hover{background:#f8fafc!important}
.dark table.tbl-real tbody tr:hover{background:rgba(30,41,59,.4)!important}

/* ===== Tabelas ===== */
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--card);border-radius:14px;overflow:hidden}
th,td{text-align:left;padding:12px 14px;vertical-align:middle}
th{background:rgba(147,32,208,.05);color:var(--roxo);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.03em;border-bottom:2px solid rgba(147,32,208,.12)}
td{border-top:1px solid var(--line);color:var(--txt)}
tbody tr:hover{background:rgba(147,32,208,.04)}

/* ===== Tags / badges ===== */
.tag{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;display:inline-block}
.tag.PENDING{background:rgba(245,158,11,.16);color:#b45309}.tag.COMPLETED{background:rgba(22,163,74,.16);color:#15803d}
.tag.PROCESSING,.tag.INPROGRESS{background:rgba(14,165,233,.16);color:#0369a1}
.dark .tag.PENDING{color:#fcd34d}.dark .tag.COMPLETED{color:#86efac}.dark .tag.PROCESSING,.dark .tag.INPROGRESS{color:#7dd3fc}
.badge{display:inline-block;background:rgba(147,32,208,.1);color:var(--roxo);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}

/* ===== Chips ===== */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.chip{flex:1;min-width:90px;text-align:center;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);transition:.12s}
.chip:hover{border-color:var(--laranja)}
.chip.sel{border-color:var(--laranja);background:rgba(255,99,36,.08)}

/* ===== Métodos de pagamento ===== */
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:8px}
.method{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:.12s}
.method:hover{border-color:var(--roxo)}
.method.sel{border-color:var(--laranja);background:rgba(255,99,36,.06)}
.method .ico{font-size:24px}.method .nm{font-weight:700;color:var(--ink)}.method .ds{font-size:11px;color:var(--mut)}

/* ===== Alerts / misc ===== */
.flash{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.25);color:#15803d;padding:12px 16px;border-radius:13px;margin-bottom:16px;font-weight:600}
.dark .flash{color:#86efac}
.flash.warn{background:rgba(255,99,36,.1);border-color:rgba(255,99,36,.25);color:#c2410c}
.dark .flash.warn{color:#fdba74}
.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#b91c1c;padding:11px 15px;border-radius:13px;margin-bottom:12px;font-size:13px}
.dark .err{color:#fca5a5}
/* nav inativo no dark (reforço caso o .dark .ni do panel.min.css não vença) */
.dark .navlink.ni{color:#cbd5e1}
.dark .navlink.ni i{color:#64748b}
.navlink.ni:hover{background:rgba(147,32,208,.08);color:#9320D0}
.dark .navlink.ni:hover{background:rgba(147,32,208,.14);color:#fff}

.muted{color:var(--mut)}
.quote{font-size:22px;font-weight:800;color:var(--laranja)}
.pill{background:rgba(147,32,208,.08);color:var(--roxo);padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px}
/* links de CONTEÚDO (escopado em main — não vaza pra sidebar/topbar; hover do menu é o .ni roxo do panel.min.css) */
main a{color:var(--roxo)}
main a:hover{color:var(--laranja)}
main a.navlink, main a.btn, main a.btn-soft{color:inherit}
/* pílulas/botões com gradiente ou texto branco mantêm o branco mesmo no hover
   (sem isso, o hover laranja deixava o texto ilegível sobre o gradiente). */
main a[class*="grad"], main a[class*="grad"]:hover,
main a[class*="text-white"], main a[class*="text-white"]:hover{color:#fff}