/* ==========================================================================
   AdFlow — app shell

     ┌──────────┬────────────────────────────────────────┐
     │ sidebar  │ topbar   — busca global, avisos, conta │
     │ (escura) ├────────────────────────────────────────┤
     │  220px   │ pagehead — título, abas, indicadores   │
     │          ├────────────────────────────────────────┤
     │          │ toolbar  — filtros da tela (sticky)    │
     │          ├────────────────────────────────────────┤
     │          │ activebar — filtros ativos (sticky)    │
     │          ├────────────────────────────────────────┤
     │          │ conteúdo                               │
     └──────────┴────────────────────────────────────────┘

   A navegação é escura e o conteúdo é claro: esse contraste separa moldura
   de trabalho e dá peso à tela.

   A soma das faixas STICKY é medida em JS e publicada como --dock, que o
   cabeçalho da tabela usa como `top`. Não fixe esse valor no CSS: a toolbar
   quebra linha e a faixa de filtros ativos aparece e some.
   ========================================================================== */

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

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--nav);
  transition: width var(--t) var(--ease);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--topbar-h);
  padding: 0 var(--sp-3) 0 var(--sp-4);
  flex: 0 0 auto;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  border-radius: var(--r-sm);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--nav-active);
  color: var(--accent-vivid);
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
  white-space: nowrap;
  color: var(--nav-fg-2);
}

.sidebar__collapse {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  color: var(--nav-fg);
  transition: var(--t-ui);
}

.sidebar__collapse:hover { background: var(--nav-2); color: var(--nav-fg-2); }

.sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
}

.nav-group + .nav-group { margin-top: var(--sp-5); }

.nav-group__label {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: 12px;
  font-weight: 400;
  color: #5f6f7c;
  white-space: nowrap;
}

/* Item de menu. O ativo ganha fundo verde-escuro e um acento lateral
   discreto — sem pílula flutuante, sem contraste exagerado. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--nav-fg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--t-ui);
}

.nav-item + .nav-item { margin-top: 2px; }
.nav-item svg { flex: 0 0 auto; opacity: 0.85; transition: opacity var(--t) var(--ease); }
.nav-item:hover { background: var(--nav-2); color: var(--nav-fg-2); }
.nav-item:hover svg { opacity: 1; }

.nav-item.is-active {
  background: var(--nav-active);
  color: var(--nav-fg-2);
  font-weight: 600;
}

.nav-item.is-active svg { color: var(--accent-vivid); opacity: 1; }

/* Acento lateral do item ativo. */
.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--accent-vivid);
}

.nav-item__count {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 12px;
  color: #5f6f7c;
  font-variant-numeric: tabular-nums;
}

.nav-item.is-active .nav-item__count { color: var(--nav-fg); }

/* Rodapé: cartão do plano + conta ------------------------------------------ */

.sidebar__footer {
  flex: 0 0 auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.plan-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r);
  background: var(--nav-2);
  color: var(--nav-fg);
  text-align: left;
  transition: var(--t-ui);
}

.plan-card:hover { background: var(--nav-3); }

.plan-card__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--nav-active);
  color: var(--accent-vivid);
}

.plan-card__name { font-size: 13px; font-weight: 600; color: var(--nav-fg-2); line-height: 1.3; }
.plan-card__note { font-size: 12px; line-height: 1.3; opacity: 0.8; }
.plan-card__caret { flex: 0 0 auto; opacity: 0.6; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: var(--r);
  text-align: left;
  color: var(--nav-fg);
  transition: var(--t-ui);
}

.user-chip:hover { background: var(--nav-2); }

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.user-chip__name { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--nav-fg-2); }
.user-chip__role { font-size: 12px; line-height: 1.3; opacity: 0.75; }
.user-chip__caret { flex: 0 0 auto; opacity: 0.6; }

/* Recolhida ---------------------------------------------------------------- */

:root.is-collapsed .sidebar { width: var(--sidebar-w-min); }

:root.is-collapsed .brand-name,
:root.is-collapsed .nav-item span:not(.nav-item__count),
:root.is-collapsed .nav-item__count,
:root.is-collapsed .nav-group__label,
:root.is-collapsed .plan-card__info,
:root.is-collapsed .plan-card__caret,
:root.is-collapsed .user-chip__info,
:root.is-collapsed .user-chip__caret { display: none; }

:root.is-collapsed .sidebar__brand { justify-content: center; padding: 0; }

/* Recolhida, o cabeçalho mostra SÓ o botão de expandir. Escondê-lo — ou
   deixá-lo aparecer apenas no hover — tira do usuário o caminho de volta:
   ele recolhe a barra e não acha mais como abrir. */
