/* DarkTask — Listas, Social Media e Pesquisas (template 09/2026)
 *
 * Medidas de ListasPanel.dc.html e ListasExtras.dc.html. As três telas de
 * espaço montam o mesmo esqueleto de classes .dl-* (topo, abas, busca, grade
 * de cartões, modais), então o topo, a grade e os modais valem para as três;
 * o que é só da lista aberta fica escopado em #darklist-container.
 *
 * Os contratos prendem classes e textos do darklist.js e receitas antigas em
 * app-polish.css e floating-shell.css (vidro, 42px, raio 12). Elas continuam
 * lá; aqui o prefixo com dois ids e !important dá o desenho do template por
 * cima, sem mexer nas funções. Carrega depois de modais.css.
 */

/* As telas de espaço encostam nas bordas da área de conteúdo. */
html:is([data-dt-tela="lista"], [data-dt-tela="social"], [data-dt-tela="pesquisas"]) body #dc-root #dt-conteudo {
  max-width: none !important;
  padding: 0 !important;
}

/* =========================================================================
   TOPO — faixa de 98px com o título, a contagem e as ações em células
   ========================================================================= */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero {
  position: relative;
  height: 98px; min-height: 98px;
  display: flex !important; align-items: stretch !important; justify-content: space-between !important;
  gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background-color: var(--bg) !important;
  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%) !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  overflow: hidden;
}
[data-dt-theme="dark"] :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero {
  --dtp-metal-a: #121212; --dtp-metal-b: #181818; --dtp-metal-c: #232323; --dtp-brilho: #0d0d0d;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero::before,
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero::after { content: none !important; display: none !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-copy {
  flex: 1; min-width: 0;
  display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 9px !important;
  margin: 0 !important; padding: 0 20px 18px !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-copy :is(.dl-eyebrow, p) { display: none !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-copy :is(h1, h2) {
  margin: 0 !important;
  font: 700 22px/1 var(--font-ui) !important; letter-spacing: -.6px !important;
  color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A contagem vira a linha fina embaixo do título, como no protótipo. */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-metric {
  position: absolute; left: 20px; top: 58px;
  display: flex !important; align-items: baseline !important; gap: 5px !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-metric :is(strong, span) {
  font: 400 11.5px/1 var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--text-2) !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-metric strong { font-weight: 700 !important; color: var(--text) !important; }
/* As ações ocupam exatamente o trilho da direita — a mesma coluna da
   engrenagem, do sino e do relógio no cabeçalho, e do Clima na Hoje — em
   células de largura igual. */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side {
  position: static !important;
  flex: none;
  width: calc(var(--casca-trilho, 400px) - var(--dtc-barra, 0px)) !important; max-width: none !important;
  display: flex !important; flex-direction: row-reverse !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > :is(button, a) { flex: 1 1 0 !important; }
html body #dc-root #darklist-container .dl-editor-header > div:last-child { width: calc(var(--casca-trilho, 400px) - var(--dtc-barra, 0px)); }
html body #dc-root #darklist-container .dl-editor-header > div:last-child > :is(button, span) { flex: 1 1 0 !important; }
@media (max-width: 879px) {
  html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side { width: auto !important; }
  /* No celular as ações viram uma faixa de células de 49px abaixo do título.
     O :root ganha da regra base das células, que vem depois e zera o
     min-height; o topo deixa de ter 98px fixos para caber a faixa. */
  :root body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero { height: auto !important; min-height: 98px !important; }
  :root body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side { flex: none !important; }
  /* O título fica numa banda de 98px com topo fixo, para a contagem (absoluta,
     top 58px) cair logo abaixo dele mesmo com a faixa de ações embaixo. */
  :root body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-copy {
    height: 98px !important; min-height: 98px !important; flex: none !important; box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
    padding: 24px 20px 0 !important;
  }
  :root body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > :is(button, a) {
    min-height: 49px !important; border-top: 1px solid var(--line) !important;
  }
  html body #dc-root #darklist-container .dl-editor-header > div:last-child { width: auto; }
}
/* Grupos de botões dos espaços: colados, fio compartilhado, sem margem.
   A GRADE DE CARTÕES fica de fora: cada cartão é um <button>, então ela casava
   com esta regra e perdia os 25px entre as colunas — os cartões apareciam
   colados, com o vão só entre as linhas. */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) :is(div, span):has(> button + button):not(.dl-hero-side):not(.dl-tabs):not(.dl-item-acoes):not(.dl-status-buttons):not(.dl-grid):not(.dt-task-grid):not([class*="-grid"]) { column-gap: 0 !important; }
html body #dc-root #darklist-container #dl-cost-section :is(div, span) > button + button { margin-left: -1px !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > :is(button, a) {
  width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  margin: 0 !important; padding: 0 22px !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;
  flex: 1 1 0 !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > :is(button, a):hover { background: var(--surface-2) !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > .dl-create-primary {
  padding: 0 24px !important; background: var(--text) !important; color: var(--bg) !important; letter-spacing: .3px;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side > .dl-create-primary:hover {
  background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side svg { width: 18px; height: 18px; }

/* =========================================================================
   ABAS E BUSCA — grupo de células de 44px e campo de 300px
   ========================================================================= */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-bar {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 14px !important;
  margin: 25px 25px 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav.dl-tabs {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  overflow-x: auto;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .dl-tab-btn {
  height: 44px !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; gap: 9px !important;
  margin: 0 !important; padding: 0 16px !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) 60%, var(--bg)) !important;
  box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important; white-space: nowrap;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .dl-tab-btn:last-child { border-right: 0 !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .dl-tab-btn:not(.active):hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .dl-tab-btn.active {
  background: var(--text) !important; color: var(--bg) !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .dl-tab-btn svg { width: 18px; height: 18px; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .sm-tab-count {
  min-width: 0; height: auto; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; color: var(--text-3) !important;
  font: 400 11px/1 var(--font-ui) !important;
}
/* Regra 8: a contagem da aba parada é o apagado #606060, não o cinza da aba com
   opacidade por cima (dava 3:1). Na aba ativa, sobre o preto, o recuo de tom fica. */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .dl-tab-btn.active .sm-tab-count { color: inherit !important; opacity: .7; }
html body #dc-root #darklist-container .dl-busca-listas {
  width: 300px; max-width: 100%; height: 44px;
  margin: 0 0 0 auto !important; padding: 0 14px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
}
html body #dc-root #darklist-container .dl-busca-listas svg { width: 18px; height: 18px; color: var(--text-3); }
html body #dc-root #darklist-container .dl-busca-campo {
  flex: 1; min-width: 0; height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  font: 400 13px/1 var(--font-ui) !important; color: var(--text) !important;
}
@media (max-width: 719px) {
  html body #dc-root #darklist-container .dl-busca-listas { width: 100%; margin: 0 !important; }
  html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-nav .dl-tab-btn span:not(.sm-tab-count) { display: none; }
}

/* =========================================================================
   GRADE DE CARTÕES
   ========================================================================= */
html body #dc-root :is(#darklist-container, #socialmedia-container) .dl-section-heading {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 10px !important;
  margin: 25px 25px 0 !important; padding: 0 !important; text-align: left !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container) .dl-section-heading > div {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; text-align: left !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-workspace-bar > :last-child:not(.dl-workspace-nav) { margin-left: auto !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container) .dl-section-heading span {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container) .dl-section-heading h3 {
  margin: 0 !important; font: 700 22px/1 var(--font-ui) !important; letter-spacing: -.6px !important; color: var(--text) !important;
}

html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 25px !important;
  margin: 25px !important; padding: 0 !important;
}
@media (max-width: 1179px) {
  html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 879px) {
  html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-grid { grid-template-columns: minmax(0, 1fr) !important; margin: 16px !important; gap: 16px !important; }
}

html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
  min-height: 0 !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: none !important; transform: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  text-align: left !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card:hover { background: color-mix(in srgb, var(--text) 3%, var(--bg)) !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card::before,
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card::after { content: none !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-kicker {
  height: 44px; flex: none;
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 0 !important; padding: 0 18px !important;
  border-bottom: 1px solid var(--line) !important;
  font: 700 9.5px/1 var(--font-ui) !important; letter-spacing: 1.4px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-kicker > span:first-child { font-size: 11px !important; font-variant-numeric: tabular-nums; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-tipo {
  flex: 1; min-width: 0;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 0 !important; border: 0 !important; background: none !important;
  font: inherit !important; letter-spacing: inherit !important;
  color: var(--text-3) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-header {
  display: flex !important; align-items: center !important; gap: 14px !important;
  margin: 0 !important; padding: 18px 18px 0 !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-title {
  flex: 1; min-width: 0; margin: 0 !important;
  font: 700 21px/1.1 var(--font-ui) !important; letter-spacing: -.6px !important; color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-arrow {
  width: 36px; height: 36px; flex: none;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important;
  font: 400 16px/1 var(--font-ui) !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card:hover .dl-card-arrow { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-desc {
  margin: 0 !important; padding: 12px 18px 0 !important;
  font: 400 12.5px/1.45 var(--font-ui) !important; color: var(--text-2) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-progress {
  height: 3px !important; flex: none;
  margin: auto 18px 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: color-mix(in srgb, var(--text) 10%, var(--bg)) !important;
  box-shadow: none !important; overflow: hidden;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-desc + .dl-card-progress { margin-top: 18px !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-progress > span {
  display: block; height: 100% !important; border-radius: 0 !important; background: var(--text) !important; box-shadow: none !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-status {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  margin: 0 !important; padding: 12px 18px 18px !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-status strong { font: 700 12.5px/1 var(--font-ui) !important; color: var(--text) !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-status span { font: 400 11.5px/1.3 var(--font-ui) !important; color: var(--text-3) !important; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-footer {
  height: 44px; flex: none;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  margin: 0 !important; padding: 0 18px !important;
  border-top: 1px solid var(--line) !important;
  font: 400 11.5px/1 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-footer svg { width: 16px; height: 16px; }
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card-footer :is(span, small) {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  font: inherit !important; color: inherit !important;
}

/* Vazios e busca sem resultado: moldura tracejada. */
html body #dc-root #darklist-container :is(.dl-busca-vazia, .dl-history-empty, #dl-tab-content > div[style*="text-align"]) {
  margin: 25px !important; padding: 44px 24px !important;
  border: 1px solid color-mix(in srgb, var(--text) 23%, var(--bg)) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  font: 400 12.5px/1.5 var(--font-ui); color: var(--text-3);
  text-align: center;
}

/* =========================================================================
   LISTA ABERTA
   ========================================================================= */
html body #dc-root #darklist-container.editor { gap: 0 !important; }

/* Topo de 98px: célula de voltar de 128px, título com o selo do tipo, a linha
   de dono e data, e as ações do dono em células à direita. */
html body #dc-root #darklist-container .dl-editor-header {
  position: relative;
  min-height: 98px;
  display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: space-between !important;
  gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
  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"] #darklist-container .dl-editor-header { --dtp-metal-a: #121212; --dtp-metal-b: #181818; --dtp-metal-c: #232323; --dtp-brilho: #0d0d0d; }
html body #dc-root #darklist-container .dl-editor-header > div:first-child {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  padding: 0 20px 0 148px;
}
html body #dc-root #darklist-container .dl-editor-header > div:first-child > div:first-child { gap: 10px !important; min-width: 0; }
html body #dc-root #darklist-container .dl-editor-header button[onclick*="closeList"] {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 128px !important; height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  margin: 0 !important; padding: 0 !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;
  font: 600 12.5px/1 var(--font-ui) !important;
}
html body #dc-root #darklist-container .dl-editor-header button[onclick*="closeList"]:hover { background: var(--surface-2) !important; }
html body #dc-root #darklist-container .dl-editor-header h2 {
  margin: 0 !important; min-width: 0;
  font: 700 22px/1 var(--font-ui) !important; letter-spacing: -.6px !important; color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #dc-root #darklist-container .dl-tipo-selo {
  flex: none; height: 22px;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important;
  font: 700 10px/1 var(--font-ui) !important; letter-spacing: 1.4px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body #dc-root #darklist-container .dl-editor-header > div:first-child > p { display: none !important; }
html body #dc-root #darklist-container .dl-editor-header > div:first-child > div:last-child {
  margin: 0 !important; gap: 8px !important;
  font: 400 11.5px/1 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root #darklist-container .dl-editor-header > div:first-child > div:last-child b { font-weight: 600; color: var(--text-2); }
html body #dc-root #darklist-container .dl-editor-header > div:last-child {
  flex: none; align-self: stretch;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
}
html body #dc-root #darklist-container .dl-editor-header > div:last-child > :is(button, span) {
  height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  margin: 0 !important; padding: 0 16px !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 #darklist-container .dl-editor-header > div:last-child > button:hover { background: var(--surface-2) !important; }
html body #dc-root #darklist-container .dl-editor-header > div:last-child > .dl-btn-danger { color: var(--danger) !important; }
html body #dc-root #darklist-container .dl-editor-header > div:last-child > .dl-btn-danger:hover { background: var(--danger) !important; color: var(--bg) !important; }
@media (max-width: 719px) {
  html body #dc-root #darklist-container .dl-editor-header button[onclick*="closeList"] { width: 56px !important; font-size: 0 !important; }
  html body #dc-root #darklist-container .dl-editor-header > div:first-child { padding-left: 76px; }
  html body #dc-root #darklist-container .dl-editor-header > div:last-child > button span { display: none; }
  html body #dc-root #darklist-container .dl-editor-header > div:last-child > button { padding: 0 !important; width: 56px; font-size: 0 !important; }
  html body #dc-root #darklist-container .dl-tipo-selo { display: none !important; }
}

/* Números: células de 96px, o número em cima e o nome embaixo. */
html body #dc-root #darklist-container .dl-stat-chips {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
html body #dc-root #darklist-container .dl-stat-chip {
  min-height: 96px;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 8px !important;
  margin: 0 !important; padding: 0 20px !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important;
  font: 600 11px/1 var(--font-ui) !important; letter-spacing: .4px;
  color: var(--text-3) !important;
  white-space: nowrap;
}
html body #dc-root #darklist-container .dl-stat-chip:last-child { border-right: 0 !important; }
html body #dc-root #darklist-container .dl-stat-chip b {
  font: 700 21px/1 var(--font-ui) !important; letter-spacing: -.4px;
  color: var(--text) !important; font-variant-numeric: tabular-nums;
}

/* Abas internas: três células iguais de 49px. */
html body #dc-root #darklist-container.editor > .dl-tabs {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: none !important;
}
html body #dc-root #darklist-container.editor > .dl-tabs .dl-tab-btn {
  min-height: 49px !important; height: 49px !important; max-height: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  margin: 0 !important; padding: 0 12px !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) 60%, var(--bg)) !important;
  box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body #dc-root #darklist-container.editor > .dl-tabs .dl-tab-btn:last-child { border-right: 0 !important; }
html body #dc-root #darklist-container.editor > .dl-tabs .dl-tab-btn:not(.active):hover { background: var(--surface-2) !important; }
html body #dc-root #darklist-container.editor > .dl-tabs .dl-tab-btn.active { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #darklist-container .dl-badge-count {
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; color: inherit !important; opacity: 1; /* era .7: por cima do apagado da aba, o número caía a 2,7:1 */
  font: 400 11.5px/1 var(--font-ui) !important;
}

html body #dc-root #darklist-container #dl-editor-tab-content { margin: 25px; }

/* --- Itens ---------------------------------------------------------------- */
html body #dc-root #darklist-container #dl-editor-tab-content > div { gap: 22px !important; }
html body #dc-root #darklist-container .sm-filter-block { display: flex; flex-direction: column; gap: 10px; }
html body #dc-root #darklist-container .sm-group-title {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body #dc-root #darklist-container .dl-filter-tabs {
  display: flex !important; flex-wrap: wrap; gap: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
}
html body #dc-root #darklist-container .dl-filter-btn {
  height: 38px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 15px !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) 60%, var(--bg)) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important;
}
html body #dc-root #darklist-container .dl-filter-btn:last-child { border-right: 0 !important; }
html body #dc-root #darklist-container .dl-filter-btn:not(.active):hover { background: var(--surface-2) !important; }
html body #dc-root #darklist-container .dl-filter-btn.active { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #darklist-container #dl-editor-tab-content input.dl-input[placeholder="Buscar item..."] {
  width: 300px !important; max-width: 100%; height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important; box-shadow: none !important;
  font: 400 13px/1 var(--font-ui) !important;
}

html body #dc-root #darklist-container .dl-add-item-form {
  height: 49px;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
}
html body #dc-root #darklist-container .dl-add-item-form #dl-new-item-text {
  flex: 1; min-width: 0; height: auto !important;
  margin: 0 !important; padding: 0 20px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 400 14.5px/1 var(--font-ui) !important; color: var(--text) !important; outline: none;
}
html body #dc-root #darklist-container .dl-add-item-form #dl-add-item-button {
  height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 34px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
  font: 600 13.5px/1 var(--font-ui) !important; letter-spacing: .3px;
}
html body #dc-root #darklist-container .dl-add-item-form:has(#dl-new-item-text:placeholder-shown) #dl-add-item-button {
  background: var(--line) !important; color: var(--text-3) !important;
}

/* A caixa dos itens: linhas de 64px separadas por fio, ações em células de
   52px à direita. */
html body #dc-root #darklist-container .dl-itens-caixa {
  margin: 0 !important; padding: 0 !important; gap: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
}
html body #dc-root #darklist-container #dl-items-container { display: flex !important; flex-direction: column !important; gap: 0 !important; }
html body #dc-root #darklist-container .dl-item-row {
  min-height: 64px;
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px !important;
  margin: 0 !important; padding: 0 0 0 16px !important;
  border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
html body #dc-root #darklist-container .dl-item-row:first-child { border-top: 0 !important; }
html body #dc-root #darklist-container .dl-item-row:hover { background: color-mix(in srgb, var(--text) 3%, var(--bg)) !important; }
html body #dc-root #darklist-container .dl-drag-handle { align-self: center; color: color-mix(in srgb, var(--text) 23%, var(--bg)) !important; }
html body #dc-root #darklist-container .dl-item-foto { align-self: center; border-radius: 0 !important; }
html body #dc-root #darklist-container .dl-item-foto img { border-radius: 0 !important; }
html body #dc-root #darklist-container .dl-item-corpo {
  flex: 1 1 auto !important; min-width: 0;
  display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 6px !important;
  padding: 12px 0 !important;
}
html body #dc-root #darklist-container .dl-item-input {
  width: 100%; height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 700 14.5px/1.2 var(--font-ui) !important; color: var(--text) !important; outline: none;
}
html body #dc-root #darklist-container .dl-item-input.e-riscado { text-decoration: line-through; color: var(--text-3) !important; font-weight: 500 !important; }
html body #dc-root #darklist-container .dl-item-quando { font: 400 11px/1 var(--font-ui) !important; color: var(--text-3) !important; }
html body #dc-root #darklist-container .dl-item-acoes {
  flex: none !important; margin: 0 !important;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
}
html body #dc-root #darklist-container .dl-status-buttons { display: flex !important; align-items: stretch !important; gap: 0 !important; }
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status {
  width: 52px !important; min-width: 52px !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  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; box-shadow: none !important;
}
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status svg { width: 18px !important; height: 18px !important; }
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status:hover { background: var(--surface-2) !important; color: var(--text) !important; }
/* Os quatro tratamentos de status (skin 2).
   Antes só havia aceso/apagado: tudo que não fosse o estado atual ficava
   transparente e o aceso virava chapa preta — "Assistindo" e "Assistido"
   pintavam igual. Quem declara o tratamento é o catálogo (tratoDoStatus em
   darklist.js), e aqui só se escreve como cada um se parece. Nenhuma cor nova:
   preto, chapa, fio e o perigo que já existe. */
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status.dl-status-cor.active {
  background: var(--text) !important; color: var(--bg) !important;
}
/* done — terminou: chapa preta cheia (é o padrão do .active acima). */
/* mid — começou e não terminou: chapa cinza, tinta normal. */
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status.dl-status-cor.active[data-dl-trato="mid"] {
  background: var(--chapa) !important; color: var(--text) !important;
}
/* fav — destaque que não conclui: fio preto com papel dentro. */
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status.dl-status-cor.active[data-dl-trato="fav"] {
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: inset 0 0 0 1px var(--text) !important;
}
/* cancel — saiu da lista: sem chapa, tinta de perigo. O texto do item já é
   riscado pelo .e-riscado, que lê o mesmo risca_texto do catálogo. */
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status.dl-status-cor.active[data-dl-trato="cancel"] {
  background: transparent !important; color: var(--danger-text) !important;
}
/* O rótulo de quem só tem leitura segue os mesmos quatro tratamentos. */
html body #dc-root #darklist-container .dl-status-label[data-dl-trato="done"] {
  background: var(--text) !important; color: var(--bg) !important;
}
html body #dc-root #darklist-container .dl-status-label[data-dl-trato="mid"] {
  background: var(--chapa) !important; color: var(--text) !important;
}
html body #dc-root #darklist-container .dl-status-label[data-dl-trato="fav"] {
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: inset 0 0 0 1px var(--text) !important;
}
html body #dc-root #darklist-container .dl-status-label[data-dl-trato="cancel"] {
  background: transparent !important; color: var(--danger-text) !important;
}
html body #dc-root #darklist-container .dl-item-acoes .dl-btn-excluir:hover { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #darklist-container .dl-status-label {
  align-self: center; margin-right: 16px;
  height: 20px; display: inline-flex; align-items: center; padding: 0 8px;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important;
  font: 700 10px/1 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root #darklist-container .dl-itens-vazio {
  min-height: 80px; display: flex; align-items: center; justify-content: center;
  margin: 0 !important; border: 0 !important; background: transparent !important;
  font: 400 12.5px/1 var(--font-ui); color: var(--text-3);
}
@media (max-width: 719px) {
  html body #dc-root #darklist-container #dl-editor-tab-content { margin: 16px; }
  html body #dc-root #darklist-container .dl-item-acoes .dl-btn-status { width: 46px !important; min-width: 46px !important; }
  html body #dc-root #darklist-container .dl-item-row { flex-wrap: wrap !important; padding: 0 0 0 12px !important; }
  html body #dc-root #darklist-container .dl-item-acoes { width: 100%; justify-content: flex-end; border-top: 1px solid var(--line); margin-left: -12px !important; width: calc(100% + 12px); }
}

