*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ct-page);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 96% -8%, rgba(41, 162, 167, .10), transparent 30rem),
    var(--ct-page);
  color: var(--ct-text);
  font: var(--ct-body-weight, 400) var(--ct-body-size, var(--ct-size-base))/var(--ct-body-line-height, 1.55) var(--ct-font-body, var(--ct-font-sans));
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

::selection { color: var(--ct-page); background: var(--ct-accent-text); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: var(--ct-space-3);
  left: var(--ct-space-3);
  padding: var(--ct-space-2) var(--ct-space-4);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-text-on-brand);
  background: var(--ct-button-primary-background);
  transform: translateY(-180%);
  transition: transform .18s var(--ct-ease-out);
}
.skip-link:focus { transform: translateY(0); }

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: max-content;
  border-radius: var(--ct-radius-sm);
  color: var(--ct-text);
  font-size: var(--ct-size-md);
  font-weight: 800;
  letter-spacing: .025em;
  text-decoration: none;
}

.brand-logo {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 9px color-mix(in srgb, var(--ct-accent) 20%, transparent));
}
.brand-logo-auth { width: 3.4rem; height: 3.4rem; }
.brand-copy { display: grid; min-width: 0; line-height: 1.05; }
.brand-copy strong { font-family: var(--ct-font-heading, var(--ct-font-sans)); font-size: var(--ct-size-md); letter-spacing: .035em; }
.brand-copy small { margin-top: .2rem; color: var(--ct-text-muted); font-size: var(--ct-size-2xs); font-weight: 650; letter-spacing: .04em; }
.brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.175rem;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid var(--ct-accent);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  animation: dt-signal-pulse 3.4s var(--ct-ease-out) infinite;
  pointer-events: none;
}
.brand-auth::before { left: 1.7rem; width: 3.8rem; height: 3.8rem; }
@keyframes dt-signal-pulse {
  0%, 62% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  70% { opacity: .34; }
  88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

.brand-mark {
  display: inline-flex;
  align-items: end;
  justify-content: center;
  gap: 2px;
  width: 2rem;
  height: 2rem;
  padding: 6px;
  border-radius: .6rem;
  background: var(--ct-brand-gradient);
  box-shadow: var(--ct-shadow-1), var(--ct-ring-inset);
}
.brand-mark i { display: block; width: 4px; border-radius: 2px; background: #fff; }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 13px; }
.brand-mark i:nth-child(3) { height: 18px; }

.card {
  padding: var(--ct-card-padding-block, var(--ct-space-4)) var(--ct-card-padding-inline, var(--ct-space-4));
  border: var(--ct-card-border, 1px solid var(--ct-border));
  border-radius: var(--ct-card-radius, var(--ct-radius-md));
  color: var(--ct-card-text, var(--ct-text));
  background: var(--ct-card-background, var(--ct-surface));
  box-shadow: var(--ct-card-shadow, var(--ct-shadow-1));
  gap: var(--ct-card-gap, var(--ct-space-3));
}
.card:focus-within { border: var(--ct-card-active-border, var(--ct-card-border, 1px solid var(--ct-border))); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: var(--ct-cursor-interactive, pointer);
  gap: var(--ct-space-2);
  /* ⚠️ Um item flex/grid tem `min-width: auto`, ou seja, piso em `min-content`: um rótulo
     longo ("Desconectar Google Ads") não encolhe e EMPURRA a linha inteira para fora do
     contêiner — é a mesma classe do `repeat(N, minmax(Xrem, 1fr))` que transbordava em
     vez de quebrar. Com `min-width: 0` o botão pode encolher, e aí o rótulo elipsa em
     vez de estourar a caixa. O ícone/spinner do `gap` continua visível porque é irmão. */
  min-width: 0;
  min-height: var(--ct-control-min-height, 2.25rem);
  padding: var(--ct-control-padding-block, .5625rem) var(--ct-control-padding-inline, 1.125rem);
  border: 1px solid transparent;
  border-radius: var(--ct-button-secondary-radius, var(--ct-radius-sm));
  font-size: var(--ct-control-font-size, .8125rem);
  font-weight: var(--ct-control-font-weight, 500);
  line-height: 1.2;
  transition: var(--ct-button-transition, background-color 150ms var(--ct-ease-soft), border-color 150ms var(--ct-ease-soft), box-shadow 150ms var(--ct-ease-soft), transform 150ms var(--ct-ease-soft));
}
.button:hover:not(:disabled) { transform: var(--ct-button-hover-transform, translateY(-1px)); }
.button:active:not(:disabled) { transform: var(--ct-button-active-transform, translateY(0)); }
.button:disabled { cursor: var(--ct-cursor-disabled, not-allowed); opacity: var(--ct-button-disabled-opacity, .58); }
.button-primary {
  border: var(--ct-button-primary-border);
  border-radius: var(--ct-button-primary-radius, var(--ct-radius-sm));
  color: var(--ct-button-primary-text, var(--ct-text-on-brand));
  background: var(--ct-button-primary-background);
  box-shadow: var(--ct-button-primary-shadow);
}
.button-primary:hover:not(:disabled) {
  border: var(--ct-button-primary-hover-border);
  background: var(--ct-button-primary-hover-background, var(--ct-button-primary-background));
  box-shadow: var(--ct-button-primary-hover-shadow);
}
.button-primary:active:not(:disabled) {
  border: var(--ct-button-primary-active-border, var(--ct-button-primary-border));
  background: var(--ct-button-primary-active-background, var(--ct-button-primary-background));
  box-shadow: var(--ct-button-primary-active-shadow, var(--ct-button-primary-shadow));
}
.button-primary:disabled {
  border: var(--ct-button-primary-disabled-border, var(--ct-button-primary-border));
  color: var(--ct-button-primary-disabled-text, var(--ct-button-primary-text));
  background: var(--ct-button-primary-disabled-background, var(--ct-button-primary-background));
}
.button-quiet {
  border: var(--ct-button-secondary-border, 1px solid var(--ct-border));
  border-radius: var(--ct-button-secondary-radius, var(--ct-radius-sm));
  color: var(--ct-button-secondary-text, var(--ct-text-secondary));
  background: var(--ct-button-secondary-background, var(--ct-surface));
  box-shadow: var(--ct-button-secondary-shadow, none);
}
.button-quiet:hover:not(:disabled) {
  border: var(--ct-button-secondary-hover-border, var(--ct-button-secondary-border));
  color: var(--ct-button-secondary-hover-text, var(--ct-button-secondary-text));
  background: var(--ct-button-secondary-hover-background, var(--ct-button-secondary-background));
}
.button-quiet:active:not(:disabled) {
  border: var(--ct-button-secondary-active-border, var(--ct-button-secondary-border));
  color: var(--ct-button-secondary-active-text, var(--ct-button-secondary-text));
  background: var(--ct-button-secondary-active-background, var(--ct-button-secondary-background));
  box-shadow: var(--ct-button-secondary-active-shadow, var(--ct-button-secondary-shadow));
}
.button-quiet:disabled {
  border: var(--ct-button-secondary-disabled-border, var(--ct-button-secondary-border));
  color: var(--ct-button-secondary-disabled-text, var(--ct-button-secondary-text));
  background: var(--ct-button-secondary-disabled-background, var(--ct-button-secondary-background));
}
.button-danger {
  border: var(--ct-button-danger-border, 1px solid transparent);
  border-radius: var(--ct-button-danger-radius, var(--ct-radius-sm));
  color: var(--ct-button-danger-text, #fff);
  background: var(--ct-button-danger-background, var(--ct-danger));
  box-shadow: var(--ct-button-danger-shadow, none);
}
.button-danger:hover:not(:disabled) {
  border: var(--ct-button-danger-hover-border, var(--ct-button-danger-border));
  color: var(--ct-button-danger-hover-text, var(--ct-button-danger-text));
  background: var(--ct-button-danger-hover-background, var(--ct-button-danger-background));
}
.button-danger:active:not(:disabled) {
  border: var(--ct-button-danger-active-border, var(--ct-button-danger-border));
  color: var(--ct-button-danger-active-text, var(--ct-button-danger-text));
  background: var(--ct-button-danger-active-background, var(--ct-button-danger-background));
  box-shadow: var(--ct-button-danger-active-shadow, var(--ct-button-danger-shadow));
}
.button-danger:disabled {
  border: var(--ct-button-danger-disabled-border, var(--ct-button-danger-border));
  color: var(--ct-button-danger-disabled-text, var(--ct-button-danger-text));
  background: var(--ct-button-danger-disabled-background, var(--ct-button-danger-background));
}
.button-block { width: 100%; }
.button-small { min-height: 2rem; padding: .35rem .65rem; font-size: var(--ct-size-sm); }

.button-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.field { display: grid; gap: .35rem; min-width: 0; }
.field label {
  color: var(--ct-text-secondary);
  font-size: var(--ct-label-font-size, .75rem);
  font-weight: var(--ct-label-font-weight, 500);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--ct-input-min-height, 2.25rem);
  padding: var(--ct-input-padding-block, .5rem) var(--ct-input-padding-inline, .625rem);
  border: var(--ct-input-border, 1px solid var(--ct-border-strong));
  border-radius: var(--ct-input-radius, var(--ct-radius-sm));
  color: var(--ct-input-text, var(--ct-text));
  background: var(--ct-input-background, var(--ct-surface-raised));
  box-shadow: var(--ct-input-shadow, none);
  font-size: var(--ct-input-font-size, .8125rem);
  transition: border-color .15s var(--ct-ease-soft), box-shadow .15s var(--ct-ease-soft);
}
.field textarea { min-height: 5rem; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border: var(--ct-input-hover-border, 1px solid var(--ct-accent)); }
.field input::placeholder,
.field textarea::placeholder { color: var(--ct-input-placeholder, var(--ct-text-muted)); }
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  border: var(--ct-input-disabled-border, var(--ct-input-border));
  color: var(--ct-input-disabled-text, var(--ct-text-muted));
  background: var(--ct-input-disabled-background, var(--ct-surface-soft));
  opacity: var(--ct-input-disabled-opacity, .7);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border: var(--ct-input-focus-border, 1px solid var(--ct-accent));
  box-shadow: var(--ct-input-focus-shadow, var(--ct-ring));
}
.field-compact { display: flex; align-items: center; gap: var(--ct-space-2); }
/* `30vw` mede o viewport, que e largo, enquanto o campo vive num card estreito: o
   select saia mais largo que o proprio card. `100%` mede o contentor, que e a medida certa. */
.field-compact select { min-width: min(16rem, 100%); }
.field-help { margin: 0; color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.form-stack { display: grid; gap: var(--ct-space-4); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ct-space-4); }
.field-full { grid-column: 1 / -1; }
/* `flex-wrap: wrap` porque sem ele dois ou três botões alinhados à direita saem do
   formulário em largura estreita, em vez de descer para a linha de baixo. */
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ct-space-2); grid-column: 1 / -1; }
.form-error { min-height: 1.2rem; margin: 0; color: var(--ct-danger); font-size: var(--ct-size-sm); }