:root.is-collapsed .brand-link { display: none; }
:root.is-collapsed .sidebar__collapse { width: 36px; height: 36px; }
:root.is-collapsed .sidebar__nav { padding-left: var(--sp-2); padding-right: var(--sp-2); }
:root.is-collapsed .nav-item { justify-content: center; padding: 0; }
:root.is-collapsed .nav-item.is-active::before { left: -8px; }
:root.is-collapsed .sidebar__footer { padding: var(--sp-2); }
:root.is-collapsed .plan-card,
:root.is-collapsed .user-chip { justify-content: center; padding: 8px 0; }
:root.is-collapsed .nav-group + .nav-group { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--nav-line); }
:root.is-collapsed .app__main { margin-left: var(--sidebar-w-min); }

/* Etiqueta ao passar o mouse quando recolhida. */
:root.is-collapsed .nav-item::after,
:root.is-collapsed .plan-card::after,
:root.is-collapsed .user-chip::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  border-radius: var(--r-xs);
  background: var(--fg);
  color: #fff;
  box-shadow: var(--pop);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
  z-index: 10;
}

:root.is-collapsed .plan-card,
:root.is-collapsed .user-chip { position: relative; }

:root.is-collapsed .nav-item:hover::after,
:root.is-collapsed .nav-item:focus-visible::after,
:root.is-collapsed .plan-card:hover::after,
:root.is-collapsed .user-chip:hover::after { opacity: 1; }

/* ==========================================================================
   Coluna de trabalho
   ========================================================================== */

.app__main {
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--t) var(--ease);
}

/* --------------------------------------------------------------------------
   Topbar — header global: busca em todo o sistema, avisos e conta.
   Compacta de propósito: 66px e nada mais.
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  background: var(--s0);
  border-bottom: 1px solid transparent;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* Ao rolar, o header ganha fundo sólido e um fio: sem isso o conteúdo
   passa por baixo dele e some sem transição. */
.topbar.is-stuck {
  background: var(--s1);
  border-bottom-color: var(--line);
}

.topbar__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }

.topbar__scope {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--fg-3);
  white-space: nowrap;
}

.topbar__scope-sep { color: var(--line-3); }

.topbar__spacer { flex: 1 1 auto; }
.topbar__end { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

.topbar__div {
  width: 1px;
  height: 24px;
  background: var(--line);
  flex: 0 0 auto;
  margin: 0 2px;
}

.topbar__menu {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  margin-left: -8px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  transition: var(--t-ui);
}

.topbar__menu:hover { background: var(--s2-hover); color: var(--fg); }

/* Título dentro do header, para as telas que não trazem um pagehead. */
.topbar .page-title { font-size: 20px; font-weight: 600; letter-spacing: -0.017em; }

/* --------------------------------------------------------------------------
   Cabeçalho da página — título, subtítulo, contagem, ação primária,
   abas de status e faixa de indicadores. Rola junto com o conteúdo.
   -------------------------------------------------------------------------- */

/* O padding de baixo é o respiro entre a faixa de indicadores e o que vem
   depois — a barra de filtros na biblioteca, o gráfico no dashboard. Sem
   ele os cartões encostam no bloco seguinte. */
.pagehead { padding: 0 var(--gutter) var(--sp-5); }

.pagehead__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
}

.pagehead__titles { min-width: 0; }

.pagehead__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Toolbar — filtros da tela. Faixa própria, sticky abaixo do header.
   -------------------------------------------------------------------------- */

.toolbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--toolbar-h);
  padding: var(--sp-3) var(--gutter);
  background: var(--s0);
  flex-wrap: wrap;
}

/* Variante em cartão: uma superfície branca de ponta a ponta com os
   controles dentro dela.

   Cada controle mantém o contorno próprio e eles se separam por espaço —
   não por fios verticais. É a leitura da referência do produto: caixas
   iguais, do mesmo tamanho, alinhadas dentro de uma faixa só. */
.toolbar--card {
  padding: 0 var(--gutter) var(--sp-4);
  background: var(--s0);
  min-height: 0;
  display: block;
}

.toolbar--card > .toolbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  flex-wrap: wrap;
}

/* Sem realce de fundo no hover: o que muda é a borda, e só um degrau.
   Um retângulo cinza a cada passada do mouse quebra a leitura da faixa. */
.toolbar--card .input:hover,
.toolbar--card .filterfield:hover { border-color: var(--line-2); background-color: var(--s2); }

.toolbar--card .toolbar__end { gap: var(--sp-2); }