/* Custos, participantes e atividade: caixas com fio e cabeçalho de 49px. */
html body #dc-root #darklist-container #dl-cost-section { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
html body #dc-root #darklist-container #dl-cost-section * { border-radius: 0 !important; box-shadow: none !important; }
html body #dc-root #darklist-container .dl-sidebar-box {
  min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #dc-root #darklist-container .dl-sidebar-box > h3 {
  height: 49px; margin: 0 !important; padding: 0 20px !important;
  display: flex !important; align-items: center !important;
  border-bottom: 1px solid var(--line);
  font: 700 14px/1 var(--font-ui) !important; color: var(--text) !important;
}
html body #dc-root #darklist-container .dl-sidebar-box > div { gap: 0 !important; padding: 0 !important; }
html body #dc-root #darklist-container .dl-sidebar-box > div > * {
  min-height: 56px; margin: 0 !important; padding: 12px 20px !important;
  border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important;
  display: flex; flex-direction: column; justify-content: center;
}
html body #dc-root #darklist-container .dl-sidebar-box > div > *:first-child { border-top: 0 !important; }
html body #dc-root #darklist-container .dl-participant-row { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; min-height: 60px !important; }
html body #dc-root #darklist-container .dl-avatar {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text) 15%, var(--bg)) !important; color: var(--text) !important;
  font: 700 13px/1 var(--font-ui) !important;
}
html body #dc-root #darklist-container .dl-btn-icon-danger {
  width: 40px; height: 40px; border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-2) !important;
}
html body #dc-root #darklist-container .dl-btn-icon-danger:hover { background: var(--danger) !important; color: var(--bg) !important; border-color: var(--danger) !important; }

