/* DarkTask — Configurações como página (template 09/2026)
 *
 * Medidas de ConfigAppPanel.dc.html: topo de 98px com a ação no trilho da
 * direita (a mesma coluna do cabeçalho: engrenagem, sino, data e hora), grade
 * de abas em células de 49px, e o corpo na moldura de 25px com cartões de fio,
 * cabeçalho de 56px em caixa alta e linhas de 72px — rótulo à esquerda,
 * controle à direita. Botões são células ou contornos retos de 40px, colados
 * quando formam grupo (sem margem entre eles).
 *
 * A página ocupa a linha do conteúdo da casca (é um .dt-page-content filho da
 * .dt-app-root). Carrega depois de espacos.css.
 */

html body #dc-root #dt-config.dtcfg {
  position: static !important; inset: auto !important; transform: none !important;
  width: auto !important; max-width: none !important; min-width: 0 !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
  grid-template-rows: none !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important;
  /* Quem rola é o corpo: com a barra de rolagem na página inteira, o topo
     perdia 15px e o "Fechar" saía da coluna do trilho do cabeçalho. */
  overflow: hidden !important;
  font-family: var(--font-ui);
}

/* --- topo: título à esquerda, "Fechar" ocupando o trilho da direita --------- */
html body #dc-root #dt-config .dtcfg-cabeca {
  height: 98px; min-height: 98px; flex: none;
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line);
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 32%,
      color-mix(in srgb, var(--dtp-brilho, #ffffff) 85%, transparent) 46%,
      color-mix(in srgb, var(--dtp-brilho, #ffffff) 20%, transparent) 64%, transparent 78%),
    linear-gradient(90deg, var(--dtp-metal-a, #e8e8e8) 0%, var(--dtp-metal-b, #dedede) 55%, var(--dtp-metal-c, #cfcfcf) 100%);
}
[data-dt-theme="dark"] #dt-config .dtcfg-cabeca { --dtp-metal-a: #121212; --dtp-metal-b: #181818; --dtp-metal-c: #232323; --dtp-brilho: #0d0d0d; }
html body #dc-root #dt-config .dtcfg-cabeca-texto {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  padding: 0 20px;
}
html body #dc-root #dt-config .dtcfg-cabeca-texto h1 {
  margin: 0 !important; font: 700 22px/1 var(--font-ui) !important; letter-spacing: -.6px !important; color: var(--text) !important;
}
html body #dc-root #dt-config .dtcfg-cabeca-texto span {
  font: 400 11.5px/1 var(--font-ui); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #dc-root #dt-config .dtcfg-fechar {
  /* A mesma largura da caixa de data do cabeçalho: o trilho menos as duas
     células de 72 (engrenagem e sino). Só o X, centrado — a palavra "Fechar"
     saiu porque a dica flutuante já a diz, e as duas juntas se sobrepunham. */
  width: calc(var(--casca-trilho, 400px) - 144px) !important; min-width: 0; height: auto !important; min-height: 0 !important; flex: none;
  display: flex !important; align-items: center; justify-content: center; gap: 9px;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important; box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body #dc-root #dt-config .dtcfg-fechar::after { content: none !important; }
html body #dc-root #dt-config .dtcfg-fechar svg { width: 22px !important; height: 22px !important; flex: none; }
html body #dc-root #dt-config .dtcfg-fechar:hover { background: var(--surface-2) !important; }
@media (max-width: 879px) {
  html body #dc-root #dt-config .dtcfg-fechar { width: 72px !important; }
}

/* --- abas ------------------------------------------------------------------ */
html body #dc-root #dt-config .dtcfg-abas {
  flex: none;
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important;
  /* styles.css dá width:max-content ao 2º filho do antigo modal. */
  width: auto !important; max-width: none !important;
  margin: 25px 25px 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-right: 0 !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
}
html body #dc-root #dt-config .dtcfg-abas > button {
  flex: none !important;
  min-height: 49px !important; height: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  margin: 0 !important; padding: 8px !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important;
  box-shadow: none !important;
  font: 600 12.5px/1.2 var(--font-ui) !important; text-align: center;
}
html body #dc-root #dt-config .dtcfg-abas > button svg { width: 20px !important; height: 20px !important; flex: none; }
html body #dc-root #dt-config .dtcfg-abas > button:not(.is-active):hover { background: var(--surface-2) !important; }
html body #dc-root #dt-config .dtcfg-abas > button.is-active { background: var(--text) !important; color: var(--bg) !important; }
@media (max-width: 1179px) {
  html body #dc-root #dt-config .dtcfg-abas { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body #dc-root #dt-config .dtcfg-abas > button { border-bottom: 1px solid var(--line) !important; }
}
@media (max-width: 879px) {
  html body #dc-root #dt-config .dtcfg-abas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin: 16px 16px 0 !important; }
}

/* =========================================================================
   CORPO — cartões de fio, empilhados com 22px, na moldura de 25px
   ========================================================================= */
html body #dc-root #dt-config .dtcfg-corpo {
  flex: 1 1 0; min-height: 0;
  display: flex !important; flex-direction: column !important; gap: 22px !important;
  margin: 0 !important; padding: 22px 25px 25px !important;
  overflow-x: hidden !important; overflow-y: auto !important;
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text);
}
@media (max-width: 879px) { html body #dc-root #dt-config .dtcfg-corpo { padding: 16px !important; gap: 16px !important; } }
html body #dc-root #dt-config .dtcfg-corpo * { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

html body #dc-root #dt-config :is(.dtcfg-cartao, .dt-guia-box, .dt-priv-bloco) {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important;
}

