/* MS PLAY — CSS CENTRAL GERADO E ISOLADO POR PÁGINA */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #06121a;
  --bg-2: #0b1e2b;
  --panel: rgba(11, 30, 43, 0.72);
  --panel-solid: #0f222f;
  --line: rgba(120, 199, 255, 0.18);
  --line-strong: rgba(90, 186, 255, 0.35);
  --text: #ffffff;
  --muted: rgba(235, 247, 255, 0.72);
  --accent: #1e6fe0;
  --accent-2: #22d3ee;
  --accent-deep: #0c3a78;
  --ok: #3dd68c;
  --warn: #f5c542;
  --err: #ff6b6b;
  --pending: #ff9f43;
  --accent-rgb: 30, 111, 224;
  --accent-2-rgb: 34, 211, 238;
  --accent-deep-rgb: 12, 58, 120;
  --ok-rgb: 61, 214, 140;
  --warn-rgb: 245, 197, 66;
  --err-rgb: 255, 107, 107;
  --pending-rgb: 255, 159, 67;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --glow: 0 0 40px rgba(24, 144, 230, 0.22);
  --font: "Outfit", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 480px at 8% -8%, rgba(24, 144, 230, 0.45), transparent 55%),
    radial-gradient(700px 420px at 100% 0%, rgba(77, 181, 255, 0.22), transparent 50%),
    radial-gradient(800px 500px at 50% 110%, rgba(12, 88, 142, 0.55), transparent 55%),
    linear-gradient(165deg, #061c2c 0%, #040d14 45%, #06121a 100%);
  background-attachment: fixed;
}