/* Encerrar lista: a caixa de perigo do protótipo. */
html body #dc-root #darklist-container .dl-close-list-footer {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; flex-wrap: wrap;
  margin: 0 25px 25px !important; padding: 20px !important;
  border: 1px solid var(--danger-text) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
html body #dc-root #darklist-container .dl-close-list-footer strong { display: block; margin-bottom: 6px; font: 700 14px/1.2 var(--font-ui) !important; color: var(--danger-text) !important; }
html body #dc-root #darklist-container .dl-close-list-footer span { font: 400 12px/1.45 var(--font-ui) !important; color: var(--text-2) !important; }
html body #dc-root #darklist-container .dl-close-list-footer .dl-btn-danger {
  height: 44px !important; min-height: 0 !important; padding: 0 22px !important;
  border: 1px solid var(--danger-text) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--danger-text) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important;
}
html body #dc-root #darklist-container .dl-close-list-footer .dl-btn-danger:hover { background: var(--danger-text) !important; color: var(--bg) !important; }
html body #dc-root #darklist-container .dl-closed-badge {
  border-radius: 0 !important; background: transparent !important;
  font: 700 10px/1 var(--font-ui) !important; letter-spacing: 1.4px; text-transform: uppercase;
}

/* =========================================================================
   MODAIS DOS ESPAÇOS — .dl-modal-overlay (Listas, Social Media, Pesquisas)
   Topo de 72px, corpo 24/20, campos de 44px, ações em células de 64px.
   ========================================================================= */
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) {
  background: rgba(0, 0, 0, .32) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-modal-dialog {
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: var(--font-ui) !important;
  overflow: hidden auto;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(.dl-system-modal-header, .dl-standard-modal-header) {
  min-height: 72px;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  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;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(.dl-system-modal-header, .dl-standard-modal-header) :is(h2, h3) {
  margin: 0 !important; font: 700 17px/1 var(--font-ui) !important; letter-spacing: -.4px !important; color: var(--text) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(.dl-system-modal-header, .dl-standard-modal-header) :is(.dl-btn-close-modal, button:last-child) {
  width: 72px !important; min-width: 72px !important; height: 72px !important; min-height: 0 !important; max-height: none !important;
  align-self: stretch;
  display: flex !important; align-items: center !important; justify-content: center !important;
  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) !important; box-shadow: none !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(.dl-system-modal-body, .dl-standard-modal-body) {
  margin: 0 !important; padding: 24px 20px !important;
  background: transparent !important; border: 0 !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-label {
  display: block; margin: 0 0 10px !important;
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.6px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-input,
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(input[type="text"], input[type="email"], input:not([type]), select, textarea) {
  min-height: 44px;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important; box-shadow: none !important;
  font-family: var(--font-ui) !important; font-size: 13.5px !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(.dl-input, input, select, textarea):focus { border-color: var(--text) !important; outline: none; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-btn-primary {
  min-height: 44px !important; border: 0 !important; border-radius: 0 !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important; letter-spacing: .3px;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-btn-primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(.dl-btn-secondary, .dl-quiet-action) {
  min-height: 44px !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) :is(.dl-btn-secondary, .dl-quiet-action):hover { background: var(--surface-2) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-btn-danger {
  min-height: 44px !important; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--bg)) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--danger) !important; box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-btn-danger:hover { background: var(--danger) !important; color: var(--bg) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-tipo-grade { gap: 10px !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-tipo-opcao {
  min-height: 46px !important; padding: 0 14px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important; text-align: left;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-tipo-opcao:hover { background: var(--surface-2) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-tipo-opcao.ativo {
  background: var(--surface-3, var(--surface-2)) !important; border-color: var(--text) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-tipo-dica { font: 400 11.5px/1.45 var(--font-ui) !important; color: var(--text-3) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-standard-modal-actions {
  margin: 0 -20px -24px !important; padding: 0 !important;
  min-height: 64px;
  display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0 !important;
  border-top: 1px solid var(--line) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-standard-modal-actions > button {
  min-height: 0 !important; height: auto !important;
  margin: 0 !important; padding: 0 24px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .dl-standard-modal-actions > button:first-child { border-left: 0 !important; margin-right: auto !important; }

/* === Colagem em lote ======================================================
 *
 * Colar um texto no campo de novo item vira vários itens. O desenho é o do
 * template: topo 72, rodapé 64, raio 0, campo 44, prévia que rola em 360.
 * Antes isto era estilo inline dentro do darklist.js — 22px de raio e Inter
 * no meio da Plus Jakarta, sobra do desenho antigo.
 *
 * A linha duplicada é a parte que importa: ela aparece riscada, com o motivo
 * ao lado, e NÃO é criada. Não some calada porque a comparação é normalizada
 * (sem acento, sem caixa) e pode errar — quem colou precisa poder ver. */
html body #dc-root .dl-colagem-dialog {
  width: 100% !important; max-width: 880px !important; max-height: 82vh !important;
  display: flex !important; flex-direction: column !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  overflow: hidden !important;
}
html body #dc-root .dl-colagem-topo {
  height: 72px; min-height: 72px; flex: 0 0 72px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 0 0 25px;
  border-bottom: 1px solid var(--line);
}
html body #dc-root .dl-colagem-topo h3 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
html body #dc-root .dl-colagem-topo .dl-btn-close-modal {
  width: 72px; height: 72px; flex: 0 0 72px;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--text);
}
html body #dc-root .dl-colagem-topo .dl-btn-close-modal:hover { background: var(--surface-2); }

html body #dc-root .dl-colagem-ajustes {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 25px; border-bottom: 1px solid var(--line);
}
html body #dc-root .dl-colagem-corte {
  margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 2px solid var(--text);
  background: var(--surface-2); font-size: 13px; color: var(--text);
}
html body #dc-root .dl-colagem-opcao {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
}
html body #dc-root .dl-colagem-opcao input { width: 16px; height: 16px; cursor: pointer; }

html body #dc-root .dl-colagem-previa {
  flex: 1 1 auto; min-height: 0; max-height: 360px; overflow-y: auto;
  padding: 0; display: block;
}
html body #dc-root .dl-colagem-linha {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 25px;
  border-bottom: 1px solid var(--line);
}
html body #dc-root .dl-colagem-linha:last-child { border-bottom: 0; }
html body #dc-root .dl-colagem-numero {
  width: 28px; flex: 0 0 28px;
  font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
/* !important nos dois: o floating-shell.css pinta TODO campo dentro de um
   .dl-modal-overlay com !important, e sem isto o riscado sai preto. */
html body #dc-root .dl-colagem-texto {
  flex: 1 1 auto; min-width: 0; height: 44px;
  border: 0 !important; background: transparent !important; color: var(--text) !important;
  font: inherit; font-size: 14px !important; padding: 0 !important; outline-offset: -2px;
}
html body #dc-root .dl-colagem-marca {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--line); color: var(--text-2);
}
/* O duplicado: riscado, apagado, e o motivo com a tinta de perigo. */
html body #dc-root .dl-colagem-linha.e-duplicada { background: var(--surface-2); }
html body #dc-root .dl-colagem-linha.e-duplicada .dl-colagem-texto {
  text-decoration: line-through !important; color: var(--text-3) !important;
}
html body #dc-root .dl-colagem-marca.e-fora {
  border-color: var(--danger-text); color: var(--danger-text);
}

html body #dc-root .dl-colagem-rodape {
  height: 64px; min-height: 64px; flex: 0 0 64px;
  display: flex; align-items: stretch; gap: 0;
  border-top: 1px solid var(--line);
}
html body #dc-root .dl-colagem-rodape button {
  flex: 1 1 0; min-width: 0; height: 64px;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  font-size: 13px;
}
html body #dc-root .dl-colagem-rodape button:first-child { border-left: 0; }
html body #dc-root .dl-colagem-rodape .dl-btn-primary {
  background: var(--text); color: var(--bg);
}
html body #dc-root .dl-colagem-rodape .dl-btn-primary[disabled] {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}

