/* ===== Configurações (.cfg-) ===== */
.cfg-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.cfg-nav { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.cfg-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--muted); transition: background 0.2s, color 0.2s; }
.cfg-nav-item > .iconify:first-child { font-size: 19px; }
.cfg-nav-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.cfg-nav-item.active { background: rgba(255, 255, 255, 0.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.cfg-nav-item.active > .iconify:first-child { color: var(--cyan-2); }
.cfg-nav-label { display: block; font-size: 13px; font-weight: 500; }
.cfg-nav-desc { display: block; font-size: 11px; color: var(--subtle); margin-top: 1px; }
.cfg-nav-ext { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; padding-top: 14px; }

.cfg-body { min-width: 0; }
.cfg-anim > * { animation: rise 0.45s var(--ease) both; }
.cfg-anim > *:nth-child(2) { animation-delay: 0.05s; }
.cfg-anim > *:nth-child(3) { animation-delay: 0.1s; }
.cfg-anim > *:nth-child(n+4) { animation-delay: 0.15s; }
.cfg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cfg-head p { max-width: 620px; }
.cfg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-profile .avatar-xl { margin-top: 4px; }

.cfg-savebar {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 12px 12px 18px; border-radius: 18px; background: rgba(24, 24, 27, 0.88); border: 1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.cfg-savebar .muted { display: inline-flex; align-items: center; gap: 6px; }

/* Remetente */
.cfg-inbox { border-radius: 16px; overflow: hidden; background: #f8fafc; color: #0f172a; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7); }
.cfg-inbox-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e2e8f0; font-size: 11px; color: #475569; }
.cfg-inbox-bar span { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.cfg-inbox-bar b { margin-left: 8px; font-weight: 600; }
.cfg-inbox-row { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #e2e8f0; color: #475569; }
.cfg-inbox-row:last-child { border-bottom: 0; }
.cfg-inbox-row .xs { color: #64748b; }
.cfg-inbox-row.active { background: #ecfeff; color: #0f172a; box-shadow: inset 3px 0 0 #06b6d4; }
.cfg-inbox-row .avatar { border-color: rgba(15, 23, 42, 0.1); }
.cfg-switch-row { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.cfg-footer-prev { border-radius: 16px; padding: 18px; background: #eef2f6; display: flex; align-items: flex-end; min-height: 220px; }
.cfg-footer-mail { width: 100%; background: #fff; border-radius: 12px; padding: 18px; color: #94a3b8; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.cfg-fake-lines { display: grid; gap: 8px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
.cfg-fake-lines i { display: block; height: 8px; border-radius: 99px; background: #e2e8f0; }
.cfg-footer-out { font-size: 11px; line-height: 1.6; text-align: center; }
.cfg-footer-out b { color: #64748b; }

/* Domínios */
.cfg-domain .h4 { font-size: 15px; }
.cfg-auth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cfg-auth { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(250, 204, 21, 0.06); border: 1px solid rgba(250, 204, 21, 0.2); }
.cfg-auth.ok { background: rgba(16, 185, 129, 0.07); border-color: rgba(52, 211, 153, 0.25); }
.cfg-auth-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; background: rgba(250, 204, 21, 0.18); color: var(--yellow-2); }
.cfg-auth.ok .cfg-auth-ic { background: var(--emerald); color: #fff; }
.cfg-steps { counter-reset: s; display: grid; gap: 14px; }
.cfg-steps li { counter-increment: s; position: relative; padding-left: 36px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cfg-steps li span { font-size: 12px; color: var(--muted); }
.cfg-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: rgba(34, 211, 238, 0.14); color: var(--cyan-2); border: 1px solid rgba(34, 211, 238, 0.3); }
.cfg-dns td { vertical-align: top; }
.cfg-copy { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 9px; border-radius: 9px; font-size: 12px; text-align: left; word-break: break-all; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--text-2); transition: background 0.2s, border-color 0.2s; }
.cfg-copy .iconify { color: var(--subtle); font-size: 13px; }
.cfg-copy:hover { background: rgba(34, 211, 238, 0.08); border-color: rgba(34, 211, 238, 0.3); color: var(--text); }
.cfg-copy:hover .iconify { color: var(--cyan-2); }

/* Equipe */
.cfg-role { width: auto; min-width: 150px; }
.cfg-role:disabled { opacity: 0.6; cursor: not-allowed; }

/* Plano */
.cfg-plan-now { min-height: 280px; }
.cfg-plan-name { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; }
.cfg-plans { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cfg-plan { transition: transform 0.25s var(--ease); }
.cfg-plan .text-purple { white-space: nowrap; }
.cfg-inv td { white-space: nowrap; }
.cfg-plan:hover { transform: translateY(-2px); }
.cfg-plan.is-current { background: linear-gradient(160deg, rgba(6, 182, 212, 0.16), rgba(255, 255, 255, 0.02)); }
.cfg-plan.is-current::before { background: linear-gradient(180deg, rgba(34, 211, 238, 0.7), rgba(34, 211, 238, 0.1)); }
.cfg-plan-limits { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.cfg-plan-limits span { display: flex; align-items: center; gap: 8px; }
.cfg-plan-limits .iconify { color: var(--subtle); font-size: 14px; }
.cfg-feats { display: grid; gap: 8px; font-size: 13px; color: var(--text-2); }
.cfg-feats li { display: flex; gap: 8px; align-items: flex-start; }
.cfg-feats .iconify { color: var(--emerald-2); font-size: 15px; margin-top: 2px; }
.cfg-cc {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px; border-radius: 18px; min-height: 160px;
  background: radial-gradient(260px 160px at 100% 0%, rgba(34, 211, 238, 0.35), transparent 70%), linear-gradient(135deg, #1f2937, #0b0b0c);
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.9); max-width: 380px;
}
.cfg-cc-num { font-size: 18px; letter-spacing: 0.12em; }
.cfg-cc .xs { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.06em; }

/* API */
.cfg-key { padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); white-space: nowrap; }
.cfg-hook { padding: 14px 16px; }
.cfg-hook-url { max-width: 520px; color: var(--text); }
.cfg-code-copy { position: absolute; top: 10px; right: 10px; }
.cfg-newkey { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 14px; background: #0d0d0f; border: 1px solid rgba(52, 211, 153, 0.35); }
.cfg-newkey code { flex: 1; min-width: 0; font-size: 13px; word-break: break-all; color: var(--emerald-2); }
.cfg-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.cfg-events .check { align-items: flex-start; }
.cfg-events .check span .xs { display: block; }

/* Preferências */
.cfg-pref { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.cfg-pref:last-child { border-bottom: 0; }
.cfg-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cfg-counts > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.cfg-counts b { font-size: 18px; letter-spacing: -0.02em; }
.cfg-danger { background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(244, 63, 94, 0.01)); }
.cfg-danger::before { background: linear-gradient(180deg, rgba(251, 113, 133, 0.5), rgba(251, 113, 133, 0.08)); }
.cfg-danger p { max-width: 620px; }

/* ===== Integrações (.int-) ===== */
.int-logo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-size: 24px; background: #fff; color: #0f172a; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8); }
.int-logo.sm { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
.int-logo.lg { width: 60px; height: 60px; font-size: 32px; border-radius: 18px; }
.int-logo svg { width: 1em; height: 1em; }
.int-pulso { background: linear-gradient(135deg, var(--cyan-2), var(--cyan) 45%, #0e7490); color: #fff; border-color: rgba(165, 243, 252, 0.5); }
.int-pulso svg { width: 30px; height: 30px; }
.int-card { min-height: 236px; }
.int-card.is-on { background: linear-gradient(160deg, rgba(16, 185, 129, 0.12), rgba(255, 255, 255, 0.01)); }
.int-live-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.int-live-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); }
.int-live-stats b { font-size: 17px; letter-spacing: -0.02em; }
.int-search { width: 280px; max-width: 100%; }
.int-cats { overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding: 2px; }
.int-cats::-webkit-scrollbar { display: none; }
.int-cta .h2 { font-size: 24px; }
.int-handshake { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 16px; }
.int-dots { display: inline-flex; gap: 5px; }
.int-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-2); opacity: 0.3; animation: int-dot 1.2s infinite; }
.int-dots i:nth-child(2) { animation-delay: 0.15s; }
.int-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes int-dot { 0%, 100% { opacity: 0.25; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }
.int-progress { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 10px; }
.int-steps { width: 100%; max-width: 300px; text-align: left; }
.int-step-ic { width: 22px; height: 22px; display: grid; place-items: center; font-size: 20px; }
.int-success { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; color: #fff; background: var(--emerald); border: 1px solid rgba(110, 231, 183, 0.6); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.12), 0 20px 40px -14px rgba(5, 150, 105, 0.8); animation: pop-in 0.4s var(--ease) both; }
.int-cfg-head { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); flex-wrap: wrap; }

/* ===== Responsivo ===== */
@media (max-width: 1180px) {
  .cfg-plan-now { min-height: 0; }
}
@media (max-width: 900px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cfg-nav { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 6; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 18px; background: rgba(16, 16, 18, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .cfg-nav::-webkit-scrollbar { display: none; }
  .cfg-nav-item { flex-shrink: 0; padding: 8px 12px; gap: 8px; }
  .cfg-nav-item > .iconify:first-child { font-size: 16px; }
  .cfg-nav-desc, .cfg-nav-ext > .iconify:last-child { display: none; }
  .cfg-nav-ext { margin-top: 0; border-top: 0; border-radius: 14px; padding-top: 8px; }
  .cfg-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cfg-plans { grid-template-columns: minmax(0, 1fr); }
  .cfg-auth-grid { grid-template-columns: minmax(0, 1fr); }
  .cfg-events { grid-template-columns: minmax(0, 1fr); }
  .int-search { width: 100%; }
}
@media (max-width: 560px) {
  .cfg-3 { grid-template-columns: minmax(0, 1fr); }
  .cfg-profile { flex-direction: column; }
  .cfg-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg-savebar { bottom: 10px; padding: 10px; }
  .cfg-savebar > .muted { display: none; }
  .cfg-savebar .btn { width: 100%; }
  .cfg-plan-name { font-size: 32px; }
  .cfg-hook-url { max-width: 220px; }
  .int-card { min-height: 0; }
}

/* remetentes autorizados (clique preenche o e-mail) e aquecimento do domínio */
.cfg-sender-chip { cursor: pointer; border: 0; font: inherit; font-size: 12px; transition: transform .15s ease, box-shadow .15s ease; }
.cfg-sender-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .35); }
.cfg-sender-chip:focus-visible { outline: 2px solid var(--cyan, #06b6d4); outline-offset: 2px; }
.cfg-warm { align-items: center; flex-wrap: wrap; line-height: 1.5; }
.cfg-warm b { font-weight: 600; }