.auth-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: max(var(--ct-space-5), env(safe-area-inset-top)) max(var(--ct-space-4), env(safe-area-inset-right)) max(var(--ct-space-5), env(safe-area-inset-bottom)) max(var(--ct-space-4), env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 15%, rgba(77, 217, 180, .20), transparent 25rem),
    radial-gradient(circle at 85% 80%, rgba(41, 162, 167, .16), transparent 30rem),
    linear-gradient(145deg, var(--ct-page), var(--ct-surface-soft));
}
.auth-card {
  position: relative;
  width: min(100%, 28rem);
  overflow: hidden;
  padding: clamp(1.4rem, 5vw, 2.25rem);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-xl);
  background: color-mix(in srgb, var(--ct-surface) 94%, transparent);
  box-shadow: var(--ct-shadow-3), var(--ct-ring-inset);
}
.brand-auth { margin-bottom: var(--ct-space-8); }
.auth-heading { margin-bottom: var(--ct-space-6); }
.auth-heading h1 { margin: .2rem 0 .5rem; font-family: var(--ct-font-heading, var(--ct-font-sans)); font-size: var(--ct-title-size, var(--ct-size-xl)); font-weight: var(--ct-title-weight, 750); line-height: var(--ct-title-line-height, 1.12); letter-spacing: var(--ct-title-tracking, -.028em); }
.auth-heading p, .auth-footnote { color: var(--ct-text-secondary); }
.auth-heading p { margin: 0; }
.auth-footnote { margin: var(--ct-space-5) 0 0; font-size: var(--ct-size-xs); }

.app-shell {
  display: grid;
  grid-template-columns: var(--ct-sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--ct-topbar-height) minmax(0, 1fr);
  min-height: 100vh;
}
.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--ct-sidebar-width) minmax(12rem, 1fr) auto;
  align-items: center;
  gap: var(--ct-space-5);
  min-height: var(--ct-topbar-height);
  padding: 0 var(--ct-space-5);
  border-bottom: 1px solid var(--ct-border);
  background: color-mix(in srgb, var(--ct-surface) 92%, transparent);
  box-shadow: 0 1px 0 var(--ct-border);
  backdrop-filter: blur(16px);
}
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ct-space-3); min-width: 0; }
.user-summary { display: grid; max-width: 14rem; line-height: 1.2; text-align: right; }
.user-name, .user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-name { font-size: var(--ct-size-sm); font-weight: 700; }
.user-email { color: var(--ct-text-muted); font-size: var(--ct-size-2xs); }
.theme-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  color: var(--ct-text-muted);
  font-size: var(--ct-size-xs);
  white-space: nowrap;
}
.theme-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ct-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-accent) 18%, transparent); }

.sidebar {
  position: sticky;
  top: var(--ct-topbar-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - var(--ct-topbar-height));
  padding: var(--ct-space-4) var(--ct-space-3);
  border-right: 1px solid var(--ct-border);
  background: color-mix(in srgb, var(--ct-surface) 88%, var(--ct-page));
}
/*
 * A coluna se ajusta sozinha: espaçamento e altura do item em `clamp()` por
 * altura de viewport, e a barra de rolagem some da pintura. Ela continua
 * rolável por teclado e roda — o que foi removido é a calha visual, que em
 * 11 itens aparecia dentro de um painel que já tem a sua.
 */
.primary-nav {
  display: grid;
  align-content: start;
  min-height: 0;
  gap: var(--ct-nav-gap, .625rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Esconder a calha sem colocar nada no lugar faz item cortado parecer item
     inexistente. A mascara esmaece as bordas SOMENTE quando ha o que rolar
     (`linear-gradient` sobre o conteudo rolavel), preservando a afordancia. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 .5rem, #000 calc(100% - .5rem), transparent 100%);
}
.primary-nav::-webkit-scrollbar { width: 0; height: 0; }
.primary-nav a {
  display: flex;
  align-items: center;
  cursor: var(--ct-cursor-interactive, pointer);
  gap: var(--ct-nav-gap, var(--ct-space-3));
  min-height: clamp(2rem, 3.7vh, 2.4rem);
  padding: var(--ct-nav-padding-block, .625rem) var(--ct-nav-padding-inline, .75rem);
  border: var(--ct-nav-border, 1px solid transparent);
  border-radius: var(--ct-radius-md);
  color: var(--ct-nav-text, var(--ct-text-secondary));
  background: var(--ct-nav-background, transparent);
  font-size: var(--ct-nav-font-size);
  font-weight: var(--ct-nav-font-weight);
  line-height: 1.25;
  text-decoration: none;
  transition: var(--ct-nav-transition, background-color 200ms var(--ct-ease-soft), color 150ms var(--ct-ease-soft), transform 150ms var(--ct-ease-soft));
}
.primary-nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.primary-nav a:hover { color: var(--ct-nav-hover-text, var(--ct-text)); background: var(--ct-nav-hover-background, var(--ct-surface-soft)); transform: var(--ct-nav-hover-transform, translateX(2px)); }
.primary-nav a[aria-current="page"] {
  color: var(--ct-nav-active-text, var(--ct-accent-text));
  background: var(--ct-nav-active-background, var(--ct-surface-strong));
  box-shadow: inset 3px 0 0 var(--ct-nav-active-indicator, var(--ct-accent));
}
.primary-nav a[aria-disabled="true"] { color: var(--ct-nav-disabled-text, var(--ct-text-muted)); cursor: var(--ct-cursor-disabled, not-allowed); pointer-events: none; }
.nav-icon { flex: 0 0 auto; display: grid; place-items: center; width: var(--ct-icon-size-nav); height: var(--ct-icon-size-nav); color: var(--ct-nav-icon, currentColor); font-size: var(--ct-icon-size-nav); }
.sidebar-foot { display: flex; align-items: center; gap: var(--ct-space-2); padding: var(--ct-space-3); color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.freshness-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ct-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-good) 18%, transparent); }
.freshness-dot[data-state="unknown"] { background: var(--ct-text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-text-muted) 18%, transparent); }
.mobile-nav { display: none; }

.main-content {
  min-width: 0;
  width: 100%;
  max-width: var(--ct-content-max);
  margin: 0 auto;
  padding: clamp(1rem, 2.2vw, 2rem);
}
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ct-space-5); margin-bottom: var(--ct-space-5); }
.page-heading h1 { margin: .15rem 0 0; font-family: var(--ct-font-heading, var(--ct-font-sans)); font-size: var(--ct-title-size, var(--ct-size-xl)); font-weight: var(--ct-title-weight, 750); line-height: var(--ct-title-line-height, 1.12); letter-spacing: var(--ct-title-tracking, -.028em); }
.page-description { margin: .4rem 0 0; color: var(--ct-text-secondary); font-size: var(--ct-subtitle-size, var(--ct-size-sm)); font-weight: var(--ct-subtitle-weight, 450); line-height: var(--ct-subtitle-line-height, 1.5); }
.page-meta { display: grid; gap: .1rem; color: var(--ct-text-muted); font-size: var(--ct-size-xs); text-align: right; }

.filters { margin-bottom: var(--ct-space-5); padding: var(--ct-space-4); }
/*
 * `repeat(7, minmax(7.25rem, 1fr))` impunha 50,75rem de largura mínima ao grid:
 * abaixo disso ele não quebrava linha, ele TRANSBORDAVA — e a barra de rolagem
 * horizontal aparecia no card, dentro de um painel que já rola. `auto-fit` com
 * `min(100%, …)` faz a mesma grade quebrar sozinha e nunca exceder o pai.
 */
.filter-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--ct-space-3);
  align-items: end;
  margin-top: var(--ct-space-4);
}
.filter-actions { display: flex; justify-content: flex-end; gap: var(--ct-space-2); grid-column: 1 / -1; }

/* Cabeçalho-gatilho do dropdown de filtros (padrão de acordeão: h2 > button). */
.filters-heading { margin: 0; }
.filters-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ct-space-2);
  width: 100%;
  overflow: hidden;
  padding: var(--ct-space-2) var(--ct-space-3);
  border: 1px solid transparent;
  border-radius: var(--ct-radius-md);
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s var(--ct-ease-soft), border-color .16s var(--ct-ease-soft);
}
.filters-toggle:hover { border-color: var(--ct-border); background: var(--ct-surface-soft); }
/* `--ct-accent` sobre o card de filtros da 2,85:1 e reprova o piso de 3:1 de
   WCAG 2.4.11. `--ct-accent-text` da 4,88:1 no claro e e o MESMO valor no
   escuro — um token resolve os dois temas. */