@media (max-width: 879px) {
  html body #dc-root .dl-colagem-rodape { height: auto; min-height: 0; flex: 0 0 auto; flex-wrap: wrap; }
  html body #dc-root .dl-colagem-rodape button { flex: 1 1 100%; height: 48px; border-left: 0; border-top: 1px solid var(--line); }
  html body #dc-root .dl-colagem-linha { padding: 0 16px; }
}

/* === Social Media: a trilha do planejamento ===============================
 *
 * Cinco nós numa fileira, com a contagem em cada um, e a barra do mês embaixo.
 * Substitui os quatro números soltos: número solto não diz ordem nem de quem é
 * a bola, e a pergunta desta tela é "onde o mês travou".
 *
 * Nenhuma cor nova. O nó vazio fica apagado; o nó final (Liberado) é o único
 * com chapa, porque é o único que significa "acabou". Quem voltou com recado
 * aparece na sub-linha, com a tinta de perigo.
 *
 * ≥1180 os cinco lado a lado; 880–1179 em duas colunas; abaixo, um por linha. */
html body #dc-root #socialmedia-container .sm-trilha {
  height: 56px; flex: none;
  display: flex !important; align-items: center; gap: 14px;
  margin: 0; padding: 0 20px;
  border: 0; border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
html body #dc-root #socialmedia-container .sm-trilha-titulo {
  flex: none; white-space: nowrap;
  font: 700 10.5px/1 var(--font-ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-3);
}
html body #dc-root #socialmedia-container .sm-trilha-passo { flex: none; display: flex; align-items: center; gap: 14px; }
html body #dc-root #socialmedia-container .sm-trilha-no {
  height: 30px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--bg); color: color-mix(in srgb, var(--text) 80%, var(--bg));
  font: 600 11.5px/1 var(--font-ui);
}
html body #dc-root #socialmedia-container .sm-trilha-no.e-ativo {
  border-color: var(--text); background: var(--text); color: var(--bg);
}
/* Quem voltou com recado é o único caso de tinta de perigo aqui — e só no fio. */
html body #dc-root #socialmedia-container .sm-trilha-no.e-devolvido:not(.e-ativo) { border-color: var(--danger-text); }
html body #dc-root #socialmedia-container .sm-trilha-icone { width: 16px; height: 16px; flex: none; }
html body #dc-root #socialmedia-container .sm-trilha-conta { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
html body #dc-root #socialmedia-container .sm-trilha-seta { display: flex; flex: none; color: color-mix(in srgb, var(--text) 20%, var(--bg)); }
/* A banda NUNCA rola e NUNCA quebra (PADRAO-SOCIAL-INTERNA §3): abaixo de
   1180px os nós colapsam em ícone + contagem, e o rótulo continua no title.
   Rolar esconderia justamente o último nó — "Liberado", que é a meta do fluxo —
   atrás de um arrasto numa tira de 40px, porque a barra de 16px cabe dentro
   dos 56 da banda. */
