:root {
  --nf-bg: #f4f7f6;
  --nf-surface: #ffffff;
  --nf-surface-soft: #f8fbfa;
  --nf-text: #14231b;
  --nf-muted: #718078;
  --nf-line: rgba(109, 130, 118, .16);
  --nf-line-strong: rgba(109, 130, 118, .25);
  --nf-green: #22b573;
  --nf-green-2: #148f59;
  --nf-emerald: #36d38c;
  --nf-cyan: #58d5c4;
  --nf-sidebar: #08140f;
  --nf-sidebar-2: #0d1d16;
  --nf-sidebar-3: #10271d;
  --nf-shadow-sm: 0 8px 24px rgba(13, 33, 24, .055);
  --nf-shadow-md: 0 18px 46px rgba(13, 33, 24, .08);
  --nf-shadow-lg: 0 30px 76px rgba(7, 22, 15, .14);
  --nf-radius-sm: 11px;
  --nf-radius-md: 16px;
  --nf-radius-lg: 22px;
  --nf-channel: #22b573;
  --nf-channel-soft: rgba(34, 181, 115, .13);
}

body[data-nf-channel="telegram"] {
  --nf-channel: #2aa7e2;
  --nf-channel-soft: rgba(42, 167, 226, .14);
}

body[data-nf-channel="marketing"] {
  --nf-channel: #6e7df6;
  --nf-channel-soft: rgba(110, 125, 246, .13);
}

body[data-nf-channel="control"] {
  --nf-channel: #31c982;
  --nf-channel-soft: rgba(49, 201, 130, .13);
}

html,
body,
button,
input,
textarea,
select {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

body[data-nf-brand-ready="true"] {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-nf-brand-ready="true"]::selection {
  background: rgba(34, 181, 115, .20);
  color: #0b1c13;
}

/* =========================================================
   BRAND / LOGO
   ========================================================= */

.nf-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  user-select: none;
}

.nf-brand-mark {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  filter:
    drop-shadow(0 8px 16px rgba(34, 181, 115, .15));
}

.nf-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -1.15px;
  line-height: 1;
  white-space: nowrap;
}

.nf-brand-wordmark .nf-brand-nex {
  color: #f7fff9;
  font-size: 24px;
  font-weight: 880;
}

.nf-brand-wordmark .nf-brand-flow {
  margin-left: 1px;
  color: #63e8aa;
  font-size: 24px;
  font-weight: 920;
}

.nf-brand-subtitle {
  display: block;
  margin-top: 4px;
  color: rgba(190, 211, 199, .52);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.logo,
.cc-logo,
.mt-logo {
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  display: block !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.logo::before,
.cc-logo::before,
.mt-logo::before {
  display: none !important;
  content: none !important;
}

.logo > span:not(.nf-brand),
.cc-logo > span:not(.nf-brand),
.mt-logo > span:not(.nf-brand) {
  display: none !important;
}

.nf-brand.nf-brand-login .nf-brand-wordmark .nf-brand-nex {
  color: #13251b;
  font-size: 30px;
}

.nf-brand.nf-brand-login .nf-brand-wordmark .nf-brand-flow {
  color: #17945a;
  font-size: 30px;
}

.nf-brand.nf-brand-login .nf-brand-mark {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

/* =========================================================
   SIDEBARS
   ========================================================= */

.sidebar,
.cc-sidebar,
.mt-sidebar {
  isolation: isolate;
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: 100vh;
  background:
    radial-gradient(circle at 16% 0%, rgba(61, 211, 139, .14), transparent 26%),
    radial-gradient(circle at 110% 28%, var(--nf-channel-soft), transparent 26%),
    linear-gradient(180deg, var(--nf-sidebar) 0%, var(--nf-sidebar-2) 54%, #07110c 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .055) !important;
  box-shadow:
    18px 0 48px rgba(6, 20, 13, .09) !important;
}

.sidebar::before,
.cc-sidebar::before,
.mt-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image:
    linear-gradient(to bottom, #000 0%, transparent 76%);
}

.sidebar::after,
.cc-sidebar::after,
.mt-sidebar::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -92px;
  height: 180px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(56, 215, 142, .10),
      transparent 68%
    );
  filter: blur(4px);
}

.nf-sidebar-product {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -8px 2px 16px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #799086;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.nf-sidebar-product::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--nf-channel);
  box-shadow: 0 0 0 4px var(--nf-channel-soft);
}

.menu-item,
.cc-nav,
.mt-nav {
  position: relative;
  gap: 10px !important;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent !important;
  transition:
    transform .16s ease,
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

.menu-item::before,
.cc-nav::before,
.mt-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      var(--nf-channel-soft),
      rgba(255,255,255,.025)
    );
  transition: opacity .16s ease;
}

.menu-item:hover::before,
.cc-nav:hover::before,
.mt-nav:hover::before {
  opacity: 1;
}

.menu-item:hover,
.cc-nav:hover,
.mt-nav:hover {
  transform: translateX(2px) !important;
  border-color: rgba(255,255,255,.055) !important;
}

.menu-item.active,
.cc-nav.active,
.mt-nav.active {
  border-color: rgba(255,255,255,.055) !important;
  background:
    linear-gradient(
      90deg,
      var(--nf-channel-soft),
      rgba(255,255,255,.035)
    ) !important;
  box-shadow:
    inset 3px 0 0 var(--nf-channel),
    0 8px 18px rgba(0,0,0,.08) !important;
}

.nf-nav-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: currentColor;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.045);
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