.toolbar__spacer { flex: 1 1 auto; }
.toolbar__end { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* Divisor vertical entre grupos de controle. Sobra para telas que ainda
   agrupam controles sem cartão. */
.toolbar__sep {
  width: 1px;
  height: 26px;
  background: var(--line);
  flex: 0 0 auto;
  align-self: center;
}

/* Na barra em cartão os controles já se separam por espaço. */
.toolbar--card .toolbar__sep { display: none; }

/* --------------------------------------------------------------------------
   Campo de filtro: rótulo cinza + valor em tinta, lado a lado.

   É um <select> de verdade por baixo — teclado, leitor de tela e o "change"
   que recarrega a lista continuam sendo os do navegador. O rótulo só mora
   fora dele para a barra dizer o que cada controle filtra sem repetir a
   palavra dentro de cada opção.
   -------------------------------------------------------------------------- */

.filterfield {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 2px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--s2);
  transition: var(--t-ui);
  flex: 0 0 auto;
  min-width: 0;
  cursor: pointer;
}

.filterfield:hover { border-color: var(--line-2); }
.filterfield:focus-within { border-color: var(--accent); box-shadow: var(--focus); }

.filterfield__icon { display: grid; place-items: center; color: var(--fg-3); flex: 0 0 auto; }

.filterfield__label {
  font-size: 13px;
  color: var(--fg-4);
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
}

/* O select perde a moldura: quem desenha a caixa é o .filterfield.

   O seletor é duplo (`.filterfield .filterfield__select`) de propósito.
   components.css carrega DEPOIS deste arquivo, então `.select` — mesma
   especificidade, fonte mais tarde — vencia este bloco e devolvia ao select
   a borda, a sombra, o `width: 100%` e os 40px de altura do campo solto. O
   resultado na barra era borda dupla em volta de "Todos" e de "Todo o
   período", o valor esticado por toda a linha e os contornos brigando no
   hover. Um degrau a mais de especificidade resolve sem !important. */
.filterfield .filterfield__select {
  height: 38px;
  min-width: 0;
  width: auto;
  padding: 0 26px 0 0;
  border: 0;
  border-radius: 0;
  /* `background-color`, não o atalho `background`: a seta do select é uma
     imagem de fundo herdada de .select e o atalho a apagaria. */
  background-color: transparent;
  background-position: right 4px center;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}

/* Quem responde ao mouse e ao foco é o campo inteiro, via :hover e
   :focus-within do .filterfield. O select por dentro não desenha nada. */
.filterfield .filterfield__select:hover,
.filterfield .filterfield__select:focus {
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

/* O contorno de foco do navegador também é do campo, não do select. */
.filterfield .filterfield__select:focus-visible { outline: none; }

/* Busca dentro da barra: ocupa a sobra e não compete com os filtros. */
.toolbar__search { flex: 1 1 260px; min-width: 200px; }

/* Select compacto de toolbar (ranking e laboratório): largura pelo conteúdo,
   não 100% da linha. Sem isso cada filtro ocupa uma linha inteira. */
.filters__select {
  width: auto;
  min-width: 132px;
  max-width: 220px;
  flex: 0 0 auto;
}

.toolbar__div {
  width: 1px;
  height: 24px;
  background: var(--line);
  flex: 0 0 auto;
  margin: 0 2px;
}

/* Linha de filtros ativos, logo abaixo da toolbar.

   Não é sticky de propósito: ela aparece e some conforme os filtros, e
   empilhar duas faixas fixas de altura variável faria o cabeçalho da tabela
   encaixar no lugar errado toda vez que um chip entrasse ou saísse. */
/* Sem margem negativa: a toolbar é sticky e pinta com z-index acima, então
   qualquer sobreposição some por baixo dela. O espaço vem do padding. */
.activebar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--gutter) var(--sp-4);
  background: var(--s0);
  flex-wrap: wrap;
}

.activebar__label { font-size: 13px; color: var(--fg-3); flex: 0 0 auto; }
.activebar:empty { display: none; }