@media (max-width: 1179px) {
  html body #dc-root #socialmedia-container .sm-trilha { gap: 10px; }
  html body #dc-root #socialmedia-container .sm-trilha-titulo,
  html body #dc-root #socialmedia-container .sm-trilha-no .sm-trilha-rotulo { display: none; }
  html body #dc-root #socialmedia-container .sm-trilha-passo { gap: 10px; }
  html body #dc-root #socialmedia-container .sm-trilha-no { padding: 0 10px; }
}
/* No celular os chevrons saem e as pílulas apertam: cinco nós em 359px só
   cabem assim, e a regra do molde é que a banda não rola nem quebra. */
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .sm-trilha { gap: 6px; padding: 0 12px; justify-content: space-between; }
  html body #dc-root #socialmedia-container .sm-trilha-passo { gap: 0; }
  html body #dc-root #socialmedia-container .sm-trilha-seta { display: none; }
  html body #dc-root #socialmedia-container .sm-trilha-no { gap: 6px; padding: 0 8px; }
}

/* O conteúdo que espera uma ação do criador ganha fio preto no cartão: é o que
   precisa de mão agora. Sem cor nova — o fio já existe, só fica forte.
   Vale para os dois casos em que a bola está com quem cria e não há recado
   pendente na tela (o recado tem o próprio aviso, .sm-em-revisao). */