.nf-nav-icon svg {
  width: 15px;
  height: 15px;
  display: block;
  stroke: currentColor;
}

.menu-item:hover .nf-nav-icon,
.cc-nav:hover .nf-nav-icon,
.mt-nav:hover .nf-nav-icon {
  background: rgba(255,255,255,.07);
  color: #fff;
}

.menu-item.active .nf-nav-icon,
.cc-nav.active .nf-nav-icon,
.mt-nav.active .nf-nav-icon {
  color: #fff;
  background: var(--nf-channel-soft);
  border-color: rgba(255,255,255,.07);
  transform: scale(1.02);
}

.nf-nav-text {
  min-width: 0;
  flex: 1;
}

.channel-label,
.cc-sidebar-label,
.mt-label {
  color: rgba(164, 188, 176, .48) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

/* =========================================================
   TOPBARS
   ========================================================= */

.topbar,
.cc-topbar,
.mt-topbar {
  position: sticky !important;
  top: 0;
  z-index: 40;
  min-height: 80px !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.95),
      rgba(250,252,251,.88)
    ) !important;
  border-bottom:
    1px solid var(--nf-line) !important;
  box-shadow:
    0 10px 30px rgba(13, 33, 24, .035) !important;
  backdrop-filter:
    blur(18px)
    saturate(145%);
}

.topbar::after,
.cc-topbar::after,
.mt-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--nf-channel),
      transparent
    );
  opacity: .18;
}

.topbar h2,
.cc-topbar h1,
.mt-topbar h1 {
  color: #17281e !important;
  font-weight: 900 !important;
  letter-spacing: -.55px !important;
}

.nf-topbar-context {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 9px;
  margin-left: 9px;
  border: 1px solid var(--nf-line);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  color: #728077;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nf-topbar-context::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--nf-channel);
  box-shadow:
    0 0 0 4px var(--nf-channel-soft);
}

/* =========================================================
   SURFACES / CARDS
   ========================================================= */

.cc-card,
.cc-metric,
.cc-media-card,
.mt-card,
.mt-metric,
.mt-template-card,
.contacts-card,
.disparo-card,
.whatsapp-status-card,
.whatsapp-status-loading,
.whatsapp-status-erro,
.status-card {
  border-color: var(--nf-line) !important;
  box-shadow:
    var(--nf-shadow-sm) !important;
}

.cc-card,
.cc-metric,
.mt-card,
.mt-metric,
.mt-template-card,
.contacts-card,
.disparo-card,
.whatsapp-status-card,
.whatsapp-status-loading,
.whatsapp-status-erro,
.status-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.985),
      rgba(252,254,253,.96)
    ) !important;
}

