.visualizacao-colecao {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  background: #f5f5f7;
}
.visualizacao-colecao[hidden] { display: none; }
.visualizacao-colecao button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6e6e73;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.visualizacao-colecao button:hover { background: #ececf0; color: #242426; }
.visualizacao-colecao button[aria-pressed="true"] { background: #dbe8ff; color: #173b75; }
.visualizacao-colecao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.visualizacao-colecao svg rect { fill: none; }
.visualizacao-colecao svg circle { fill: currentColor; stroke: none; }

/* Os dados e os cabeçalhos pertencem a cada página, não ao DOM do cartão. */
.pp .item-lista, .pp .lista-cabecalho, .pp .lista-resumo { display: none; }
body[data-colecao-view="lista"] .grade {
  --lista-layout: minmax(180px, 1fr) minmax(110px, 168px) minmax(140px, 190px) 80px;
  display: flex; flex-direction: column; align-content: start; gap: 0;
  min-width: 0; padding: 0; border: 1px solid #e0e3ea; border-radius: 14px;
  background: #fff; overflow: hidden; container-type: inline-size;
}
body[data-colecao-pagina="tarefas"] .grade { --lista-layout: minmax(180px, 1fr) minmax(110px, 160px) minmax(120px, 152px) 80px 48px; }
body[data-colecao-pagina="biblioteca"] .grade { --lista-layout: minmax(180px, 1fr) minmax(100px, 168px) minmax(110px, 120px) 132px 80px; }
body[data-colecao-pagina="wishlist"] .grade { --lista-layout: minmax(160px, 1fr) minmax(90px, 168px) minmax(105px, 112px) minmax(80px, 96px) minmax(100px, 112px) 80px; }
body[data-colecao-pagina="countdowns"] .grade { --lista-layout: minmax(160px, 1fr) minmax(130px, 180px) minmax(190px, 240px) 48px; }
body[data-colecao-view="lista"] .lista-cabecalho {
  display: grid; grid-template-columns: var(--lista-layout); gap: 16px;
  padding: 12px 16px; color: #555d6b; background: #fafbfc;
  font-size: 11px; font-weight: 700; border-bottom: 1px solid #e0e3ea;
}
body[data-colecao-view="lista"] .grade > .item {
  display: grid; grid-template-columns: var(--lista-layout); align-items: center;
  gap: 16px; width: 100%; min-height: 72px; padding: 14px 16px;
  border: 0; border-bottom: 1px solid #eceef2; border-radius: 0; box-shadow: none;
}
body[data-colecao-view="lista"] .grade > .item:last-child { border-bottom: 0; }
body[data-colecao-view="lista"] .grade > .item:hover { background: #f8faff; box-shadow: none; }
body[data-colecao-view="lista"] .grade > .item::before { display: none; }
body[data-colecao-view="lista"] .grade > .item > :not(.item-topo):not(.item-lista):not(.item-acoes):not(.card-abrir) { display: none !important; }
body[data-colecao-view="lista"] .grade > .item > .item-topo { grid-column: 1; padding: 0 !important; min-width: 0; align-items: center; }
body[data-colecao-view="lista"] .grade > .item > .item-topo::before {
  content: ""; flex: 0 0 3px; width: 3px; height: 24px;
  border-radius: 999px; background: var(--cor); align-self: center;
}
body[data-colecao-view="lista"] .lista-cabecalho > span:first-child { padding-left: 13px; }
body[data-colecao-view="lista"] .item-txt { min-width: 0; }
body[data-colecao-view="lista"] .item-t { overflow-wrap: anywhere; line-height: 1.4; }
body[data-colecao-view="lista"] .item-s { margin-top: 3px; line-height: 1.4; }
body[data-colecao-view="lista"] .lista-resumo { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; color: #68707d; font-size: 12px; line-height: 1.5; }
body[data-colecao-view="lista"] .item-lista { display: contents; }
body[data-colecao-view="lista"] .lista-celula { min-width: 0; font-size: 12px; color: #555d6b; overflow-wrap: anywhere; }
body[data-colecao-view="lista"] .lista-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-colecao-view="lista"] .lista-valor { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
body[data-colecao-view="lista"] .lista-valor .tag { white-space: normal; line-height: 1.4; }
body[data-colecao-view="lista"] .lista-hora { color: #68707d; }
body[data-colecao-view="lista"] .lista-contagem strong { font-size: 20px; color: inherit; font-variant-numeric: tabular-nums; }
body[data-colecao-view="lista"] .lista-celula[data-coluna="Preço"] { font-weight: 700; color: #242426; font-variant-numeric: tabular-nums; }
body[data-colecao-view="lista"] .lista-valor .item-barra { flex-basis: 100%; width: 100%; height: 4px; margin-top: 3px; }
body[data-colecao-view="lista"] .grade > .item > .item-acoes { position: relative; top: auto; right: auto; grid-column: -2; display: flex; justify-content: flex-end; gap: 4px; opacity: 1; }
body[data-colecao-view="lista"] .item-acoes .act { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
@media (min-width: 1101px) { body[data-colecao-view="lista"] .row-wrap > .cats { width: 220px !important; flex-basis: 220px; padding: 20px !important; } }
@container (max-width: 760px) {
  body[data-colecao-view="lista"] .lista-cabecalho { display: none; }
  body[data-colecao-view="lista"] .grade > .item { grid-template-columns: minmax(0, 1fr) 80px; gap: 10px 16px; }
  body[data-colecao-view="lista"] .item-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 10px 16px; }
  body[data-colecao-view="lista"] .lista-celula { flex: 0 1 auto; max-width: 100%; }
  body[data-colecao-view="lista"] .lista-rotulo { display: block; position: static; width: auto; height: auto; clip-path: none; font-size: 11px; color: #68707d; margin-bottom: 3px; }
  body[data-colecao-view="lista"] .grade > .item > .item-acoes { grid-column: 2; grid-row: 1; }
  body[data-colecao-view="lista"] .lista-resumo { -webkit-line-clamp: 2; }
  body[data-colecao-view="lista"] .lista-celula[data-vazio] { display: none; }
  body[data-colecao-pagina="biblioteca"] .lista-celula[data-coluna="Avaliação"],
  body[data-colecao-pagina="tarefas"] .lista-celula[data-coluna="Subtarefas"] { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  body[data-colecao-view="lista"] .item-acoes .act { width: 40px; min-width: 40px; height: 44px; min-height: 44px; }
  body[data-colecao-view="lista"] .grade > .item { padding: 14px; }
}