html body #dc-root #socialmedia-container .sm-accordion-card[data-sm-estagio="aguardando-arte"] {
  border-color: var(--text) !important;
}

/* === Social Media: a importação em lote ===================================
 *
 * A prévia deixou de ser uma lista de títulos e virou uma lista de blocos que
 * carregam diagnóstico. Três sinais, em ordem de peso, e nenhuma cor nova:
 *
 *   fio de 3px na borda esquerda   perigo se trava · apagado se só avisa ·
 *                                  fio fraco se está pulado · nada se limpo
 *   etiqueta ERRO                  chapa de perigo — a única da tela
 *   etiqueta AVISO                 fio apagado, mesma altura, peso menor
 *
 * E o `meta` diz em palavras o que a cor diz: "4 campos lidos · 1 aviso".
 * Quem não distingue as cores recebe a mesma informação — e "3 campos lidos"
 * costuma ser o primeiro sinal de que o gabarito colado era de outro tipo. */
html body #dc-root .sm-import-card {
  border-left: 3px solid transparent !important;
}
html body #dc-root .sm-import-card[data-sm-diag="trava"] { border-left-color: var(--danger-text) !important; }
html body #dc-root .sm-import-card[data-sm-diag="aviso"] { border-left-color: var(--text-3) !important; }
html body #dc-root .sm-import-card[data-sm-diag="pulado"] { border-left-color: var(--line) !important; }