/* Cabeçalho do cartão: 56px, caixa alta; ação à direita em célula. */
html body #dc-root #dt-config .dtcfg-cartao-cabeca {
  min-height: 56px; flex: none;
  display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 0 !important;
  width: 100%;
  margin: 0 !important; padding: 0 0 0 20px !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  text-align: left;
}
html body #dc-root #dt-config .dtcfg-cartao-cabeca > span:first-child {
  align-self: center;
  font: 700 12px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase;
}
html body #dc-root #dt-config .dtcfg-cabeca-acao {
  flex: none; height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center; gap: 8px;
  margin: 0 !important; padding: 0 20px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--text) !important; color: var(--bg) !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body #dc-root #dt-config .dtcfg-cabeca-acao:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }

/* O cabeçalho que abre e fecha as agendas é um botão do tamanho do cabeçalho. */
html body #dc-root #dt-config .dt-accordion-head { cursor: pointer; padding-right: 20px !important; align-items: center !important; }
html body #dc-root #dt-config .dt-accordion-head:hover { background: var(--surface-2) !important; }
html body #dc-root #dt-config .dt-accordion-copy { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
html body #dc-root #dt-config .dt-accordion-title { font: 700 12px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase; color: var(--text) !important; }
html body #dc-root #dt-config .dt-accordion-copy small { font: 400 11.5px/1.3 var(--font-ui) !important; color: var(--text-3) !important; text-transform: none; letter-spacing: 0; }
html body #dc-root #dt-config .dt-accordion-chevron { flex: none; transition: transform 160ms cubic-bezier(.22, .61, .36, 1); }
html body #dc-root #dt-config .dt-accordion-head[aria-expanded="true"] .dt-accordion-chevron { transform: rotate(180deg); }
html body #dc-root #dt-config .dt-accordion-body { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }

/* Linha: 72px, rótulo à esquerda, controle à direita. */
html body #dc-root #dt-config .dtcfg-linha {
  min-height: 72px;
  display: flex !important; align-items: center !important; gap: 14px !important;
  margin: 0 !important; padding: 12px 20px !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important;
}
html body #dc-root #dt-config :is(.dtcfg-cartao, .dt-guia-box, .dt-accordion-body, .dt-hydration-body) > .dtcfg-linha:last-child,
html body #dc-root #dt-config :is(.dtcfg-cartao, .dt-guia-box) > sc-for:last-child > .dtcfg-linha:last-child { border-bottom: 0 !important; }
html body #dc-root #dt-config .dtcfg-linha-rotulo {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  font: 600 13px/1.25 var(--font-ui); color: var(--text);
}
html body #dc-root #dt-config .dtcfg-linha-rotulo small {
  display: block;
  font: 400 11.5px/1.4 var(--font-ui); color: var(--text-3);
  white-space: normal;
}