.filters-toggle:focus-visible { outline: 2px solid var(--ct-accent-text); outline-offset: 2px; }
.filters-title { min-width: 0; font-size: var(--ct-size-base); font-weight: 700; }
.filters-subtitle { margin: .15rem 0 0 var(--ct-space-3); color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.filters-caret {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ct-accent-text);
  transition: transform .2s var(--ct-ease-spring);
}
.filters-toggle[aria-expanded="false"] .filters-caret { transform: rotate(-90deg); }
.filters-toggle-state {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ct-text-muted);
  font-size: var(--ct-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.filters-toggle .shine {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.filters-toggle .shine::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%,
    color-mix(in srgb, var(--ct-accent) 22%, transparent) 50%, transparent 100%);
  transform: translateX(-160%);
  /* Tres passadas e para. `infinite` num cabecalho que aparece em TODAS as
     visoes vira ruido permanente — a mesma razao pela qual o chamariz do tour
     se desarma ao concluir — e WCAG 2.2.2 exige parada acima de 5s. */
  animation: dt-shine 3.6s var(--ct-ease-soft) 3;
}
.filters-toggle > *:not(.shine) { position: relative; z-index: 1; }
@keyframes dt-shine {
  0% { transform: translateX(-160%); }
  55%, 100% { transform: translateX(320%); }
}

.alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ct-space-3);
  padding: var(--ct-space-3) var(--ct-space-4);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  color: var(--ct-text-secondary);
  background: var(--ct-surface);
  font-size: var(--ct-size-sm);
}
.alert strong { color: var(--ct-text); }
.alert-warning { border-color: color-mix(in srgb, var(--ct-warning) 36%, var(--ct-border)); background: var(--ct-warning-soft); }
.alert-danger { border-color: color-mix(in srgb, var(--ct-danger) 36%, var(--ct-border)); background: var(--ct-danger-soft); }
.alert-info { border-color: color-mix(in srgb, var(--ct-info) 36%, var(--ct-border)); background: var(--ct-info-soft); }

/*
 * Mesma correção da grade de filtros: com `repeat(4, minmax(11rem, 1fr))` a
 * grade tinha 44rem de piso e transbordava em vez de quebrar. Com 16 cards na
 * Visão geral isso vira barra de rolagem horizontal garantida no embarque.
 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--ct-space-4);
  margin-bottom: var(--ct-space-4);
}
.kpi-card {
  position: relative;
  /* Cria o contexto de consulta que `.kpi-value` usa para se dimensionar. */
  container-type: inline-size;
  min-width: 0;
  min-height: 9.5rem;
  overflow: hidden;
  padding: var(--ct-space-4);
  border: var(--ct-card-border, 1px solid var(--ct-border));
  border-radius: var(--ct-card-radius, var(--ct-radius-md));
  color: var(--ct-card-text, var(--ct-text));
  background: var(--ct-card-background, var(--ct-surface));
  box-shadow: var(--ct-card-shadow, var(--ct-shadow-1));
  transition: transform .18s var(--ct-ease-spring), box-shadow .18s var(--ct-ease-out), border-color .18s var(--ct-ease-soft);
}
.kpi-card:hover { z-index: 1; transform: translateY(-2px); border-color: color-mix(in srgb, var(--ct-accent) 35%, var(--ct-border)); box-shadow: var(--ct-card-hover-shadow, var(--ct-shadow-2)); }
.kpi-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-space-2); min-width: 0; }
.kpi-label { min-width: 0; color: var(--ct-text-secondary); font-size: var(--ct-size-sm); font-weight: 700; }
.kpi-info {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--ct-border-strong);
  border-radius: 50%;
  color: var(--ct-text-muted);
  background: transparent;
  font: 800 .68rem/1 var(--ct-font-sans);
}
/*
 * ⚠️ `--ct-size-hero` é `clamp(…, 3vw, …)` — escala pela JANELA. Dentro do
 * painel o app é um iframe de largura própria, então `vw` mede a coisa errada:
 * numa janela larga com iframe estreito o número saía a 42px dentro de um card
 * de 193px e vazava (medido: 239px de conteúdo em 193px de card).
 *
 * `cqi` mede o CARD. O token continua sendo o teto — quem manda no máximo
 * segue sendo o contrato `--ct-*` da ponte de tema, não uma constante local.
 */
.kpi-value {
  position: relative;
  z-index: 1;
  margin-top: var(--ct-space-3);
  font-size: clamp(1.4rem, 12cqi, var(--ct-size-hero));
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.kpi-value.is-null { color: var(--ct-text-muted); }
.kpi-value.is-positive { color: var(--ct-good); }
.kpi-value.is-negative { color: var(--ct-danger); }
.kpi-meta { position: relative; z-index: 1; margin: var(--ct-space-3) 0 0; color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.kpi-trend { display: inline-flex; align-items: center; gap: .2rem; margin-top: var(--ct-space-2); font-size: var(--ct-size-xs); font-weight: 700; }
.trend-up { color: var(--ct-good); }
.trend-down { color: var(--ct-danger); }

.widget-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 18rem), .85fr); gap: var(--ct-space-4); }

/*
 * Ferramentas do Financeiro: os dois cards de lançamento, lado a lado e ACIMA
 * das métricas. `min(100%, 26rem)` mantém o par lado a lado enquanto couber e
 * empilha sozinho quando não couber — sem media query e sem transbordo.
 */
.finance-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--ct-space-4);
  margin-bottom: var(--ct-space-4);
}
.finance-tools > .widget { min-height: auto; }
.widget { min-width: 0; min-height: 20rem; padding: var(--ct-space-5); }
.widget-wide { grid-column: 1; }
.widget-full { grid-column: 1 / -1; }
.widget-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ct-space-4); margin-bottom: var(--ct-space-5); }
.widget-title { margin: 0; font-size: var(--ct-size-lg); letter-spacing: -.015em; }
.widget-subtitle { margin: .25rem 0 0; color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
/* `flex: 0 0 auto` + `nowrap`: sem isso o botão de ação encolhe até quebrar o
   rótulo em duas linhas quando o título do card é longo — foi o que aconteceu
   com "Novo lançamento" e "Novo orçamento" lado a lado no Financeiro. */
/* `flex: 0 0 auto` proibia encolher: com três ou mais ações o cabeçalho do widget
   empurrava o título para fora. Agora pode encolher e quebrar linha; o `nowrap` do
   rótulo continua, mas com elipse em vez de estouro. */
.widget-actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ct-space-2); min-width: 0; }
.widget-actions .button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-body { min-width: 0; }
.widget-note { margin: var(--ct-space-4) 0 0; color: var(--ct-text-muted); font-size: var(--ct-size-xs); }

/* Visão geral v0.7.9 — rastro de origem: canal → aplicativo → funil → venda. */
.overview-metric-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
  margin-bottom: var(--ct-space-4);
  padding-bottom: var(--ct-space-4);
  border-bottom: 1px solid var(--ct-gridline);
}
.overview-metric-switcher .is-active {
  border-color: var(--ct-accent);
  color: var(--ct-accent-text);
  background: color-mix(in srgb, var(--ct-accent) 10%, var(--ct-surface));
}
.overview-source-journey { display: grid; gap: var(--ct-space-4); }
.overview-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--ct-space-2);
}
.overview-source-card {
  display: grid;
  min-width: 0;
  min-height: 7.25rem;
  padding: var(--ct-space-3);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  color: var(--ct-text-secondary);
  background: var(--ct-surface-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s var(--ct-ease-soft), background-color .15s var(--ct-ease-soft);
}
.overview-source-card:hover:not(:disabled),
.overview-source-card.is-active {
  border-color: color-mix(in srgb, var(--ct-accent) 58%, var(--ct-border));
  background: color-mix(in srgb, var(--ct-accent) 9%, var(--ct-surface));
}
.overview-source-card:focus-visible { outline: 2px solid var(--ct-accent-text); outline-offset: 2px; }
.overview-source-card:disabled { cursor: not-allowed; opacity: .62; }
.overview-source-card strong {
  align-self: end;
  color: var(--ct-text);
  font-size: var(--ct-size-xl);
  font-variant-numeric: tabular-nums;
}
.overview-source-card > span:last-child { font-size: var(--ct-size-xs); }
.overview-source-name { color: var(--ct-text); font-size: var(--ct-size-sm); font-weight: 750; }
.source-app-heading { display: grid; gap: var(--ct-space-1); padding-top: var(--ct-space-2); border-top: 1px solid var(--ct-gridline); }
.source-app-heading span, .source-app-empty { margin: 0; color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.source-app-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--ct-space-2);
}
.source-app-item {
  display: grid;
  gap: var(--ct-space-1);
  padding: var(--ct-space-3);
  border-left: 3px solid var(--ct-series-2);
  border-radius: 0 var(--ct-radius-sm) var(--ct-radius-sm) 0;
  background: var(--ct-surface-soft);
}
.source-app-item strong { color: var(--ct-text); font-size: var(--ct-size-lg); font-variant-numeric: tabular-nums; }
.source-app-item small { color: var(--ct-text-muted); }
.overview-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 18rem), .85fr);
  gap: var(--ct-space-6);
  align-items: start;
}
.overview-funnel-list { display: grid; gap: var(--ct-space-3); margin: 0 0 var(--ct-space-5); padding: 0; list-style: none; }
.overview-funnel-list li { display: grid; gap: var(--ct-space-1); }
.overview-funnel-label { display: flex; justify-content: space-between; gap: var(--ct-space-3); color: var(--ct-text-secondary); }
.overview-funnel-label strong { color: var(--ct-text); font-variant-numeric: tabular-nums; }
.overview-funnel-meter { width: 100%; height: .7rem; border: 0; accent-color: var(--ct-series-1); }
.overview-funnel-meter::-webkit-meter-bar { border: 0; border-radius: var(--ct-radius-pill); background: var(--ct-surface-strong); }
.overview-funnel-meter::-webkit-meter-optimum-value { border-radius: var(--ct-radius-pill); background: var(--ct-series-1); }
.overview-funnel-meter::-moz-meter-bar { border-radius: var(--ct-radius-pill); background: var(--ct-series-1); }
.overview-funnel-track { height: .7rem; border-radius: var(--ct-radius-pill); background: var(--ct-surface-strong); }
.overview-funnel-track.is-unavailable { background: repeating-linear-gradient(135deg, var(--ct-warning-soft), var(--ct-warning-soft) .45rem, var(--ct-surface-strong) .45rem, var(--ct-surface-strong) .9rem); }
.overview-funnel-list small { color: var(--ct-text-muted); }
.overview-quality { padding: var(--ct-space-4); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); background: var(--ct-surface-soft); }
.overview-quality h3 { margin: 0 0 var(--ct-space-4); font-size: var(--ct-size-base); }
.overview-more-metrics { margin-top: var(--ct-space-6); padding-top: var(--ct-space-4); border-top: 1px solid var(--ct-gridline); }
.overview-more-metrics summary { min-height: var(--ct-control-min-height); color: var(--ct-accent-text); font-weight: 700; cursor: pointer; }
.overview-more-metrics .metric-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--ct-space-4); gap: 0 var(--ct-space-6); }