.results-count {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--fg-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Conteúdo
   -------------------------------------------------------------------------- */

.content {
  flex: 1 1 auto;
  width: 100%;
  padding: 0 0 var(--sp-12);
}

/* Margem lateral padrão do conteúdo. */
.pad { padding-left: var(--gutter); padding-right: var(--gutter); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 13px;
  color: var(--fg-3);
  transition: color var(--t) var(--ease);
}

.back-link:hover { color: var(--fg); }

/* ==========================================================================
   Seção e painel
   ========================================================================== */

.section { margin-top: var(--sp-6); }
.section--tight { margin-top: var(--sp-4); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.section__head .hint { margin-left: var(--sp-2); }
.section__title-row { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.section__actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

.panel {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.panel__head-main { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.panel__body { padding: var(--sp-4); }
.panel__body--flush { padding: 0; }

/* Ícone do cabeçalho do painel: fino, na cor do texto secundário. Não é um
   ladrilho — quem usa ladrilho colorido é o cartão de indicador. */
.panel__icon { display: grid; place-items: center; color: var(--fg-3); flex: 0 0 auto; }
.panel__icon--warn { color: var(--warn-ink); }

/* Segunda faixa do cabeçalho: abas de métrica à esquerda, legenda à direita. */
.panel__subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4) 0;
  flex-wrap: wrap;
}

/* Tabela que vive dentro de um painel: o contorno já é o do painel. */
.table-wrap--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.table-wrap--flush .table thead tr:first-child th:first-child,
.table-wrap--flush .table thead tr:first-child th:last-child { border-radius: 0; }

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}

/* Painel que encosta na borda da janela. */
.panel--flush {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ==========================================================================
   Grades
   ========================================================================== */

.grid { display: grid; gap: var(--sp-5); min-width: 0; }
.grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grid--analysis { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }

/* Dashboard: coluna de análise ~68% + trilho ~32%. */
.grid--dash { grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); align-items: start; gap: var(--sp-5); }

/* Na faixa do gráfico as duas colunas têm a mesma altura: a lista de fadiga
   cresce com o número de criativos, e sem isso sobra um buraco branco do
   lado do gráfico toda vez que houver mais de dois sinais. O gráfico estica
   para ocupar o que a coluna vizinha define. */
.grid--dash--even { align-items: stretch; }
.grid--dash--even > .panel { display: flex; flex-direction: column; }
.grid--dash--even .chart { flex: 1 1 auto; min-height: 280px; height: auto; }
.grid--main-side { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }

.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--sp-4);
}

/* ==========================================================================
   Móvel
   ========================================================================== */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(16, 24, 40, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}

.scrim.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 1500px) {
  :root { --gutter: 24px; }
}

@media (max-width: 1280px) {
  .grid--analysis,
  .grid--dash,
  .grid--main-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .grid--halves { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .topbar__menu { display: grid; }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--pop-lg);
    transition: transform var(--t-slow) var(--ease);
  }

  .app.is-menu-open .sidebar { transform: translateX(0); }
  .app__main,
  :root.is-collapsed .app__main { margin-left: 0; }
  :root.is-collapsed .sidebar { width: var(--sidebar-w); }

  /* No celular a barra vira gaveta: não existe estado recolhido, então a
     marca e os rótulos voltam ao tamanho normal. */
  :root.is-collapsed .brand-link { display: flex; }
  :root.is-collapsed .sidebar__brand { justify-content: flex-start; padding: 0 var(--sp-3) 0 var(--sp-4); }
  :root.is-collapsed .sidebar__collapse { display: none; }
  :root.is-collapsed .sidebar__nav { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  :root.is-collapsed .sidebar__footer { padding: var(--sp-3); }

  :root.is-collapsed .brand-name,
  :root.is-collapsed .nav-item span,
  :root.is-collapsed .nav-group__label,
  :root.is-collapsed .plan-card__info,
  :root.is-collapsed .plan-card__caret,
  :root.is-collapsed .user-chip__info,
  :root.is-collapsed .user-chip__caret { display: revert; }

  :root.is-collapsed .nav-item { justify-content: flex-start; padding: 0 var(--sp-3); }
  :root.is-collapsed .plan-card,
  :root.is-collapsed .user-chip { justify-content: flex-start; padding: 10px; }
  :root.is-collapsed .user-chip { padding: 8px; }
  :root.is-collapsed .nav-item::after,
  :root.is-collapsed .plan-card::after,
  :root.is-collapsed .user-chip::after { content: none; }
  :root.is-collapsed .nav-group + .nav-group { border-top: 0; padding-top: 0; margin-top: var(--sp-5); }

  /* Sem sidebar fixa, as barras de ação encostam na borda da janela. */
  .lab-bar,
  .selection-bar,
  :root.is-collapsed .lab-bar,
  :root.is-collapsed .selection-bar { left: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --topbar-h: 60px; }
  .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { gap: var(--sp-2); }
  .pagehead__top { align-items: flex-start; gap: var(--sp-4); }
  .pagehead__actions { width: 100%; justify-content: space-between; }
  .page-title { font-size: 22px; }
  .page-subtitle { font-size: 13px; }
}

@media (max-width: 520px) {
  .grid--cards { grid-template-columns: minmax(0, 1fr); }
}