/* Botão de linha: contorno reto de 40px; o cheio é tinta; o de perigo, vermelho. */
/* Todos os botões das Configurações com a MESMA largura (pedido do dono,
   17/09): antes iam de 61px ("Sair") a 104px ("Trocar foto") e a coluna da
   direita ficava serrilhada. 148px cabe o maior rótulo com folga. */
html body #dc-root #dt-config .dtcfg-botao {
  flex: none; height: 40px !important; min-height: 0 !important; min-width: 148px !important; width: auto !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  margin: 0 !important; padding: 0 18px !important;
  border: 1px solid var(--text) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important; white-space: nowrap; cursor: pointer;
  filter: none !important; text-transform: none !important; letter-spacing: 0 !important;
}
html body #dc-root #dt-config .dtcfg-botao:hover { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #dt-config .dtcfg-botao.is-cheio { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #dt-config .dtcfg-botao.is-cheio:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }
html body #dc-root #dt-config .dtcfg-botao.is-perigo { border-color: var(--danger) !important; color: var(--danger) !important; }
html body #dc-root #dt-config .dtcfg-botao.is-perigo:hover { background: var(--danger) !important; color: var(--bg) !important; }
html body #dc-root #dt-config .dtcfg-selo {
  flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--line); font: 700 10px/1 var(--font-ui); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-3);
}

/* Células de ícone coladas, 49px, com fio só entre elas. */
html body #dc-root #dt-config .dtcfg-celulas { flex: none; display: flex; align-self: stretch; margin: -12px -20px -12px 0; }
html body #dc-root #dt-config .dtcfg-celula {
  width: 49px !important; height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-2) !important;
}
html body #dc-root #dt-config .dtcfg-celula:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root #dt-config .dtcfg-celula.is-perigo:hover { background: var(--danger) !important; color: var(--bg) !important; }

/* Grupo de escolha: células coladas de 38px; a escolhida fica preta. */
html body #dc-root #dt-config .dtcfg-pilulas {
  flex: none;
  display: flex !important; align-items: stretch !important; gap: 0 !important; flex-wrap: nowrap !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
}
html body #dc-root #dt-config .dtcfg-pilulas > button,
html body #dc-root #dt-config .dtcfg-pilulas > sc-for > button {
  height: 38px !important; min-height: 0 !important; width: auto !important; min-width: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 14px !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important; white-space: nowrap;
}
html body #dc-root #dt-config .dtcfg-pilulas button:last-child { border-right: 0 !important; }
html body #dc-root #dt-config .dt-zoom-options.dtcfg-pilulas > button { background: var(--bg) !important; }
html body #dc-root #dt-config .dt-zoom-options.dtcfg-pilulas > button:hover { background: var(--surface-2) !important; }
html body #dc-root #dt-config .dt-zoom-options.dtcfg-pilulas > button[aria-checked="true"] { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #dt-config .dtcfg-pilulas button[style*="var(--accent)"] { color: var(--bg) !important; }

/* Interruptor do template: 52×28, arredondado; o trilho vem do estado. */
html body #dc-root #dt-config .dtcfg-interruptor {
  flex: none; width: 52px !important; height: 28px !important; min-height: 0 !important;
  display: flex !important; align-items: center; padding: 3px !important; margin: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 999px !important; cursor: pointer;
}
html body #dc-root #dt-config .dtcfg-interruptor > span {
  display: block; width: 20px !important; height: 20px !important;
  border-radius: 50% !important; background: var(--bg) !important;
  border: 1px solid var(--line);
}

/* --- Perfil ---------------------------------------------------------------- */
html body #dc-root #dt-config .dtcfg-perfil {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 20px; border-bottom: 1px solid var(--line);
}
html body #dc-root #dt-config .dtcfg-avatar { flex: none; cursor: pointer; }
html body #dc-root #dt-config .dtcfg-avatar-circulo {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 0 !important; background: color-mix(in srgb, var(--text) 15%, var(--bg));
  font: 700 22px/1 var(--font-ui); color: var(--text);
}
html body #dc-root #dt-config .dtcfg-avatar-circulo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
html body #dc-root #dt-config .dtcfg-perfil-copia { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html body #dc-root #dt-config .dtcfg-perfil-copia strong { font: 700 16px/1 var(--font-ui); letter-spacing: -.3px; color: var(--text); }
html body #dc-root #dt-config .dtcfg-perfil-copia small { font: 400 12px/1.2 var(--font-ui) !important; color: var(--text-3) !important; margin: 0 !important; }