@media (max-width: 760px) {
  .overview-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-more-metrics .metric-list { grid-template-columns: minmax(0, 1fr); }
}

.chart-figure { min-width: 0; margin: 0; }
.chart-svg { width: 100%; min-height: 15rem; overflow: visible; }
.chart-gridline { stroke: var(--ct-gridline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { stroke: var(--ct-axis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--ct-series-1); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: url(#dt-area-gradient); opacity: .22; }
.chart-point { fill: var(--ct-series-1); stroke: var(--ct-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-bar { fill: var(--ct-series-1); }
.chart-series-1 { fill: var(--ct-series-1); }
.chart-series-2 { fill: var(--ct-series-2); }
.chart-series-3 { fill: var(--ct-series-3); }
.chart-series-4 { fill: var(--ct-series-4); }
.chart-series-5 { fill: var(--ct-series-5); }
.chart-series-6 { fill: var(--ct-series-6); }
.chart-organic { fill: var(--ct-organic); }
.chart-ord-1 { fill: var(--ct-ord-1); }
.chart-ord-2 { fill: var(--ct-ord-2); }
.chart-ord-3 { fill: var(--ct-ord-3); }
.chart-ord-4 { fill: var(--ct-ord-4); }
.chart-ord-5 { fill: var(--ct-ord-5); }
.chart-ord-6 { fill: var(--ct-ord-6); }
.chart-text { fill: var(--ct-text-secondary); font: 11px var(--ct-font-sans); }
.chart-value { fill: var(--ct-text); font: 700 11px var(--ct-font-sans); font-variant-numeric: tabular-nums; }
.chart-table { margin-top: var(--ct-space-3); }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); }
.data-table { width: 100%; border-collapse: collapse; color: var(--ct-text-secondary); font-size: var(--ct-size-sm); font-variant-numeric: tabular-nums; }
.data-table caption { padding: var(--ct-space-3); color: var(--ct-text); font-weight: 700; text-align: left; }
.data-table th,
.data-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--ct-gridline); text-align: left; vertical-align: middle; }
.data-table th { color: var(--ct-text); background: var(--ct-surface-soft); font-size: var(--ct-size-xs); font-weight: 750; white-space: nowrap; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--ct-accent) 5%, transparent); }
.data-table .numeric { text-align: right; }
.data-table .cell-primary { color: var(--ct-text); font-weight: 700; }
.data-table .cell-null { color: var(--ct-text-muted); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 1.5rem;
  padding: .2rem .5rem;
  border-radius: var(--ct-radius-pill);
  color: var(--ct-text-secondary);
  background: var(--ct-surface-soft);
  font-size: var(--ct-size-2xs);
  font-weight: 750;
  white-space: nowrap;
}
.badge-good { color: var(--ct-good); background: var(--ct-good-soft); }
.badge-warning { color: var(--ct-warning); background: var(--ct-warning-soft); }
.badge-danger { color: var(--ct-danger); background: var(--ct-danger-soft); }
.badge-info { color: var(--ct-info); background: var(--ct-info-soft); }

.metric-list { display: grid; gap: var(--ct-space-3); margin: 0; }
.metric-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ct-space-4); padding-bottom: var(--ct-space-3); border-bottom: 1px solid var(--ct-gridline); }
.metric-row:last-child { padding-bottom: 0; border-bottom: 0; }
.metric-row dt { color: var(--ct-text-secondary); }
.metric-row dd { margin: 0; color: var(--ct-text); font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }

.empty-state,
.widget-error { display: grid; place-items: center; align-content: center; min-height: 14rem; padding: var(--ct-space-6); text-align: center; }
.empty-state-icon, .widget-error-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--ct-space-3); border-radius: 50%; background: var(--ct-surface-soft); color: var(--ct-accent); font-size: var(--ct-icon-size-empty); }
.widget-error-icon { color: var(--ct-danger); background: var(--ct-danger-soft); }
.empty-state h3, .widget-error h3 { margin: 0; font-size: var(--ct-size-base); }
.empty-state p, .widget-error p { max-width: 30rem; margin: var(--ct-space-2) 0 var(--ct-space-4); color: var(--ct-text-muted); font-size: var(--ct-size-sm); }

.skeleton-stack { display: grid; gap: var(--ct-space-4); }
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--ct-radius-sm);
  background: var(--ct-surface-strong);
}
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ct-surface-raised) 65%, transparent), transparent); animation: shimmer 1.35s infinite; }
.skeleton-line { height: .85rem; }
.skeleton-title { width: 42%; height: 1.15rem; }
.skeleton-value { width: 68%; height: 2.35rem; }
.skeleton-chart { height: 14rem; }

.settings-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ct-space-4); }
.settings-layout .widget { min-height: 18rem; }
.permission-note { display: flex; align-items: flex-start; gap: var(--ct-space-3); padding: var(--ct-space-3); border-radius: var(--ct-radius-md); color: var(--ct-text-secondary); background: var(--ct-surface-soft); font-size: var(--ct-size-sm); }
.viewer-list { display: grid; min-width: 0; max-width: 100%; gap: var(--ct-space-2); margin-top: var(--ct-space-3); }
.viewer-row { display: flex; width: 100%; min-width: 0; max-width: 100%; align-items: center; justify-content: space-between; gap: var(--ct-space-3); padding: var(--ct-space-2) 0; border-bottom: 1px solid var(--ct-gridline); }
.viewer-row:last-child { border-bottom: 0; }
.viewer-row > input { flex: 0 0 auto; }
.viewer-identity { flex: 1 1 0; min-width: 0; max-width: 100%; overflow: hidden; }
.viewer-identity strong, .viewer-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-identity .badge { max-width: 100%; text-overflow: ellipsis; vertical-align: top; }
.viewer-identity span { color: var(--ct-text-muted); font-size: var(--ct-size-xs); }

.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2); }
.subsection-title { margin: var(--ct-space-5) 0 var(--ct-space-3); font-size: var(--ct-size-base); }
.compact-empty { min-height: auto; padding: var(--ct-space-4) 0; text-align: left; }
.compact-empty p { margin-bottom: 0; }
.saved-segment-list { display: grid; gap: var(--ct-space-3); }
.saved-segment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ct-space-3);
  align-items: center;
  padding-bottom: var(--ct-space-3);
  border-bottom: 1px solid var(--ct-gridline);
}
.saved-segment-row:last-child { padding-bottom: 0; border-bottom: 0; }
.saved-segment-copy { min-width: 0; }
.saved-segment-copy strong, .saved-segment-copy span { display: block; overflow: hidden; text-overflow: ellipsis; }
.saved-segment-copy span { margin-top: .2rem; color: var(--ct-text-muted); font-size: var(--ct-size-xs); }

.simulator-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); gap: var(--ct-space-5); align-items: start; }
.simulator-form { align-content: start; }
.simulator-results {
  min-width: 0;
  padding: var(--ct-space-4);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-surface-soft);
}
.pagination-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ct-space-3); }
.pagination-status { min-width: 7rem; color: var(--ct-text-secondary); font-size: var(--ct-size-sm); font-weight: 700; text-align: center; }

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(var(--ct-space-4), env(safe-area-inset-top)) max(var(--ct-space-4), env(safe-area-inset-right)) max(var(--ct-space-4), env(safe-area-inset-bottom)) max(var(--ct-space-4), env(safe-area-inset-left));
  background: var(--ct-modal-backdrop);
  -webkit-backdrop-filter: var(--ct-modal-backdrop-filter, blur(4px));
  backdrop-filter: var(--ct-modal-backdrop-filter, blur(4px));
}
.modal {
  width: min(90vw, var(--ct-modal-width, 440px));
  max-height: 80vh;
  overflow: auto;
  padding: var(--ct-modal-padding-block, 1rem) var(--ct-modal-padding-inline, 1.125rem);
  border: var(--ct-modal-border, 1px solid var(--ct-border));
  border-radius: var(--ct-modal-radius);
  color: var(--ct-modal-text, var(--ct-text));
  background: var(--ct-modal-surface);
  box-shadow: var(--ct-modal-shadow);
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ct-space-4); margin-bottom: var(--ct-space-4); }
.modal-header h2 { margin: 0; font-size: var(--ct-modal-title-size, 1rem); font-weight: 600; }
.modal-header p { margin: .25rem 0 0; color: var(--ct-text-muted); font-size: var(--ct-modal-description-size, .75rem); }
.modal-close {
  display: grid;
  place-items: center;
  width: var(--ct-modal-close-size, 2rem);
  min-width: var(--ct-modal-close-size, 2rem);
  height: var(--ct-modal-close-size, 2rem);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ct-modal-close-radius, .5rem);
  color: var(--ct-text-secondary);
  background: transparent;
  font-size: var(--ct-icon-size-close);
}
body.has-modal { overflow: hidden; }