a { color: #b4e0ff; text-decoration: none; transition: color .15s ease; }
a:hover { color: #fff; }
code, .mono { font-family: ui-monospace, Consolas, monospace; color: #d0ebff; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 268px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(11, 37, 56, 0.96), rgba(5, 19, 29, 0.98));
  border-right: 1px solid var(--line);
  padding: 1.35rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  position: sticky;
  top: 0;
  height: 100vh;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.25);
}
.brand {
  display: flex;
  gap: .85rem;
  align-items: center;
  padding: .45rem .5rem .85rem;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.15rem;
  background: linear-gradient(145deg, #4db5ff, #0c65a4);
  color: #fff;
  box-shadow: var(--glow);
}
.brand strong { display: block; font-size: 1.05rem; letter-spacing: .02em; color: #fff; }
.brand small { color: var(--muted); font-size: .78rem; }

.sidebar nav { display: flex; flex-direction: column; gap: .28rem; flex: 1; overflow: auto; }
.nav-group {
  display: block;
  margin: .7rem .35rem .15rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8fd0ff;
  opacity: .9;
}
.nav-group:first-child { margin-top: 0; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--muted);
  padding: .72rem .9rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: .94rem;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover {
  background: rgba(77, 181, 255, 0.12);
  color: #fff;
  border-color: var(--line);
}
.sidebar nav a.active {
  background: linear-gradient(135deg, rgba(24, 144, 230, 0.32), rgba(8, 57, 92, 0.55));
  color: #fff;
  border-color: var(--line-strong);
  border-left: 3px solid var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 18px rgba(60, 174, 255, 0.32);
}
.sidebar nav a.nav-exit {
  margin-top: auto;
  justify-content: center;
  text-align: center;
  color: #b0deff;
  background: rgba(13, 53, 82, 0.5);
  border: 1px solid rgba(90, 186, 255, 0.5);
  border-left: 1px solid rgba(90, 186, 255, 0.5);
  border-radius: 999px;
  padding: .85rem .9rem;
  font-weight: 700;
}
.sidebar nav a.nav-exit:hover {
  background: rgba(17, 79, 123, 0.7);
  border-color: var(--accent-2);
  color: #fff;
}
.sidebar-foot {
  padding: .55rem .5rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
}

.main { flex: 1; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(7, 27, 41, 0.85), rgba(5, 17, 25, 0.7));
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.menu-btn {
  display: none;
  background: rgba(77, 181, 255, 0.15);
  border: 1px solid var(--line-strong);
  color: #fff;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  cursor: pointer;
}
.page { padding: 1.35rem 1.5rem 2.6rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.card {
  background: linear-gradient(160deg, rgba(17, 49, 71, 0.9), rgba(7, 24, 36, 0.92));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4db5ff, transparent 70%);
}
.card h3 {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.card strong {
  display: block;
  margin-top: .5rem;
  font-size: 1.85rem;
  color: #fff;
  font-weight: 800;
}
.card .hint { color: var(--muted); font-size: .85rem; margin-top: .4rem; }

.panel {
  background: linear-gradient(165deg, rgba(13, 38, 56, 0.88), rgba(6, 19, 29, 0.92));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
}
.panel p.lead { color: var(--muted); margin: -.35rem 0 1rem; }

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem 1.05rem;
}
.grid-form .full { grid-column: 1 / -1; }
.grid-form .actions { display: flex; gap: .65rem; align-items: end; flex-wrap: wrap; }

label {
  display: grid;
  gap: .38rem;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
}
input, select, textarea, button, .btn {
  font: inherit;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(5, 13, 18, 0.85);
  color: var(--text);
  padding: .68rem .8rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(24, 144, 230, 0.2);
}
textarea { resize: vertical; min-height: 90px; }
input::placeholder, textarea::placeholder { color: rgba(220, 240, 255, 0.35); }

button, .btn {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border: none;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(12, 110, 180, 0.35);
  transition: transform .12s ease, filter .12s ease;
}
button:hover, .btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
button.secondary, .btn.secondary, button.ghost, .btn.ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: #fff;
  box-shadow: none;
}
button.ok, .btn.ok { background: linear-gradient(135deg, #2ecc71, #1e8449); box-shadow: none; }
button.danger, .btn.danger { background: linear-gradient(135deg, #c0392b, #6b1010); }

.inline-form { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.inline-form input { min-width: 0; }
button.link {
  background: none;
  border: none;
  color: #b4e0ff;
  padding: 0;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
button.link.danger { color: #ff8e8e; }

.inline { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.inline input[type="search"] { flex: 1; min-width: 180px; }

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td {
  text-align: left;
  padding: .8rem .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: #fff;
}
th {
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(24, 144, 230, 0.12);
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(77, 181, 255, 0.05); }
.row-actions { display: flex; gap: .65rem; align-items: center; white-space: nowrap; }
.row-actions form { margin: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.badge.active { background: rgba(61, 214, 140, 0.18); color: #7dffc0; }
.badge.pending { background: rgba(255, 159, 67, 0.2); color: #ffd08a; }
.badge.blocked, .badge.inactive { background: rgba(255, 107, 107, 0.18); color: #b0deff; }

.alert {
  padding: .85rem 1.05rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  color: #fff;
}
.alert.ok { background: rgba(61, 214, 140, 0.14); border-color: rgba(61, 214, 140, 0.35); }
.alert.error { background: rgba(255, 107, 107, 0.14); border-color: rgba(255, 107, 107, 0.4); }

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(700px 400px at 20% 10%, rgba(24, 144, 230, 0.5), transparent 55%),
    radial-gradient(600px 380px at 90% 80%, rgba(12, 88, 142, 0.6), transparent 50%),
    linear-gradient(160deg, #09263b, #030c12);
}
.auth-card {
  width: min(420px, 100%);
  background: linear-gradient(165deg, rgba(15, 48, 71, 0.95), rgba(5, 20, 31, 0.98));
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 1.85rem 1.7rem;
  box-shadow: var(--shadow), var(--glow);
}
.auth-card h1 { margin: 0 0 .3rem; color: #fff; font-size: 1.65rem; }
.auth-card .muted { color: var(--muted); margin: 0 0 1.25rem; }
.auth-card form { display: grid; gap: .95rem; }
.auth-card button { width: 100%; padding: .88rem; font-size: 1rem; }
.auth-badge {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(24, 144, 230, 0.25);
  border: 1px solid var(--line);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

.info-box {
  background: linear-gradient(135deg, rgba(24, 144, 230, 0.16), rgba(8, 51, 82, 0.35));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .95rem 1.1rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.info-box strong { color: #fff; }
.info-box code { display: none; }

label.check {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-direction: row;
  padding-top: 1.6rem;
}
label.check input { width: auto; }

.section-title {
  margin: 0 0 .85rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.preview-logo, .preview-bg {
  max-width: 100%;
  max-height: 120px;
  border-radius: 12px;
  border: 1px solid var(--line);
  object-fit: contain;
  background: rgba(0,0,0,.25);
}
.rebrand-preview { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
    transform: translateX(-105%);
    transition: transform .22s ease;
    height: 100vh;
  }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-grid; place-items: center; }
  .grid-form { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
}

/* =========================================================
   AJUSTE DO MENU LATERAL — referência da 2ª imagem
   - fundo mais preto/vinho
   - botão Sair mais compacto e sem sombra exagerada
   - rodapé alinhado e visível no celular
   ========================================================= */

/* Fundo do menu mais escuro, como na segunda imagem */
.sidebar {
  background:
    radial-gradient(520px 300px at 50% 100%, rgba(14, 61, 94, 0.14), transparent 68%),
    linear-gradient(180deg, #050708 0%, #05080a 58%, #070d12 100%);
  border-right: 1px solid rgba(80, 182, 255, 0.12);
  box-shadow: 5px 0 18px rgba(0, 0, 0, 0.22);
  gap: .72rem;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

/* Cabeçalho um pouco mais compacto */
.sidebar .brand {
  padding: .35rem .5rem .7rem;
  border-bottom-color: rgba(255, 255, 255, 0.055);
}

/* Menu compacto para o rodapé não ficar fora da tela */
.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  gap: .14rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

.sidebar nav::-webkit-scrollbar { width: 3px; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

.sidebar .nav-group {
  margin: .48rem .35rem .08rem;
  font-size: .69rem;
  color: rgba(109, 178, 228, .78);
}

.sidebar nav a {
  padding: .58rem .82rem;
  min-height: 42px;
  border-radius: 11px;
  font-size: .92rem;
}

/* Mantém o item ativo vermelho, mas com brilho mais discreto */
.sidebar nav a.active {
  background: linear-gradient(135deg, rgba(23, 96, 148, .42), rgba(9, 42, 66, .62));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 2px 7px rgba(20, 122, 194, .12);
}

/* Botão Sair: menor, mais fino e com sombra curta */
.sidebar nav a.nav-exit {
  margin-top: .62rem;
  margin-bottom: .12rem;
  min-height: 40px;
  padding: .50rem .82rem;
  border-radius: 13px;
  color: rgba(223, 242, 255, .92);
  background: rgba(19, 54, 79, .58);
  border: 1px solid rgba(59, 158, 228, .50);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
}

.sidebar nav a.nav-exit:hover {
  background: rgba(22, 65, 96, .72);
  border-color: rgba(72, 172, 243, .70);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Rodapé organizado como na segunda imagem */
.sidebar-foot {
  flex: 0 0 auto;
  margin: 0;
  padding: .72rem .45rem .35rem;
  border-top: 1px solid rgba(255, 255, 255, .045);
  text-align: center;
  color: rgba(255, 255, 255, .40);
  font-size: .72rem;
  line-height: 1.25;
}

.sidebar-foot .social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .42rem;
  margin-top: .72rem;
}

.sidebar-foot .social-links > span {
  flex: 0 0 100%;
  margin-bottom: .08rem;
  color: rgba(255,255,255,.52);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sidebar-foot .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  padding: .34rem .48rem;
  min-height: 30px;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  font-size: .69rem;
  font-weight: 500;
}

.sidebar-foot .social-links a.whatsapp {
  color: #35cf72;
  border: 1px solid rgba(53, 207, 114, .30);
}

.sidebar-foot .social-links a.telegram {
  color: #28b9e9;
  border: 1px solid rgba(40, 185, 233, .30);
}

/* Em celular, usa a altura real disponível entre as barras do navegador */
@media (max-width: 860px) {
  .sidebar {
    height: 100dvh;
    min-height: 100dvh;
    padding: .9rem .8rem .55rem;
  }
}

/* Telas baixas: comprime somente o necessário */
@media (max-height: 760px) {
  .sidebar { gap: .45rem; }
  .sidebar .brand { padding-top: .2rem; padding-bottom: .48rem; }
  .sidebar .nav-group { margin-top: .30rem; }
  .sidebar nav a { min-height: 37px; padding-top: .42rem; padding-bottom: .42rem; }
  .sidebar nav a.nav-exit { min-height: 36px; margin-top: .42rem; }
  .sidebar-foot { padding-top: .46rem; }
  .sidebar-foot .social-links { margin-top: .46rem; }
}


/* =========================================================
   AJUSTE V3 — menu mais compacto + botão Sair de referência
   ========================================================= */

/* Botão Sair: mais baixo, formato pill e sombra discreta */
.sidebar nav a.nav-exit {
  margin-top: .44rem;
  margin-bottom: .06rem;
  min-height: 36px;
  padding: .38rem .74rem;
  border-radius: 999px;
  font-size: .90rem;
  font-weight: 700;
  color: rgba(235, 247, 255, .94);
  background: rgba(13, 40, 59, .78);
  border: 1px solid rgba(64, 162, 232, .48);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .20),
    0 0 7px rgba(34, 133, 204, .07),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.sidebar nav a.nav-exit:hover {
  background: rgba(15, 48, 71, .86);
  border-color: rgba(74, 172, 242, .62);
  box-shadow:
    0 4px 11px rgba(0, 0, 0, .22),
    0 0 8px rgba(34, 133, 204, .09);
  transform: none;
}

/* Rodapé somente com copyright: sem WhatsApp/Telegram */
.sidebar-foot {
  padding: .42rem .45rem .18rem;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.035);
  text-align: center;
  font-size: .70rem;
  line-height: 1.15;
}

.sidebar-foot .social-links { display: none !important; }

/* PC/notebook: reduz o excesso de espaço vertical do menu */
@media (min-width: 861px) {
  .sidebar {
    padding: .90rem .82rem .58rem;
    gap: .42rem;
  }

  .sidebar .brand {
    padding: .22rem .42rem .48rem;
  }

  .sidebar nav {
    gap: .03rem;
  }

  .sidebar .nav-group {
    margin: .30rem .30rem .02rem;
    font-size: .67rem;
  }

  .sidebar nav a {
    min-height: 35px;
    padding: .40rem .68rem;
    gap: .58rem;
    font-size: .88rem;
  }

  .sidebar nav a.nav-exit {
    min-height: 34px;
    margin-top: .34rem;
    padding: .34rem .70rem;
    font-size: .88rem;
  }

  .sidebar-foot {
    padding-top: .34rem;
    font-size: .68rem;
  }
}

/* Celular: preserva boa área de toque, mas sem botão alto demais */
@media (max-width: 860px) {
  .sidebar nav a.nav-exit {
    min-height: 38px;
    padding: .40rem .74rem;
    margin-top: .46rem;
  }

  .sidebar-foot {
    padding-top: .48rem;
    padding-bottom: .18rem;
  }
}

/* =========================================================
   AJUSTE V4 — PC: botão Sair menor + copyright próximo
   Mantém o comportamento atual do celular (<= 860px).
   ========================================================= */
@media (min-width: 861px) {
  /* O menu deixa de esticar até o rodapé. Assim o copyright
     fica logo abaixo do botão Sair, sem o grande espaço vazio. */
  .sidebar nav {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Botão Sair menor e centralizado, próximo da referência. */
  .sidebar nav a.nav-exit {
    width: 88%;
    max-width: 220px;
    align-self: center;
    min-height: 32px;
    margin-top: .42rem;
    margin-bottom: 0;
    padding: .28rem .64rem;
    border-radius: 999px;
    font-size: .86rem;
    background: rgba(13, 36, 53, .72);
    border: 1px solid rgba(62, 156, 224, .45);
    box-shadow:
      0 3px 7px rgba(0, 0, 0, .18),
      inset 0 1px 0 rgba(255, 255, 255, .02);
  }

  .sidebar nav a.nav-exit:hover {
    background: rgba(15, 44, 65, .80);
    border-color: rgba(72, 169, 239, .58);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .20);
  }

  /* Copyright próximo do botão, sem divisor e sem ficar preso
     na parte inferior da tela. */
  .sidebar-foot {
    margin-top: 1.15rem;
    padding: .18rem .45rem 0;
    border-top: 0;
    font-size: .67rem;
    color: rgba(255, 255, 255, .36);
  }
}


/* ===== notifications.css ===== */
.topbar .notice-tools{display:flex;align-items:center;gap:10px;margin-left:auto}.topbar h1{min-width:0;overflow-wrap:anywhere}.notice-menu{position:relative}.notice-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid var(--accent-deep);border-radius:24px;background:#141c21;color:#fff;white-space:nowrap}.notice-menu>summary::-webkit-details-marker{display:none}.notice-menu>summary:focus-visible{outline:2px solid var(--pending);outline-offset:3px}.notice-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:12px;background:var(--accent);color:#fff;font-size:11px;font-weight:700}.notice-badge[hidden]{display:none}.sidebar .notice-badge{margin-left:auto}.notice-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:350px;max-width:calc(100vw - 28px);max-height:70vh;overflow-y:auto;padding:14px;border:1px solid var(--accent-deep);border-radius:16px;background:#171116;color:#eef2f5;box-shadow:0 18px 45px #0009;z-index:1500}.notice-dropdown h3{font-size:16px;margin:0 0 12px}.notice-dropdown a{color:#fff;text-decoration:none}.notice-dropdown .notice-event{display:block;padding:12px;border-radius:10px;margin-bottom:8px}.notice-dropdown .notice-event:hover{background:var(--accent-deep)}.notice-event{padding:16px;border-bottom:1px solid #ffffff15;overflow-wrap:anywhere}.notice-event p{margin:6px 0;white-space:pre-wrap}.notice-event small{display:block;color:#bcaab0;margin-bottom:10px}.notice-unread{border-left:3px solid #42a9f2;background:#d9395010}.notice-account .notice-dropdown{width:235px}.notice-account .notice-dropdown a{display:block;padding:10px;border-radius:8px}.notice-account .notice-dropdown a:hover{background:var(--accent-deep)}.notice-avatar{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);font-weight:700}.notice-heading{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.notice-heading h2{margin-bottom:8px}.notice-editor{max-width:950px;margin-bottom:18px}.notice-editor label[hidden]{display:none}.notice-editor .notice-toggle{display:flex;align-items:center;gap:10px}.notice-toggle input{width:auto}.notice-editor textarea{resize:vertical}.notice-preview{padding:20px;border:1px solid var(--accent-deep);background:#141c21;border-radius:14px;overflow-wrap:anywhere}.notice-footer{display:block;text-align:center;padding:10px;font-weight:600}.notice-dropdown button{width:100%;margin:8px 0}.stats-card.pending-card{border-color:#8a672a}.pending-card .stats-icon{color:var(--warn)}
@media(max-width:600px){.topbar .notice-tools{gap:6px}.notice-menu>summary{padding:8px 10px}.notice-admin-name{display:none}.notice-dropdown{position:fixed;top:76px;right:14px;width:calc(100vw - 28px)}.notice-account .notice-dropdown{width:220px}.notice-heading{align-items:flex-start}.notice-heading h2{font-size:18px}.topbar h1{font-size:16px}.notice-editor .grid-form{grid-template-columns:1fr}}

.notice-dropdown .notice-event p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Seleção e exclusão de notificações */
.notice-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.notice-dropdown-head h3{margin:0}.notice-select-all{display:inline-flex;align-items:center;gap:7px;color:#c9d1d7;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}.notice-select-all input,.notice-check input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.notice-event-row{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;border-radius:10px;margin-bottom:8px;border-bottom:1px solid #ffffff12}.notice-event-row>.notice-check{display:flex;justify-content:center;padding:14px 0 0}.notice-event-row>.notice-event{margin:0;border:0;min-width:0}.notice-event-row.notice-unread{border-left:3px solid #42a9f2;background:#d9395010}.notice-event-row.notice-unread>.notice-event{border-left:0;background:transparent}.notice-empty{color:#bcaab0;padding:10px 4px;margin:0}.notice-dropdown-actions{display:grid;gap:6px;padding-top:4px;border-top:1px solid #ffffff12}.notice-dropdown-actions button{margin:0}.notice-dropdown button:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}.notice-delete-all{color:var(--err)!important;border-color:#7a303a!important}.notice-delete-all:hover{background:#5c1c25!important}.notice-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.notice-heading-actions form{margin:0}.notice-heading-actions .page-select-all{padding:9px 12px;border:1px solid var(--accent-deep);border-radius:12px;background:#141c21}.notice-page-event .notice-event-main{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start}.notice-page-event .notice-check{padding-top:3px}.notice-event-content{min-width:0}.notice-page-event>.actions{margin-left:30px}.notice-page-event .actions{display:flex;gap:8px;flex-wrap:wrap}.notice-page-event .actions form{margin:0}
@media(max-width:600px){.notice-dropdown-head{align-items:flex-start;flex-direction:column}.notice-select-all{font-size:12px}.notice-event-row{grid-template-columns:26px minmax(0,1fr)}.notice-event-row>.notice-check{padding-top:13px}.notice-heading-actions{width:100%;justify-content:stretch}.notice-heading-actions>*{flex:1 1 100%}.notice-heading-actions .btn,.notice-heading-actions form .btn{width:100%}.notice-heading-actions .page-select-all{justify-content:center}.notice-page-event>.actions{margin-left:0}.notice-page-event .notice-event-main{grid-template-columns:28px minmax(0,1fr)}}


/* ===== page-_layout.css ===== */
/* Extraído de admin/_layout.php para centralizar a apresentação. */
/* Menu da conta: logo do painel + opções no padrão solicitado */
        .notice-account .notice-account-logo {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.10);
        }
        .notice-account .notice-account-fallback {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: inline-grid;
            place-items: center;
        }
        .notice-account .notice-dropdown.account-dropdown {
            min-width: 260px;
            padding: 8px 0;
            overflow: hidden;
        }
        .notice-account .account-link {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 15px 22px;
            color: #f3f3f3;
            text-decoration: none;
            font-weight: 500;
        }
        .notice-account .account-link i {
            width: 22px;
            text-align: center;
            font-size: 18px;
        }
        .notice-account .account-link:hover {
            background: rgba(255,255,255,.05);
        }
        .notice-account .account-link.account-profile i { color: var(--accent-2); }
        .notice-account .account-link.account-settings i { color: var(--warn); }
        .notice-account .account-link.account-logout {
            color: #47cfff;
            border-top: 1px solid rgba(255,255,255,.08);
            margin-top: 4px;
        }
        .notice-account .account-link.account-logout i { color: #47cfff; }

        /* Área inferior fixa do menu lateral.
           Somente os itens do menu rolam; Sair e o rodapé permanecem estáticos. */
        .sidebar nav {
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: .45rem;
        }
        .sidebar-bottom {
            flex: 0 0 auto;
            position: relative;
            z-index: 4;
            padding: .72rem .15rem .10rem;
            margin-top: .35rem;
            background: linear-gradient(180deg, rgba(var(--accent-deep-rgb), .30), rgba(var(--accent-deep-rgb), .96) 24%, rgba(var(--accent-deep-rgb), .99));
            border-top: 1px solid rgba(255,255,255,.045);
        }
        .sidebar-bottom .nav-exit {
            width: 100%;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .65rem;
            padding: .52rem .82rem;
            border-radius: 999px;
            color: rgba(var(--accent-deep-rgb), .96);
            text-decoration: none;
            font-weight: 700;
            font-size: .92rem;
            background: rgba(var(--accent-deep-rgb), .82);
            border: 1px solid rgba(var(--accent-deep-rgb), .50);
            box-shadow: 0 3px 8px rgba(0,0,0,.20);
        }
        .sidebar-bottom .nav-exit:hover {
            color: #fff;
            background: rgba(var(--accent-deep-rgb), .92);
            border-color: rgba(var(--accent-deep-rgb), .66);
        }
        .sidebar-bottom .nav-exit i { margin: 0; }
        .sidebar-bottom .sidebar-foot {
            margin-top: .65rem;
            padding: .12rem .35rem .05rem;
            border-top: 0;
        }

        @media (max-width: 860px) {
            .sidebar-bottom {
                padding-top: .72rem;
                padding-bottom: .18rem;
            }
            .sidebar-bottom .nav-exit {
                min-height: 42px;
            }
        }

        @media (max-width: 860px) {
            .notice-account .notice-dropdown.account-dropdown {
                min-width: 260px;
                max-width: calc(100vw - 28px);
            }
            .notice-account .notice-account-logo,
            .notice-account .notice-account-fallback {
                width: 36px;
                height: 36px;
            }
        }


/* ===== contrato estrutural final ===== */
.app-shell{display:flex;min-height:100dvh;width:100%;overflow-x:hidden}
.main{flex:1 1 auto;min-width:0}
.page{width:100%;max-width:1800px;margin:0 auto}
.sidebar{flex:0 0 268px;width:268px}
.sidebar-bottom{margin-top:auto;flex:0 0 auto}
.sidebar nav{min-height:0}
.brand-logo{width:44px;height:44px;max-width:44px;max-height:44px;object-fit:contain;border-radius:50%}
.topbar .notice-tools{margin-left:auto}
.recent-desktop{display:block}
.recent-mobile{display:none}


/* ===== page-account.css | escopo: account ===== */
/* Extraído de admin/account.php para centralizar a apresentação. */


body.admin-page.page-account .account-tabs{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}


body.admin-page.page-account .account-tab{
    background:transparent;
    border:1px solid var(--line, var(--accent-deep));
    color:var(--muted, #a2afb9);
    padding:.6rem 1.1rem;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    font-size:.92rem;
    transition:all .15s ease;
}


body.admin-page.page-account .account-tab:hover{border-color:var(--accent, var(--accent))}


body.admin-page.page-account .account-tab.active{
    background:var(--accent, var(--accent));
    border-color:var(--accent, var(--accent));
    color:#fff;
}


body.admin-page.page-account .avatar-upload-label{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:.5rem 0 1rem}


body.admin-page.page-account .avatar-upload{position:relative;width:120px;height:120px}


body.admin-page.page-account .avatar-upload__circle{
    width:120px;height:120px;border-radius:50%;
    overflow:hidden;background:#0d151a;
    border:2px solid var(--line, var(--accent-deep));
    display:flex;align-items:center;justify-content:center;
}


body.admin-page.page-account .avatar-upload__circle img{width:100%;height:100%;object-fit:cover}


body.admin-page.page-account .avatar-upload__placeholder{font-size:.78rem;text-align:center;padding:0 .5rem}


body.admin-page.page-account .avatar-upload__camera{
    position:absolute;bottom:2px;right:2px;
    width:38px;height:38px;border-radius:50%;
    background:var(--accent, var(--accent));color:#fff;border:3px solid var(--panel-bg, #0a1015);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
}


body.admin-page.page-account .avatar-upload__camera:hover{filter:brightness(1.1)}


body.admin-page.page-account .avatar-upload__hint{font-size:.8rem;text-align:center}




body.admin-page.page-account .account-section-title{margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--line,rgba(255,255,255,.1));display:flex;flex-direction:column;gap:.18rem}


body.admin-page.page-account .account-section-title span{font-size:.82rem;color:var(--muted)}


body.admin-page.page-account .account-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}


body.admin-page.page-account .login-link-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}


body.admin-page.page-account .login-link-editor__card{padding:1rem;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:14px;background:rgba(255,255,255,.025);display:grid;gap:.7rem}


body.admin-page.page-account .login-link-editor__card h3{margin:0}


@media (max-width:760px){body.admin-page.page-account .account-three, body.admin-page.page-account .login-link-editor{grid-template-columns:1fr}}




/* ===== page-chatbot.css | escopo: chatbot ===== */
/* Extraído de admin/chatbot.php para centralizar a apresentação. */


/* Switch estilizado */

    
body.admin-page.page-chatbot .switch-wrapper{
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 10px 0 15px 0;
        flex-wrap: wrap;
    }

    
body.admin-page.page-chatbot .switch{
        position: relative;
        width: 48px;
        height: 26px;
        flex-shrink: 0;
    }

    
body.admin-page.page-chatbot .switch input{
        opacity: 0;
        width: 0;
        height: 0;
    }

    
body.admin-page.page-chatbot .slider{
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .3s;
        border-radius: 26px;
    }

    
body.admin-page.page-chatbot .slider:before{
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

    
body.admin-page.page-chatbot .switch input:checked + .slider{
        background-color: #4CAF50;
    }

    
body.admin-page.page-chatbot .switch input:checked + .slider:before{
        transform: translateX(22px);
    }

    
body.admin-page.page-chatbot .switch-label{
        font-size: 0.95em;
        opacity: 0.8;
    }


    
/* Botão toggle na tabela */

    
body.admin-page.page-chatbot .toggle-btn{
        font-weight: bold;
        padding: 2px 10px;
        border-radius: 12px;
        border: 1px solid transparent;
        background: none;
        cursor: pointer;
        font-size: 0.9em;
        transition: 0.2s;
    }

    
body.admin-page.page-chatbot .toggle-btn.active{
        background: #e8f5e9;
        color: #2e7d32;
        border-color: #a5d6a7;
    }

    
body.admin-page.page-chatbot .toggle-btn.inactive{
        background: #fce4ec;
        color: #c62828;
        border-color: var(--err);
    }

    
body.admin-page.page-chatbot .toggle-btn:hover{
        opacity: 0.8;
    }




/* ===== page-clients.css | escopo: clients ===== */
/* Extraído de admin/clients.php para centralizar a apresentação. */


/* Tabela desktop: cabe no painel sem esconder a coluna Ações. */


body.admin-page.page-clients .clients-table-wrap{
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-gutter: stable;
}


body.admin-page.page-clients .clients-table{
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
}


body.admin-page.page-clients .clients-table th, body.admin-page.page-clients .clients-table td{
    padding: .68rem .52rem;
}


body.admin-page.page-clients .clients-table .mac-cell{
    width: 145px; min-width: 0; max-width: 145px;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; cursor: default;
}


body.admin-page.page-clients .clients-table th.col-select, body.admin-page.page-clients .clients-table td.col-select{ width: 38px; text-align: center; vertical-align: middle; }


body.admin-page.page-clients .clients-table th.col-id, body.admin-page.page-clients .clients-table td.col-id{ width: 48px; }


body.admin-page.page-clients .clients-table th.col-avatar, body.admin-page.page-clients .clients-table td.col-avatar{ width: 56px; text-align: center; }


body.admin-page.page-clients .clients-table th:nth-child(4), body.admin-page.page-clients .clients-table td:nth-child(4){ width: 145px; }


body.admin-page.page-clients .clients-table th:nth-child(5), body.admin-page.page-clients .clients-table td:nth-child(5){ width: 145px; }


body.admin-page.page-clients .clients-table th:nth-child(6), body.admin-page.page-clients .clients-table td:nth-child(6){ width: 82px; }


body.admin-page.page-clients .clients-table th:nth-child(7), body.admin-page.page-clients .clients-table td:nth-child(7){ width: 138px; white-space: nowrap; }


body.admin-page.page-clients .clients-table th:nth-child(8), body.admin-page.page-clients .clients-table td:nth-child(8){ width: 92px; white-space: nowrap; }


body.admin-page.page-clients .clients-table th:nth-child(9), body.admin-page.page-clients .clients-table td:nth-child(9){ width: 170px; }


body.admin-page.page-clients .clients-table th.col-actions, body.admin-page.page-clients .clients-table td.col-actions{
    width: 62px;
    min-width: 62px;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    right: 0;
    z-index: 8;
    background: #0b1318;
    box-shadow: -8px 0 14px rgba(0,0,0,.22);
}


body.admin-page.page-clients .clients-table th.col-actions{
    z-index: 10;
    background: #0f2433;
}


body.admin-page.page-clients .clients-table tr:hover td.col-actions{ background: #101a21; }


/* Quando o menu de ações estiver aberto, esta célula precisa ficar acima
   das demais células sticky da coluna Ações. Sem isso, as células das
   linhas seguintes cobrem parte do menu e dão a impressão de botões cortados. */


body.admin-page.page-clients .clients-table td.col-actions.menu-open{
    z-index: 500 !important;
    overflow: visible;
}


body.admin-page.page-clients .clients-table td.col-note{
    min-width: 0; max-width: 170px;
    color: rgba(var(--accent-deep-rgb), .75); font-size: .84rem; line-height: 1.25;
    overflow-wrap: anywhere;
}


body.admin-page.page-clients .table-avatar{ width: 2.2rem; height: 2.2rem; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; color:#fff; background:linear-gradient(135deg,var(--accent),#7a1620); box-shadow:0 4px 12px rgba(var(--accent-deep-rgb), .18); }


body.admin-page.page-clients .clients-table th.col-id, body.admin-page.page-clients .clients-table td.col-id{ width: 48px; text-align: center; white-space: nowrap; }


body.admin-page.page-clients .clients-table td.col-id{ color: #f1f1f1; font-weight: 700; }


body.admin-page.page-clients .clients-table td.col-value{ white-space: nowrap; color: #8df0ba; font-weight: 700; }


body.admin-page.page-clients .name-cell{ line-height: 1.3; max-width: 160px; vertical-align: middle; }


body.admin-page.page-clients .name-cell .name-stack{ display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; min-width: 0; }


body.admin-page.page-clients .name-cell .name-stack > *{ max-width: 100%; }


/* Selo de conta de teste (chatbot / automático): azul, para não confundir com os status */
body.admin-page.page-clients .badge.trial-badge{
    gap: .3rem; white-space: nowrap; font-size: .68rem; padding: .14rem .5rem;
    background: rgba(56, 189, 248, .14); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, .38);
}
html[data-theme="light"] body.admin-page.page-clients .badge.trial-badge{
    background: rgba(2, 132, 199, .10); color: #075985; border-color: rgba(2, 132, 199, .35);
}
body.admin-page.page-clients .client-card-title .badge.trial-badge{ margin-top: .25rem; }
body.admin-page.page-clients .badge.trial-badge .icon,
body.admin-page.page-clients .badge.trial-badge i{ margin: 0; }


body.admin-page.page-clients .name-cell .name-main{ font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


body.admin-page.page-clients .name-cell .name-sub{ font-size: .78rem; opacity: .65; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


body.admin-page.page-clients .name-cell .name-sub .icon{ margin-right: .3rem; }


body.admin-page.page-clients .icon{ vertical-align: -3px; display: inline-block; flex: none; margin-right: .4rem; }


body.admin-page.page-clients .row-menu summary .icon{ margin: 0; }


body.admin-page.page-clients .row-menu{ position: relative; display: inline-block; }


body.admin-page.page-clients .row-menu summary{
    list-style: none; cursor: pointer; user-select: none;
    width: 2.1rem; height: 2.1rem; line-height: 2.1rem; text-align: center;
    border-radius: 999px; font-weight: 700; font-size: 1.1rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    color: inherit; display: flex; align-items: center; justify-content: center;
}


body.admin-page.page-clients .row-menu summary .icon{ margin: 0; }


body.admin-page.page-clients .row-menu summary::-webkit-details-marker{ display: none; }


body.admin-page.page-clients .row-menu[open] summary{ background: rgba(var(--accent-deep-rgb), .18); border-color: rgba(var(--accent-deep-rgb), .5); }


body.admin-page.page-clients .row-menu-list{
    position: fixed; z-index: 200;
    min-width: 170px; padding: .4rem;
    background: #202331; border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: .15rem;
    visibility: hidden;
}


body.admin-page.page-clients .row-menu[open] .row-menu-list{ visibility: visible; }


body.admin-page.page-clients .row-menu-list a, body.admin-page.page-clients .row-menu-list button{
    display: flex; align-items: center; gap: .1rem; width: 100%; min-height: 2.45rem;
    box-sizing: border-box; text-align: left; background: none; border: none;
    color: #eee; padding: .55rem .7rem; border-radius: 7px; font: inherit;
    font-size: .9rem; line-height: 1.2; cursor: pointer;
}


body.admin-page.page-clients .row-menu-list a:hover, body.admin-page.page-clients .row-menu-list button:hover{ background: rgba(255,255,255,.075); }


body.admin-page.page-clients .row-menu-list form{ margin: 0; width: 100%; }


body.admin-page.page-clients .row-menu-list .icon{ width: 1.15rem; margin-right: .45rem; text-align: center; }


body.admin-page.page-clients .row-menu-list .action-edit{ color:#fff; background:#6f252a; border:1px solid #8e343a; }


body.admin-page.page-clients .row-menu-list .btn.secondary{ color:#fff; background:var(--accent-deep); border:1px solid var(--accent-deep); box-shadow:none; }


body.admin-page.page-clients .row-menu-list .action-pix{ color:#fff; background:#087f69; border:1px solid #0aa884; }


body.admin-page.page-clients .row-menu-list .action-whatsapp{ color:#fff; background:#147a3a; border:1px solid #1f9d50; }


body.admin-page.page-clients .row-menu-list .action-sync{ color:#fff; background:var(--accent-deep); border:1px solid var(--accent); }


body.admin-page.page-clients .row-menu-list .action-block{ color:#fff; background:#8b5b12; border:1px solid #ad751c; }


body.admin-page.page-clients .row-menu-list .action-unblock{ color:#fff; background:#277a3b; border:1px solid #35994d; }


body.admin-page.page-clients .row-menu-list button.danger, body.admin-page.page-clients .row-menu-list .action-danger{ color:#fff; background:#922f3a; border:1px solid #b33b49; }


body.admin-page.page-clients .row-menu-list .action-edit:hover, body.admin-page.page-clients .row-menu-list .btn.secondary:hover, body.admin-page.page-clients .row-menu-list .action-pix:hover, body.admin-page.page-clients .row-menu-list .action-whatsapp:hover, body.admin-page.page-clients .row-menu-list .action-sync:hover, body.admin-page.page-clients .row-menu-list .action-block:hover, body.admin-page.page-clients .row-menu-list .action-unblock:hover, body.admin-page.page-clients .row-menu-list button.danger:hover, body.admin-page.page-clients .row-menu-list .action-danger:hover{ filter:brightness(1.12); transform:none; }


@media (max-width: 1180px) and (min-width: 721px){body.admin-page.page-clients .clients-table{ min-width: 900px; }
body.admin-page.page-clients .clients-table th, body.admin-page.page-clients .clients-table td{ padding-left: .42rem; padding-right: .42rem; font-size: .88rem; }
body.admin-page.page-clients .clients-table th:nth-child(4), body.admin-page.page-clients .clients-table td:nth-child(4){ width: 132px; }
body.admin-page.page-clients .clients-table th:nth-child(5), body.admin-page.page-clients .clients-table td:nth-child(5){ width: 132px; }
body.admin-page.page-clients .clients-table th:nth-child(7), body.admin-page.page-clients .clients-table td:nth-child(7){ width: 124px; }
body.admin-page.page-clients .clients-table th:nth-child(9), body.admin-page.page-clients .clients-table td:nth-child(9){ width: 145px; }
body.admin-page.page-clients .name-cell{ max-width: 125px; }}


@media (max-width: 560px){body.admin-page.page-clients .clients-table .col-code, body.admin-page.page-clients .clients-table .col-reseller{ display: none; }}


body.admin-page.page-clients .clients-toolbar{ display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }


/* Selecionar todos: mantém a função, mas sem o botão/descrição grande. */


body.admin-page.page-clients .select-all-wrap{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.55rem; height:2.55rem; padding:0; margin:0;
    border:0; border-radius:999px; background:transparent;
    color:#eef3f7; cursor:pointer; flex:0 0 auto;
}


body.admin-page.page-clients .select-all-wrap:hover{ background:rgba(var(--accent-deep-rgb), .07); }


body.admin-page.page-clients .select-all-wrap .select-checkbox{ flex:0 0 auto; margin:0; }


body.admin-page.page-clients .select-all-wrap > span{ display:none !important; }


body.admin-page.page-clients .btn.danger{ background: rgba(var(--err-rgb), .16); color: var(--err); border: 1px solid rgba(var(--err-rgb), .55); }


body.admin-page.page-clients .btn.danger:hover{ background: rgba(var(--err-rgb), .28); }


body.admin-page.page-clients .client-cards{ display: none; }


body.admin-page.page-clients .client-card{
    position: relative; margin-bottom: 1.2rem; border-radius: 16px; overflow: hidden;
    background: #0c1217; border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.35);
}


body.admin-page.page-clients .client-card.status-pending{ border-left-color: var(--warn); }


body.admin-page.page-clients .client-card.status-blocked{ border-left-color: #7a1620; }


body.admin-page.page-clients .client-card-header{
    display: flex; align-items: center; justify-content: flex-start; gap: .55rem; padding: .55rem .75rem 0;
}


body.admin-page.page-clients .client-card-id{ color: rgba(var(--accent-deep-rgb), .62); font-size: .78rem; }


body.admin-page.page-clients .chk-wrap{ display: inline-flex; }


body.admin-page.page-clients .select-checkbox{
    appearance: none; -webkit-appearance: none; width: 1.25rem; height: 1.25rem;
    padding: 0; border-radius: 50%; cursor: pointer; vertical-align: middle;
    border: 2px solid rgba(255,255,255,.55); background: rgba(0,0,0,.25);
    transition: .16s ease;
}


body.admin-page.page-clients .select-checkbox:hover{ border-color: #5cbbff; box-shadow: 0 0 0 4px rgba(var(--accent-deep-rgb), .12); }


body.admin-page.page-clients .select-checkbox:checked{ border-color: #5cbbff; background: #5cbbff; box-shadow: inset 0 0 0 4px #0f1c25; }


body.admin-page.page-clients .select-checkbox:focus-visible{ outline: 3px solid rgba(var(--accent-deep-rgb), .3); outline-offset: 2px; }


body.admin-page.page-clients .client-card-body{ padding: .55rem .9rem .9rem; }


body.admin-page.page-clients .client-card-title{ display: flex; align-items: center; gap: .8rem; margin-bottom: .3rem; }


body.admin-page.page-clients .client-card-title .avatar{
    width: 3.15rem; height: 3.15rem; border-radius: 999px; flex: none;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
    background: linear-gradient(135deg, #5fbcff, #7a1620); color: #fff; font-size: 1rem;
    box-shadow: 0 6px 18px rgba(var(--accent-deep-rgb), .22);
}


body.admin-page.page-clients .client-card-title strong{ display: block; font-size: 1.08rem; color: #eef3f7; line-height: 1.2; }


body.admin-page.page-clients .client-card-row{
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .62rem 0; border-top: 1px solid rgba(255,255,255,.06);
}


body.admin-page.page-clients .client-card-row:first-of-type{ border-top: none; }


body.admin-page.page-clients .client-card-row.mac-row{ margin-top: .25rem; }


body.admin-page.page-clients .ccr-label{ color: #a2b9ca; font-size: .85rem; display: flex; align-items: center; flex: 0 0 auto; }


body.admin-page.page-clients .ccr-label .icon{ margin-right: .4rem; }


body.admin-page.page-clients .ccr-value{ color: #eee; font-size: .9rem; text-align: right; max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


body.admin-page.page-clients .ccr-value.mac-full{ font-family: ui-monospace, Consolas, monospace; letter-spacing: .2px; font-size: .84rem; }


body.admin-page.page-clients .ccr-value.value-full{ color:#7ef0b7; font-weight:800; }


body.admin-page.page-clients .ccr-value.obs-value{ white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; line-height: 1.3; }


body.admin-page.page-clients .status-wrap{ display: flex; justify-content: flex-end; align-items: center; gap: .35rem; flex-wrap: wrap; }


body.admin-page.page-clients .status-wrap .badge{ margin: 0; }


body.admin-page.page-clients .client-card-actions{
    display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
    padding: 0 .9rem .9rem;
}


body.admin-page.page-clients .client-card-actions form{ margin: 0; }


body.admin-page.page-clients .client-card-actions form .card-btn{ width: 100%; }


body.admin-page.page-clients .client-card-actions .action-delete-wrap{ grid-column: 1 / -1; }


body.admin-page.page-clients .card-btn{
    display: flex; align-items: center; justify-content: center; gap: .35rem; text-align: center;
    min-height: 42px; padding: .58rem .5rem; border-radius: 10px; font-weight: 600;
    text-decoration: none; border: none; cursor: pointer; font-size: .88rem;
}


body.admin-page.page-clients .card-btn:not(.danger):not(.secondary):not(.notice):not(.warn):not(.pix):not(.sync):not(.unblock):not(.whatsapp){ background:#6f252a; color:#fff; border:1px solid #8e343a; }


body.admin-page.page-clients .card-btn.secondary, body.admin-page.page-clients .card-btn.notice{ background:var(--accent-deep); color:#fff; border:1px solid var(--accent-deep); }


body.admin-page.page-clients .card-btn.pix{ background:#087f69; color:#fff; border:1px solid #0aa884; }


body.admin-page.page-clients .card-btn.whatsapp{ background:#147a3a; color:#fff; border:1px solid #1f9d50; }


body.admin-page.page-clients .badge.expiring{ background: rgba(var(--warn-rgb), .16); color: #ffab00; border: 1px solid rgba(var(--warn-rgb), .4); margin-left: 6px; }


body.admin-page.page-clients .card-btn.sync{ background:var(--accent-deep); color:#fff; border:1px solid var(--accent); }


body.admin-page.page-clients .card-btn.unblock{ background:#277a3b; color:#fff; border:1px solid #35994d; }


body.admin-page.page-clients .card-btn.warn{ background:#8b5b12; color:#fff; border:1px solid #ad751c; }


body.admin-page.page-clients .card-btn.danger{ background:#922f3a; color:#fff; border:1px solid #b33b49; }


body.admin-page.page-clients .card-btn:hover{ filter:brightness(1.10); transform:none; }


body.admin-page.page-clients .empty-state{ text-align: center; color: #a2b9ca; padding: 1.5rem 0; }


@media (max-width: 720px){body.admin-page.page-clients .clients-table-wrap{ display: none; }
body.admin-page.page-clients .client-cards{ display: block; }
body.admin-page.page-clients .client-card-title strong{ font-size: 1.1rem; }
body.admin-page.page-clients .ccr-label{ font-size: .9rem; }
body.admin-page.page-clients .ccr-value{ font-size: .95rem; max-width: 70%; }
body.admin-page.page-clients .client-card-actions{ grid-template-columns: 1fr 1fr; gap: .5rem; }}


body.admin-page.page-clients .bulk-bar{
    position: fixed; left: 50%; bottom: 1.1rem; transform: translate(-50%, 150%);
    display: flex; align-items: center; gap: 1rem; padding: .75rem 1.1rem;
    background: #0c141a; border: 1px solid rgba(var(--accent-deep-rgb), .5); border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5); color: #eef3f7; z-index: 50;
    transition: transform .25s ease; max-width: 92vw;
}


body.admin-page.page-clients .bulk-bar.show{ transform: translate(-50%, 0); }


body.admin-page.page-clients .bulk-bar .bulk-actions{ display: flex; gap: .5rem; }


body.admin-page.page-clients .bulk-bar button{ white-space: nowrap; display: flex; align-items: center; }



/* --- Estilos para o card de resumo --- */


body.admin-page.page-clients .client-summary{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    background: rgba(var(--accent-deep-rgb), .10);
    border: 1px solid rgba(var(--accent-deep-rgb), .25);
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.5rem;
    color: #e0e9f0;
    font-size: 0.95rem;
}


body.admin-page.page-clients .client-summary .summary-date{
    font-weight: 600;
    color: #b3dfff;
}


body.admin-page.page-clients .client-summary .summary-total{
    font-weight: 600;
    color: #fff;
    background: rgba(var(--accent-deep-rgb), .25);
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
}


body.admin-page.page-clients .clients-pagination{
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    flex-wrap: wrap; margin-top: 1rem; color: #bbcdda;
}


body.admin-page.page-clients .clients-pagination .pagination-info{ font-size: .9rem; }


body.admin-page.page-clients .clients-pagination .pagination-links{ display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }


body.admin-page.page-clients .clients-pagination a, body.admin-page.page-clients .clients-pagination .current-page{
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem;
    min-height: 2.2rem; padding: 0 .65rem; border-radius: 8px; text-decoration: none;
    color: #eef3f7; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}


body.admin-page.page-clients .clients-pagination a:hover{ background: rgba(var(--accent-deep-rgb), .25); }


body.admin-page.page-clients .clients-pagination .current-page{ background: rgba(var(--accent-deep-rgb), .35); border-color: rgba(var(--accent-deep-rgb), .65); font-weight: 700; }


body.admin-page.page-clients .clients-per-page{ display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; }


body.admin-page.page-clients .clients-per-page select{ width: auto; min-width: 4.5rem; }



/* --- Modais --- */


body.admin-page.page-clients .modal-overlay{
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 300; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}


body.admin-page.page-clients .modal-overlay.active{ opacity: 1; visibility: visible; }


body.admin-page.page-clients .modal{
    background: #0e151a; border: 1px solid rgba(var(--accent-deep-rgb), .4); border-radius: 20px;
    max-width: 580px; width: 95%; max-height: 90vh; overflow-y: auto;
    padding: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.7);
    position: relative; transform: scale(.96); transition: transform .25s;
}


body.admin-page.page-clients .modal-overlay.active .modal{ transform: scale(1); }


body.admin-page.page-clients .modal-header{
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .8rem; margin-bottom: 1.2rem;
}


body.admin-page.page-clients .modal-header h3{ margin: 0; color: #b3dfff; display: flex; align-items: center; gap: .5rem; }


body.admin-page.page-clients .modal-close{
    background: none; border: none; color: #a2b9ca; font-size: 1.4rem;
    cursor: pointer; padding: .2rem .5rem; border-radius: 6px;
}


body.admin-page.page-clients .modal-close:hover{ background: rgba(255,255,255,.08); color: #fff; }


body.admin-page.page-clients .modal .grid-form label{ display: block; margin-bottom: .6rem; }


body.admin-page.page-clients .modal .grid-form .m3u-row{ display: flex; gap: .5rem; }


body.admin-page.page-clients .modal .grid-form .m3u-row input{ flex: 1; }


body.admin-page.page-clients .modal .grid-form .actions{ display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }


body.admin-page.page-clients .modal input, body.admin-page.page-clients .modal select, body.admin-page.page-clients .modal textarea{
    width: 100%; box-sizing: border-box; padding: .5rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; color: #eee; font-size: .95rem;
}


body.admin-page.page-clients .modal input:focus, body.admin-page.page-clients .modal select:focus, body.admin-page.page-clients .modal textarea:focus{
    outline: none; border-color: var(--accent);
}


body.admin-page.page-clients .modal label{ color: #ddd; font-weight: 500; }


body.admin-page.page-clients .modal small{ display: block; color: #aaa; margin-top: .2rem; font-size: .85rem; }



/* Corrige o menu nativo dos selects no PC/Windows: evita lista branca com texto invisível. */


body.admin-page.page-clients .modal select, body.admin-page.page-clients #add-billing-plan, body.admin-page.page-clients #edit-billing-plan{
    color-scheme: dark;
    background-color: #0b1116 !important;
    color: #eef2f4 !important;
    border-color: rgba(var(--accent-deep-rgb), .45);
}


body.admin-page.page-clients .modal select option, body.admin-page.page-clients .modal select optgroup, body.admin-page.page-clients #add-billing-plan option, body.admin-page.page-clients #edit-billing-plan option{
    background-color: #0b1116 !important;
    color: #eef2f4 !important;
}


body.admin-page.page-clients .modal select option:checked, body.admin-page.page-clients #add-billing-plan option:checked, body.admin-page.page-clients #edit-billing-plan option:checked{
    background: var(--accent-deep) !important;
    color: #fff !important;
}



/* Campos de cobrança não podem ultrapassar o modal. */


body.admin-page.page-clients #add-billing-plan, body.admin-page.page-clients #edit-billing-plan, body.admin-page.page-clients #add-client-form select, body.admin-page.page-clients #edit-client-form select{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


body.admin-page.page-clients .pix-status{
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
    padding: 10px 14px; margin-bottom: 12px; font-size: .9rem;
}


body.admin-page.page-clients .pix-status.has-key{ background: rgba(var(--ok-rgb), .08); border-color: rgba(var(--ok-rgb), .3); }


body.admin-page.page-clients .pix-status.no-key{ background: rgba(var(--accent-deep-rgb), .08); border-color: rgba(var(--accent-deep-rgb), .3); }


body.admin-page.page-clients .pix-status a{ color: var(--ok); font-weight: 600; white-space: nowrap; }


body.admin-page.page-clients .pix-fieldset{
    border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 12px; margin: .4rem 0 .8rem;
}


body.admin-page.page-clients .pix-fieldset legend{ padding: 0 6px; opacity: .85; font-size: .9rem; }


body.admin-page.page-clients .pix-fieldset .pix-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }


body.admin-page.page-clients .pix-fieldset-head{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-bottom: .5rem;
}


body.admin-page.page-clients .pix-fieldset-head > span{ font-size: .85rem; font-weight: 600; opacity: .85; }


body.admin-page.page-clients .pix-config-btn{
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--warn); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}


body.admin-page.page-clients .pix-config-btn:hover{ text-decoration: underline; }


body.admin-page.page-clients .pix-status-hint{ margin-top: .5rem; font-size: .8rem; opacity: .85; }


body.admin-page.page-clients .pix-status-hint.has-key{ color: var(--ok); }


body.admin-page.page-clients .pix-status-hint.no-key{ color: #b3dfff; }


body.admin-page.page-clients .pix-status-hint code{ background: rgba(255,255,255,.12); color: #eef3f7; padding: 1px 6px; border-radius: 5px; font-size: .82em; }


body.admin-page.page-clients .pix-qr-link{
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
    font-size: .85rem; color: #b3dfff; text-decoration: none;
}


body.admin-page.page-clients .pix-qr-link:hover{ text-decoration: underline; }


@media (max-width: 480px){body.admin-page.page-clients .modal{ padding: 1rem; }
body.admin-page.page-clients .modal .m3u-row{ flex-wrap: wrap; }
body.admin-page.page-clients .modal .m3u-row button{ width: 100%; }
body.admin-page.page-clients .modal .grid-form .actions{ flex-direction: column; }
body.admin-page.page-clients .modal .grid-form .actions button{ width: 100%; }
body.admin-page.page-clients .pix-fieldset .pix-row{ grid-template-columns: 1fr; }}


body.admin-page.page-clients #mac-input{
    font-family: "Courier New", monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}




/* ===== page-dns.css | escopo: dns ===== */
/* Extraído de admin/dns.php para centralizar a apresentação. */


/* ===== ESTILOS GERAIS ===== */


body.admin-page.page-dns .panel{
    background: #10161a;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
}



body.admin-page.page-dns .panel h2{
    margin-top: 0;
    color: #e0e9f0;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}



body.admin-page.page-dns .table-wrap{
    overflow-x: auto;
}



body.admin-page.page-dns table{
    width: 100%;
    border-collapse: collapse;
    color: #ddd;
}



body.admin-page.page-dns table th{
    text-align: left;
    padding: 0.6rem 0.4rem;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    font-weight: 600;
    color: #a2b9ca;
}



body.admin-page.page-dns table td{
    padding: 0.6rem 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
}



body.admin-page.page-dns table tr:hover td{
    background: rgba(255,255,255,0.03);
}



body.admin-page.page-dns .badge{
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}


body.admin-page.page-dns .badge.active{
    background: #d4edda;
    color: #155724;
}


body.admin-page.page-dns .badge.inactive{
    background: #f8d7da;
    color: #721c24;
}



body.admin-page.page-dns .status-badge{
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}


body.admin-page.page-dns .status-active{ background: #d4edda; color: #155724; }


body.admin-page.page-dns .status-inactive{ background: #f8d7da; color: #721c24; }



body.admin-page.page-dns .url-cell{
    display: inline-block;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}


body.admin-page.page-dns .url-cell:hover{
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}



/* ===== BOTÕES DE AÇÃO NA TABELA ===== */


body.admin-page.page-dns .row-actions{
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}


body.admin-page.page-dns .action-btn{
    border: none;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s, transform 0.1s;
    color: #fff;
    font-weight: 500;
}


body.admin-page.page-dns .action-btn:hover{
    transform: scale(1.03);
}


body.admin-page.page-dns .action-btn .label{
    font-size: 0.7rem;
    font-weight: 400;
}


body.admin-page.page-dns .action-edit{
    background: var(--accent);
}


body.admin-page.page-dns .action-edit:hover{
    background: var(--accent);
}


body.admin-page.page-dns .action-toggle{
    background: var(--warn);
    color: #212529;
}


body.admin-page.page-dns .action-toggle:hover{
    background: #e0a800;
}


body.admin-page.page-dns .action-delete{
    background: #dc3545;
}


body.admin-page.page-dns .action-delete:hover{
    background: #bb2d3b;
}



/* ===== BOTÕES PRINCIPAIS ===== */


body.admin-page.page-dns .toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}


body.admin-page.page-dns .toolbar .btn{
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
    color: #fff;
    text-decoration: none;
}


body.admin-page.page-dns .btn-red{
    background: #dc3545;
}


body.admin-page.page-dns .btn-red:hover{
    background: #bb2d3b;
}


body.admin-page.page-dns .btn-yellow{
    background: var(--warn);
    color: #212529;
}


body.admin-page.page-dns .btn-yellow:hover{
    background: #e0a800;
}



/* ===== MODAIS ===== */


body.admin-page.page-dns .modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}


body.admin-page.page-dns .modal-overlay.active{
    opacity: 1;
    visibility: visible;
}


body.admin-page.page-dns .modal{
    background: #0e151a;
    border: 1px solid rgba(var(--accent-deep-rgb), 0.4);
    border-radius: 20px;
    max-width: 620px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    position: relative;
    transform: scale(0.96);
    transition: transform 0.25s;
}


body.admin-page.page-dns .modal-overlay.active .modal{
    transform: scale(1);
}


body.admin-page.page-dns .modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.8rem;
    margin-bottom: 1.2rem;
}


body.admin-page.page-dns .modal-header h3{
    margin: 0;
    color: #b3dfff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


body.admin-page.page-dns .modal-close{
    background: none;
    border: none;
    color: #a2b9ca;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}


body.admin-page.page-dns .modal-close:hover{
    background: rgba(255,255,255,0.08);
    color: #fff;
}


body.admin-page.page-dns .modal .grid-form label{
    display: block;
    margin-bottom: 0.6rem;
}


body.admin-page.page-dns .modal .grid-form .full{
    grid-column: 1 / -1;
}


body.admin-page.page-dns .modal input, body.admin-page.page-dns .modal select, body.admin-page.page-dns .modal textarea{
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #eee;
    font-size: 0.95rem;
}


body.admin-page.page-dns .modal input:focus, body.admin-page.page-dns .modal select:focus, body.admin-page.page-dns .modal textarea:focus{
    outline: none;
    border-color: var(--accent);
}


body.admin-page.page-dns .modal label{
    color: #ddd;
    font-weight: 500;
}


body.admin-page.page-dns .modal small{
    display: block;
    color: #aaa;
    margin-top: 0.2rem;
    font-size: 0.85rem;
}


body.admin-page.page-dns .modal .actions-row{
    display: flex;
    gap: 0.6rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
}


body.admin-page.page-dns .modal .actions-row .btn{
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}


body.admin-page.page-dns .modal .actions-row .btn-primary{ background: var(--accent); }


body.admin-page.page-dns .modal .actions-row .btn-primary:hover{ background: var(--accent); }


body.admin-page.page-dns .modal .actions-row .btn-secondary{ background: #6c757d; }


body.admin-page.page-dns .modal .actions-row .btn-secondary:hover{ background: #5c636a; }


body.admin-page.page-dns .modal .actions-row .btn-warning{ background: var(--warn); color: #212529; }


body.admin-page.page-dns .modal .actions-row .btn-warning:hover{ background: #e0a800; }


body.admin-page.page-dns .modal .actions-row .btn-success{ background: #198754; }


body.admin-page.page-dns .modal .actions-row .btn-success:hover{ background: #157347; }



/* Seção dupla dentro do modal */


body.admin-page.page-dns .modal-split{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


body.admin-page.page-dns .modal-split .split-item{
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.06);
}


body.admin-page.page-dns .modal-split .split-item h4{
    margin: 0 0 0.6rem 0;
    color: #bfd3e1;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.4rem;
}


@media (min-width: 769px){body.admin-page.page-dns .modal-split{
        flex-direction: row;
    }
body.admin-page.page-dns .modal-split .split-item{
        flex: 1;
    }}


@media (max-width: 768px){body.admin-page.page-dns .toolbar .btn{ justify-content: center; flex: 1; }
body.admin-page.page-dns .action-btn .label{ display: none; }
body.admin-page.page-dns .action-btn{ padding: 0.4rem 0.6rem; }
body.admin-page.page-dns .url-cell{ max-width: 70px; }}




/* ===== page-downloads.css | escopo: downloads ===== */
/* Extraído de admin/downloads.php para centralizar a apresentação. */


body.admin-page.page-downloads .downloads-shell{
    width: min(980px, 100%);
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    overflow: hidden;
    background: #171923;
    box-shadow: 0 18px 55px rgba(0,0,0,.34);
}


body.admin-page.page-downloads .downloads-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.55rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}


body.admin-page.page-downloads .downloads-title{
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--warn);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 700;
}


body.admin-page.page-downloads .downloads-title i{ font-size: 1.25em; }


body.admin-page.page-downloads .downloads-close{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.06);
    color: #8f929d;
    box-shadow: none;
    padding: 0;
}


body.admin-page.page-downloads .downloads-close:hover{ color: #fff; transform: none; }


body.admin-page.page-downloads .downloads-body{ padding: 1.55rem; }


body.admin-page.page-downloads .downloads-intro{
    margin: 0 0 1.35rem;
    color: #a7a9b2;
    font-size: 1rem;
    line-height: 1.65;
}


body.admin-page.page-downloads .downloads-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
}


body.admin-page.page-downloads .download-card{
    --accent-card: var(--accent-2);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    padding: 1.35rem;
    background: #1b1e2b;
    min-width: 0;
}


body.admin-page.page-downloads .download-card.mobile{ --accent-card: var(--warn); }


body.admin-page.page-downloads .download-card-head{
    text-align: center;
    margin-bottom: 1.05rem;
}


body.admin-page.page-downloads .download-card-icon{
    color: var(--accent-card);
    font-size: 1.9rem;
    margin-bottom: .65rem;
}


body.admin-page.page-downloads .download-card h2{
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}


body.admin-page.page-downloads .download-version{
    display: inline-block;
    margin-top: .35rem;
    color: #8f929d;
    font-size: .82rem;
}


body.admin-page.page-downloads .download-main-btn{
    width: 100%;
    min-height: 48px;
    border-radius: 8px;
    background: var(--accent-card);
    color: #11151c;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-bottom: 1rem;
}


body.admin-page.page-downloads .download-main-btn:hover{ color: #11151c; filter: brightness(1.04); }


body.admin-page.page-downloads .download-main-btn.disabled{
    opacity: .45;
    pointer-events: none;
}


body.admin-page.page-downloads .qr-wrap{
    min-height: 220px;
    display: grid;
    place-items: center;
    margin: .15rem 0 1rem;
}


body.admin-page.page-downloads .qr-box{
    width: 220px;
    height: 220px;
    max-width: 100%;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}


body.admin-page.page-downloads .qr-box img, body.admin-page.page-downloads .qr-box canvas{ max-width: 100%; height: auto !important; }


body.admin-page.page-downloads .qr-empty{
    width: 220px;
    max-width: 100%;
    min-height: 150px;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 12px;
    color: #777b86;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
}


body.admin-page.page-downloads .code-box{
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    border-radius: 12px;
    padding: .9rem 1rem;
    text-align: center;
}


body.admin-page.page-downloads .code-label{
    color: #8f929d;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .38rem;
}


body.admin-page.page-downloads .code-value{
    color: var(--accent-card);
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: .09em;
    overflow-wrap: anywhere;
}


body.admin-page.page-downloads .code-value.empty{ color: #777b86; font-size: 1rem; letter-spacing: 0; }


body.admin-page.page-downloads .copy-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: .75rem;
}


body.admin-page.page-downloads .copy-row button{
    min-height: 42px;
    padding: .55rem .65rem;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    color: #eee;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: none;
    font-size: .84rem;
}


body.admin-page.page-downloads .copy-row button:hover{ transform: none; background: rgba(255,255,255,.10); }


body.admin-page.page-downloads .downloads-foot{
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.55rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.07);
}


body.admin-page.page-downloads .downloads-foot .btn{ box-shadow: none; }


body.admin-page.page-downloads .copy-toast{
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translate(-50%, 20px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    background: #202331;
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    border-radius: 999px;
    padding: .7rem 1rem;
    transition: .18s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}


body.admin-page.page-downloads .copy-toast.show{ opacity: 1; transform: translate(-50%, 0); }


@media (max-width: 760px){body.admin-page.page-downloads .downloads-shell{ border-radius: 18px; }
body.admin-page.page-downloads .downloads-head{ padding: 1rem 1.05rem; }
body.admin-page.page-downloads .downloads-body{ padding: 1.05rem; }
body.admin-page.page-downloads .downloads-grid{ grid-template-columns: 1fr; }
body.admin-page.page-downloads .download-card{ padding: 1.15rem; }
body.admin-page.page-downloads .qr-box{ width: 205px; height: 205px; }
body.admin-page.page-downloads .downloads-foot{ padding: .9rem 1.05rem 1.1rem; }}


@media (max-width: 420px){body.admin-page.page-downloads .downloads-title{ font-size: 1.25rem; }
body.admin-page.page-downloads .downloads-title span{ white-space: nowrap; }
body.admin-page.page-downloads .copy-row{ grid-template-columns: 1fr; }}




/* ===== page-feedbacks.css | escopo: feedbacks ===== */
/* Extraído de admin/feedbacks.php para centralizar a apresentação. */


body.admin-page.page-feedbacks .fb-toolbar{ display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }


body.admin-page.page-feedbacks .fb-toolbar form{ display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }


body.admin-page.page-feedbacks .fb-status-tabs{ display: flex; gap: .4rem; }


body.admin-page.page-feedbacks .fb-status-tabs a{
    padding: .4rem .8rem; border-radius: 999px; font-size: .85rem; text-decoration: none;
    background: rgba(255,255,255,.06); color: #eee; border: 1px solid rgba(255,255,255,.12);
}


body.admin-page.page-feedbacks .fb-status-tabs a.active{ background: rgba(139,92,246,.24); border-color: rgba(168,85,247,.7); color: #d8b4fe; }



body.admin-page.page-feedbacks .fb-card{
    background: #100b18; border: 1px solid rgba(255,255,255,.08); border-left: 4px solid #8b5cf6;
    border-radius: 12px; margin-bottom: .8rem; overflow: hidden; box-shadow: 0 8px 28px rgba(76,29,149,.10);
}


body.admin-page.page-feedbacks .fb-card.status-resolved{ border-left-color: #2fa84f; opacity: .82; }


body.admin-page.page-feedbacks .fb-card-header{
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .7rem .9rem; background: rgba(255,255,255,.03);
}


body.admin-page.page-feedbacks .fb-card-header .mac-full{ font-size: .85rem; letter-spacing: .3px; color: #e9d5ff; word-break: break-all; }


body.admin-page.page-feedbacks .fb-badge{
    font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; font-weight: 600;
    background: rgba(139,92,246,.18); color: #c4b5fd; border: 1px solid rgba(168,85,247,.45);
    white-space: nowrap;
}


body.admin-page.page-feedbacks .fb-badge.resolved{ background: rgba(var(--ok-rgb), .16); color: #7ee39a; border-color: rgba(var(--ok-rgb), .4); }


body.admin-page.page-feedbacks .fb-card-body{ padding: .9rem; }


body.admin-page.page-feedbacks .fb-card-title{ display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }


body.admin-page.page-feedbacks .fb-card-title strong{ display: block; font-size: 1.02rem; color: #f5f3ff; }


body.admin-page.page-feedbacks .fb-card-title .muted-small{ font-size: .78rem; color: #a99bbd; }


body.admin-page.page-feedbacks .fb-card-row{
    display: flex; align-items: center; gap: .5rem; padding: .4rem 0;
    border-top: 1px solid rgba(255,255,255,.06); font-size: .88rem;
}


body.admin-page.page-feedbacks .fb-card-row:first-of-type{ border-top: none; }


body.admin-page.page-feedbacks .fb-row-label{ display: flex; align-items: center; gap: .4rem; color: #a99bbd; min-width: 108px; flex: none; }


body.admin-page.page-feedbacks .fb-row-value{ color: #eee; word-break: break-word; }


body.admin-page.page-feedbacks .fb-card-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0 .9rem .9rem; }


body.admin-page.page-feedbacks .fb-btn{
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
    border: none; cursor: pointer; text-decoration: none;
}


body.admin-page.page-feedbacks .fb-btn.resolve{ background: rgba(var(--ok-rgb), .18); color: #7ee39a; border: 1px solid rgba(var(--ok-rgb), .4); }


body.admin-page.page-feedbacks .fb-btn.reopen{ background: rgba(var(--warn-rgb), .14); color: #ffcf85; border: 1px solid rgba(var(--warn-rgb), .4); }


body.admin-page.page-feedbacks .fb-btn.danger{ background: rgba(var(--err-rgb), .15); color: #c4b5fd; border: 1px solid rgba(168,85,247,.45); }


body.admin-page.page-feedbacks .fb-card-actions form{ margin: 0; display: contents; }


body.admin-page.page-feedbacks .fb-stats{ display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }


body.admin-page.page-feedbacks .fb-stat{
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; padding: .6rem .9rem; font-size: .85rem; color: #ccc;
}


body.admin-page.page-feedbacks .fb-stat strong{ color: #fff; font-size: 1.1rem; display: block; }


body.admin-page.page-feedbacks .icon{ vertical-align: -3px; display: inline-block; flex: none; }




/* ===== page-index.css | escopo: dash ===== */
/* Extraído de admin/index.php para centralizar a apresentação. */


body.admin-page.page-dash{
        --ms-red: var(--accent);
        --ms-red-2: var(--accent-deep);
        --ms-red-line: rgba(var(--accent-deep-rgb), 0.36);
        --ms-line: rgba(255,255,255,0.10);
        --ms-text: #f7f7fb;
        --ms-muted: #a8acbb;
        --ms-card: rgba(16,17,24,0.92);
        --ms-bg: #050507;
    }


    
body.admin-page.page-dash .stats-grid{
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }


    
body.admin-page.page-dash .stats-card{
        background: var(--ms-card);
        border-radius: 16px;
        padding: 18px 16px;
        text-align: center;
        border: 1px solid var(--ms-red-line);
        text-decoration: none;
        transition: all .25s ease;
    }

    
body.admin-page.page-dash .stats-card:hover{
        transform: translateY(-4px);
        border-color: var(--ms-red);
        box-shadow: 0 10px 25px rgba(var(--accent-deep-rgb), 0.22);
    }

    
body.admin-page.page-dash .stats-icon{
        width: 46px;
        height: 46px;
        margin: 0 auto 10px;
        border-radius: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--ms-red-2), var(--ms-red));
    }

    
body.admin-page.page-dash .stats-icon svg{ width: 22px; height: 22px; stroke: #fff; }

    
body.admin-page.page-dash .stats-number{ font-size: 1.5rem; font-weight: 700; color: var(--ms-text); line-height: 1.2; }

    
body.admin-page.page-dash .stats-label{ font-size: .72rem; color: var(--ms-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }


    
body.admin-page.page-dash .charts-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }


    
body.admin-page.page-dash .chart-card{
        background: var(--ms-card);
        border-radius: 16px;
        padding: 20px;
        border: 1px solid var(--ms-red-line);
    }

    
body.admin-page.page-dash .chart-card h4{ margin: 0 0 16px; font-size: 15px; color: #fff; display: flex; align-items: center; gap: 8px; }

    
body.admin-page.page-dash .chart-card h4 svg{ width: 18px; height: 18px; stroke: var(--ms-muted); }

    
body.admin-page.page-dash .chart-container{ height: 260px; position: relative; }


    
body.admin-page.page-dash .dns-legend{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ms-red-line); display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }

    
body.admin-page.page-dash .dns-item{ display: flex; align-items: center; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.05); transition: background .2s ease; }

    
body.admin-page.page-dash .dns-item:hover{ background: rgba(255,255,255,0.09); }

    
body.admin-page.page-dash .dns-item .dot{ width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; flex-shrink: 0; }

    
body.admin-page.page-dash .dns-item .name{ color: var(--ms-text); font-weight: 600; font-size: 12.5px; flex: 1; }

    
body.admin-page.page-dash .dns-item .count{ color: var(--ms-muted); font-size: 12px; margin-left: 6px; white-space: nowrap; }

    
body.admin-page.page-dash .dns-item .pct{ color: var(--ms-text); font-size: 11.5px; font-weight: 700; margin-left: 8px; min-width: 34px; text-align: right; }


    
body.admin-page.page-dash .movement-legend{ display: flex; justify-content: center; gap: 24px; margin-top: 14px; }

    
body.admin-page.page-dash .movement-legend span{ display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ms-text); }

    
body.admin-page.page-dash .movement-legend .dot{ width: 12px; height: 12px; border-radius: 4px; }


    
body.admin-page.page-dash .movement-totals{ display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ms-line); text-align: center; }

    
body.admin-page.page-dash .movement-totals h3{ margin: 4px 0 0; font-size: 1.4rem; }

    
body.admin-page.page-dash .movement-totals small{ color: var(--ms-muted); }


    
body.admin-page.page-dash .movement-saldo{ margin-top: 12px; text-align: center; font-size: 15px; font-weight: 700; color: #00b4d8; display: flex; align-items: center; justify-content: center; gap: 8px; }

    
body.admin-page.page-dash .movement-saldo svg{ width: 18px; height: 18px; }

    
body.admin-page.page-dash .movement-saldo.negative{ color: var(--ms-red); }


    
@media (max-width: 1250px){body.admin-page.page-dash .stats-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}

    
@media (max-width: 900px){body.admin-page.page-dash .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.admin-page.page-dash .charts-grid{ grid-template-columns: 1fr; }}


    
body.admin-page.page-dash .billing-panel{ margin-bottom: 24px; }

    
body.admin-page.page-dash .billing-panel h2{ display: flex; align-items: center; gap: 8px; }

    
body.admin-page.page-dash .billing-panel h2 svg{ width: 19px; height: 19px; stroke: #ffab00; }

    
body.admin-page.page-dash .billing-list{ display: grid; gap: 10px; margin-top: 14px; }

    
body.admin-page.page-dash .billing-row{
        display: flex; align-items: center; gap: 12px; padding: 12px 14px;
        background: rgba(255,255,255,0.04); border: 1px solid var(--ms-line); border-radius: 12px;
        flex-wrap: wrap;
    }

    
body.admin-page.page-dash .billing-row.overdue{ border-color: rgba(var(--accent-deep-rgb), 0.4); background: rgba(var(--accent-deep-rgb), 0.06); }

    
body.admin-page.page-dash .billing-name{ font-weight: 700; color: var(--ms-text); font-size: 14px; }

    
body.admin-page.page-dash .billing-sub{ font-size: 12px; color: var(--ms-muted); }

    
body.admin-page.page-dash .billing-due{
        font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
        background: rgba(var(--warn-rgb), .16); color: #ffab00; border: 1px solid rgba(var(--warn-rgb), .4);
        white-space: nowrap;
    }

    
body.admin-page.page-dash .billing-row.overdue .billing-due{ background: rgba(var(--accent-deep-rgb), .16); color: #6bc1ff; border-color: rgba(var(--accent-deep-rgb), .45); }

    
body.admin-page.page-dash .billing-value{ font-size: 13px; color: var(--ok); font-weight: 700; margin-left: auto; }

    
body.admin-page.page-dash .billing-wa{
        display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
        background: rgba(var(--ok-rgb), .16); color: var(--ok); border: 1px solid rgba(var(--ok-rgb), .4);
        text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap;
    }

    
body.admin-page.page-dash .billing-wa:hover{ background: rgba(var(--ok-rgb), .28); }

    
body.admin-page.page-dash .billing-wa svg{ width: 15px; height: 15px; fill: var(--ok); }

    
body.admin-page.page-dash .billing-wa.disabled{ opacity: .4; pointer-events: none; background: rgba(255,255,255,.06); color: var(--ms-muted); border-color: var(--ms-line); }

    
body.admin-page.page-dash .billing-empty{ color: var(--ms-muted); font-size: 13px; margin-top: 12px; }



/* Dashboard mobile: mantém os gráficos compactos e evita canvas gigante. */


body.admin-page.page-dash .chart-card{ min-width: 0; overflow: hidden; }


body.admin-page.page-dash .chart-container{ width: 100%; min-width: 0; height: 280px; }


body.admin-page.page-dash .chart-container canvas{ display: block !important; width: 100% !important; height: 100% !important; max-width: 100%; }



@media (max-width: 900px){body.admin-page.page-dash .charts-grid{ gap: 16px; }
body.admin-page.page-dash .chart-card{ padding: 18px 16px; border-radius: 18px; }
body.admin-page.page-dash .chart-card h4{ font-size: 16px; line-height: 1.25; margin-bottom: 14px; }
body.admin-page.page-dash .chart-container{ height: 250px; }
body.admin-page.page-dash .dns-legend{ max-height: none; overflow: visible; }
body.admin-page.page-dash .dns-item{ gap: 4px; padding: 9px 10px; }
body.admin-page.page-dash .dns-item .name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin-page.page-dash .movement-legend{ gap: 14px; flex-wrap: wrap; }
body.admin-page.page-dash .movement-totals{ margin-top: 14px; }
body.admin-page.page-dash .panel{ overflow: hidden; }
body.admin-page.page-dash .table-wrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.admin-page.page-dash .table-wrap table{ min-width: 680px; }}



@media (max-width: 560px){body.admin-page.page-dash .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.admin-page.page-dash .stats-card{ padding: 14px 10px; }
body.admin-page.page-dash .stats-icon{ width: 42px; height: 42px; }
body.admin-page.page-dash .chart-container{ height: 220px; }
body.admin-page.page-dash .chart-card{ padding: 16px 14px; }
body.admin-page.page-dash .dns-item .count{ font-size: 11px; }
body.admin-page.page-dash .dns-item .pct{ min-width: 38px; }
body.admin-page.page-dash .movement-legend span{ font-size: 12px; }}




/* ===== page-login.css | escopo: login ===== */
/* Extraído de admin/login.php para centralizar a apresentação. */


/* Login responsivo: campos e botão sempre com a mesma largura */

        
body.page-login .auth-body{
            min-height: 100vh;
            min-height: 100dvh;
            display: grid;
            place-items: center;
            padding: clamp(.8rem, 2.5vw, 1.5rem);
        }


        
body.page-login .auth-card{
            width: min(100%, 390px);
            margin: 0 auto;
            padding: clamp(1rem, 3vw, 1.45rem);
            border-radius: clamp(16px, 2vw, 22px);
        }


        
body.page-login .auth-header{
            display: flex;
            align-items: center;
            gap: clamp(.75rem, 2vw, 1rem);
            margin-bottom: clamp(1rem, 2.5vw, 1.3rem);
            min-width: 0;
        }


        
body.page-login .auth-header .auth-logo{
            width: clamp(58px, 8vw, 72px);
            height: clamp(58px, 8vw, 72px);
            object-fit: contain;
            flex: 0 0 auto;
        }


        
body.page-login .auth-header .auth-text{
            display: flex;
            flex-direction: column;
            min-width: 0;
        }


        
body.page-login .auth-header .auth-text h1{
            margin: 0;
            color: #fff;
            font-size: clamp(1.25rem, 3vw, 1.55rem);
            line-height: 1.1;
            overflow-wrap: anywhere;
        }


        
body.page-login .auth-header .auth-text .subtitle{
            margin: .3rem 0 0;
            font-size: clamp(.78rem, 2vw, .9rem);
            color: var(--muted, rgba(var(--accent-deep-rgb), .72));
        }


        
body.page-login .auth-card form{
            display: grid;
            gap: .85rem;
            width: 100%;
        }


        
body.page-login .auth-card label{
            width: 100%;
            gap: .36rem;
        }


        
body.page-login .input-icon{
            position: relative;
            width: 100%;
        }


        
body.page-login .input-icon svg{
            position: absolute;
            left: .9rem;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            fill: currentColor;
            color: rgba(255,255,255,.48);
            pointer-events: none;
        }


        
body.page-login .input-icon input{
            display: block;
            width: 100%;
            min-width: 0;
            height: 48px;
            padding: .65rem .9rem .65rem 2.65rem;
            border-radius: 12px;
        }


        
body.page-login .auth-card button[type="submit"]{
            width: 100%;
            min-height: 48px;
            margin: .15rem 0 0;
            padding: .65rem 1rem;
            border-radius: 12px;
            font-size: .98rem;
            line-height: 1;
        }


        
body.page-login .btn-icon{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
        }


        
body.page-login .auth-card > .muted{
            margin: .75rem 0 0 !important;
            text-align: center;
        }


        
body.page-login .link-icon{
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            text-decoration: none;
        }

        
body.page-login .link-icon svg{
            width: 18px;
            height: 18px;
            fill: currentColor;
        }


        
/* Celulares estreitos */

        
@media (max-width: 480px){body.page-login .auth-body{ padding: .75rem; }
body.page-login .auth-card{
                width: 100%;
                padding: 1rem;
                border-radius: 18px;
            }
body.page-login .auth-header .auth-logo{
                width: 56px;
                height: 56px;
            }
body.page-login .input-icon input, body.page-login .auth-card button[type="submit"]{
                min-height: 46px;
                height: 46px;
            }}


        
/* Tablets e telas grandes: evita um card exagerado */

        
@media (min-width: 900px){body.page-login .auth-card{ width: 380px; }}


        
/* Telas baixas / celular deitado */

        
@media (max-height: 620px){body.page-login .auth-body{
                place-items: center;
                padding: .6rem;
            }
body.page-login .auth-card{
                max-height: calc(100dvh - 1.2rem);
                overflow-y: auto;
                padding: .9rem 1rem;
            }
body.page-login .auth-header{
                margin-bottom: .75rem;
            }
body.page-login .auth-header .auth-logo{
                width: 50px;
                height: 50px;
            }
body.page-login .auth-card form{ gap: .65rem; }
body.page-login .input-icon input, body.page-login .auth-card button[type="submit"]{
                min-height: 44px;
                height: 44px;
            }}



/* Centraliza o conjunto logo + textos sem alterar sua composição horizontal. */


body.page-login .auth-header{
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}



/* Botão mostrar/ocultar senha. */


body.page-login .input-icon:has(#admin-password) input{
    padding-right: 3.15rem;
}


body.page-login .password-toggle{
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(255,255,255,.58);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: none !important;
}


body.page-login .password-toggle:hover, body.page-login .password-toggle:focus-visible{
    color: var(--accent, #22d3ee);
    background: rgba(34,211,238,.08) !important;
    outline: none;
}


body.page-login .password-toggle svg{
    position: static;
    transform: none;
    width: 21px;
    height: 21px;
    fill: currentColor;
    pointer-events: none;
}


body.page-login .password-toggle .eye-closed{ display: none; }


body.page-login .password-toggle.is-visible .eye-open{ display: none; }


body.page-login .password-toggle.is-visible .eye-closed{ display: block; }



/* Correção final: o olho fica somente dentro do campo, sem herdar o botão azul global. */


body.page-login .auth-card form .input-icon > button.password-toggle, body.page-login .auth-card .input-icon > #password-toggle{
    position: absolute !important;
    left: auto !important;
    right: 12px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.62) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}


body.page-login .auth-card form .input-icon > button.password-toggle:hover, body.page-login .auth-card form .input-icon > button.password-toggle:focus, body.page-login .auth-card form .input-icon > button.password-toggle:active{
    background: rgba(34,211,238,.10) !important;
    background-image: none !important;
    color: #22d3ee !important;
    box-shadow: none !important;
}


body.page-login .auth-card form .input-icon > button.password-toggle svg{
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}




/* Rodapé configurável do login — cores distintas e coerentes com cada ação. */


body.page-login .auth-body{display:block!important;padding:clamp(.8rem,2.5vw,1.5rem)!important}


body.page-login .auth-shell{width:min(100%,760px);min-height:calc(100dvh - 3rem);margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:1rem}


body.page-login .auth-card{align-self:center}


body.page-login .login-extras{width:100%;display:grid;gap:1rem}


body.page-login .login-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}


body.page-login .login-action{position:relative;min-height:72px;padding:.9rem 1rem;border-radius:18px;text-decoration:none;color:#fff;display:flex;align-items:center;gap:.85rem;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 28px rgba(0,0,0,.22);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;overflow:hidden}


body.page-login .login-action::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 45%);pointer-events:none}


body.page-login .login-action:hover, body.page-login .login-action:focus-visible{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 34px rgba(0,0,0,.28);outline:none}


body.page-login .login-action:active{transform:translateY(0) scale(.99)}


/* Telegram usa o azul/ciano reconhecível do serviço, sem dominar toda a tela. */


body.page-login .login-action--telegram{background:linear-gradient(135deg,#229ED9 0%,#168AC2 58%,#0E6FA4 100%)}


/* Loja ganha laranja/dourado para diferenciar claramente a função. */


body.page-login .login-action--store{background:linear-gradient(135deg,#ff9f1c 0%,#ff7a18 55%,#e85d04 100%)}


body.page-login .login-action.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;filter:saturate(.45)}


body.page-login .login-action__icon{position:relative;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}


body.page-login .login-action__icon svg{width:23px;height:23px;fill:currentColor}


body.page-login .login-action>span:nth-child(2){position:relative;min-width:0;flex:1}


body.page-login .login-action strong, body.page-login .login-action small{display:block}
body.page-login .login-action strong{font-size:.94rem;letter-spacing:.015em}
body.page-login .login-action small{font-size:.76rem;opacity:.82;margin-top:.14rem}


body.page-login .login-action__arrow{position:relative;font-size:1.7rem;line-height:1;opacity:.72;margin-left:auto}


body.page-login .login-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.09);padding-top:.9rem}


body.page-login .login-feature{min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.38rem;text-align:center;border-right:1px solid rgba(255,255,255,.08);color:var(--muted,#9fb0c4)}


body.page-login .login-feature:last-child{border-right:0}
body.page-login .login-feature span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.32);background:rgba(34,211,238,.07);color:#22d3ee}


body.page-login .login-feature strong{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}


@media (max-width:600px){body.page-login .auth-shell{justify-content:flex-start;min-height:0}
body.page-login .login-action-grid{grid-template-columns:1fr}
body.page-login .login-feature-grid{grid-template-columns:1fr}
body.page-login .login-feature{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);flex-direction:row;justify-content:flex-start;padding:.65rem}
body.page-login .login-feature:last-child{border-bottom:0}}




/* ===== page-macs.css | escopo: macs ===== */
/* Extraído de admin/macs.php para centralizar a apresentação. */


body.admin-page.page-macs .macs-page{width:min(1180px,100%);margin:0 auto}
body.admin-page.page-macs .macs-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
body.admin-page.page-macs .macs-hero h2{margin:0;font-size:clamp(1.25rem,2.8vw,1.75rem)}
body.admin-page.page-macs .macs-tools{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
body.admin-page.page-macs .macs-search{display:flex;gap:.55rem;flex:1 1 320px}
body.admin-page.page-macs .macs-search input{min-width:0;flex:1}
body.admin-page.page-macs .macs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
body.admin-page.page-macs .mac-card{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid rgba(255,255,255,.09);border-left:4px solid #34aaff;border-radius:16px;background:linear-gradient(160deg,rgba(var(--accent-deep-rgb), .97),rgba(var(--accent-deep-rgb), .98));cursor:pointer;transition:.18s ease;min-width:0}
body.admin-page.page-macs .mac-card:hover{transform:translateY(-1px);border-color:rgba(var(--accent-deep-rgb), .42)}
body.admin-page.page-macs .mac-avatar{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#5abaff,#0b73bd);color:#fff}
body.admin-page.page-macs .mac-info{min-width:0;flex:1}
body.admin-page.page-macs .mac-info strong{display:block;font-size:1.05rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.admin-page.page-macs .mac-address{margin-top:.22rem;color:#b9e2ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}
body.admin-page.page-macs .mac-meta{margin-top:.35rem;color:#969096;font-size:.8rem}
body.admin-page.page-macs .mac-open{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#fff}
body.admin-page.page-macs .mac-empty{grid-column:1/-1;padding:2rem;text-align:center;border:1px dashed rgba(255,255,255,.12);border-radius:16px;color:#aaa}



body.admin-page.page-macs .activate-overlay{display:none;position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;overflow:auto;padding:clamp(.8rem,3vw,2rem)}
body.admin-page.page-macs .activate-overlay.active{display:flex}
body.admin-page.page-macs .activate-modal{width:min(620px,100%);margin:auto;background:linear-gradient(160deg,#0c1923,#080e12);border:1px solid rgba(255,255,255,.11);border-top:5px solid #ffc400;border-bottom:5px solid #ffc400;border-radius:28px;padding:clamp(1.2rem,4vw,2rem);box-shadow:0 24px 70px rgba(0,0,0,.52)}
body.admin-page.page-macs .activate-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
body.admin-page.page-macs .activate-head h3{margin:0;color:#fff;font-size:clamp(1.35rem,4vw,1.7rem)}
body.admin-page.page-macs .activate-head p{margin:.45rem 0 0;color:#b8adb1;line-height:1.5}
body.admin-page.page-macs .activate-close{border:0;background:rgba(255,255,255,.05);color:#bbb;width:42px;height:42px;border-radius:12px;font-size:1.25rem;cursor:pointer;flex:none}
body.admin-page.page-macs .activate-form{display:grid;gap:1rem}
body.admin-page.page-macs .activate-field{display:grid;gap:.45rem}
body.admin-page.page-macs .activate-field span{font-size:.86rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700;color:#ecf1f5}
body.admin-page.page-macs .activate-field input{width:100%;box-sizing:border-box;min-height:54px;border-radius:14px;border:1px solid rgba(var(--accent-deep-rgb), .33);background:#091116;color:#fff;padding:.75rem 1rem;font-size:1rem;outline:none}
body.admin-page.page-macs .activate-field input:focus{border-color:#47b2ff;box-shadow:0 0 0 3px rgba(var(--accent-deep-rgb), .10)}
body.admin-page.page-macs .activate-field small{color:#8f8588;line-height:1.4}
body.admin-page.page-macs .activate-submit{margin-top:.3rem;width:100%;min-height:58px;border:0;border-radius:15px;color:#fff;font-weight:800;font-size:1.02rem;cursor:pointer;background:linear-gradient(180deg,#62beff,var(--accent));box-shadow:0 12px 24px rgba(var(--accent-deep-rgb), .28);display:flex;align-items:center;justify-content:center;gap:.65rem}
body.admin-page.page-macs .activate-submit:hover{filter:brightness(1.05)}
body.admin-page.page-macs .activate-delete{margin-top:.7rem;text-align:center}
body.admin-page.page-macs .activate-delete button{background:none;border:0;color:var(--err);cursor:pointer}
body.admin-page.page-macs .sync-hint{display:none;padding:.7rem .8rem;border-radius:10px;background:rgba(var(--ok-rgb), .08);border:1px solid rgba(var(--ok-rgb), .18);color:#8ce5b9;font-size:.82rem}
body.admin-page.page-macs .sync-hint.show{display:block}


@media (max-width:760px){body.admin-page.page-macs .macs-hero{align-items:stretch;flex-direction:column}
body.admin-page.page-macs .macs-tools{display:grid;grid-template-columns:1fr}
body.admin-page.page-macs .macs-search{width:100%}
body.admin-page.page-macs .macs-grid{grid-template-columns:1fr}
body.admin-page.page-macs .activate-overlay{padding:.7rem}
body.admin-page.page-macs .activate-modal{border-radius:22px;padding:1.2rem}
body.admin-page.page-macs .activate-submit{min-height:56px}}




/* ===== page-messages.css | escopo: messages ===== */
/* Extraído de admin/messages.php para centralizar a apresentação. */


body.admin-page.page-messages .messages-pagination{
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    flex-wrap: wrap; margin-top: 1rem; color: #bbcdda;
}


body.admin-page.page-messages .messages-pagination .pagination-info{ font-size: .9rem; }


body.admin-page.page-messages .messages-pagination .pagination-links{ display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }


body.admin-page.page-messages .messages-pagination a, body.admin-page.page-messages .messages-pagination .current-page{
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem;
    min-height: 2.2rem; padding: 0 .65rem; border-radius: 8px; text-decoration: none;
    color: #eef3f7; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}


body.admin-page.page-messages .messages-pagination a:hover{ background: rgba(var(--accent-deep-rgb), .25); }


body.admin-page.page-messages .messages-pagination .current-page{ background: rgba(var(--accent-deep-rgb), .35); border-color: rgba(var(--accent-deep-rgb), .65); font-weight: 700; }



body.admin-page.page-messages .messages-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}


body.admin-page.page-messages .messages-filters label{margin:0}


body.admin-page.page-messages .messages-search{flex:1 1 260px}


body.admin-page.page-messages .messages-search input{width:100%}


body.admin-page.page-messages .messages-limit{display:flex;align-items:center;gap:8px}


body.admin-page.page-messages .messages-limit select{width:auto;min-width:75px}


body.admin-page.page-messages .messages-filters .actions{margin:0}




/* ===== page-msdb.css | escopo: database ===== */
/* Extraído de admin/msdb.php para centralizar a apresentação. */


body.admin-page.page-database .db-meta{ display: flex; flex-wrap: wrap; gap: 1.2rem; color: #aaa; font-size: .85rem; margin: .3rem 0 1.2rem; }


body.admin-page.page-database .db-meta span{ display: flex; align-items: center; gap: .4rem; }


body.admin-page.page-database .db-meta i{ color: var(--err); }



body.admin-page.page-database .tables-grid{
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem; margin-bottom: 1.5rem;
}


body.admin-page.page-database .table-card{
    background: linear-gradient(160deg, #10161a, #0d1215);
    border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
    padding: 1rem 1.1rem; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: .3rem; transition: border-color .15s, transform .15s;
}


body.admin-page.page-database .table-card:hover{ border-color: rgba(var(--accent-deep-rgb), .5); transform: translateY(-2px); }


body.admin-page.page-database .table-card .tc-name{ font-weight: 700; display: flex; align-items: center; gap: .5rem; color: #b3dfff; }


body.admin-page.page-database .table-card .tc-count{ color: #aaa; font-size: .82rem; }


body.admin-page.page-database .table-card.active{ border-color: var(--accent); background: rgba(var(--accent-deep-rgb), .08); }



body.admin-page.page-database .table-detail-header{ display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .8rem; }


body.admin-page.page-database .table-detail-header h3{ margin: 0; display: flex; align-items: center; gap: .5rem; }


body.admin-page.page-database .back-link{ color: #aaa; text-decoration: none; display: flex; align-items: center; gap: .35rem; font-size: .85rem; }


body.admin-page.page-database .back-link:hover{ color: #fff; }



body.admin-page.page-database .schema-table, body.admin-page.page-database .data-table{ width: 100%; border-collapse: collapse; font-size: .85rem; }


body.admin-page.page-database .schema-table th, body.admin-page.page-database .schema-table td, body.admin-page.page-database .data-table th, body.admin-page.page-database .data-table td{
    padding: .45rem .6rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


body.admin-page.page-database .schema-table th, body.admin-page.page-database .data-table th{ color: #b3dfff; position: sticky; top: 0; background: #10161a; }


body.admin-page.page-database .pk-badge{ display: inline-block; background: rgba(var(--accent-deep-rgb), .18); color: var(--err); border-radius: 5px; padding: 0 .35rem; font-size: .7rem; margin-left: .3rem; }


body.admin-page.page-database .null-val{ color: #666; font-style: italic; }



body.admin-page.page-database .table-scroll{ overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; margin-bottom: .8rem; }


body.admin-page.page-database .db-toolbar{ display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .9rem; }


body.admin-page.page-database .pagination{ display: flex; gap: .5rem; align-items: center; margin: .8rem 0; flex-wrap: wrap; }


body.admin-page.page-database .pagination a, body.admin-page.page-database .pagination span{ padding: .35rem .7rem; border-radius: 8px; background: rgba(255,255,255,.06); color: #ddd; text-decoration: none; font-size: .85rem; }


body.admin-page.page-database .pagination .current{ background: var(--accent); color: #fff; }



body.admin-page.page-database .sql-section{ margin-top: 2rem; }


body.admin-page.page-database .sql-section summary{ cursor: pointer; font-weight: 700; color: #b3dfff; display: flex; align-items: center; gap: .5rem; padding: .6rem 0; }


body.admin-page.page-database .sql-box{ background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 1rem; margin-top: .5rem; }


body.admin-page.page-database .sql-box textarea{
    width: 100%; box-sizing: border-box; min-height: 110px; font-family: monospace; font-size: .88rem;
    background: #0a0d0f; color: #eee; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .6rem;
}


body.admin-page.page-database .sql-warning{ display: flex; gap: .5rem; align-items: flex-start; color: #ffcf85; font-size: .85rem; background: rgba(var(--warn-rgb), .08); border: 1px solid rgba(var(--warn-rgb), .3); border-radius: 8px; padding: .6rem .8rem; margin-top: .6rem; }


body.admin-page.page-database .sql-confirm{ display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .85rem; color: #ddd; }


body.admin-page.page-database .flash{ padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; font-size: .88rem; }


body.admin-page.page-database .flash.error{ background: rgba(var(--err-rgb), .15); border: 1px solid rgba(var(--err-rgb), .4); color: var(--err); }


body.admin-page.page-database .flash.ok{ background: rgba(81,207,102,.12); border: 1px solid rgba(81,207,102,.35); color: #7ee08a; }




/* ===== page-pix.css | escopo: pix ===== */
/* Extraído de admin/pix.php para centralizar a apresentação. */


body.admin-page.page-pix .pix-wrap{ display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }


body.admin-page.page-pix .pix-wrap .pix-result{ flex: 1; min-width: 260px; }


body.admin-page.page-pix .pix-wrap img.qr{ border-radius: 10px; background: #fff; padding: 10px; width: 240px; height: 240px; display: block; }


body.admin-page.page-pix .pix-copy-box{ display: flex; gap: 8px; margin-top: 10px; }


body.admin-page.page-pix .pix-copy-box textarea{ flex: 1; font-family: monospace; font-size: .85em; }


body.admin-page.page-pix .client-banner{
    display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; margin-bottom: 1.2rem;
    background: rgba(var(--accent-deep-rgb), .08); border: 1px solid rgba(var(--accent-deep-rgb), .3); border-radius: 12px;
}


body.admin-page.page-pix .client-banner strong{ color: #ffb3b3; }


body.admin-page.page-pix .alert-error{ background: rgba(var(--err-rgb), .15); border: 1px solid rgba(var(--err-rgb), .5); color: #ffb3b3; padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }




/* ===== page-rebrand.css | escopo: rebrand ===== */
/* Extraído de admin/rebrand.php para centralizar a apresentação. */


body.admin-page.page-rebrand .rebrand-preview{
  min-height: 120px; border: 1px dashed var(--line); border-radius: 12px;
  display: grid; place-items: center; background: #0f1726; overflow: hidden;
}


body.admin-page.page-rebrand .rebrand-preview--bg{
  min-height: 160px; background-size: cover; background-position: center;
}


body.admin-page.page-rebrand .preview-logo{ max-height: 90px; max-width: 100%; object-fit: contain; }


body.admin-page.page-rebrand .muted{ color: var(--muted); }




/* ===== page-retro.css | escopo: retro ===== */
/* Extraído de admin/retro.php para centralizar a apresentação. */


/* Estilos das abas */


body.admin-page.page-retro .tab-nav{
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--line, #ddd);
    padding-bottom: 0.5rem;
}


body.admin-page.page-retro .tab-btn{
    padding: 0.5rem 1.2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    border-radius: 6px 6px 0 0;
    transition: 0.2s;
}


body.admin-page.page-retro .tab-btn:hover{
    background: #f0f0f0;
}


body.admin-page.page-retro .tab-btn.active{
    color: #000;
    background: #e8e8e8;
    box-shadow: 0 -2px 0 var(--accent) inset;
}


body.admin-page.page-retro .tab-pane{
    display: none;
    animation: fade 0.25s ease;
}


body.admin-page.page-retro .tab-pane.active{
    display: block;
}


@keyframes fade{
    from { opacity: 0.3; }
    to { opacity: 1; }
}


/* Estilos para botões de status e ações */


body.admin-page.page-retro .btn-ok{
    background: #20c93a;
    color: #fff;
    border: none;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}


body.admin-page.page-retro .btn-ok:hover{
    background: #218838;
}


body.admin-page.page-retro .btn-ghost{
    background: transparent;
    border: 1px solid #d7dce5;
    color: inherit;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}


body.admin-page.page-retro .btn-ghost:hover{
    background: #f0f0f0;
}


body.admin-page.page-retro .btn-danger{
    background: var(--err);
    color: #fff;
    border: none;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}


body.admin-page.page-retro .btn-danger:hover{
    background: #c82333;
}


body.admin-page.page-retro .games-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }


body.admin-page.page-retro .games-title{ display:flex; align-items:center; gap:.7rem; margin:0; }


body.admin-page.page-retro .games-count{ background:var(--accent); color:#fff; border-radius:999px; padding:.2rem .65rem; font-size:.82rem; }


body.admin-page.page-retro .btn-primary{ background:var(--accent); color:#fff; border:1px solid var(--accent); }


body.admin-page.page-retro .btn-primary:hover{ background:var(--accent); border-color:var(--accent); }


body.admin-page.page-retro .game-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }


body.admin-page.page-retro .game-actions .btn, body.admin-page.page-retro .game-actions button{ min-width:76px; }


body.admin-page.page-retro .btn-status-inactive{ background:#6c757d; color:#fff; border:none; padding:.2rem .6rem; border-radius:4px; cursor:pointer; font-size:.85rem; }


body.admin-page.page-retro .modal-backdrop{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.72); }


body.admin-page.page-retro .modal-backdrop.open{ display:flex; }


body.admin-page.page-retro .game-modal{ width:min(820px, 100%); max-height:92vh; overflow:auto; background:var(--panel, #171923); border:1px solid var(--line, #343746); border-radius:16px; padding:1.25rem; box-shadow:0 24px 70px rgba(0,0,0,.5); }


body.admin-page.page-retro .modal-heading{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }


body.admin-page.page-retro .modal-heading h2{ margin:0; }


body.admin-page.page-retro .modal-close{ background:transparent; color:inherit; border:1px solid var(--line, #666); border-radius:8px; font-size:1.25rem; cursor:pointer; }


body.admin-page.page-retro .pagination-bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1rem; }


body.admin-page.page-retro .pagination{ display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }


body.admin-page.page-retro .pagination a, body.admin-page.page-retro .pagination span{ min-width:34px; padding:.42rem .62rem; text-align:center; border:1px solid var(--line, #444); border-radius:7px; color:inherit; text-decoration:none; }


body.admin-page.page-retro .pagination .current{ background:var(--accent); color:#fff; border-color:var(--accent); }


body.admin-page.page-retro .pagination .disabled{ opacity:.45; }


@media (max-width:700px){body.admin-page.page-retro .game-actions{ min-width:250px; }
body.admin-page.page-retro .game-modal .grid-form{ grid-template-columns:1fr; }
body.admin-page.page-retro .game-modal .grid-form label{ grid-column:1/-1; }}




/* ===== page-settings.css | escopo: settings ===== */
/* Extraído de admin/settings.php para centralizar a apresentação. */


/* =========================================================
   CONFIGURAÇÕES — página responsiva sem modais
   ========================================================= */


body.admin-page.page-settings .settings-page{
    width: min(1180px, 100%);
    margin: 0 auto;
}


body.admin-page.page-settings .settings-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}


body.admin-page.page-settings .settings-head h2{ margin: 0 0 .25rem; }


body.admin-page.page-settings .settings-head p{ margin: 0; color: var(--muted, #aaa); }



body.admin-page.page-settings .settings-nav{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}


body.admin-page.page-settings .settings-nav a{
    min-width: 0;
    min-height: 48px;
    padding: .7rem .8rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    font-weight: 700;
    line-height: 1.15;
}


body.admin-page.page-settings .settings-nav a:hover{
    background: rgba(var(--accent-deep-rgb), .10);
    color: #fff;
}


body.admin-page.page-settings .settings-nav a.active{
    border-color: rgba(var(--accent-deep-rgb), .55);
    background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), .26), rgba(var(--accent-deep-rgb), .48));
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
}



body.admin-page.page-settings .settings-panel{
    background: linear-gradient(160deg, rgba(var(--accent-deep-rgb), .96), rgba(var(--accent-deep-rgb), .98));
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: clamp(1rem, 2.5vw, 1.45rem);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
}


body.admin-page.page-settings .settings-panel-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1rem;
}


body.admin-page.page-settings .settings-panel-head h3{
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #b3dfff;
    font-size: 1.15rem;
}



body.admin-page.page-settings .subtabs{
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}


body.admin-page.page-settings .subtab{
    min-height: 40px;
    padding: .55rem .8rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    color: #ccc;
    cursor: pointer;
    box-shadow: none;
}


body.admin-page.page-settings .subtab:hover, body.admin-page.page-settings .subtab.active{
    background: rgba(var(--accent-deep-rgb), .15);
    border-color: rgba(var(--accent-deep-rgb), .48);
    color: #fff;
    transform: none;
}


body.admin-page.page-settings .app-tab-panel{ display: none; }


body.admin-page.page-settings .app-tab-panel.active{ display: block; }



body.admin-page.page-settings .settings-form{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1rem;
}


body.admin-page.page-settings .settings-form > *{ min-width: 0; }


body.admin-page.page-settings .settings-form label{
    display: grid;
    gap: .4rem;
    margin: 0;
    min-width: 0;
    color: #ddd;
    font-weight: 600;
}


body.admin-page.page-settings .settings-form input, body.admin-page.page-settings .settings-form select, body.admin-page.page-settings .settings-form textarea{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}


body.admin-page.page-settings .settings-form textarea{ min-height: 100px; resize: vertical; }


body.admin-page.page-settings .span-2{ grid-column: 1 / -1; }



body.admin-page.page-settings .upload-field{
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 12px;
    padding: .85rem;
    background: rgba(255,255,255,.025);
    overflow: hidden;
}


body.admin-page.page-settings .upload-field .upload-title{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
    font-weight: 700;
}


body.admin-page.page-settings .upload-field input[type="file"]{
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: .88rem;
    color: #ccc;
    overflow: hidden;
}


body.admin-page.page-settings .upload-field input[type="file"]::file-selector-button{
    margin-right: .55rem;
    padding: .52rem .72rem;
    border: 0;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
}


body.admin-page.page-settings .upload-field small{
    display: block;
    margin-top: .55rem;
    color: #929292;
    line-height: 1.35;
}



body.admin-page.page-settings .upload-progress{
    display: none;
    margin-top: .75rem;
}


body.admin-page.page-settings .upload-progress.active{ display: block; }


body.admin-page.page-settings .upload-progress-track{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}


body.admin-page.page-settings .upload-progress-bar{
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #3badff, #55b8ff);
    transition: width .12s linear;
}


body.admin-page.page-settings .upload-progress-meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .45rem;
    color: #aaa;
    font-size: .8rem;
}


body.admin-page.page-settings .upload-message{
    margin-top: .5rem;
    font-size: .85rem;
    line-height: 1.35;
}


body.admin-page.page-settings .upload-message.ok{ color: #7dffc0; }


body.admin-page.page-settings .upload-message.error{ color: var(--err); }



body.admin-page.page-settings .toggle-row{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 54px;
    padding: .68rem .8rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    cursor: pointer;
}


body.admin-page.page-settings .toggle-switch{ position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }


body.admin-page.page-settings .toggle-switch input[type="checkbox"]{ opacity: 0; width: 0; height: 0; position: absolute; }


body.admin-page.page-settings .toggle-slider{ position: absolute; inset: 0; background: rgba(255,255,255,.18); border-radius: 999px; transition: .2s; }


body.admin-page.page-settings .toggle-slider::before{ content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }


body.admin-page.page-settings .toggle-switch input:checked + .toggle-slider{ background: var(--accent); }


body.admin-page.page-settings .toggle-switch input:checked + .toggle-slider::before{ transform: translateX(20px); }


body.admin-page.page-settings .toggle-state{ color: #aaa; font-size: .82rem; min-width: 64px; text-align: right; }



body.admin-page.page-settings .form-actions{
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: .7rem;
    margin-top: .25rem;
}


body.admin-page.page-settings .form-actions button, body.admin-page.page-settings .form-actions .btn{
    min-width: 132px;
    min-height: 44px;
    padding: .65rem 1rem;
    flex: 0 0 auto;
}



body.admin-page.page-settings .rebrand-preview{
    min-height: 130px;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #0f1726;
    overflow: hidden;
    margin-bottom: .1rem;
}


body.admin-page.page-settings .rebrand-preview--bg{
    min-height: 190px;
    background-size: cover;
    background-position: center;
}


body.admin-page.page-settings .preview-logo{ max-height: 95px; max-width: 100%; object-fit: contain; }


body.admin-page.page-settings .muted{ color: #8f8f8f; }



body.admin-page.page-settings .upload-busy-note{
    display: none;
    grid-column: 1 / -1;
    padding: .65rem .8rem;
    border-radius: 10px;
    background: rgba(var(--warn-rgb), .08);
    border: 1px solid rgba(var(--warn-rgb), .22);
    color: #f7d97a;
    font-size: .85rem;
}


body.admin-page.page-settings .upload-busy-note.active{ display: block; }



@media (max-width: 820px){body.admin-page.page-settings .settings-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.admin-page.page-settings .settings-form{ grid-template-columns: 1fr; }
body.admin-page.page-settings .span-2, body.admin-page.page-settings .form-actions, body.admin-page.page-settings .upload-busy-note{ grid-column: 1; }
body.admin-page.page-settings .settings-panel{ border-radius: 14px; }}



@media (max-width: 520px){body.admin-page.page-settings .settings-head{ display: block; }
body.admin-page.page-settings .settings-nav{ gap: .5rem; }
body.admin-page.page-settings .settings-nav a{
        min-height: 46px;
        padding: .62rem .5rem;
        font-size: .84rem;
    }
body.admin-page.page-settings .subtabs{
        display: grid;
        grid-template-columns: 1fr;
    }
body.admin-page.page-settings .subtab{ width: 100%; }
body.admin-page.page-settings .settings-panel{ padding: .9rem; }
body.admin-page.page-settings .form-actions{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }
body.admin-page.page-settings .form-actions button, body.admin-page.page-settings .form-actions .btn{
        min-width: 0;
        width: 100%;
        min-height: 44px;
        font-size: .92rem;
    }
body.admin-page.page-settings .upload-progress-meta{ align-items: flex-start; flex-direction: column; }}



@media (max-width: 360px){body.admin-page.page-settings .settings-nav{ grid-template-columns: 1fr; }
body.admin-page.page-settings .form-actions{ grid-template-columns: 1fr; }}




/* ===== reseller page-rebrand.css (isolado) ===== */
/* Extraído de reseller/rebrand.php para centralizar a apresentação. */


body.reseller-page.page-rebrand .rebrand-preview{
  min-height: 120px; border: 1px dashed var(--line); border-radius: 12px;
  display: grid; place-items: center; background: #0f1726; overflow: hidden;
}


body.reseller-page.page-rebrand .rebrand-preview--bg{ min-height: 160px; background-size: cover; background-position: center; }


body.reseller-page.page-rebrand .preview-logo{ max-height: 90px; max-width: 100%; object-fit: contain; }


body.reseller-page.page-rebrand .muted{ color: var(--muted); }



/* ===== page-trials | funcionalidade nova ===== */
body.admin-page.page-trials .trial-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}
body.admin-page.page-trials .trial-stat{padding:1rem;border:1px solid var(--line);border-radius:14px}
body.admin-page.page-trials .trial-stat span{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
body.admin-page.page-trials .trial-stat b{display:block;margin-top:.35rem;font-size:1.65rem;color:var(--text)}
body.admin-page.page-trials .trial-note{margin:.2rem 0 1rem;line-height:1.45}
body.admin-page.page-trials .trial-actions{display:flex;gap:.45rem;flex-wrap:wrap}
body.admin-page.page-trials .trial-actions form{margin:0}
body.admin-page.page-trials .trial-error{margin-top:.25rem;color:var(--err);font-size:.8rem}
@media(max-width:860px){
 body.admin-page.page-trials .trial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.admin-page.page-trials .trial-table thead{display:none}
 body.admin-page.page-trials .trial-table,body.admin-page.page-trials .trial-table tbody,body.admin-page.page-trials .trial-table tr,body.admin-page.page-trials .trial-table td{display:block;width:100%}
 body.admin-page.page-trials .trial-table tr{border:1px solid var(--line);border-radius:12px;padding:.6rem;margin-bottom:.75rem;background:var(--panel)}
 body.admin-page.page-trials .trial-table td{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.55rem .35rem}
 body.admin-page.page-trials .trial-table td:last-child{border-bottom:0}
 body.admin-page.page-trials .trial-table td::before{content:attr(data-label);color:var(--muted);font-weight:700}
 body.admin-page.page-trials .trial-actions{justify-content:flex-end}
}



/* ===== utilitários extraídos dos antigos style="..." ===== */
.u-062d4a88{margin-top:24px}
.u-07d0888d{width:42px;text-align:center}
.u-0b8f449f{display:flex;gap:.4rem;align-items:center}
.u-1027531a{margin-top:.8rem}
.u-1089c9f4{background:var(--accent-2)}
.u-13076d95{text-align:center}
.u-1386d503{margin:0}
.u-3abf930e{color:var(--accent)}
.u-3ba25b6a{margin-top:.6rem}
.u-3c53e4bd{width:100%;height:14px;display:none}
.u-3dd9b4c5{font-size:15px}
.u-3df0a395{display: inline;}
.u-4694d62a{min-width:220px}
.u-48ccaf12{color:var(--ms-muted);font-size:13px;margin-top:10px;}
.u-49f468b4{opacity:.65}
.u-4a45aeda{opacity:.75;font-size:.85em}
.u-4e1543a6{flex:0 1 auto;}
.u-53896af7{margin-top:0}
.u-5514da8a{margin-left:12px}
.u-5677b988{display:inline}
.u-5f8f4af2{display:inline;}
.u-6055c552{color:var(--ok)}
.u-65dbc71a{line-height:1.6}
.u-6e7d64fe{width:120px;padding:.35rem .5rem}
.u-7a538e3d{display:flex;gap:.5rem;flex-wrap:wrap}
.u-7b0e7908{background:rgba(var(--ok-rgb), .12);border-color:rgba(var(--ok-rgb), .4);color:#8ff0d3}
.u-7ba3a7a9{margin-bottom:1.2rem;border:1px solid var(--line);padding:1rem;border-radius:12px}
.u-7d9ca161{margin-top:10px;opacity:.75}
.u-81dbc0ef{margin:10px 0 0;padding-left:18px;max-height:220px;overflow:auto;font-size:13px}
.u-83456371{margin-left:auto}
.u-8da5f527{background:rgba(var(--ok-rgb), .1);border-color:rgba(var(--ok-rgb), .35);color:#c9e8ff}
.u-93b8ea5b{display:none;}
.u-9590f79e{margin-bottom:1rem}
.u-9c0c0e2b{opacity:.72}
.u-9dae1d00{margin-top:1rem}
.u-ae759dae{margin:-.35rem 0 .8rem}
.u-b255addf{margin-right:.4rem}
.u-b45545ea{margin-top:10px;opacity:.85}
.u-b5c7762b{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,260px) auto;gap:.75rem;align-items:end;margin:1rem 0;}
.u-b92aab8f{margin-right:.5rem}
.u-bf83cf1c{font-size:18px}
.u-c7fed352{background:var(--ok)}
.u-c837ceee{opacity:.75;font-size:.9em;margin-top:-6px}
.u-c9d43774{margin:0 0 12px}
.u-cadf247b{display:block;margin-top:6px;opacity:.72;font-size:.9em}
.u-cafc7820{display:flex; gap:10px; flex-wrap:wrap;}
.u-cb458930{display:none}
.u-cbc8b055{background:var(--accent)}
.u-cec1db62{color:var(--text);text-align:center;font-size:13px}
.u-d1bbd0dd{font-weight:400;opacity:.7}
.u-d4316970{margin-top:8px}
.u-db5ed95b{display:flex;align-items:center;gap:.45rem;margin:0;cursor:pointer}
.u-df74e8d8{overflow-x:auto}
.u-e6c39e47{margin-top:1rem;margin-bottom:.75rem;gap:.75rem;align-items:center}
.u-ee3a257a{opacity:.7; font-size:.9em; margin-left: auto;}
.u-f1bde2c5{font-weight:400}
.u-faaa794c{display:flex;gap:8px;align-items:center}
.u-fca5dc0d{cursor:pointer;color:var(--accent);font-weight:600}

/* =====================================================================
   SISTEMA DE TEMA CENTRAL — ÚNICA FONTE DE CORES
   ===================================================================== */
/* Paleta da referência: vinho, bordô e dourado; ações semânticas preservadas. */
:root,html[data-theme="dark"]{
 color-scheme:dark;
 --bg:#160406;--bg-2:#200508;--panel:#29080d;--panel-solid:#29080d;
 --surface-soft:#34110e;--surface-hover:#421418;--line:#4b2425;--line-strong:#79503a;
 --text:#fff7f1;--muted:#c9b8b6;--accent:#ffd12a;--accent-2:#ffd12a;--accent-deep:#bd781d;
 --accent-ink:#281704;--gold-icon:#ffd12a;--ok:#42ce8b;--warn:#e5b65e;--err:#f07878;--pending:#e5b65e;
 --accent-rgb:255,209,42;--accent-2-rgb:255,209,42;--accent-deep-rgb:189,120,29;
 --ok-rgb:66,206,139;--warn-rgb:229,182,94;--err-rgb:240,120,120;--pending-rgb:229,182,94;
 --action-blue:#2868b2;--action-green:#147a50;--action-red:#b73543;--action-amber:#845819;
 --shadow:none;--glow:none;--qr-dark:#000000;--qr-light:#ffffff;
 --chart-1:#ffd12a;--chart-2:#5b9ee5;--chart-3:#42ce8b;--chart-4:#a78bfa;--chart-5:#40becb;--chart-6:#ed9861;
 --chart-7:#e47c98;--chart-8:#9abe68;--chart-9:#56baaa;--chart-10:#e7ce83;--chart-11:#b49adc;--chart-12:#e39ca7;
 --chart-text:var(--text);--chart-muted:var(--muted);--chart-border:var(--panel);
 --chart-tooltip:var(--panel);--chart-tooltip-border:var(--line);--chart-grid:rgba(255,255,255,.08);
 --chart-entry:var(--ok);--chart-entry-fill:rgba(var(--ok-rgb),.22);--chart-exit:var(--err);--chart-exit-fill:rgba(var(--err-rgb),.18);
 --chart-balance:var(--accent);--chart-balance-fill:rgba(var(--accent-rgb),.12);
}
html[data-theme="light"]{
 color-scheme:light;
 --bg:#fff7f1;--bg-2:#ffffff;--panel:#ffffff;--panel-solid:#ffffff;
 --surface-soft:#faeee5;--surface-hover:#f3dfd0;--line:#e6cfc0;--line-strong:#b58d75;
 --text:#38221f;--muted:#725b53;--accent:#ffd12a;--accent-2:#b87500;--accent-deep:#a96900;
 --gold-icon:#b87500;--ok:#147a50;--warn:#8b5d13;--err:#b73543;--pending:#8b5d13;
 --ok-rgb:20,122,80;--warn-rgb:139,93,19;--err-rgb:183,53,67;--pending-rgb:139,93,19;
 --chart-grid:rgba(32,38,48,.1);
}
html,body{background:var(--bg)!important;color:var(--text)!important}
body{background-image:none!important}
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
a{color:inherit}
a:hover{color:var(--accent-2)}
code,.mono{color:var(--text)}
.app-shell{background:var(--bg);height:100vh;height:100dvh;min-height:0;overflow:hidden}
.main{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
.topbar{flex:0 0 auto;background:var(--panel)!important;border-color:var(--line)!important;backdrop-filter:none}
.page{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:transparent!important;padding-bottom:1.25rem}
.sidebar{background:var(--bg-2)!important;border-color:var(--line)!important;height:100vh;height:100dvh;min-height:0;flex-shrink:0}
.sidebar .brand{flex-shrink:0;border-color:var(--line)!important}
.sidebar-bottom{flex-shrink:0}
.sidebar nav{scrollbar-color:var(--line-strong) transparent}
.brand strong,.topbar h1,h1,h2,h3,h4,.card strong{color:var(--text)!important}
.brand small,.sidebar-foot,.muted,.hint,.lead{color:var(--muted)!important}
.nav-group,.nav-section{color:var(--muted)!important;opacity:1}
.sidebar nav a{color:var(--text)!important}
.sidebar nav a i{color:var(--gold-icon)!important;opacity:1;width:20px;text-align:center;flex-shrink:0}
.sidebar nav a:hover{background:var(--surface-hover)!important;color:var(--text)!important;border-color:var(--line)!important}
.sidebar nav a.active{background:rgba(var(--accent-rgb),.13)!important;color:var(--text)!important;border-color:rgba(var(--accent-rgb),.35)!important;border-left-color:var(--accent)!important}
.sidebar-bottom .nav-exit,.sidebar nav a.nav-exit{background:var(--surface-soft)!important;border-color:var(--line)!important;color:var(--text)!important}
.sidebar-bottom .nav-exit:hover,.sidebar nav a.nav-exit:hover{background:var(--surface-hover)!important;color:var(--text)!important}
.card,.panel,.stats-card,.chart-card,.table-wrap,.notice-dropdown,.account-dropdown,.modal,.settings-panel,.upload-field,.client-card,.recent-device-card,.trial-stat,
.downloads-shell,.download-card,.activate-modal,.fb-card,.notice-preview{
 background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important
}
.rebrand-preview{background-color:var(--surface-soft)!important;border-color:var(--line)!important}
.card::before{background:var(--accent)!important}
body.page-clients .select-checkbox:checked{background:var(--accent)!important;border-color:var(--accent-deep)!important}
body.page-clients .select-checkbox:checked::after{border-color:var(--accent-ink)!important}
body.page-retro .tab-btn{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
body.page-retro .tab-btn.active{background:rgba(var(--accent-rgb),.15)!important;border-color:var(--accent-deep)!important}
.fb-row-label,.fb-stat,.notice-event small{color:var(--muted)!important}
.fb-row-value,.fb-stat strong,.notice-dropdown a{color:var(--text)!important}
.copy-toast,.avatar-upload__circle{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
.notice-heading-actions .page-select-all{background:var(--surface-soft)!important;border-color:var(--line)!important}

table,th,td{color:var(--text)!important;border-color:var(--line)!important}
th{background:var(--surface-soft)!important;color:var(--muted)!important}
tr:hover td{background:var(--surface-hover)!important}
input,select,textarea{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important;accent-color:var(--accent-deep)}
input::placeholder,textarea::placeholder{color:var(--muted)!important;opacity:1}
select option,select optgroup{background:var(--panel-solid)!important;color:var(--text)!important}
label,.ccr-label,.client-card-id,.trial-note,.upload-field small,.toggle-state,.mac-meta,.download-version,.code-label,.downloads-intro{color:var(--muted)!important}
.client-card-title strong,.ccr-value,.client-summary,.clients-pagination,.modal label,.modal small,.mac-address{color:var(--text)!important}
.client-card{border-left-color:var(--accent)!important}
.client-card.status-pending{border-left-color:var(--pending)!important}
.client-card.status-blocked{border-left-color:var(--err)!important}
.client-card-row{border-color:var(--line)!important}
.clients-table th.col-actions,.clients-table td.col-actions{background:var(--panel-solid)!important}
.clients-table tr:hover td.col-actions{background:var(--surface-hover)!important}
.row-menu summary,.row-menu-list,.bulk-bar{background:var(--panel-solid)!important;border-color:var(--line)!important;color:var(--text)!important}
.row-menu-list{max-height:calc(100dvh - 24px);overflow-y:auto;z-index:1600!important}
.client-summary,.pix-status,.pix-fieldset,.toggle-row,.subtab,.settings-nav a,.code-box,.mac-card,.fb-status-tabs a{background:var(--surface-soft)!important;border-color:var(--line)!important;color:var(--text)!important}
.settings-nav a.active,.subtab.active,.fb-status-tabs a.active{background:rgba(var(--accent-rgb),.15)!important;border-color:var(--accent-deep)!important;color:var(--text)!important}
.modal-overlay,.activate-overlay{background:rgba(0,0,0,.66)!important}
.auth-body{background:var(--bg)!important}
.auth-card,.login-intro,.login-extras{color:var(--text)!important}
.auth-card{background:var(--panel)!important;border-color:var(--line)!important}
.auth-header .auth-text h1,.login-intro h2{color:var(--text)!important}
.login-intro p,.auth-header .subtitle,.login-feature,.notice-event small{color:var(--muted)!important}
.notice-menu>summary,.theme-toggle{background:var(--surface-soft)!important;color:var(--text)!important;border:1px solid var(--line)!important}
/* Ordem: ação principal, neutra, edição, consulta, confirmação e exclusão. */
button,.btn,input[type="submit"],input[type="button"],.download-main-btn{background:var(--accent)!important;color:var(--accent-ink)!important;border:1px solid var(--accent)!important}
button:hover,.btn:hover{transform:none;filter:brightness(1.05)}
button.secondary,.btn.secondary,button.ghost,.btn.ghost,.btn-secondary,.btn-ghost,.btn-status-inactive,.modal-close,.activate-close,.menu-btn,.downloads-close,.copy-row button{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
:is(button,.btn,.card-btn,.row-menu-list a,.row-menu-list button).action-edit,.btn-edit,.retro-edit,.card-btn:not(.danger):not(.notice):not(.warn):not(.pix):not(.sync):not(.unblock):not(.whatsapp){background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important}
:is(button,.btn,.card-btn,.row-menu-list a,.row-menu-list button).action-sync,.card-btn.sync,.btn-info,.action-toggle,.btn-yellow,.btn-warning,.trial-actions button:not(.danger){background:var(--action-blue)!important;color:#fff!important;border-color:var(--action-blue)!important}
button.ok,.btn.ok,.btn-ok,.btn-success,.fb-btn.resolve,.action-pix,.action-whatsapp,.action-unblock,.card-btn.pix,.card-btn.whatsapp,.card-btn.unblock,.row-menu-list .action-pix,.row-menu-list .action-whatsapp,.row-menu-list .action-unblock{background:var(--action-green)!important;color:#fff!important;border-color:var(--action-green)!important}
.action-block,.card-btn.warn,.btn.warning,.fb-btn.reopen,.row-menu-list .action-block{background:var(--action-amber)!important;color:#fff!important;border-color:var(--action-amber)!important}
button.danger,.btn.danger,.btn-danger,.fb-btn.danger,.card-btn.danger,.btn-delete,.action-delete,.retro-delete,.row-menu-list button.danger{background:var(--action-red)!important;color:#fff!important;border-color:var(--action-red)!important}
.card-btn.notice{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
:is(button,.btn,.card-btn,.row-menu-list a) i{color:inherit!important}
button:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.badge.active,.badge.ativo,.status.active,.status-ativo,.status-active,.status-success{background:rgba(var(--ok-rgb),.14)!important;color:var(--ok)!important;border:1px solid rgba(var(--ok-rgb),.34)!important}
.badge.inactive,.badge.inativo,.badge.blocked,.badge.expired,.status.inactive,.status-inativo,.status-inactive,.status-danger{background:rgba(var(--err-rgb),.14)!important;color:var(--err)!important;border:1px solid rgba(var(--err-rgb),.34)!important}
.badge.pending,.badge.expiring,.status.pending{background:rgba(var(--pending-rgb),.14)!important;color:var(--pending)!important;border:1px solid rgba(var(--pending-rgb),.34)!important}
.notice-badge{background:var(--accent)!important;color:var(--accent-ink)!important}
.table-avatar,.avatar,.brand-mark{background:var(--surface-hover)!important;color:var(--gold-icon)!important}
.summary-total,.summary-date,.downloads-title,.download-card-icon,.code-value{color:var(--gold-icon)!important;background:transparent!important}
.downloads-head,.downloads-foot,.code-box,.qr-empty{border-color:var(--line)!important}
.qr-empty,.code-value.empty{color:var(--muted)!important}
.qr-box{background:#fff!important;color:#000!important}
.download-card{--accent-card:var(--accent)}
body.admin-page.page-dash{--ms-text:var(--text);--ms-muted:var(--muted);--ms-card:var(--panel);--ms-line:var(--line)}
body.page-dash .stats-icon{background:rgba(var(--accent-rgb),.14)!important;color:var(--gold-icon)!important}
body.page-dash .stats-number{color:var(--text)!important}
body.page-dash .stats-label{color:var(--muted)!important}
body.page-dash .dns-item{border-color:var(--line)!important;color:var(--text)!important}
body.page-payments .grid-form label.full:has(input[type="checkbox"]){display:flex;align-items:center;gap:.6rem}
body.page-payments input[type="checkbox"]{width:18px;height:18px;margin:0;flex:0 0 auto}
body.page-login .auth-shell{width:min(1180px,100%)!important;margin:0 auto!important}
body.page-login .login-intro__brand img{width:72px!important;height:72px!important;max-width:72px!important;max-height:72px!important;object-fit:contain!important}
body.page-login .auth-logo{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important;object-fit:contain!important}
body.page-login .auth-card{width:min(420px,100%)!important}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:19;border:0;padding:0;border-radius:0}
@media(max-width:860px){
 .sidebar{width:min(82vw,320px)!important;max-width:320px!important}
 .sidebar.open + .sidebar-backdrop{display:block}
 .main{width:100%!important}
 .page{padding:.85rem!important}
 .topbar{padding:.8rem .85rem!important}
 .topbar h1{font-size:1.08rem!important}
 .recent-desktop{display:none!important}.recent-mobile{display:block!important}
}
@media(min-width:861px){.recent-desktop{display:block!important}.recent-mobile{display:none!important}}
@media(max-width:560px){body.page-clients .client-card{margin-bottom:.8rem}body.page-clients .client-card-actions{grid-template-columns:1fr 1fr}}

/* utilitários dinâmicos */
.icon-size-12{font-size:12px!important}.icon-size-15{font-size:15px!important}.icon-size-18{font-size:18px!important}
.bulk-log-ok{color:var(--ok)!important}.bulk-log-error{color:var(--err)!important}.bulk-log-info{color:var(--muted)!important}

/* ===== correção final do menu móvel ===== */
.sidebar-backdrop{
  background:rgba(0,0,0,.58)!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
}
@media(max-width:860px){
  .sidebar.open{transform:translateX(0)!important}
}

/* ===== login responsivo definitivo ===== */
body.page-login{
  min-height:100dvh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(20px,4vw,56px)!important;
}
body.page-login .auth-shell{
  width:min(1180px,100%)!important;
  min-height:0!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(360px,430px)!important;
  grid-template-areas:"intro card" "extras card"!important;
  align-items:center!important;
  gap:24px 52px!important;
}
body.page-login .login-intro{
  grid-area:intro;
  align-self:end;
  max-width:620px;
}
body.page-login .login-intro__brand{
  display:flex;align-items:center;gap:14px;margin-bottom:34px;
}
body.page-login .login-intro__brand>div{display:flex;flex-direction:column;gap:2px}
body.page-login .login-intro__brand strong{font-size:1.15rem;color:var(--text)}
body.page-login .login-intro__brand span{font-size:.82rem;color:var(--muted)}
body.page-login .login-intro__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:12px;
  color:var(--accent-2);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
}
body.page-login .login-intro h2{
  max-width:560px;margin:0 0 18px;font-size:clamp(2.35rem,5vw,4.7rem)!important;
  line-height:.96;letter-spacing:-.035em;
}
body.page-login .login-intro p{
  max-width:580px;margin:0;font-size:1.08rem;line-height:1.6;
}
body.page-login .auth-card{
  grid-area:card;
  align-self:center;
  width:100%!important;
  max-width:430px!important;
  margin:0!important;
  padding:clamp(1.2rem,3vw,1.8rem)!important;
  border-radius:20px!important;
}
body.page-login .auth-header{margin-bottom:1.25rem!important}
body.page-login .login-extras{
  grid-area:extras;
  align-self:start;
  width:100%;
  max-width:700px;
}
body.page-login .login-action-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
body.page-login .login-action{
  min-height:58px!important;
  border-radius:14px!important;
  padding:.72rem .85rem!important;
}
body.page-login .login-feature-grid{margin-top:.9rem!important}
@media(max-width:760px){
  body.page-login{display:block!important;padding:16px!important}
  body.page-login .auth-shell{
    width:min(460px,100%)!important;
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
  }
  body.page-login .login-intro{display:none!important}
  body.page-login .auth-card{order:1;width:100%!important;max-width:none!important}
  body.page-login .login-extras{order:2;max-width:none!important}
  body.page-login .login-action-grid{grid-template-columns:1fr 1fr!important}
  body.page-login .login-feature-grid{grid-template-columns:1fr!important}
  body.page-login .login-feature{
    min-height:46px!important;flex-direction:row!important;justify-content:flex-start!important;
    padding:.55rem .2rem!important;border-right:0!important;
  }
}
@media(max-width:420px){
  body.page-login .login-action-grid{grid-template-columns:1fr!important}
}


/* =====================================================================
   ACABAMENTO FINAL — TOPO + RODAPÉ DO MENU LATERAL
   ===================================================================== */
.topbar{
  flex-wrap:nowrap!important;
}
.topbar h1{
  flex:1 1 auto!important;
  min-width:0!important;
}
.topbar .notice-tools{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.5rem!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
}
.topbar .notice-menu{
  position:relative!important;
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
}
.topbar .theme-toggle,
.topbar .notice-menu>summary{
  min-height:42px!important;
  height:42px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  border-radius:999px!important;
  padding:.45rem .75rem!important;
  white-space:nowrap!important;
}
.topbar details.notice-menu>summary{
  list-style:none!important;
}
.topbar details.notice-menu>summary::marker{
  content:""!important;
  font-size:0!important;
}
.topbar details.notice-menu>summary::-webkit-details-marker{
  display:none!important;
}
.topbar .notice-account>summary{
  padding:.2rem .65rem .2rem .25rem!important;
}
.topbar .notice-account-logo,
.topbar .notice-account-fallback{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
}

.sidebar-bottom{
  background:transparent!important;
  border-top:1px solid var(--line)!important;
  padding:.7rem .2rem .08rem!important;
  margin-top:.45rem!important;
}
.sidebar-bottom .nav-exit{
  min-height:40px!important;
  background:var(--surface-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
  border-radius:12px!important;
  padding:.55rem .8rem!important;
  font-weight:700!important;
}
.sidebar-bottom .nav-exit i{
  color:var(--accent-2)!important;
}
.sidebar-bottom .nav-exit:hover{
  background:var(--surface-hover)!important;
  border-color:var(--line-strong)!important;
  color:var(--text)!important;
}
.sidebar-bottom .sidebar-foot{
  margin-top:.5rem!important;
  padding:.15rem .3rem 0!important;
  text-align:center!important;
  color:var(--muted)!important;
  opacity:.62!important;
  border:0!important;
}

@media(max-width:860px){
  .topbar .notice-tools{gap:.35rem!important}
  .topbar .theme-toggle,
  .topbar .notice-menu>summary{width:42px!important;min-width:42px!important;padding:0!important}
  .topbar .theme-toggle-label,
  .topbar .notice-admin-name{display:none!important}
  .topbar .notice-account>summary{width:54px!important;min-width:54px!important;padding:0 .25rem!important}
  .topbar .notice-account-logo,
  .topbar .notice-account-fallback{width:32px!important;height:32px!important;flex-basis:32px!important}
  .sidebar-bottom{padding-top:.6rem!important}
}

/* Paleta vinho e dourado — acabamentos compartilhados, sem alterar medidas. */
:root,html[data-theme="dark"]{
 --page-background:radial-gradient(ellipse at 95% 0%,rgba(158,86,8,.22),transparent 44%),radial-gradient(ellipse at 8% 100%,rgba(121,16,34,.20),transparent 48%),linear-gradient(150deg,#170406,#100304);
 --sidebar-background:linear-gradient(180deg,#29080d,#160406);
 --card-background:linear-gradient(145deg,#2c090f,#21070a);
 --nav-selected:linear-gradient(105deg,#a52631,#6a101c);
}
html[data-theme="light"]{
 --page-background:radial-gradient(ellipse at 95% 0%,rgba(255,190,80,.16),transparent 48%),linear-gradient(150deg,#fff7f1,#faeee5);
 --sidebar-background:linear-gradient(180deg,#fff9f4,#faeee5);
 --card-background:linear-gradient(145deg,#ffffff,#fff8f3);
 --nav-selected:linear-gradient(105deg,#f7d7d2,#f6e5d7);
}
body,.auth-body{background:var(--page-background)!important;background-attachment:fixed!important}
.app-shell{background:transparent!important}
.sidebar{background:var(--sidebar-background)!important}
.card,.panel,.stats-card,.chart-card,.auth-card,.client-card,.recent-device-card,.trial-stat,.download-card,.fb-card,.notice-preview{background:var(--card-background)!important}
.sidebar nav a.active{background:var(--nav-selected)!important;border-color:var(--line-strong)!important;border-left-color:var(--accent)!important}
.card::before{background:linear-gradient(90deg,var(--accent),#b12a38,transparent)!important}
input:focus,select:focus,textarea:focus{border-color:var(--accent-deep)!important;outline:1px solid var(--accent-deep);outline-offset:1px}
body.page-login form button[type="submit"]{background:linear-gradient(105deg,#ffd52b,#ff9f0a)!important;border-color:#edaa1f!important;color:#281704!important}
body.page-settings .upload-progress-bar{background:linear-gradient(90deg,var(--accent),#ff9f0a)!important}