/* Campos: grade de duas colunas, rótulo em caixa alta, campo de 44px. */
html body #dc-root #dt-config .dtcfg-campos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  padding: 22px 20px;
}
html body #dc-root #dt-config .dtcfg-cartao > .dtcfg-campos:not(:last-child) { border-bottom: 1px solid var(--line); }
html body #dc-root #dt-config .dt-hydration-fields { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); }
@media (max-width: 879px) { html body #dc-root #dt-config .dtcfg-campos { grid-template-columns: minmax(0, 1fr); } }
html body #dc-root #dt-config .dtcfg-campo {
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
html body #dc-root #dt-config .dtcfg-campo > span {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.6px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body #dc-root #dt-config .dtcfg-corpo :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], input:not([type])) {
  width: 100% !important; height: 44px !important; min-height: 44px;
  margin: 0 !important; padding: 0 14px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  font: 400 13.5px/1 var(--font-ui) !important; outline: none;
}
html body #dc-root #dt-config .dtcfg-corpo input:focus { border-color: var(--text) !important; }
html body #dc-root #dt-config .dtcfg-corpo input[readonly] { color: color-mix(in srgb, var(--text) 60%, var(--bg)) !important; }

html body #dc-root #dt-config .dtcfg-aniversario {
  grid-column: 1 / -1;
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px !important; align-items: end;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
html body #dc-root #dt-config .dtcfg-contagem {
  height: 44px; display: flex !important; align-items: center; gap: 10px;
  margin: 0 !important; padding: 0 14px !important;
  border: 1px solid var(--line) !important; background: none !important;
}
/* A idade é o dado que a pessoa procura ali — ela fica grande, na chapa, e a
   contagem de dias vira a linha de apoio. */
html body #dc-root #dt-config .dtcfg-contagem { background: var(--chapa) !important; gap: 12px !important; }
html body #dc-root #dt-config .dtcfg-contagem strong { font: 700 28px/1 var(--font-ui) !important; letter-spacing: -1px; color: var(--text) !important; font-variant-numeric: tabular-nums; }
html body #dc-root #dt-config .dtcfg-contagem span { font: 400 12px/1.35 var(--font-ui) !important; color: var(--text-2) !important; }
@media (max-width: 879px) { html body #dc-root #dt-config .dtcfg-aniversario { grid-template-columns: minmax(0, 1fr); } }

/* --- Tema: células de 72px coladas; a escolhida fica preta ----------------- */
html body #dc-root #dt-config .dtcfg-temas {
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
html body #dc-root #dt-config .dtcfg-temas > .dt-theme-auto { display: contents !important; }
html body #dc-root #dt-config .dtcfg-temas button[role="radio"] {
  min-height: 72px !important; height: auto !important; width: auto !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  margin: 0 !important; padding: 14px 16px !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important; box-shadow: none !important;
  text-align: left;
}
html body #dc-root #dt-config .dtcfg-temas > .dt-theme-auto > button:last-child { border-right: 0 !important; }
html body #dc-root #dt-config .dtcfg-temas button[role="radio"]:hover { background: var(--surface-2) !important; }
html body #dc-root #dt-config .dtcfg-temas button[role="radio"][aria-checked="true"] { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #dt-config .dtcfg-temas button svg { width: 26px; height: 26px; flex: none; }
html body #dc-root #dt-config .dtcfg-amostra { width: 26px; height: 26px; flex: none; display: block; border: 1px solid var(--line); }
html body #dc-root #dt-config .dtcfg-amostra.is-claro { background: #f5f5f5; border-color: #cfcfcf; }
html body #dc-root #dt-config .dtcfg-amostra.is-escuro { background: #0d0d0d; border-color: #3a3a3a; }
/* A amostra do Colorido mostra as três tintas que mandam nele: laranja, creme e petróleo. */
html body #dc-root #dt-config .dtcfg-amostra.is-colorido { background: linear-gradient(135deg, #fc7800 0 34%, #f3e3c8 34% 66%, #184854 66%); border-color: #0c1824; }
html body #dc-root #dt-config .dtcfg-tema-copia { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html body #dc-root #dt-config .dtcfg-tema-copia b { font: 600 13px/1 var(--font-ui); }
html body #dc-root #dt-config .dtcfg-tema-copia small { font: 400 11px/1.3 var(--font-ui); opacity: .7; }
@media (max-width: 1179px) {
  html body #dc-root #dt-config .dtcfg-temas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Cinco opções em duas colunas: o Colorido ocupa a linha do meio inteira. */
  html body #dc-root #dt-config .dtcfg-temas > button[data-theme="colorido"] { grid-column: 1 / -1; border-right: 0 !important; }
  html body #dc-root #dt-config .dtcfg-temas > button[data-theme="light"] { border-right: 0 !important; }
  html body #dc-root #dt-config .dtcfg-temas button[role="radio"] { border-bottom: 1px solid var(--line) !important; }
}