.app-footer { display: flex; justify-content: space-between; gap: var(--ct-space-4); margin-top: var(--ct-space-8); padding: var(--ct-space-4) 0; border-top: 1px solid var(--ct-border); color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.app-footer p { margin: 0; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/*
 * Os degraus por largura foram removidos de propósito. `auto-fit` já resolve
 * a quebra em qualquer largura, e um `repeat(N, minmax(11rem, 1fr))` mais
 * específico reintroduzia exatamente o piso rígido que causa o transbordo —
 * o embarque tem a largura do iframe, não a da janela, então media query por
 * viewport erra o alvo aqui.
 */

/* O sino acrescentou 3rem inelasticos a terceira coluna da topbar. O identificador
   do usuario e o unico item que encolhe, e abaixo desta faixa ele chegava a zero e
   a barra transbordava POR CIMA do seletor de Conta. Aliviar antes evita isso. */
@media (max-width: 1180px) { .user-summary { display: none; } }

@media (max-width: 1024px) {
  :root { --ct-sidebar-width: 4.75rem; }
  .primary-nav a { justify-content: center; }
  .primary-nav a span:last-child, .sidebar-foot span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .nav-icon { font-size: var(--ct-icon-size-nav-mobile); }
  .widget-grid { grid-template-columns: minmax(0, 1fr); }
  .widget-wide, .widget-full { grid-column: 1; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-layout .widget-full { grid-column: 1; }
  .simulator-layout { grid-template-columns: minmax(0, 1fr); }
  .theme-status { display: none; }
}

@media (max-width: 760px) {
  /* ⚠️ `--ct-topbar-height: auto` aqui e a razao pela qual NADA neste bloco
     pode usa-la dentro de `calc()`: `calc(auto + .25rem)` e invalido e a
     propriedade cai para o valor inicial. A altura real da barra em duas
     linhas e 6.9rem — declarada UMA vez, em vez de repetida como magica. */
  :root { --ct-topbar-height: auto; --ct-topbar-height-mobile: 6.9rem; }
  .app-shell { display: block; }
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ct-space-3);
    min-height: 4rem;
    padding: var(--ct-space-2) var(--ct-space-3);
  }
  .topbar-account { grid-column: 1 / -1; grid-row: 2; }
  .topbar-account select { flex: 1; min-width: 0; max-width: none; }
  .topbar-actions { gap: var(--ct-space-2); }
  .user-summary { display: none; }
  .sidebar { display: none; }
  .mobile-nav {
    position: sticky;
    z-index: 25;
    top: var(--ct-topbar-height-mobile);
    display: flex;
    gap: var(--ct-space-2);
    overflow-x: auto;
    padding: var(--ct-space-2) var(--ct-space-3);
    border-bottom: 1px solid var(--ct-border);
    background: color-mix(in srgb, var(--ct-surface) 94%, transparent);
    scrollbar-width: thin;
  }
  .mobile-nav a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--ct-nav-gap, var(--ct-space-2)); padding: var(--ct-nav-padding-block, .45rem) var(--ct-nav-padding-inline, .7rem); border: var(--ct-nav-border, 1px solid transparent); border-radius: var(--ct-radius-pill); color: var(--ct-nav-text, var(--ct-text-secondary)); background: var(--ct-nav-background, transparent); font-size: var(--ct-nav-font-size, var(--ct-size-xs)); font-weight: var(--ct-nav-font-weight, 700); text-decoration: none; cursor: var(--ct-cursor-interactive, pointer); transition: var(--ct-nav-transition, background-color 200ms var(--ct-ease-soft), color 150ms var(--ct-ease-soft), transform 150ms var(--ct-ease-soft)); }
  .mobile-nav a:hover { color: var(--ct-nav-hover-text, var(--ct-text)); background: var(--ct-nav-hover-background, var(--ct-surface-soft)); transform: var(--ct-nav-hover-transform, translateX(2px)); }
  .mobile-nav a[aria-current="page"] { color: var(--ct-nav-active-text, var(--ct-accent-text)); background: var(--ct-nav-active-background, var(--ct-surface-strong)); }
  .mobile-nav a[aria-disabled="true"] { color: var(--ct-nav-disabled-text, var(--ct-text-muted)); cursor: var(--ct-cursor-disabled, not-allowed); pointer-events: none; transform: none; }
  .main-content { padding: var(--ct-space-4) var(--ct-space-3); }
  .page-heading { align-items: start; }
  .page-meta { display: none; }
  .filter-actions { grid-column: 1 / -1; }
  .widget { padding: var(--ct-space-4); }
  .widget-header { flex-direction: column; }
  .widget-actions { width: 100%; justify-content: flex-end; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-full { grid-column: 1; }
  .saved-segment-row { grid-template-columns: minmax(0, 1fr); }
  .app-footer { display: grid; }
}

@media (max-width: 767px) {
  .modal-backdrop { padding: 0; }
  .modal {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .brand > span:last-child { font-size: var(--ct-size-sm); }
  .topbar .brand-mark { width: 1.85rem; height: 1.85rem; }
  /* O degrau por viewport saiu: `auto-fit` + `min(100%, …)` ja quebra em
     qualquer largura, e no embarque a janela nao e a medida certa. */
  .filter-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card { min-height: 8.75rem; }
  .widget { min-height: 17rem; }
  .widget-actions { justify-content: stretch; }
  .widget-actions .button { flex: 1; }
  .chart-svg { min-height: 12rem; }
  .modal { padding: var(--ct-modal-padding-block, 1rem) var(--ct-modal-padding-inline, 1.125rem); }
}

@media (pointer: coarse) {
  .primary-nav a,
  .mobile-nav a,
  .button,
  .field input,
  .field select,
  .field textarea,
  .kpi-info,
  .modal-close { min-height: 44px; }
  .kpi-info { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-root *, .dt-root *::before, .dt-root *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@supports (height: 100svh) {
  .auth-shell, .app-shell { min-height: 100svh; }
}

/* === v0.4.0 — adaptador de gráficos (Chart.js canvas) === */
.chart-canvas-box {
  position: relative;
  width: 100%;
  height: 18.75rem;
  min-height: 12rem;
}
.chart-canvas-box.chart-canvas-tall { height: 22rem; }
.chart-canvas-box canvas { max-width: 100%; }
@media (max-width: 767px) {
  .chart-canvas-box { height: 15rem; }
  .chart-canvas-box.chart-canvas-tall { height: 18rem; }
}

/* === v0.4.0 — busca no modal de visualizadores === */
.viewer-search {
  width: 100%;
  padding: var(--ct-space-2) var(--ct-space-3);
  background: var(--ct-input-background);
  border: var(--ct-input-border);
  border-radius: var(--ct-input-radius);
  color: var(--ct-input-text);
  font: inherit;
}
.viewer-search:focus-visible {
  outline: none;
  border: var(--ct-input-focus-border);
  box-shadow: var(--ct-input-focus-shadow);
}

/* === v0.4.0 — presets de data e filtros avançados (chips) === */
.date-presets {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
}
.advanced-filter-bar {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--ct-space-3);
  padding: var(--ct-space-3);
  background: var(--ct-surface-soft);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
}
.advanced-filter-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ct-space-2);
}
.advanced-filter-heading span {
  color: var(--ct-text-muted);
  font-size: var(--ct-size-xs);
}
.advanced-filter-builder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
  align-items: center;
}
.advanced-filter-builder select {
  min-width: 9rem;
  padding: var(--ct-space-2);
  background: var(--ct-input-background);
  border: var(--ct-input-border);
  border-radius: var(--ct-input-radius);
  color: var(--ct-input-text);
  font: inherit;
}
.advanced-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-1);
  padding: var(--ct-space-1) var(--ct-space-2);
  background: var(--ct-info-soft);
  color: var(--ct-text);
  border: 1px solid var(--ct-border-strong);
  border-radius: var(--ct-radius-pill);
  font-size: var(--ct-size-sm);
  max-width: 100%;
}
.filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}
.filter-chip-exclude {
  background: var(--ct-danger-soft);
  border-color: var(--ct-danger);
}
.filter-chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--ct-icon-size-action);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--ct-space-1);
  border-radius: var(--ct-radius-pill);
}
.filter-chip-remove:hover,
.filter-chip-remove:focus-visible {
  background: var(--ct-surface-strong);
  outline: none;
}
.advanced-filter-empty {
  margin: 0;
  color: var(--ct-text-muted);
  font-size: var(--ct-size-xs);
}
.chart-bar-clickable { cursor: pointer; }
.chart-bar-clickable:hover { opacity: .85; }
.chart-bar-clickable:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 1px; }

/* === v0.4.0 — ferramentas da página (ao vivo + relatório) === */
.page-tools { display: flex; flex-wrap: wrap; gap: var(--ct-space-2); align-items: center; }
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ct-text-muted); display: inline-block; }
#live-toggle.is-live .live-dot { background: var(--ct-danger); animation: dt-live-pulse 1.6s ease-in-out infinite; }
@keyframes dt-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.live-interval {
  padding: var(--ct-space-1) var(--ct-space-2);
  background: var(--ct-input-background);
  border: var(--ct-input-border);
  border-radius: var(--ct-input-radius);
  color: var(--ct-input-text);
  font: inherit; font-size: var(--ct-size-xs);
}

/* === v0.4.0 — galeria de criativos (360) === */
.creative-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ct-space-4);
  margin-bottom: var(--ct-space-5);
}
.creative-card {
  display: grid;
  gap: var(--ct-space-2);
  padding: var(--ct-space-3);
  background: var(--ct-surface-soft);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
}
/* `.creative-thumb` e o BOTAO que embrulha a miniatura, nao a imagem. `object-fit`
   aqui nunca teve efeito — e a classe da propria <img> (`.creative-thumb-img`) nao
   tinha regra nenhuma, entao o criativo renderizava no tamanho natural, estourando
   o card ou aparecendo distorcido. */