html body #dc-root .sm-import-meta {
  margin: 0; padding: 0 16px 10px 16px;
  font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
html body #dc-root .sm-import-codigo { font-variant-numeric: tabular-nums; }

/* As faixas de diagnóstico vêm sob a linha, com fio em cima, erro primeiro. */
html body #dc-root :is(.sm-import-erros, .sm-import-avisos) {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line);
}
html body #dc-root :is(.sm-import-erros, .sm-import-avisos) li {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 49px; padding: 12px 16px;
  font-size: 12.5px; line-height: 1.4; color: var(--text-2);
}
html body #dc-root :is(.sm-import-erros, .sm-import-avisos) li + li { border-top: 1px solid var(--line); }
html body #dc-root .sm-import-marca {
  flex: 0 0 auto; height: 22px; display: inline-flex; align-items: center;
  padding: 0 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
html body #dc-root .sm-import-marca.e-erro {
  background: var(--danger-text); color: var(--bg);
}
html body #dc-root .sm-import-marca.e-aviso {
  border: 1px solid var(--text-3); color: var(--text-2);
}

/* A faixa de bloqueio ganhou o atalho de pular tudo que trava. */
html body #dc-root .sm-import-bloqueio {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  min-height: 72px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--danger-text);
  background: var(--surface-2);
  font-size: 13px; color: var(--text);
}
html body #dc-root .sm-import-pular-erros {
  flex: 0 0 auto; height: 44px; padding: 0 16px;
  border: 1px solid var(--text) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  font-size: 12.5px; font-weight: 600;
}
html body #dc-root .sm-import-pular-erros:hover { background: var(--text) !important; color: var(--bg) !important; }

@media (max-width: 879px) {
  html body #dc-root .sm-import-bloqueio { min-height: 0; }
  html body #dc-root .sm-import-pular-erros { flex: 1 1 100%; }
  html body #dc-root :is(.sm-import-erros, .sm-import-avisos) li { padding: 12px; }
}

/* O título repetido é o terceiro sinal, e não é nem erro nem aviso: não trava,
   mas pede uma DECISÃO de quem colou — e aviso nenhum pede decisão. Por isso
   vem com caixa de marcar dentro, faixa de 56px, e fio preto (tinta, não
   perigo) na borda do bloco. Fica entre a trava e o aviso na precedência. */
html body #dc-root .sm-import-card[data-sm-diag="repetido"] { border-left-color: var(--text) !important; }
html body #dc-root .sm-import-repetido {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; margin: 0; padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.4; color: var(--text-2);
  cursor: pointer;
}
html body #dc-root .sm-import-repetido input {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 0;
  accent-color: var(--text); cursor: pointer;
}

/* As travas de volume moram no topo e ganham fio de 3px, como o bloco que
   trava. São lista porque as duas (50 por lote, 500 no projeto) podem valer ao
   mesmo tempo. */
html body #dc-root .sm-import-erros-topo {
  border: 1px solid var(--line); border-left: 3px solid var(--danger-text);
}
html body #dc-root .sm-import-erros-topo li { min-height: 56px; }

/* === Pesquisas: os tipos 7 e 8 (PesquisasTiposExtras) =====================
 *
 * Vale nos DOIS lugares onde a pesquisa aparece: dentro da casca
 * (#surveys-container) e na página pública, que monta fora dela, direto no
 * body (#surveys-standalone-root). Por isso o prefixo não é #dc-root.
 *
 * Matriz: o resultado é a própria matriz, com o tom proporcional à fatia de
 * cada nível na linha, e uma coluna de concordância (os dois níveis de cima).
 * Escala por expressão: moda e distribuição na ordem da escala, sem média.
 * Nenhuma cor nova — o tom é o preto em cinco degraus, e no Escuro o degrau
 * alto é o claro, porque mais tem de ser mais visível nos dois temas. */