.cc-card,
.cc-metric,
.mt-card,
.mt-metric,
.mt-template-card,
.disparo-card,
.status-card {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.cc-card:hover,
.mt-template-card:hover,
.mt-metric:hover,
.cc-metric:hover {
  border-color:
    rgba(34, 181, 115, .20) !important;
  box-shadow:
    var(--nf-shadow-md) !important;
}

/* =========================================================
   BUTTONS / INPUTS
   ========================================================= */

.cc-btn,
.mt-btn,
#botaoEnviar,
#btnEnviarDisparo,
#btnNovaSequencia,
#btnAdicionarEtapa,
#btnSalvarSequencia,
#btnSalvarIA,
#salvarRespostaAutomatica {
  border-radius: 11px !important;
  box-shadow:
    0 8px 20px rgba(26, 148, 91, .15),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease !important;
}

.cc-btn:hover,
.mt-btn:hover,
#botaoEnviar:hover:not(:disabled),
#btnEnviarDisparo:hover:not(:disabled),
#btnNovaSequencia:hover,
#btnAdicionarEtapa:hover,
#btnSalvarSequencia:hover,
#btnSalvarIA:hover,
#salvarRespostaAutomatica:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(26, 148, 91, .20),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

input,
textarea,
select {
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color:
    rgba(34, 181, 115, .40) !important;
  box-shadow:
    0 0 0 4px rgba(34, 181, 115, .07) !important;
}

/* =========================================================
   DASHBOARD SPECIAL
   ========================================================= */

body[data-nf-channel="control"] .cc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border:
    1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 82% 18%, rgba(70, 230, 157, .16), transparent 22%),
    radial-gradient(circle at 10% 120%, rgba(43, 165, 118, .16), transparent 34%),
    linear-gradient(135deg, #08150f 0%, #102a1e 54%, #123c2a 100%) !important;
  box-shadow:
    0 26px 64px rgba(8, 30, 18, .18) !important;
}

body[data-nf-channel="control"] .cc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image:
    radial-gradient(circle at 74% 40%, #000, transparent 65%);
}

body[data-nf-channel="control"] .cc-hero-orb span {
  position: relative;
  color: transparent !important;
  background:
    linear-gradient(145deg, #46dc96, #19935a) !important;
  box-shadow:
    0 22px 50px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

body[data-nf-channel="control"] .cc-hero-orb span::before {
  content: "";
  width: 56px;
  height: 56px;
  display: block;
  background:
    center / contain no-repeat
    var(--nf-inline-logo, none);
}

.cc-metric {
  position: relative;
  overflow: hidden;
}

.cc-metric::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--nf-channel),
      transparent
    );
  opacity: .16;
}

/* =========================================================
   WHATSAPP
   ========================================================= */

body[data-nf-channel="whatsapp"] .chat {
  background:
    radial-gradient(circle at 86% 9%, rgba(35,181,115,.055), transparent 20%),
    linear-gradient(rgba(247,250,248,.95), rgba(247,250,248,.95)),
    radial-gradient(circle at 1px 1px, rgba(117,139,126,.12) 1px, transparent 0) !important;
  background-size:
    auto,
    auto,
    26px 26px !important;
}

body[data-nf-channel="whatsapp"] .contact.active {
  box-shadow:
    inset 3px 0 0 var(--nf-green),
    0 8px 22px rgba(34,181,115,.06) !important;
}

body[data-nf-channel="whatsapp"] .message.enviada {
  background:
    linear-gradient(
      145deg,
      #d9f7e6,
      #eafbf1
    ) !important;
}

/* =========================================================
   TELEGRAM
   ========================================================= */