.creative-thumb {
  position: relative;
  display: block;
  width: 100%; height: 8.5rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ct-radius-sm);
  background: var(--ct-surface-strong);
  cursor: pointer;
}
.creative-thumb-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.creative-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: var(--ct-icon-size-creative-empty); color: var(--ct-text-muted);
}
.creative-copy { display: grid; gap: var(--ct-space-1); }
.creative-copy strong { font-size: var(--ct-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creative-campaign { color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.creative-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ct-space-2); margin: 0;
}
.creative-metrics dt { font-size: var(--ct-size-xs); color: var(--ct-text-muted); }
.creative-metrics dd { margin: 0; font-variant-numeric: tabular-nums; font-size: var(--ct-size-sm); }

/* === v0.5.5 — player do criativo nativo ===
   O iframe do embed oficial NAO e criado na carga: o poster ocupa o lugar e o
   frame so o substitui no clique. Por isso as duas regras compartilham a mesma
   caixa — trocar um pelo outro nao pode deslocar o layout do modal. */
.creative-player { display: grid; gap: var(--ct-space-2); }
.creative-player-poster,
.creative-player-frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 32rem;
  border: 0;
  border-radius: var(--ct-radius-sm);
  background: var(--ct-surface-strong);
}
.creative-player-poster { position: relative; padding: 0; overflow: hidden; cursor: pointer; }
.creative-player-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.creative-player-cta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: var(--ct-space-2);
  align-items: center; justify-content: center;
  color: var(--ct-text-on-brand);
  font-size: var(--ct-size-sm);
  /* Sem o veu, o rotulo some sobre criativo claro. Token declarado em
     tokens.css: a galeria nao pode ter paleta propria. */
  background: var(--ct-creative-scrim);
}
.creative-player-poster:hover .creative-player-cta,
.creative-player-poster:focus-visible .creative-player-cta {
  background: var(--ct-creative-scrim-strong);
}
/* Consumo do orçamento: cinco medidas numa célula. Empilhadas, com números
   tabulares, para que a coluna leia de cima para baixo sem dançar. */
.budget-pacing { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.budget-pacing span { font-size: var(--ct-size-xs); color: var(--ct-text-secondary); white-space: nowrap; }
.budget-pacing .budget-pacing-ratio { color: var(--ct-text); font-weight: 600; }

.creative-actions { display: grid; gap: var(--ct-space-1); margin-top: var(--ct-space-2); }
.creative-actions-link {
  justify-self: start;
  font-size: var(--ct-size-sm);
  color: var(--ct-accent-text);
}

/* === v0.4.0 — Meu Dashboard === */
.mydash-toolbar { padding: var(--ct-space-4); margin-bottom: var(--ct-space-4); }
.mydash-toolbar-row { display: flex; flex-wrap: wrap; gap: var(--ct-space-3); align-items: end; justify-content: space-between; }
.mydash-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ct-space-4);
}
.mydash-widget { container-type: inline-size; padding: var(--ct-space-4); display: grid; gap: var(--ct-space-3); align-content: start; cursor: grab; }
.mydash-widget.is-dragging { opacity: .5; cursor: grabbing; }
.mydash-w-s { grid-column: span 1; }
.mydash-w-m { grid-column: span 2; }
.mydash-w-l { grid-column: span 3; }
.mydash-w-full { grid-column: 1 / -1; }
.mydash-widget-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-space-2); }
.mydash-kpi { display: grid; gap: var(--ct-space-1); padding: var(--ct-space-3) 0; }
/* Mesma razao do `.kpi-value`: `--ct-size-hero` escala por `vw`, e embarcado a
   janela nao e o card. Aqui era pior — nem `overflow-wrap` havia. */
.mydash-kpi-value { font-size: clamp(1.4rem, 12cqi, var(--ct-size-hero)); font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; }
.mydash-kpi-value.is-null { color: var(--ct-text-muted); }
.mydash-kpi-label { color: var(--ct-text-muted); font-size: var(--ct-size-sm); }
@media (max-width: 1024px) {
  .mydash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mydash-w-l, .mydash-w-m { grid-column: span 2; }
}
@media (max-width: 640px) {
  .mydash-grid { grid-template-columns: minmax(0, 1fr); }
  .mydash-w-s, .mydash-w-m, .mydash-w-l { grid-column: span 1; }
}

/* === v0.4.2 — Impeccable polish: painel executivo de instrumentos === */
.dt-root {
  accent-color: var(--ct-accent);
  font-synthesis: none;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ct-accent) 4%, var(--ct-page)) 0, var(--ct-page) 17rem);
}

.app-shell {
  background: transparent;
}

.auth-shell {
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--ct-accent-bright) 15%, transparent), transparent 26rem),
    linear-gradient(145deg, var(--ct-page), color-mix(in srgb, var(--ct-surface-soft) 72%, var(--ct-page)));
}

.topbar,
.mobile-nav {
  -webkit-backdrop-filter: saturate(1.04) blur(12px);
  backdrop-filter: saturate(1.04) blur(12px);
}

.auth-card,
.card,
.kpi-card {
  background: var(--ct-card-background, var(--ct-surface));
}

.card,
.kpi-card,
.widget,
.filters,
.mydash-toolbar,
.mydash-widget,
.creative-card,
.modal {
  position: relative;
  isolation: isolate;
}

.page-heading {
  align-items: flex-start;
  margin-bottom: var(--ct-space-4);
  padding-bottom: var(--ct-space-4);
  border-bottom: 1px solid var(--ct-border);
}

.page-heading h1,
.widget-title,
.auth-heading h1 {
  text-wrap: balance;
}

.page-description,
.auth-heading p,
.widget-subtitle {
  max-width: 72ch;
  text-wrap: pretty;
}

.widget.card,
.filters.card,
.mydash-toolbar.card,
.mydash-widget.card,
.creative-card {
  transition: border-color .16s var(--ct-ease-soft), box-shadow .16s var(--ct-ease-out), background-color .16s var(--ct-ease-soft);
}

.widget.card,
.mydash-toolbar.card,
.creative-card {
  box-shadow: none;
}

.widget-header {
  padding-bottom: var(--ct-space-4);
  border-bottom: 1px solid var(--ct-gridline);
}

.widget-title,
.kpi-label,
.metric-row dt,
.data-table .cell-primary {
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .filters.card:focus-within,
  .mydash-widget.card:hover,
  .creative-card:hover {
    border-color: color-mix(in srgb, var(--ct-accent) 38%, var(--ct-border));
    box-shadow: var(--ct-shadow-1);
  }
}

.button {
  position: relative;
  letter-spacing: .005em;
}

.button-quiet:hover:not(:disabled) {
  box-shadow: var(--ct-shadow-1);
}

.button-danger:hover:not(:disabled) {
  box-shadow: var(--ct-button-danger-shadow, none), 0 2px 8px color-mix(in srgb, var(--ct-danger) 18%, transparent);
}

.button[aria-busy="true"] { cursor: wait; }
.button[aria-pressed="true"] { border-color: var(--ct-accent); }

.nav-icon {
  flex: 0 0 auto;
  /* Vem do token para acompanhar a densidade do Chat-Tag. O valor fixo de
     1.25rem que estava aqui vencia a regra de cima por ordem de cascata e
     desfazia o alinhamento com a coluna do painel hospedeiro. */
  width: var(--ct-icon-size-nav);
  height: var(--ct-icon-size-nav);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary-nav a[aria-current="page"] {
  color: var(--ct-nav-active-text, var(--ct-accent-text));
  background: var(--ct-nav-active-background, var(--ct-surface-soft));
  box-shadow: inset 3px 0 0 var(--ct-nav-active-indicator, var(--ct-accent));
}

.mobile-nav a[aria-current="page"] {
  color: var(--ct-nav-active-text, var(--ct-text));
  background: var(--ct-nav-active-background, var(--ct-surface-strong));
  box-shadow: inset 0 -2px 0 var(--ct-nav-active-indicator, var(--ct-accent));
}

.field:focus-within label { color: var(--ct-accent-text); }
.field input,
.field select,
.field textarea { caret-color: var(--ct-accent); }

.filters.card {
  border-color: var(--ct-border);
  background: color-mix(in srgb, var(--ct-surface-soft) 72%, var(--ct-surface));
  box-shadow: none;
}

.filters.card:focus-within {
  border-color: color-mix(in srgb, var(--ct-accent) 48%, var(--ct-border));
}

.date-presets .button:hover:not(:disabled),
.advanced-filter-builder select:hover,
.live-interval:hover {
  border-color: color-mix(in srgb, var(--ct-accent) 42%, var(--ct-border-strong));
}

.advanced-filter-bar {
  background: var(--ct-surface);
}

.date-presets {
  padding-bottom: var(--ct-space-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.date-presets .button {
  flex: 0 0 auto;
}

.filter-chip {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-surface-raised) 36%, transparent);
}

.filter-chip-remove {
  display: grid;
  place-items: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto var(--ct-space-4);
  z-index: 0;
  width: 2.75rem;
  height: 2px;
  background: var(--ct-accent);
  opacity: .78;
  pointer-events: none;
}


.kpi-card {
  min-height: 8.75rem;
  box-shadow: none;
}

.kpi-card:hover {
  transform: none;
  border-color: var(--ct-border);
  box-shadow: var(--ct-card-hover-shadow, none);
}

.kpi-header,
.kpi-info,
.kpi-meta { position: relative; z-index: 1; }

.kpi-value,
.mydash-kpi-value,
.metric-row dd,
.data-table .numeric,
.pagination-status {
  font-variant-numeric: tabular-nums lining-nums;
}

.table-wrap {
  background: var(--ct-surface);
  box-shadow: none;
  scrollbar-gutter: stable;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.data-table tbody tr {
  transition: background-color .15s var(--ct-ease-soft), color .15s var(--ct-ease-soft);
}

.data-table tbody tr:hover {
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--ct-accent) 7%, transparent);
  }
}

.empty-state-icon,
.widget-error-icon {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}

.modal-backdrop {
  background: var(--ct-modal-backdrop);
}

.modal {
  width: min(calc(100vw - (2 * var(--ct-space-5))), var(--ct-modal-width, 440px));
  scrollbar-gutter: stable;
  transform-origin: center;
}

.modal-close:hover {
  color: var(--ct-text);
  border-color: var(--ct-border-strong);
  background: var(--ct-surface-soft);
}

.modal-close:active { transform: translateY(1px); }

@media (max-width: 760px) {
  .page-heading {
    display: grid;
    gap: var(--ct-space-3);
  }
  .page-tools { width: 100%; }
  .mobile-nav { scroll-snap-type: x proximity; }
  .mobile-nav a { scroll-snap-align: start; }
  .filter-actions .button { min-width: 0; }
}