/* --- Agendas --------------------------------------------------------------- */
html body #dc-root #dt-config .dtcfg-agenda-cor { width: 4px; align-self: stretch; margin: -12px 0 -12px -20px; flex: none; }
html body #dc-root #dt-config .dtcfg-agenda-form {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: 18px; align-items: end;
  margin: 0; padding: 22px 20px; border-top: 1px solid var(--line);
}
html body #dc-root #dt-config .dtcfg-agenda-form .dtcfg-botao { height: 44px !important; }
@media (max-width: 879px) { html body #dc-root #dt-config .dtcfg-agenda-form { grid-template-columns: minmax(0, 1fr); } }
html body #dc-root #dt-config :is(.dtcfg-vazio, .dtcfg-nota) {
  margin: 0; padding: 18px 20px;
  font: 400 11.5px/1.5 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root #dt-config .dtcfg-vazio { border-bottom: 1px solid var(--line); }

/* --- Hidratação ------------------------------------------------------------- */
html body #dc-root #dt-config .dt-hydration-body { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html body #dc-root #dt-config .dt-hydration-passo {
  flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important;
  font: 600 11px/1 var(--font-ui) !important; color: var(--text-2) !important;
}
html body #dc-root #dt-config .dtcfg-hidra { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-top: 1px solid var(--line); }
html body #dc-root #dt-config .dt-hydration-bar { height: 3px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: color-mix(in srgb, var(--text) 10%, var(--bg)) !important; overflow: hidden; }
html body #dc-root #dt-config .dt-hydration-bar > i { display: block; height: 100%; border-radius: 0 !important; background: var(--text) !important; }
html body #dc-root #dt-config .dt-hydration-barfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 !important; }
html body #dc-root #dt-config .dt-hydration-barfoot > span { font: 400 11.5px/1.4 var(--font-ui); color: var(--text-3); }
html body #dc-root #dt-config .dt-hydration-note { border-top: 1px solid var(--line); }

/* --- Privacidade (entra por script no fim da aba App e privacidade) -------- */
html body #dc-root #dt-config .dt-priv-bloco h5 {
  min-height: 56px; margin: 0 !important; padding: 0 20px !important;
  display: flex; align-items: center; border-bottom: 1px solid var(--line);
  font: 700 12px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase; color: var(--text) !important;
}
html body #dc-root #dt-config .dt-priv-bloco p { margin: 0 !important; padding: 18px 20px !important; border-bottom: 1px solid var(--line); font: 400 12px/1.45 var(--font-ui) !important; color: var(--text-3) !important; }
html body #dc-root #dt-config .dt-priv-linha {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
html body #dc-root #dt-config .dt-priv-linha + .dt-priv-linha { border-top: 1px solid var(--line); }
html body #dc-root #dt-config .dt-priv-linha .dt-priv-btn {
  min-height: 56px; margin: 0 !important; padding: 0 20px !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body #dc-root #dt-config .dt-priv-linha .dt-priv-btn + .dt-priv-btn { border-left: 1px solid var(--line) !important; }
html body #dc-root #dt-config .dt-priv-linha .dt-priv-btn:hover { background: var(--surface-2) !important; }
html body #dc-root #dt-config .dt-priv-linha .dt-priv-btn.perigo { color: var(--danger) !important; }
html body #dc-root #dt-config .dt-priv-linha .dt-priv-btn.perigo:hover { background: var(--danger) !important; color: var(--bg) !important; }