body[data-nf-channel="telegram"] .sidebar {
  background:
    radial-gradient(circle at 16% 0%, rgba(42,167,226,.16), transparent 26%),
    radial-gradient(circle at 110% 28%, rgba(77,196,240,.10), transparent 26%),
    linear-gradient(180deg, #08131d 0%, #0b1b28 54%, #071018 100%) !important;
}

body[data-nf-channel="telegram"] .nf-brand-wordmark .nf-brand-flow {
  color: #69cbed;
}

body[data-nf-channel="telegram"] .menu-item.active {
  box-shadow:
    inset 3px 0 0 #31a9df,
    0 8px 18px rgba(0,0,0,.08) !important;
}

body[data-nf-channel="telegram"] .topbar::after {
  opacity: .25;
}

/* =========================================================
   MARKETING
   ========================================================= */

body[data-nf-channel="marketing"] .mt-sidebar {
  background:
    radial-gradient(circle at 16% 0%, rgba(110,125,246,.15), transparent 26%),
    radial-gradient(circle at 110% 30%, rgba(73,202,164,.08), transparent 25%),
    linear-gradient(180deg, #0b111b 0%, #111929 56%, #0a1018 100%) !important;
}

body[data-nf-channel="marketing"] .nf-brand-wordmark .nf-brand-flow {
  color: #94a1ff;
}

body[data-nf-channel="marketing"] .mt-channel-card {
  border-color:
    rgba(139, 149, 255, .12) !important;
}

/* =========================================================
   LOGIN
   ========================================================= */

body.nf-login-page {
  position: relative;
  min-height: 100vh !important;
  overflow: hidden;
  padding: 34px !important;
  background:
    radial-gradient(circle at 78% 8%, rgba(60, 215, 143, .15), transparent 23%),
    radial-gradient(circle at 12% 96%, rgba(53, 151, 107, .13), transparent 26%),
    linear-gradient(135deg, #07120c 0%, #0d1d15 48%, #10271d 100%) !important;
}

body.nf-login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image:
    radial-gradient(circle at 42% 46%, #000, transparent 76%);
}

body.nf-login-page .login-container {
  position: relative;
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  padding: 38px 38px 34px !important;
  border:
    1px solid rgba(255,255,255,.15);
  border-radius: 24px !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.985),
      rgba(248,252,249,.965)
    ) !important;
  box-shadow:
    0 32px 100px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  backdrop-filter:
    blur(18px);
}

body.nf-login-page .login-container::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #34cd84,
      #5ed9c0,
      transparent
    );
}

body.nf-login-page .logo {
  text-align: left !important;
  margin-bottom: 28px !important;
}

body.nf-login-page .logo h1 {
  margin: 0 0 11px !important;
}

body.nf-login-page .logo p {
  margin-top: 11px;
  color: #78877e !important;
  font-size: 12px !important;
}

body.nf-login-page .campo label {
  color: #42564a !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body.nf-login-page .campo input {
  height: 50px !important;
  border:
    1px solid rgba(113, 132, 121, .22) !important;
  border-radius: 12px !important;
  background: #f8fbf9 !important;
  color: #1b3024 !important;
}

body.nf-login-page .campo input:focus {
  background: #fff !important;
  border-color:
    rgba(34,181,115,.42) !important;
  box-shadow:
    0 0 0 4px rgba(34,181,115,.08) !important;
}

body.nf-login-page #botaoEntrar {
  height: 50px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(
      180deg,
      #2fc77d,
      #178e58
    ) !important;
  box-shadow:
    0 10px 26px rgba(28, 153, 93, .24),
    inset 0 1px 0 rgba(255,255,255,.22);
}

body.nf-login-page #botaoEntrar:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(
      180deg,
      #2abb73,
      #158350
    ) !important;
}

body.nf-login-page .rodape {
  color: #9ba7a0 !important;
  font-size: 9px !important;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================================================
   DETAILS
   ========================================================= */

.nf-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border:
    1px solid var(--nf-line);
  border-radius: 10px;
  background:
    rgba(255,255,255,.75);
  color: #718078;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nf-brand-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--nf-channel);
  box-shadow:
    0 0 0 4px var(--nf-channel-soft);
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c5d1ca;
}

::-webkit-scrollbar-thumb:hover {
  background: #aebdb4;
}

@media (prefers-reduced-motion: no-preference) {
  .nf-brand-mark {
    animation:
      nfBrandEnter .38s cubic-bezier(.2,.8,.2,1) both;
  }

  @keyframes nfBrandEnter {
    from {
      opacity: 0;
      transform:
        translateY(-3px)
        scale(.94);
    }

    to {
      opacity: 1;
      transform:
        translateY(0)
        scale(1);
    }
  }
}

@media (max-width: 900px) {
  .nf-brand-wordmark .nf-brand-nex,
  .nf-brand-wordmark .nf-brand-flow {
    font-size: 21px;
  }

  .nf-brand-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .nf-sidebar-product {
    display: none;
  }
}

@media (max-width: 680px) {
  body.nf-login-page {
    padding: 16px !important;
  }

  body.nf-login-page .login-container {
    padding: 30px 24px 27px !important;
  }

  .nf-topbar-context {
    display: none;
  }
}