@media (prefers-contrast: more) {
  .card,
  .kpi-card,
  .table-wrap,
  .field input,
  .field select,
  .field textarea,
  .button { border-color: var(--ct-border-strong); }
  .data-table th,
  .data-table td { border-bottom-color: var(--ct-border-strong); }
}

@media (forced-colors: active) {
  .brand-mark,
  .theme-dot,
  .freshness-dot,
  .live-dot { forced-color-adjust: none; }
  .primary-nav a[aria-current="page"],
  .mobile-nav a[aria-current="page"] { outline: 2px solid Highlight; }
}

/* === v0.4.0 — relatório imprimível === */
.button-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tutorial-launch { white-space: nowrap; }
.tutorial-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ct-space-4);
  padding: var(--ct-space-4) 0;
  border-bottom: 1px solid var(--ct-gridline);
}
.tutorial-summary strong { display: block; margin-bottom: var(--ct-space-1); }
.tutorial-summary p {
  max-width: 70ch;
  margin: 0;
  color: var(--ct-text-muted);
  font-size: var(--ct-size-sm);
}
.tutorial-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--ct-space-6);
  margin: var(--ct-space-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tutorial-step;
}
.tutorial-checklist li {
  position: relative;
  min-width: 0;
  padding: var(--ct-space-3) 0 var(--ct-space-3) 2.25rem;
  border-bottom: 1px solid var(--ct-gridline);
  counter-increment: tutorial-step;
}
.tutorial-checklist li::before {
  content: counter(tutorial-step);
  position: absolute;
  top: var(--ct-space-3);
  left: 0;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1px solid var(--ct-border-strong);
  border-radius: 50%;
  color: var(--ct-accent-text);
  background: color-mix(in srgb, var(--ct-accent) 12%, var(--ct-surface-raised));
  font-size: var(--ct-size-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tutorial-checklist strong,
.tutorial-checklist span { display: block; }
.tutorial-checklist strong { margin-bottom: var(--ct-space-1); font-size: var(--ct-size-sm); }
.tutorial-checklist span { color: var(--ct-text-muted); font-size: var(--ct-size-xs); line-height: 1.55; }

.connection-guide {
  margin-top: var(--ct-space-4);
  padding-top: var(--ct-space-4);
  border-top: 1px solid var(--ct-border);
}
.connection-guide .subsection-title { margin-top: 0; }
.connection-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ct-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: connection-step;
}
.connection-guide-list li {
  position: relative;
  min-width: 0;
  padding: var(--ct-space-3) var(--ct-space-3) var(--ct-space-3) 2.85rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-surface-soft);
  counter-increment: connection-step;
}
.connection-guide-list li::before {
  content: counter(connection-step);
  position: absolute;
  top: var(--ct-space-3);
  left: var(--ct-space-3);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--ct-radius-sm);
  background: color-mix(in srgb, var(--ct-accent) 14%, var(--ct-surface-raised));
  color: var(--ct-accent-text);
  font-size: var(--ct-size-xs);
  font-weight: 800;
}
.connection-guide-list strong,
.connection-guide-list span { display: block; }
.connection-guide-list strong { margin-bottom: var(--ct-space-1); font-size: var(--ct-size-sm); }
.connection-guide-list span { color: var(--ct-text-muted); font-size: var(--ct-size-xs); line-height: 1.55; }

.tour-layer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
}
/*
 * O escurecimento é a SOMBRA deste elemento, não um fundo por cima da tela: a
 * área do elemento fica transparente (o recorte) e a sombra de 9999px cobre
 * todo o resto. Uma tarja com `background` cobriria o alvo junto.
 */
.tour-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--ct-radius-md);
  box-shadow: 0 0 0 9999px var(--ct-tour-scrim);
  pointer-events: none;
  /* Sem transicao por padrao: `placeStep()` reescreve estas quatro
     propriedades a cada quadro de rolagem, e a transicao fazia o recorte
     ARRASTAR atras do alvo, expondo-o parcialmente escurecido. Ela serve a
     troca de passo, e so nela — `is-stepping` liga por um quadro. */
  transition: none;
}
.tour-spotlight.is-stepping {
  transition: top .18s var(--ct-ease-out), left .18s var(--ct-ease-out),
    width .18s var(--ct-ease-out), height .18s var(--ct-ease-out);
}
.tour-popover {
  position: absolute;
  /* `left`/`top` são calculados por passo em `components.js`, junto do alvo.
     A âncora fixa no canto inferior direito obrigava o usuário a procurar a
     relação entre o texto e o que estava destacado. */
  left: 0;
  top: 0;
  width: min(24rem, calc(100vw - (2 * var(--ct-space-5))));
  padding: var(--ct-space-5);
  border: 1px solid var(--ct-border-strong);
  border-radius: var(--ct-radius-md);
  color: var(--ct-text);
  background: var(--ct-surface-raised);
  box-shadow: var(--ct-shadow-3);
  pointer-events: auto;
  animation: tour-popover-in 180ms cubic-bezier(.16, 1, .3, 1) both;
}
.tour-progress {
  margin: 0 0 var(--ct-space-2);
  color: var(--ct-accent-text);
  font-size: var(--ct-size-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tour-popover h2 { margin: 0; font-size: var(--ct-size-lg); letter-spacing: -.02em; }
.tour-copy { margin: var(--ct-space-2) 0 0; color: var(--ct-text-secondary); font-size: var(--ct-size-sm); line-height: 1.6; }
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-3);
  margin-top: var(--ct-space-5);
}
.tour-actions-main { display: flex; align-items: center; gap: var(--ct-space-2); }
/*
 * O alvo NÃO é promovido com z-index de propósito. O recorte é a área
 * transparente do `.tour-spotlight`, então o elemento aparece por baixo, no
 * brilho original, sem tocar em empilhamento. Levantá-lo exigiria levantar
 * junto `.topbar` e `.sidebar` — que criam contexto de empilhamento próprio e
 * clampariam o filho — e aí a barra inteira escaparia do escurecimento.
 */
.is-tour-target {
  outline: 3px solid var(--ct-accent) !important;
  outline-offset: 4px !important;
  border-radius: var(--ct-radius-md);
  scroll-margin: 7rem;
}
@keyframes tour-popover-in {
  from { opacity: .55; transform: translateY(.75rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
  .tutorial-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tutorial-launch { width: 2.5rem; padding-inline: 0; justify-content: center; }
}
@media (max-width: 760px) {
  .tutorial-checklist { grid-template-columns: minmax(0, 1fr); }
  .connection-guide-list { grid-template-columns: minmax(0, 1fr); }
  .tutorial-summary { align-items: flex-start; flex-direction: column; }
  .tour-popover {
    right: var(--ct-space-3);
    /* `components.js` posiciona por `top`. Herdar também um `bottom` faria o
       popover virar uma coluna até o rodapé no mobile. */
    bottom: auto;
    left: var(--ct-space-3);
    width: auto;
    max-height: calc(100dvh - (2 * var(--ct-space-3)));
    overflow-y: auto;
    padding: var(--ct-space-4);
  }
  .tour-actions { align-items: stretch; flex-direction: column-reverse; }
  .tour-actions > .button { width: 100%; }
  .tour-actions-main { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-popover { animation: none; }
}
@media (forced-colors: active) {
  .is-tour-target { outline-color: Highlight !important; box-shadow: none !important; }
}

/* ── Sininho de avisos ─────────────────────────────────────────────────── */

.notification-bell { position: relative; display: flex; align-items: center; }
.notification-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ct-radius-md);
  color: var(--ct-text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color .15s var(--ct-ease-soft), background-color .15s var(--ct-ease-soft), border-color .15s var(--ct-ease-soft);
}
.notification-trigger:hover { color: var(--ct-text); border-color: var(--ct-border); background: var(--ct-surface-soft); }
.notification-trigger:focus-visible { outline: 2px solid var(--ct-accent-text); outline-offset: 2px; }
.notification-trigger[data-state="pending"] { color: var(--ct-warning); }
.notification-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notification-trigger[data-state="pending"] .notification-icon { animation: dt-bell-swing 3.2s var(--ct-ease-soft) infinite; transform-origin: 50% 15%; }
.notification-badge {
  position: absolute;
  top: .1rem;
  right: .1rem;
  min-width: 1.05rem;
  padding: 0 .2rem;
  border-radius: var(--ct-radius-pill);
  /* ⚠️ Era `#fff` cravado. `--ct-danger` vira `#ff7f8d` no tema escuro, e
     branco sobre ele da 2,42:1 — reprova o piso de 4,5:1 para texto de 11px.
     O par tinta/fundo agora e um token, como `--ct-button-danger-*` ja fazia. */
  color: var(--ct-badge-danger-ink);
  background: var(--ct-danger);
  font-size: var(--ct-size-2xs);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.05rem;
  text-align: center;
}
/*
 * `position: fixed` ancora na VIEWPORT, nao no sino. Ancorado no sino, o
 * `min(26rem, 100vw - 2rem)` mentia: a direita do sino ainda existem tema,
 * usuario e Sair (~21rem), entao a borda esquerda ficava negativa e o texto
 * era cortado sem barra que o recuperasse. A topbar e sticky, entao o painel
 * acompanha a rolagem do mesmo jeito.
 */
.notification-panel {
  position: fixed;
  z-index: 40;
  top: calc(var(--ct-topbar-height) + .25rem);
  right: var(--ct-space-5);
  width: min(26rem, calc(100vw - 2rem));
  max-height: min(30rem, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ct-space-4);
  border: 1px solid var(--ct-border-strong);
  border-radius: var(--ct-radius-md);
  background: var(--ct-surface-raised);
  box-shadow: var(--ct-shadow-3);
}
.notification-panel:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: -2px; }
.notification-panel-head { margin-bottom: var(--ct-space-3); }
.notification-panel-head h2 { margin: 0; font-size: var(--ct-size-base); }
.notification-panel-summary { margin: .2rem 0 0; color: var(--ct-text-muted); font-size: var(--ct-size-xs); }
.notification-list { display: grid; gap: var(--ct-space-2); }
.notification-empty { margin: 0; padding: var(--ct-space-4) 0; color: var(--ct-text-muted); font-size: var(--ct-size-sm); }
.notification-panel-foot {
  margin: var(--ct-space-3) 0 0;
  padding-top: var(--ct-space-3);
  border-top: 1px solid var(--ct-gridline);
  color: var(--ct-text-muted);
  font-size: var(--ct-size-2xs);
}

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ct-space-3);
  padding: var(--ct-space-3);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-surface);
}
.notice-mark { width: .4rem; border-radius: var(--ct-radius-pill); background: var(--ct-info); }
.notice-warning { border-color: color-mix(in srgb, var(--ct-warning) 34%, var(--ct-border)); background: var(--ct-warning-soft); }
.notice-warning .notice-mark { background: var(--ct-warning); }
.notice-danger { border-color: color-mix(in srgb, var(--ct-danger) 34%, var(--ct-border)); background: var(--ct-danger-soft); }
.notice-danger .notice-mark { background: var(--ct-danger); }
.notice-body { min-width: 0; display: grid; gap: .25rem; }
.notice-title { margin: 0; color: var(--ct-text); font-size: var(--ct-size-sm); font-weight: 700; line-height: 1.35; }
.notice-message { margin: 0; color: var(--ct-text-secondary); font-size: var(--ct-size-xs); line-height: 1.55; }
.notice-action { margin: .15rem 0 0; color: var(--ct-accent-text); font-size: var(--ct-size-xs); font-weight: 650; line-height: 1.5; }
.notice .button { justify-self: start; margin-top: var(--ct-space-2); }