/* --- os cinco tons --- */
html body :is(#surveys-container, #surveys-standalone-root) .surv-tom-0 { background: transparent; color: var(--text-3); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-tom-1 { background: var(--chapa); color: var(--text-2); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-tom-2 { background: #d4d4d4; color: #000000; font-weight: 600; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-tom-3 { background: #b4b4b4; color: #000000; font-weight: 700; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-tom-4 { background: var(--text); color: var(--bg); font-weight: 700; }
html:not([data-dt-theme="light"]) body :is(#surveys-container, #surveys-standalone-root) .surv-tom-2 { background: #2e2e2e; color: #f5f5f5; }
html:not([data-dt-theme="light"]) body :is(#surveys-container, #surveys-standalone-root) .surv-tom-3 { background: #474747; color: #f5f5f5; }

/* --- resultado da matriz --- */
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-nota { margin: 0 0 12px; font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-rolagem { overflow-x: auto; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-grade { display: grid; border: 1px solid var(--line); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-cab {
  min-height: 64px; display: flex; align-items: flex-end; padding: 12px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-cab-nivel {
  justify-content: center; padding: 12px 8px; text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--text);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-cab-conc { justify-content: flex-end; border-right: 0; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-afirmacao {
  min-height: 56px; display: flex; align-items: center; padding: 10px 12px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 12px; line-height: 1.35; color: var(--text);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-cel {
  min-height: 56px; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-conc {
  min-height: 56px; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-conc-trilho { position: relative; flex: none; width: 120px; height: 6px; background: var(--chapa); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-conc-trilho > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-conc-num { flex: none; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-legenda { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-legenda-rotulo { font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-legenda-tons { display: flex; border: 1px solid var(--line); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-legenda-tons > span {
  display: flex; align-items: center; justify-content: center; height: 32px; min-width: 64px; padding: 0 10px;
  border-right: 1px solid var(--line); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-legenda-tons > span:last-child { border-right: 0; }

/* --- resultado da escala por expressão --- */
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-moda {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-height: 72px; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface-2);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-moda strong { font-size: 13.5px; line-height: 1.3; color: var(--text); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-moda > span { font-size: 11.5px; line-height: 1.4; color: var(--text-2); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-linha {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--line); border-top: 0;
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-rotulo { flex: none; width: 170px; font-size: 13px; line-height: 1.3; color: var(--text); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-trilho { position: relative; flex: 1; min-width: 0; height: 14px; background: var(--chapa); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-trilho > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text-3); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-linha.is-moda .surv-ex-trilho > span { background: var(--text); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-linha.is-moda :is(.surv-ex-rotulo, .surv-ex-pct) { font-weight: 700; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-pct { flex: none; width: 54px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-n { flex: none; width: 44px; text-align: right; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-nota { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-2); }

/* --- página pública: matriz --- */
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-wrapper { overflow-x: auto; border: 1px solid var(--line); border-radius: 0 !important; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-table { width: 100%; border-collapse: collapse; border-radius: 0 !important; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-table :is(th, td) { border: 1px solid var(--line) !important; border-radius: 0 !important; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-table thead th {
  height: 64px; min-width: 88px; padding: 12px 8px; vertical-align: bottom; text-align: center;
  background: var(--surface-2) !important; font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--text);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-table thead th:first-child {
  min-width: 200px; text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-table tbody td { height: 56px; text-align: center; background: transparent !important; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-table tbody td:first-child { padding: 10px 12px; text-align: left; font-size: 12px; line-height: 1.35; color: var(--text); }
html body :is(#surveys-container, #surveys-standalone-root) :is(.surv-matrix-radio, .surv-matrix-ficha-op input) { width: 18px; height: 18px; margin: 0; accent-color: var(--text); cursor: pointer; }
/* No celular a matriz deixa de ser tabela: uma ficha por afirmação, níveis
   empilhados em linhas de 44px, o alvo de toque. */
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-fichas { display: none; border: 1px solid var(--line); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-ficha { min-width: 0; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); }
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-ficha:last-child { border-bottom: 0; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-ficha legend {
  float: left; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-ficha-n {
  flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1px solid var(--text); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-ficha-op {
  clear: both; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px;
  border-top: 1px solid var(--line); cursor: pointer; font-size: 13px; line-height: 1.35; color: var(--text);
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-ficha-op:hover { background: var(--surface-2); }

/* --- página pública: escala por expressão --- */
html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-grid {
  display: flex !important; gap: 0 !important; border: 1px solid var(--line); border-radius: 0 !important;
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-btn {
  flex: 1 1 0; min-width: 0; min-height: 56px; margin: 0; padding: 8px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important;
  font-size: 12.5px; line-height: 1.3;
}
html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-btn:first-child { border-left: 0 !important; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-btn:hover { background: var(--surface-2) !important; }
html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-btn.is-selected { background: var(--text) !important; color: var(--bg) !important; font-weight: 600; }

@media (max-width: 879px) {
  html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-wrapper { display: none; }
  html body :is(#surveys-container, #surveys-standalone-root) .surv-matrix-fichas { display: flex; flex-direction: column; }
  html body :is(#surveys-container, #surveys-standalone-root) .surv-mx-conc-trilho { width: 60px; }
  html body :is(#surveys-container, #surveys-standalone-root) .surv-ex-rotulo { width: 110px; }
  html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-grid { flex-direction: column; }
  html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-btn { min-height: 44px; border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  html body :is(#surveys-container, #surveys-standalone-root) .surv-semantic-btn:first-child { border-top: 0 !important; }
}

/* O acordeão de resultados por pergunta ainda vinha do desenho antigo: cantos
   de 14/16px e corpo em rgba(0,0,0,.2) — a receita de vidro escuro, que no
   tema Claro pinta um cinza sujo por trás de tudo. Os tons da matriz foram
   pensados sobre papel: sobre esse cinza, as células de 0–7% e 8–14% sumiam.
   Aqui só o mínimo para a leitura dos resultados: raio 0, fio, e papel no
   corpo. O resto da tela de resultados é porte à parte. */
html body #surveys-container :is(.surv-dash-q-accordion, .surv-respondent-accordion-card) {
  border-radius: 0 !important; border: 1px solid var(--line) !important; background: var(--bg) !important;
}
html body #surveys-container .surv-dash-q-accordion-head { min-height: 56px; background: transparent !important; border-radius: 0 !important; }
html body #surveys-container .surv-dash-q-accordion-head:hover { background: var(--surface-2) !important; }
html body #surveys-container .surv-dash-q-accordion-body { padding: 20px !important; border-top: 1px solid var(--line) !important; background: var(--bg) !important; }
html body :is(#surveys-container, #surveys-standalone-root) :is(.surv-mx-grade, .surv-ex-linha) { background: var(--bg); }