@keyframes dt-bell-swing {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(11deg); }
  90% { transform: rotate(-9deg); }
  94% { transform: rotate(5deg); }
}

/* ── Primeiros passos: pulso + brilho ──────────────────────────────────── */

.tutorial-launch {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ct-accent) 42%, var(--ct-border));
  color: var(--ct-accent-text);
  animation: dt-tutorial-pulse 2.6s var(--ct-ease-soft) infinite;
}
.tutorial-launch::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent 0%,
    color-mix(in srgb, var(--ct-accent-bright) 34%, transparent) 50%, transparent 100%);
  transform: translateX(-160%);
  animation: dt-shine 3.6s var(--ct-ease-soft) infinite;
  pointer-events: none;
}
.tutorial-launch > * { position: relative; z-index: 1; }
/* Concluir o tour desarma o chamariz. Um botão que pulsa para sempre vira
   ruído de interface e some da atenção — que é o oposto do objetivo. */
.tutorial-launch[data-onboarding="completed"] { animation: none; border-color: var(--ct-border); color: var(--ct-text-secondary); }
.tutorial-launch[data-onboarding="completed"]::after { animation: none; opacity: 0; }
@keyframes dt-tutorial-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ct-accent) 42%, transparent); }
  55% { box-shadow: 0 0 0 .48rem color-mix(in srgb, var(--ct-accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-launch,
  .tutorial-launch::after,
  .filters-toggle .shine::after,
  .notification-trigger[data-state="pending"] .notification-icon,
  .tour-spotlight { animation: none; transition: none; }
}
@media (max-width: 760px) {
  .notification-panel {
    position: fixed;
    top: calc(var(--ct-topbar-height-mobile) + .25rem);
    right: var(--ct-space-3);
    left: var(--ct-space-3);
    width: auto;
  }
}

.report-view { display: none; }
.subsection-title { margin-top: var(--ct-space-4); }

/* === v0.7.0 candidate: identidade DASH-TAG e navegação orientada a sinais === */
.page-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ct-space-2); margin-top: var(--ct-space-2); }

.personal-dashboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ct-space-4);
  margin: var(--ct-space-8) 0 var(--ct-space-4);
  padding-top: var(--ct-space-6);
  border-top: 1px solid var(--ct-border);
}

.personal-dashboard-heading h2 { margin: 0; font-family: var(--ct-font-heading, var(--ct-font-sans)); font-size: var(--ct-size-lg); }
.personal-dashboard-heading p { margin: .25rem 0 0; color: var(--ct-text-muted); font-size: var(--ct-size-sm); }

.settings-layout { display: block; }
.settings-tabs {
  display: flex;
  gap: var(--ct-space-1);
  margin-bottom: var(--ct-space-4);
  padding: var(--ct-space-1);
  overflow-x: auto;
  box-shadow: none;
}
.settings-tab {
  flex: 0 0 auto;
  min-height: var(--ct-control-min-height);
  padding: var(--ct-space-2) var(--ct-space-4);
  border: 1px solid transparent;
  border-radius: var(--ct-radius-sm);
  color: var(--ct-text-secondary);
  background: transparent;
  font-size: var(--ct-size-sm);
  font-weight: 650;
  transition: color .15s var(--ct-ease-soft), background-color .15s var(--ct-ease-soft), transform .15s var(--ct-ease-out);
}
.settings-tab:hover { color: var(--ct-text); background: var(--ct-surface-soft); }
.settings-tab[aria-selected="true"] { color: var(--ct-text); background: var(--ct-surface-strong); box-shadow: inset 0 -2px 0 var(--ct-accent); }
.settings-tab:active { transform: translateY(1px); }
.settings-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ct-space-4);
  animation: dt-panel-enter .18s var(--ct-ease-out) both;
}
.settings-panel > .widget-full { grid-column: 1 / -1; }
.settings-panel[hidden] { display: none; }
@keyframes dt-panel-enter { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: translateY(0); } }
.connection-actions { margin-top: var(--ct-space-4); }

.insights-filter select { min-width: min(12rem, 100%); }
.signal-gauge { display: grid; gap: var(--ct-space-3); }
.signal-gauge-heading { display: flex; justify-content: space-between; gap: var(--ct-space-3); font-variant-numeric: tabular-nums; }
.signal-gauge meter { width: 100%; height: .85rem; accent-color: var(--ct-accent); }
.signal-gauge p, .source-gap-state p { margin: 0; color: var(--ct-text-muted); font-size: var(--ct-size-xs); line-height: 1.55; }
.source-gap-state {
  display: grid;
  gap: var(--ct-space-2);
  padding: var(--ct-card-padding-block, var(--ct-space-4)) var(--ct-card-padding-inline, var(--ct-space-4));
  border: 1px dashed color-mix(in srgb, var(--ct-warning) 50%, var(--ct-border));
  border-radius: var(--ct-radius-md);
  background: var(--ct-warning-soft);
}
.source-gap-state strong { color: var(--ct-warning); }

.app-footer { align-items: center; }
.footer-brand { display: flex; align-items: center; gap: var(--ct-space-2); min-width: 0; }
.footer-brand img { flex: 0 0 auto; width: 2rem; height: 2rem; object-fit: contain; }
.footer-brand p { display: grid; gap: .1rem; }
.footer-brand strong { color: var(--ct-text-secondary); font-size: var(--ct-size-xs); }
.footer-brand span { overflow-wrap: anywhere; }
.footer-data-note { display: grid; gap: .1rem; text-align: right; }

@media (max-width: 759px) {
  .personal-dashboard-heading { flex-direction: column; }
  .settings-panel { grid-template-columns: minmax(0, 1fr); }
  .settings-panel > .widget-full { grid-column: 1; }
  .settings-tabs { margin-inline: calc(-1 * var(--ct-space-1)); }
  .app-footer { align-items: flex-start; }
  .footer-data-note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .brand::before, .settings-panel { animation: none; }
}
@media print {
  body.printing-report .app-shell,
  body.printing-report .auth-shell,
  body.printing-report #modal-root { display: none !important; }
  body.printing-report .report-view {
    display: block !important;
    color: #10201d; background: #ffffff;
    font-size: 11pt;
  }
  .report-view .report-header h1 { font-size: 16pt; margin: 0 0 4pt; }
  .report-view .report-header p { margin: 2pt 0; }
  .report-view .report-section { margin-top: 12pt; break-inside: avoid; }
  .report-view .report-section h2 { font-size: 13pt; margin: 0 0 6pt; }
  .report-view .report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6pt; }
  .report-view .report-kpis dt { font-size: 8pt; color: #40534f; }
  .report-view .report-kpis dd { margin: 0; font-weight: 700; }
  .report-view .report-chart { max-width: 100%; margin: 8pt 0; break-inside: avoid; }
  .report-view table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .report-view th, .report-view td { border: 1px solid #ccc; padding: 3pt 5pt; text-align: left; }
  .report-view td.numeric, .report-view th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
  .report-view .report-footer { margin-top: 10pt; font-size: 8pt; color: #40534f; }
}

/* ===== v0.5.0 — aviso de conta gerenciada (administracao global) =====
   Nao cria paleta propria: reusa os tokens --ct-* de tokens.css, entao acompanha
   light/dark e a ponte de tema do Chat-Tag sem regra paralela. */
.managed-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--ct-space-3);
  margin: 0 0 var(--ct-space-4);
  padding: var(--ct-space-3) var(--ct-space-4);
  border: 1px solid var(--ct-border-strong);
  border-radius: var(--ct-radius-md);
  background: var(--ct-surface-soft);
  color: var(--ct-text);
}

.managed-banner[data-mode="write"] {
  border-color: color-mix(in srgb, var(--ct-warning) 45%, var(--ct-border-strong));
  background: var(--ct-warning-soft);
}

.managed-banner-mark {
  flex: 0 0 auto;
  width: .5rem;
  height: 1.15rem;
  border-radius: var(--ct-radius-pill);
  background: var(--ct-text-muted);
}

.managed-banner[data-mode="write"] .managed-banner-mark { background: var(--ct-warning); }

.managed-banner-text { margin: 0; line-height: 1.45; }
.managed-banner-text strong { font-weight: 600; }

@media (forced-colors: active) {
  .managed-banner { border-color: CanvasText; }
  .managed-banner-mark { background: CanvasText; }
}

/*
 * O anel de foco precisa vencer as sombras-base declaradas no mesmo arquivo
 * (por exemplo, `.button-quiet`). No fim da cascata, o tratamento recebido da
 * #CHAT-TAG permanece visível em todo controle interativo.
 */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ct-ring) !important;
}

@media (forced-colors: active) {
  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}