/* VOE interface layer: daisyUI supplies components, this file supplies product layout. */

[data-theme="voe"] {
  color-scheme: light;
  --color-base-100: #FFFFFF;
  --color-base-200: #F7F7FA;
  --color-base-300: #E5E5EC;
  --color-base-content: #0A0A0F;
  --color-primary: #7C3AED;
  --color-primary-content: #FFFFFF;
  --color-secondary: #06B6D4;
  --color-secondary-content: #0A0A0F;
  --color-accent: #06B6D4;
  --color-accent-content: #0A0A0F;
  --color-neutral: #0A0A0F;
  --color-neutral-content: #F5F5F7;
  --color-info: #06B6D4;
  --color-info-content: #0A0A0F;
  --color-success: #15803D;
  --color-success-content: #FFFFFF;
  --color-warning: #B45309;
  --color-warning-content: #FFFFFF;
  --color-error: #B42318;
  --color-error-content: #FFFFFF;
  --radius-selector: 0.45rem;
  --radius-field: 0.6rem;
  --radius-box: 0.8rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

:root {
  --voe-shadow-sm: 0 1px 0 color-mix(in oklab, var(--color-neutral) 10%, transparent);
  --voe-shadow-md: 0 18px 38px -28px color-mix(in oklab, var(--color-neutral) 34%, transparent);
  --voe-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --voe-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --voe-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* O roxo do selo de plano. Não é --color-primary de propósito: o primário é a
     cor de "pode clicar", e o selo marca justamente o que não dá para clicar. Um
     tom fixo também sobrevive a quem trocar o tema — o diamante tem de ser o
     mesmo objeto em toda tela para virar reconhecível sem legenda. */
  --voe-pro: #8b5cf6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-width: 320px;
  margin: 0;
  font-family: var(--voe-body);
  font-size: 1rem;
  line-height: 1.5;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

body.sidebar-open { overflow: hidden; }

::selection { background: color-mix(in oklab, var(--color-primary) 18%, transparent); }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3 { font-family: var(--voe-display); text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Campos de formulário não usam outline externo: o :focus-visible global (e o
   anel do daisyUI, que mora em @layer e perde para esta regra sem camada)
   pintavam uma segunda borda ao redor da borda do campo. No foco o campo apenas
   escurece a própria borda — mudança discreta, sem anel externo. Fica de fora o
   que não tem essa "borda de texto": range, color, checkbox, radio, file e
   botões, que dependem do anel de foco acessível. */
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea:focus,
select:focus {
  outline: none;
}

.icon { width: 1rem; height: 1rem; flex: none; }

/* Layout ------------------------------------------------------------------ */

.app-main { min-height: 100vh; min-height: 100svh; }
.shell { width: 100%; max-width: 78rem; margin: 0 auto; }
.page-shell { min-width: 0; padding-inline: clamp(1rem, 4vw, 3rem); padding-block-end: calc(5rem + env(safe-area-inset-bottom)); }
.topbar { padding-block-start: env(safe-area-inset-top); box-shadow: 0 1px 0 color-mix(in oklab, var(--color-base-content) 7%, transparent); }
.topbar .navbar-start { flex: 1 1 auto; }
.topbar .navbar-end { flex: 0 0 auto; }
.topbar > .navbar-start, .topbar > .navbar-end { min-width: 0; }
.topbar-kicker { color: color-mix(in oklab, var(--color-base-content) 48%, transparent); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.topbar-title { margin-top: 0.12rem; overflow: hidden; color: var(--color-base-content); font-family: var(--voe-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }

.sidebar { border-right: 1px solid color-mix(in oklab, var(--color-neutral-content) 9%, transparent); box-shadow: 0.75rem 0 2.5rem color-mix(in oklab, var(--color-neutral) 11%, transparent); }
.sidebar-brand-wrap { min-height: 4rem; }
/* Marca --------------------------------------------------------------------
   O símbolo e a marca completa vêm da pasta pública (/assets). São imagens, não
   desenho em CSS: a arte tem gradiente, brilho e volume, coisas que não se
   reproduzem com border-radius. A altura manda e a largura acompanha, para a
   proporção nunca depender de quantos pixels o arquivo tem. */
.logo-mark { width: auto; height: 2rem; flex: none; }
.logo-wordmark { display: block; width: auto; height: 3.25rem; }
.sidebar-brand strong { display: block; color: var(--color-neutral-content); font-family: var(--voe-display); font-size: 0.95rem; letter-spacing: -0.03em; }
.sidebar-brand small, .sidebar-footer small { display: block; margin-top: 0.1rem; color: color-mix(in oklab, var(--color-neutral-content) 58%, transparent); font-size: 0.75rem; }
.menu .menu-title { color: color-mix(in oklab, var(--color-neutral-content) 58%, transparent); }
.menu .sidebar-link { min-height: 2.65rem; border-left: 2px solid transparent; border-radius: 0.55rem; color: color-mix(in oklab, var(--color-neutral-content) 68%, transparent); font-size: 0.86rem; font-weight: 600; }
.menu .sidebar-link:hover { color: var(--color-neutral-content); background: color-mix(in oklab, var(--color-neutral-content) 8%, transparent); }
.menu .sidebar-link.menu-active, .menu .sidebar-link.is-active { border-left-color: var(--color-primary); color: var(--color-neutral-content); background: color-mix(in oklab, var(--color-primary) 14%, var(--color-neutral)); box-shadow: none; }
.sidebar-footer strong { display: block; color: var(--color-neutral-content); font-size: 0.8rem; font-weight: 700; }

/* Shared page rhythm ------------------------------------------------------ */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem); }
.page-head h1 { color: var(--color-base-content); font-family: var(--voe-display); font-size: clamp(1.8rem, 2.5vw, 2.15rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.05; }
.page-head .edit-page-title {
  display: -webkit-box;
  max-width: min(100%, 38ch);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}
.page-sub { max-width: 65ch; margin-top: 0.5rem; color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.section { margin-top: 3rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.section-title { color: var(--color-base-content); font-family: var(--voe-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.035em; }
.section-note { display: inline-flex; align-items: center; gap: 0.45rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.8rem; }
.link-more { color: var(--color-primary); font-size: 0.85rem; font-weight: 700; }
.link-more:hover { text-decoration: underline; text-underline-offset: 0.2rem; }
.section-kicker { margin-bottom: 0.45rem; color: var(--color-primary); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 2rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.82rem; font-weight: 600; }
.back-link:hover { color: var(--color-primary); }
.card.card-border { border: 1px solid var(--color-base-300); background: var(--color-base-100); box-shadow: var(--voe-shadow-sm); }

/* Dashboard --------------------------------------------------------------- */

.dash-hero { min-width: 0; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 3vw, 2.5rem); padding-left: clamp(1rem, 2vw, 1.35rem); border-left: 2px solid var(--color-primary); }
.dash-hero h1 { max-width: 14ch; color: var(--color-base-content); font-family: var(--voe-display); font-size: clamp(2.4rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.98; }
.dash-hero .page-sub { max-width: 52ch; font-size: 1.05rem; }
.dash-hero-note { max-width: 52ch; margin-top: 0.6rem; color: color-mix(in oklab, var(--color-base-content) 48%, transparent); font-size: 0.82rem; line-height: 1.5; }
.btn { font-family: var(--voe-display); font-weight: 600; letter-spacing: -0.02em; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn[disabled] { border-color: var(--color-base-300); background: var(--color-base-300); color: var(--color-base-content); cursor: wait; opacity: 0.82; }
/* .btn-disabled é o desligado por CLASSE — um <span> no lugar do link, quando não há
   para onde ir. O daisyUI pinta o rótulo com 20% da cor do texto e ele SOME: um botão
   ilegível não parece desligado, parece quebrado.
   Os dois seletores empatam em especificidade com os do daisyUI de propósito (`.btn` +
   um qualificador); ganham por virem depois. `[disabled]` fica de fora: aquele é o
   botão OCUPADO no meio de um envio, e já tem o seu estado logo acima. */
.btn.btn-disabled, .btn[aria-disabled="true"] {
  border-color: var(--color-base-300);
  background: color-mix(in oklab, var(--color-base-content) 8%, var(--color-base-100));
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
  cursor: not-allowed;
  transform: none;
}
.btn[aria-busy="true"] { cursor: wait; }
/* A cor do rótulo de cada tom, com o DESLIGADO de fora: um botão primário desabilitado
   não usa a cor de texto do primário — sobre o fundo apagado ela some, e era isso que
   fazia o "Novo template" no teto do plano parecer um botão quebrado. */
.btn.btn-primary:not(.btn-outline):not(.btn-ghost):not(.btn-soft):not(.btn-disabled) { color: var(--color-primary-content); }
.btn.btn-error:not(.btn-outline):not(.btn-ghost):not(.btn-soft):not(.btn-disabled) { color: var(--color-error-content); }
.btn.btn-error.btn-soft:not(.btn-disabled) { color: var(--color-error); }
/* Resumo: uma faixa só, colunas divididas por hairline — sem cartão por número. */
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); box-shadow: var(--voe-shadow-sm); }
.metric { min-width: 0; padding: 1.35rem 1.5rem 1.45rem; transition: background-color 160ms ease; }
.metric + .metric { border-left: 1px solid var(--color-base-300); }
.metric:hover { background: color-mix(in oklab, var(--color-secondary) 4%, var(--color-base-100)); }
.metric-label { display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.metric-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-value { margin-top: 0.55rem; color: var(--color-base-content); font-family: var(--voe-display); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.06em; line-height: 1; }
.metric-value.is-zero { color: color-mix(in oklab, var(--color-base-content) 28%, transparent); }
/* Dinheiro na faixa: o sinal da margem é a informação, então ele é cor e não texto.
   Precisa morar aqui porque .metric-value já fixa color, e uma utilitária do Tailwind
   perderia para ela na cascata — app.css entra depois. */
/* A .modal-box rola no eixo Y (daisyUI), e um filho absoluto que passe da borda faz o
   navegador abrir barra no eixo X. É como a bolha de um tooltip encostado na borda
   transformou uma modal de dois campos numa caixa com scroll lateral. `clip` corta sem criar
   contexto de rolagem — e nada legítimo desta caixa precisa sair pelos lados. */
.modal-box { overflow-x: clip; }

.metric-value.is-neg { color: var(--color-error); }
.metric-value.is-pos { color: var(--color-success); }
.metric-note { margin-top: 0.4rem; overflow: hidden; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--color-secondary); box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--color-secondary) 18%, transparent); animation: voe-pulse 1.9s ease-in-out infinite; flex: none; }
@keyframes voe-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* "lendo…" enquanto o worker devolve duração e resolução do vídeo enviado. */
.cell-reading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  animation: voe-pulse 1.6s ease-in-out infinite;
}
.cell-reading::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: voe-skeleton-spin 0.9s linear infinite;
}

/* Avisos: só existem quando há algo pendente de decisão. */
.notices { display: grid; gap: 0.6rem; margin-top: 0.85rem; }
.notice { display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.85rem 1.15rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); }
.notice p { min-width: 0; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.85rem; overflow-wrap: anywhere; }
.notice strong { color: var(--color-base-content); font-weight: 700; }
.notice-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; }
.notice-link { margin-left: auto; color: var(--color-primary); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.notice-link:hover { text-decoration: underline; text-underline-offset: 0.2rem; }
.notice-error { border-color: color-mix(in oklab, var(--color-error) 30%, var(--color-base-300)); background: color-mix(in oklab, var(--color-error) 4%, var(--color-base-100)); }
.notice-error .notice-dot { background: var(--color-error); box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--color-error) 14%, transparent); }
.notice-wait .notice-dot { background: var(--color-warning); box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--color-warning) 16%, transparent); }

/* Biblioteca -------------------------------------------------------------- */

.library-upload { display: grid; gap: 0.85rem; margin-bottom: 1.75rem; }
/* Na biblioteca o envio é constante mas não é o centro da tela: dropzone baixo. */
.library-upload .dropzone { min-height: 0; gap: 0.65rem; padding: 1.5rem 1.25rem; }
.library-upload .dz-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 0; }
.library-upload .dz-icon .icon { width: 1.15rem; height: 1.15rem; }
.library-upload .dz-title { font-size: 1rem; }
.library-upload .dz-sub { font-size: 0.82rem; }
.library { display: grid; gap: 0; }
.library-table .col-check { width: 3rem; }
.library-table tbody tr:hover { background: color-mix(in oklab, var(--color-secondary) 5%, var(--color-base-100)); }
.library-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 27rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-base-content);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}
.library-name:hover { color: var(--color-primary); }
.library-name-play {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.1rem;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--color-primary);
  opacity: 0.55;
  transition: opacity 140ms ease;
  flex: none;
}
.library-name:hover .library-name-play, .library-name:focus-visible .library-name-play { opacity: 1; }
.library-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A barra de ações aparece só com seleção: em repouso a tabela é uma lista. */
.selection-bar {
  position: sticky;
  top: 4.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, var(--color-base-300));
  border-radius: var(--radius-box);
  background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100));
  box-shadow: var(--voe-shadow-md);
}
.selection-form { display: flex; align-items: center; gap: 0.75rem; }
.selection-count { color: var(--color-base-content); font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.selection-all {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}
.selection-all:hover { text-decoration: underline; text-underline-offset: 0.2rem; }

/* Tela de produção -------------------------------------------------------- */

.edit-form { display: grid; gap: 1rem; padding-bottom: 3rem; }
.edit-panel { display: grid; gap: 0.85rem; padding: 1.35rem 1.5rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); box-shadow: var(--voe-shadow-sm); }
.edit-panel-title { color: var(--color-base-content); font-family: var(--voe-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.edit-empty { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0.85rem; }
.edit-empty p { max-width: 52ch; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.85rem; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.65rem; }
.template-card { position: relative; display: flex; align-items: flex-start; gap: 0.6rem; min-width: 0; padding: 0.85rem 0.9rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-field); cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; }
.template-card:hover { border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-base-300)); }
.template-card input { position: absolute; opacity: 0; pointer-events: none; }
.template-card-body { display: grid; gap: 0.35rem; min-width: 0; }
.template-card-body strong { overflow: hidden; color: var(--color-base-content); font-size: 0.88rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.regeneration-warning { align-items: flex-start; }
.regeneration-warning strong { display: block; color: var(--color-base-content); font-size: 0.88rem; }
.regeneration-warning p { margin-top: 0.2rem; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: 0.8rem; line-height: 1.45; }
.template-card-check { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin-left: auto; border: 1px solid var(--color-base-300); border-radius: 999px; color: transparent; flex: none; }
.template-card:has(input:checked) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); }
.template-card:has(input:checked) .template-card-check { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-content); }
.template-card:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.edit-clips { display: grid; gap: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--color-base-300); }
.field-optional { color: color-mix(in oklab, var(--color-base-content) 45%, transparent); font-size: 0.72rem; font-weight: 500; }
.edit-tuning { border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); }
.edit-tuning > summary { padding: 0.9rem 1.5rem; color: var(--color-primary); cursor: pointer; font-size: 0.86rem; font-weight: 700; list-style: none; }
.edit-tuning > summary::-webkit-details-marker { display: none; }
.edit-tuning > summary::before { display: inline-block; margin-right: 0.45rem; content: "›"; transition: transform 140ms ease; }
.edit-tuning[open] > summary::before { transform: rotate(90deg); }
.edit-tuning-note { padding: 0 1.5rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.78rem; }
.edit-tuning .studio { padding: 1rem 1.5rem 1.5rem; }
.edit-submit { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); }
.edit-submit .hint { max-width: 48ch; }

/* Produção: estado do pipeline e transcrição por item --------------------- */

.batch-summary-step { color: var(--color-primary); font-size: 0.85rem; font-weight: 700; }
.batch-item-step { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.78rem; }
.batch-item-transcript { margin-top: 0.5rem; }
.batch-item-transcript > summary { color: var(--color-primary); cursor: pointer; font-size: 0.75rem; font-weight: 700; }
.batch-item-transcript > p {
  max-height: 9rem;
  margin-top: 0.4rem;
  overflow-y: auto;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Paginação --------------------------------------------------------------- */

.pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.85rem; }
.pagination-info { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pagination-actions { display: flex; align-items: center; gap: 0.5rem; }
.pagination-current { color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cell-link { color: var(--color-base-content); font-weight: 700; }
.cell-link:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2rem; }
.preview-picker { display: grid; gap: 0.5rem; }
.preview-picker .field { width: 100%; }

/* Tables and lists -------------------------------------------------------- */

.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
/* As listas principais não podem criar uma barra no desktop: quando o card
   aperta, elas viram fichas no container query abaixo. `overflow: visible`
   também deixa o painel de estilos flutuar acima da linha em vez de ser
   recortado pela própria rolagem da tabela. */
.data-table-card { container-name: data-table; container-type: inline-size; overflow: visible; }
.data-table-card .table-scroll { overflow: visible; }
.data-table-card .table { width: 100%; min-width: 0; table-layout: fixed; }
.data-table-card .table td, .data-table-card .table th { min-width: 0; }
.data-table-card .cell-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.data-table-card .library-name { max-width: 100%; }
.data-table-card .library-name-text { min-width: 0; }
.table { min-width: 42rem; }
.table thead th { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background-color 160ms ease; }
.table tbody tr:hover { background: color-mix(in oklab, var(--color-secondary) 5%, var(--color-base-100)); }
.cell-main { max-width: 27rem; overflow: hidden; color: var(--color-base-content); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { margin-top: 0.15rem; overflow: hidden; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-family: var(--voe-mono); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.cell-dim { color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-end { text-align: right; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; white-space: nowrap; }
.row-actions .btn { min-height: 2.25rem; }
.row-action-danger { color: var(--color-error); }
.row-action-danger .row-action-text { display: none; }
.row-action-danger:hover:not(:disabled) { background: color-mix(in oklab, var(--color-error) 9%, var(--color-base-100)); color: var(--color-error); }
.assets-content:focus { outline: 2px solid var(--color-primary); outline-offset: 0.5rem; border-radius: var(--radius-box); }
.run-stage-cell { display: flex; align-items: center; justify-content: space-between; min-width: 11rem; gap: 0.75rem; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: 0.8rem; }
.run-stage-cell strong { color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-family: var(--voe-mono); font-size: 0.75rem; }
.run-progress { display: block; width: 100%; min-width: 11rem; margin-top: 0.45rem; }
.asset-table-process { display: inline-flex; align-items: center; gap: 0.5rem; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: 0.8rem; font-weight: 650; }
.asset-table-process:hover { color: var(--color-primary); }
.asset-table-process > span:not(.badge) { white-space: nowrap; }
.asset-process-form { display: inline-flex; }
.asset-table-process { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

/* Studio: prévia ao vivo + controles de estilo ----------------------------- */

.studio-form { display: grid; gap: 1.25rem; padding-bottom: 3rem; }
.studio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 64rem) {
  .studio { grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); }
  .studio-stage-column { position: sticky; top: 5.5rem; }
}
.studio-stage-column { display: grid; gap: 1rem; min-width: 0; }
.studio-side { display: grid; gap: 1rem; min-width: 0; }

.stage { display: grid; gap: 0.9rem; padding: 1.1rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); box-shadow: var(--voe-shadow-md); }
.stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.stage-kicker { color: var(--color-primary); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.stage-title { margin-top: 0.15rem; color: var(--color-base-content); font-family: var(--voe-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.stage-viewport { --pv-max-h: clamp(15rem, 44vh, 26rem); display: flex; align-items: center; justify-content: center; }
.stage-frame {
  position: relative;
  width: min(100%, calc(var(--pv-max-h) * var(--pv-ar, 0.5625)));
  aspect-ratio: var(--pv-ratio, 9 / 16);
  container-type: size;
  overflow: hidden;
  border-radius: 0.8rem;
  background: #05050a;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-base-content) 12%, transparent);
}
.stage-video, .stage-placeholder, .stage-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
/* --pv-fx é o tratamento de imagem, aplicado só ao vídeo — as sobreposições
   ficam de fora, igual ao filtergraph. O fallback vazio mantém o desfoque do
   fundo quando não há efeito nenhum. */
.stage-video { display: block; object-fit: cover; object-position: 50% 50%; transform-origin: center; z-index: 1; filter: var(--pv-fx, none); }
.stage-backdrop { z-index: 0; overflow: hidden; }
.stage-backdrop video { width: 100%; height: 100%; object-fit: cover; filter: blur(1.4rem) saturate(1.2) var(--pv-fx, ); transform: scale(1.15); }

/* Camadas do efeito: entre o vídeo e as sobreposições, sem receber cliques. */
.stage-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.stage-fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.stage-fx > span { position: absolute; inset: 0; display: block; }
.stage-fx-grain {
  opacity: var(--pv-grain, 0);
  background-image: var(--pv-grain-image);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: voe-grain 0.6s steps(4) infinite;
}
.stage-fx-scan {
  background-image: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, var(--pv-scan, 0)) 0 var(--pv-scan-line, 2px),
    transparent var(--pv-scan-line, 2px) calc(var(--pv-scan-line, 2px) * 2));
}
.stage-fx-vignette {
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, var(--pv-vignette, 0)) 100%);
}
/* Risco de película: uma linha clara que pula de lugar, como o drawbox faz no
   render — lá a posição é sorteada a cada quadro. */
.stage-fx-scratch { opacity: var(--pv-scratch, 0); }
.stage-fx-scratch::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.55);
  content: "";
  animation: voe-scratch 1.1s steps(1) infinite;
}
@keyframes voe-grain {
  0% { background-position: 0 0; }
  25% { background-position: -30px 20px; }
  50% { background-position: 25px -25px; }
  75% { background-position: -15px -20px; }
  100% { background-position: 20px 15px; }
}
@keyframes voe-scratch {
  0%, 24% { left: 22%; opacity: 1; }
  25%, 49% { left: 71%; opacity: 0; }
  50%, 74% { left: 47%; opacity: 1; }
  75%, 100% { left: 12%; opacity: 0; }
}
.stage-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: color-mix(in oklab, white 55%, transparent); font-size: 0.8rem; text-align: center; padding: 1rem; }
.stage-placeholder .icon { width: 1.75rem; height: 1.75rem; }

/* Camada de imagens da prévia. Um nó por overlay, criado pelo app.js, com o
   mesmo posicionamento que o overlayChain do render produz — é o que faz o que
   se vê no editor ser o que sai no vídeo.

   z-index 3 fica abaixo da legenda; a camada "acima da legenda" usa 6. */
.stage-overlays { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stage-overlays-top { z-index: 6; }

.stage-overlay { position: absolute; }
/* O nó é um <div> com a imagem dentro para poder carregar a alça de
   redimensionar. O posicionamento fica no invólucro e o preenchimento na
   imagem — as duas metades do que o overlayBox do render calcula. */
.stage-overlay > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-overlay[data-fit="contain"] > img { object-fit: contain; }
.stage-overlay[data-fit="stretch"] > img { object-fit: fill; }

.stage-overlay[data-placement="cover"] { inset: 0; width: 100%; height: 100%; }
.stage-overlay[data-placement="top"] { top: 0; left: 0; width: 100%; height: var(--pv-overlay-size, 18%); }
.stage-overlay[data-placement="bottom"] { bottom: 0; left: 0; width: 100%; height: var(--pv-overlay-size, 18%); }
.stage-overlay[data-placement="left"] { top: 0; left: 0; height: 100%; width: var(--pv-overlay-size, 18%); }
.stage-overlay[data-placement="right"] { top: 0; right: 0; height: 100%; width: var(--pv-overlay-size, 18%); }

/* Preso a um dos nove pontos, com margem própria. A margem tem um valor por eixo
   porque no render ela é uma fração do lado MENOR do quadro nos dois; em % de
   CSS, a vertical mediria contra a altura e num 1080x1920 sairia quase o dobro
   da horizontal. O app.js faz a conta. */
.stage-overlay[data-placement="anchor"] { height: auto; width: var(--pv-overlay-size, 16%); }
.stage-overlay[data-placement="anchor"][data-anchor^="top-"] { top: var(--pv-overlay-margin-y, 4%); }
.stage-overlay[data-placement="anchor"][data-anchor^="bottom-"] { bottom: var(--pv-overlay-margin-y, 4%); }
.stage-overlay[data-placement="anchor"][data-anchor^="middle-"] { top: 50%; translate: 0 -50%; }
.stage-overlay[data-placement="anchor"][data-anchor$="-left"] { left: var(--pv-overlay-margin-x, 4%); }
.stage-overlay[data-placement="anchor"][data-anchor$="-right"] { right: var(--pv-overlay-margin-x, 4%); }
.stage-overlay[data-placement="anchor"][data-anchor$="-center"] { left: 50%; translate: -50% 0; }
.stage-overlay[data-placement="anchor"][data-anchor="middle-center"] { translate: -50% -50%; }

/* Ponto livre: X e Y são o CENTRO da imagem, como no render. */
.stage-overlay[data-placement="free"] {
  height: auto; width: var(--pv-overlay-size, 16%);
  left: var(--pv-overlay-x, 50%); top: var(--pv-overlay-y, 50%); translate: -50% -50%;
}
.stage-overlay[data-placement="anchor"] > img,
.stage-overlay[data-placement="free"] > img { height: auto; object-fit: contain; }

/* Só o que responde ao mouse recebe eventos: a camada inteira é transparente ao
   ponteiro para não roubar o clique de reproduzir o vídeo. */
.stage-overlay[data-grab="1"], .stage-overlay[data-resize="1"] { pointer-events: auto; }
.stage-overlay[data-grab="1"] { cursor: grab; }
.stage-overlay.is-dragging { cursor: grabbing; }
.stage-overlay[data-grab="1"]::after {
  position: absolute;
  inset: -2px;
  border: 1px dashed rgba(255, 255, 255, 0.65);
  border-radius: 0.2rem;
  content: "";
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.stage-overlay[data-grab="1"]:hover::after, .stage-overlay.is-dragging::after { opacity: 1; }

/* A alça de escalar. Fica onde a imagem CRESCE: no canto livre do selo e na
   borda interna da faixa — é a borda que o gesto move em cada modo. */
.stage-overlay-grip {
  position: absolute;
  display: none;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  cursor: nwse-resize;
  touch-action: none;
}
.stage-overlay[data-resize="1"] > .stage-overlay-grip { display: block; }
.stage-overlay[data-placement="anchor"] > .stage-overlay-grip,
.stage-overlay[data-placement="free"] > .stage-overlay-grip { right: -0.42rem; bottom: -0.42rem; }
.stage-overlay[data-placement="top"] > .stage-overlay-grip { bottom: -0.42rem; left: 50%; translate: -50% 0; cursor: ns-resize; }
.stage-overlay[data-placement="bottom"] > .stage-overlay-grip { top: -0.42rem; left: 50%; translate: -50% 0; cursor: ns-resize; }
.stage-overlay[data-placement="left"] > .stage-overlay-grip { right: -0.42rem; top: 50%; translate: 0 -50%; cursor: ew-resize; }
.stage-overlay[data-placement="right"] > .stage-overlay-grip { left: -0.42rem; top: 50%; translate: 0 -50%; cursor: ew-resize; }

.stage-caption {
  position: absolute;
  z-index: 5;
  left: 8%;
  right: 8%;
  /* A opacidade vai na COR do texto, e não no elemento, porque o render faz
     exatamente isso: o alpha do ASS entra no texto e no contorno, e o fundo da
     caixa fica de fora — somar as duas transparências apagaria a caixa antes de
     o texto começar a sumir. Um `opacity` aqui apagaria a caixa junto, e a
     prévia mostraria uma legenda que o vídeo não entrega. */
  color: color-mix(in srgb, #fff calc(var(--pv-caption-opacity, 1) * 100%), transparent);
  /* A fonte vem do catálogo embutido quando escolhida (--pv-caption-font é
     definida pelo app.js), com a display do produto como reserva — é a mesma
     que o libass usa quando nada foi escolhido. */
  font-family: var(--pv-caption-font, var(--voe-display));
  font-size: calc(6cqw * var(--pv-caption-scale, 1));
  font-weight: var(--pv-caption-weight, 800);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.55);
}
.stage-caption[data-position="top"] { top: 12%; translate: 0 -50%; }
.stage-caption[data-position="center"] { top: 50%; translate: 0 -50%; }
.stage-caption[data-position="bottom"] { bottom: auto; top: 88%; translate: 0 -50%; }
/* Posição livre: o centro do texto cai exatamente no par X/Y, igual ao \pos do ASS. */
.stage-caption[data-position="custom"] {
  top: var(--pv-caption-y, 88%);
  right: auto;
  left: var(--pv-caption-x, 50%);
  width: 84%;
  translate: -50% -50%;
  cursor: grab;
  touch-action: none;
}
.stage-caption[data-position="custom"].is-dragging { cursor: grabbing; }
.stage-caption[data-position="custom"]::after {
  position: absolute;
  inset: -0.35em -0.5em;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 0.35em;
  content: "";
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.stage-caption[data-position="custom"]:hover::after,
.stage-caption[data-position="custom"].is-dragging::after { opacity: 1; }
/* A cor do destaque chega pronta, em hexadecimal, de edits.CaptionColorHex — a
   MESMA tabela que gera a cor do .ass. Traduzir nomes de paleta aqui seria uma
   segunda tabela: foi ela que fez o "ciano" da prévia sair rosa no vídeo. */
.stage-caption b {
  color: color-mix(in srgb, var(--pv-caption-highlight, #ffd400) calc(var(--pv-caption-opacity, 1) * 100%), transparent);
  font-weight: var(--pv-caption-highlight-weight, 800);
}
.stage-caption[data-style="boxed"], .stage-caption[data-style="impact"], .stage-caption[data-style="pop"] {
  text-shadow: none;
}
.stage-caption[data-style="pop"] > *, .stage-caption[data-style="boxed"] > *, .stage-caption[data-style="impact"] > *, .stage-caption[data-style="marker"] > * {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.08em 0.22em;
  border-radius: 0.15em;
  background: rgba(16, 16, 24, 0.62);
}
.stage-caption[data-style="marker"] > * { background: rgba(16, 16, 24, 0.78); }
.stage-caption[data-style="impact"] { text-transform: uppercase; letter-spacing: 0.01em; }
.stage-caption[data-style="neon"] { text-shadow: 0 0 0.4em rgba(110, 231, 255, 0.85), 0 0.08em 0.2em rgba(0, 0, 0, 0.6); }
.stage-caption[data-style="karaoke"] b { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; }

/* Texto livre: a camada cobre o quadro, mas só o texto no ponto livre recebe o
   ponteiro — o resto continua clicável (legenda, botão de reproduzir). */
.stage-texts { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.stage-text {
  position: absolute;
  margin: 0;
  font-family: var(--voe-body);
  /* 56/1080 da tela de referência do render, igual ao textReferenceSize. */
  font-size: calc(5.2cqw * var(--pv-text-scale, 1));
  line-height: 1.2;
  overflow-wrap: anywhere;
  /* O contorno é traçado, não borrado: o ASS desenha uma borda sólida de
     0,07 do corpo da fonte (textOutlineRatio). O traço do CSS fica metade para
     dentro da letra, por isso vai no dobro, com paint-order jogando o
     preenchimento por cima. A sombra é a única camada em text-shadow, sem
     borrão, como o libass faz. */
  -webkit-text-stroke: 0.14em #101018;
  paint-order: stroke fill;
  text-shadow: var(--pv-text-shadow, 0 0 0 transparent);
}
/* A font-family de cada .stage-text[data-font] vem de /static/fonts.css, gerado
   do catálogo embutido — a mesma fonte que o worker entrega ao libass. */
.stage-text[data-custom="1"] { cursor: grab; pointer-events: auto; touch-action: none; }
.stage-text[data-custom="1"].is-dragging { cursor: grabbing; }
.stage-text[data-custom="1"]::after {
  position: absolute;
  inset: -0.2em -0.3em;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 0.3em;
  content: "";
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.stage-text[data-custom="1"]:hover::after, .stage-text[data-custom="1"].is-dragging::after { opacity: 1; }

.stage-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.stage-note { flex: 1 1 12rem; min-width: 0; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.75rem; line-height: 1.45; }

/* Controles --------------------------------------------------------------- */

.studio-controls { min-width: 0; }
.studio-tabs { --tab-bg: var(--color-base-100); }
.studio-tab-panel { padding: 1.15rem; border-color: var(--color-base-300); background: var(--color-base-100); border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box); }
.panel-stack { display: grid; gap: 1.15rem; min-width: 0; }
.control-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.control-group-inline { flex: none; }
.control-label { display: block; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: 0.78rem; font-weight: 750; }
.control-help { margin-top: 0.35rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.76rem; line-height: 1.5; }
/* Diz por que um controle está desligado. Mais forte que o .control-help porque
   não é contexto: é a resposta a "por que isto não faz nada?". */
.control-warn { margin-top: 0.35rem; padding: 0.4rem 0.55rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--color-warning) 14%, transparent); color: color-mix(in oklab, var(--color-base-content) 80%, transparent); font-size: 0.76rem; line-height: 1.5; }
.switch-row:has(input:disabled) { opacity: 0.55; }
.choice:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------- selo do plano ---

   Um controle desabilitado e um controle quebrado são a mesma imagem. O selo é
   o que os separa: ele diz que aquilo existe, que é de um plano acima, e abre o
   caminho para liberar. Por isso ele NÃO desbota junto com o controle — é a
   única coisa acesa num grupo apagado, e é de propósito. */
.pro-lock {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.22rem;
  margin-left: auto;
  padding: 0.16rem 0.4rem 0.16rem 0.3rem;
  border: 1px solid color-mix(in oklab, var(--voe-pro) 38%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--voe-pro) 18%, var(--color-base-100)),
    color-mix(in oklab, var(--voe-pro) 8%, var(--color-base-100)));
  color: color-mix(in oklab, var(--voe-pro) 72%, var(--color-base-content));
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  /* O grupo travado inteiro perde opacidade; o selo recupera a sua. */
  opacity: 1;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.pro-lock:hover, .pro-lock[aria-expanded="true"] {
  border-color: color-mix(in oklab, var(--voe-pro) 65%, transparent);
  box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--voe-pro) 16%, transparent);
  transform: translateY(-1px);
}
.pro-lock:focus-visible { outline: 2px solid var(--voe-pro); outline-offset: 2px; }
.pro-lock .icon { width: 0.62rem; height: 0.62rem; opacity: 0.72; stroke-width: 2.4; }
.pro-gem { width: 0.78rem; height: 0.78rem; flex: none; }
.pro-lock-word { padding-top: 0.03em; }
/* Onde não cabe palavra — um botão de fps, uma pastilha de cor — sobra o
   diamante, que já é reconhecível sozinho depois da primeira vez. */
.pro-lock-dot { gap: 0; padding: 0.2rem; }
.pro-lock-dot .pro-gem { width: 0.85rem; height: 0.85rem; }

/* O selo mora dentro de rótulos que apagam junto com o controle. :has() não
   alcança o irmão, então a regra é direta: dentro de um grupo travado, o selo
   volta ao normal. */
.choice:has(input:disabled) .pro-lock,
.switch-row:has(input:disabled) .pro-lock,
.caption-style-option:has(input:disabled) .pro-lock,
.caption-position-option:has(input:disabled) .pro-lock,
.color-option:has(input:disabled) .pro-lock,
.field:has(input:disabled) .pro-lock,
.slider-field:has(input:disabled) .pro-lock,
.quality-option:has(input:disabled) .pro-lock { opacity: 1; cursor: pointer; }

.caption-style-option:has(input:disabled),
.caption-position-option:has(input:disabled),
.color-option:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
/* A música cai pelo fieldset inteiro; apagar cada linha também deixaria a lista
   ilegível (0,45 dentro de 0,5). */
.music-option:has(input:disabled) { cursor: not-allowed; }
.quality-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
/* Rótulo de campo desabilitado apaga junto com o campo: só o controle cinza, com o
   nome preto ao lado, parecia defeito de renderização. */
.field:has(input:disabled), .slider-field:has(input:disabled) { opacity: 0.55; }

/* Dentro de um cartão o selo sai do fluxo e encosta num canto. Em fluxo ele roubava
   largura da descrição — "Quem está falando" virava quatro linhas, e o cartão que o
   selo existe para explicar ficava ilegível. */
.choice:has(.pro-lock) { padding-bottom: 2rem; }
.choice .pro-lock { position: absolute; right: 0.5rem; bottom: 0.5rem; margin-left: 0; }
.choice-compact:has(.pro-lock) { padding-bottom: 0.7rem; }
.choice-compact .pro-lock { position: static; }
.caption-style-option { padding-top: 0.55rem; }
.caption-style-option .pro-lock { position: absolute; top: 0.4rem; right: 0.4rem; margin-left: 0; z-index: 1; }
.color-option .pro-lock, .caption-position-option .pro-lock { margin-left: 0.1rem; }
/* No botão de qualidade e de fps o diamante não CABE em fluxo: ele espremia o
   rótulo até "720p · rápido" virar "720p · rápid". Preso ao canto, ele não ocupa
   largura nenhuma — e é assim que a marca de "isto é pago" costuma aparecer. */
.quality-option .pro-lock {
  position: absolute; top: -0.4rem; right: -0.4rem;
  margin: 0; padding: 0.14rem; border-width: 1.5px;
  background: var(--color-base-100);
  box-shadow: 0 0.15rem 0.4rem -0.15rem color-mix(in oklab, var(--voe-pro) 45%, transparent);
}
.quality-option .pro-lock .pro-gem { width: 0.8rem; height: 0.8rem; }
.join:has(.pro-lock) { overflow: visible; }
.join:has(.pro-lock) > .quality-option { overflow: visible; }
.field-label:has(.pro-lock) { display: flex; align-items: center; gap: 0.4rem; }
.field-label .pro-lock, .control-label .pro-lock { margin-left: 0; }
.control-label:has(.pro-lock) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }

/* .plan-fence é o <fieldset> que desliga um bloco inteiro de uma vez. Existe
   para o bloqueio ser o do NAVEGADOR, e não um efeito visual: campo dentro de
   fieldset desabilitado não é enviado, nem por quem sabe abrir o inspetor. O
   <legend> é a exceção da própria especificação — e é por isso que o selo mora
   nele, senão o botão que explica o bloqueio nasceria bloqueado. */
.plan-fence { display: grid; min-width: 0; gap: 1.15rem; margin: 0; padding: 0; border: 0; }
.plan-fence:disabled, .control-group:disabled { opacity: 0.5; }
/* A legenda e o aviso são o que EXPLICA o bloqueio: apagá-los junto apagaria a
   resposta. O <legend> também é o único ponto do fieldset que continua clicável,
   e é por isso que o selo mora nele. */
.plan-fence:disabled > legend, .control-group:disabled > legend,
.plan-fence:disabled .control-warn, .control-group:disabled .control-warn { opacity: 1; }
.plan-fence > legend { float: none; }
.plan-changed { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0; }
.plan-changed .icon { flex: none; width: 0.95rem; height: 0.95rem; margin-top: 0.1rem; }

/* A bolha: uma por página, na camada de topo do navegador. Os selos vivem dentro
   de painéis com rolagem e recorte próprios — presa ao selo, ela sairia cortada
   pela metade justamente nos controles do fim da lista. */
.pro-pop {
  position: fixed;
  width: min(19rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 0.85rem 0.9rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--voe-pro) 30%, var(--color-base-300));
  border-radius: 0.85rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: 0 1.4rem 2.6rem -0.8rem color-mix(in oklab, var(--voe-pro) 30%, transparent),
    0 0.5rem 1.4rem -0.6rem rgb(0 0 0 / 0.28);
  inset: auto;
  overflow: visible;
}
.pro-pop::backdrop { background: transparent; }
.pro-pop:not(:popover-open) { display: none; }
.pro-pop:popover-open { display: grid; gap: 0.35rem; }
@starting-style {
  .pro-pop:popover-open { opacity: 0; transform: translateY(0.35rem); }
}
.pro-pop { opacity: 1; transform: translateY(0); transition: opacity 140ms ease, transform 140ms ease; }
.pro-pop-head { display: flex; align-items: center; gap: 0.4rem; }
.pro-pop-head .pro-gem { width: 0.95rem; height: 0.95rem; }
.pro-pop-head span {
  color: color-mix(in oklab, var(--voe-pro) 62%, var(--color-base-content));
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.pro-pop-item { color: var(--color-base-content); font-family: var(--voe-display); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.pro-pop-text { color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 0.8rem; line-height: 1.5; }
.pro-pop-cta { justify-self: start; margin-top: 0.15rem; }
.pro-pop-cta .icon { width: 0.9rem; height: 0.9rem; }
.voe-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 30rem) {
  /* Na tela estreita o cartão já é justo: o selo perde a palavra e fica só o
     diamante, em vez de empurrar o nome da opção para uma segunda linha. */
  .choice .pro-lock-word { display: none; }
  .choice .pro-lock { gap: 0; padding: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pro-lock:hover, .pro-lock[aria-expanded="true"] { transform: none; }
  .pro-pop { transition: none; }
}
.control-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.85rem; min-width: 0; }
.control-row > * { flex: 1 1 10rem; min-width: min(10rem, 100%); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; margin-top: 0.55rem; }
.choice-grid-two { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.choice-grid-three { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.choice-grid-aspect { grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); }
.choice-grid-placement { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.choice {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.65rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice:hover { border-color: color-mix(in oklab, var(--color-primary) 42%, var(--color-base-300)); }
.choice:has(input:checked) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--color-primary) 12%, transparent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.choice-copy { display: grid; min-width: 0; gap: 0.12rem; }
.choice-copy strong { font-size: 0.8rem; }
.choice-copy small { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.7rem; line-height: 1.35; }
.choice-compact { flex-direction: column; align-items: flex-start; }

.choice-shape { display: block; flex: none; border: 1.5px solid color-mix(in oklab, var(--color-base-content) 32%, transparent); border-radius: 0.2rem; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.choice:has(input:checked) .choice-shape { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 22%, transparent); }
.choice-shape-vertical { width: 1.35rem; height: 2.4rem; }
.choice-shape-horizontal { width: 2.4rem; height: 1.35rem; }
.choice-shape-square { width: 1.9rem; height: 1.9rem; }
.choice-shape-portrait { width: 1.7rem; height: 2.1rem; }
.choice-shape-original { width: 2.2rem; height: 1.5rem; border-style: dashed; }

.choice-fit { position: relative; display: block; width: 2.1rem; height: 2.6rem; flex: none; overflow: hidden; border-radius: 0.25rem; background: var(--color-neutral); }
.choice-fit::after { position: absolute; left: 0; right: 0; content: ""; background: color-mix(in oklab, var(--color-primary) 70%, white); }
.choice-fit-crop::after { inset: 0; }
.choice-fit-stretch::after { inset: 0; }
.choice-fit-contain::after { top: 30%; bottom: 30%; }
.choice-fit-blur::after { top: 30%; bottom: 30%; }
.choice-fit-blur { background: color-mix(in oklab, var(--color-primary) 34%, var(--color-neutral)); }

/* Amostra do layout: a tela vertical com a divisão que aquele modo produz. Mostra
   a forma, não o nome — "dividido" e "quem está falando" só se distinguem de
   verdade quando dá para ver o quadro. */
/* Amostra da cor livre: o degradê diz "qualquer cor" sem fingir ser uma
   específica, ao contrário de um quadrado colorido qualquer. */
.color-swatch-custom { background: conic-gradient(#ff4d4d, #ffd24d, #4dff88, #4dd2ff, #b04dff, #ff4d4d); }

.choice-layout { position: relative; display: block; width: 2.1rem; height: 2.6rem; flex: none; overflow: hidden; border-radius: 0.25rem; background: var(--color-neutral); }
.choice-layout::before,
.choice-layout::after { position: absolute; left: 0; right: 0; content: ""; background: color-mix(in oklab, var(--color-primary) 70%, white); }
/* Tela cheia: um retângulo só. */
.choice-layout-single::after { inset: 0; }
/* Dividido: duas faixas, com um fio entre elas. */
.choice-layout-split::before { top: 0; bottom: 51%; }
.choice-layout-split::after { top: 51%; bottom: 0; }
/* Quem está falando: tela cheia, com o canto marcando que o quadro troca. */
.choice-layout-speaker::after { inset: 0; }
.choice-layout-speaker::before { top: 0; bottom: 74%; left: 62%; background: color-mix(in oklab, var(--color-primary) 34%, var(--color-neutral)); z-index: 1; }
/* Automático: cheio embaixo, dividido em cima — as duas coisas que ele alterna. */
.choice-layout-auto::before { top: 0; bottom: 66%; right: 51%; }
.choice-layout-auto::after { top: 34%; bottom: 0; }

/* Amostra do efeito: um pedacinho de "imagem" com o mesmo tratamento que o
   vídeo vai receber, para a escolha não ser só pelo nome. */
.choice-fx { position: relative; display: block; width: 2.1rem; height: 2.6rem; flex: none; overflow: hidden; border-radius: 0.25rem; background: linear-gradient(150deg, #57a8ff 0%, #2f7d4f 45%, #e0c877 100%); }
.choice-fx::after { position: absolute; inset: 0; content: ""; }
.choice-fx-film { filter: sepia(0.85) saturate(0.5) contrast(1.12); }
.choice-fx-film::after { background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%); }
.choice-fx-mono { filter: grayscale(1) contrast(1.2); }
.choice-fx-mono::after { background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.5) 100%); }
.choice-fx-vhs { filter: saturate(1.6) contrast(1.08); }
.choice-fx-vhs::after { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px); }
.choice-fx-crt { filter: saturate(0.7) blur(0.5px); }
.choice-fx-crt::after { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.6) 100%); }
.effect-strength { display: grid; gap: 0.5rem; }

.choice-banner { position: relative; display: block; width: 2rem; height: 2.6rem; flex: none; overflow: hidden; border-radius: 0.25rem; background: var(--color-neutral); }
.choice-banner::after { position: absolute; content: ""; background: var(--color-secondary); }
.choice-banner-cover::after { inset: 0; opacity: 0.75; }
.choice-banner-top::after { top: 0; left: 0; right: 0; height: 28%; }
.choice-banner-bottom::after { bottom: 0; left: 0; right: 0; height: 28%; }
.choice-banner-left::after { top: 0; bottom: 0; left: 0; width: 28%; }
.choice-banner-right::after { top: 0; bottom: 0; right: 0; width: 28%; }
/* "Preso a um ponto" e "posição livre" não ocupam borda nenhuma: o desenho é um
   selo pequeno, no canto num e solto no meio do quadro no outro. É a diferença
   que o cartão precisa mostrar sem texto. */
.choice-banner-anchor::after { right: 18%; bottom: 18%; width: 34%; height: 26%; border-radius: 0.1rem; }
.choice-banner-free::after { top: 38%; left: 30%; width: 34%; height: 26%; border-radius: 0.1rem; }
.choice-banner-free { background-image: linear-gradient(to right, transparent 49%, color-mix(in oklab, var(--color-base-100) 45%, transparent) 49% 51%, transparent 51%), linear-gradient(to bottom, transparent 49%, color-mix(in oklab, var(--color-base-100) 45%, transparent) 49% 51%, transparent 51%); }

/* Os cartões de posicionamento são botões, e não labels com radio: com várias
   linhas de imagem, radios de mesmo nome seriam um grupo só. Mesmo visual,
   estado pelo aria-pressed. */
.choice-grid > button.choice { font: inherit; text-align: left; }
.choice[aria-pressed="true"] { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--color-primary) 12%, transparent); }
.choice[aria-pressed="true"] .choice-banner { background: color-mix(in oklab, var(--color-primary) 30%, var(--color-neutral)); }

.anchor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; width: min(11rem, 100%); margin-top: 0.55rem; padding: 0.3rem; border: 1px solid var(--color-base-300); border-radius: 0.6rem; background: var(--color-base-200); }
.anchor-cell { position: relative; display: flex; aspect-ratio: 1; align-items: center; justify-content: center; border-radius: 0.4rem; background: var(--color-base-100); cursor: pointer; transition: background-color 140ms ease; }
.anchor-cell input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.anchor-cell:hover { background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)); }
.anchor-cell:has(input:checked) { background: var(--color-primary); }
.anchor-cell:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.anchor-dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: color-mix(in oklab, var(--color-base-content) 30%, transparent); }
.anchor-cell:has(input:checked) .anchor-dot { background: var(--color-primary-content); transform: scale(1.3); }

.slider-field { display: grid; gap: 0.3rem; min-width: 0; }
.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.slider-value { color: var(--color-primary); font-family: var(--voe-mono); font-size: 0.78rem; font-weight: 700; }

.quality-option { position: relative; }
.quality-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.quality-option:has(input:checked) { background: var(--color-primary); color: var(--color-primary-content); border-color: var(--color-primary); }

.switch-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--color-base-300); border-radius: 0.7rem; background: var(--color-base-200); cursor: pointer; }
.switch-row > span { display: grid; gap: 0.18rem; min-width: 0; }
.switch-row strong { color: var(--color-base-content); font-size: 0.85rem; }
.switch-row small { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.76rem; line-height: 1.45; }

.color-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.color-option { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border: 1px solid var(--color-base-300); border-radius: 999px; background: var(--color-base-100); color: var(--color-base-content); cursor: pointer; font-size: 0.76rem; font-weight: 700; transition: border-color 160ms ease, box-shadow 160ms ease; }
.color-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.color-option:hover { border-color: color-mix(in oklab, var(--color-primary) 42%, var(--color-base-300)); }
.color-option:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--color-primary) 12%, transparent); }
.color-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Sem cor nenhuma aqui: cada amostra recebe a sua do servidor, no atributo
   style, pela mesma tabela que o render usa. */
.color-swatch { width: 0.8rem; height: 0.8rem; border-radius: 999px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-base-content) 22%, transparent); }

.brand-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.55rem; margin-top: 0.55rem; }
.brand-option { position: relative; display: grid; gap: 0.35rem; padding: 0.4rem; border: 1px solid var(--color-base-300); border-radius: 0.6rem; background: var(--color-base-100); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease; }
.brand-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.brand-option img { display: block; width: 100%; height: 3.2rem; object-fit: contain; border-radius: 0.35rem; background: repeating-conic-gradient(color-mix(in oklab, var(--color-base-content) 8%, transparent) 0% 25%, transparent 0% 50%) 50% / 0.7rem 0.7rem; }
.brand-option:hover { border-color: color-mix(in oklab, var(--color-primary) 42%, var(--color-base-300)); }
.brand-option:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--color-primary) 12%, transparent); }
.brand-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.brand-option-none { display: flex; height: 3.2rem; align-items: center; justify-content: center; border-radius: 0.35rem; background: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 45%, transparent); }
.brand-option-name { overflow: hidden; color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 0.68rem; font-weight: 650; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.brand-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.55rem; padding: 0.9rem; border: 1px dashed var(--color-base-300); border-radius: 0.7rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.82rem; }

/* Biblioteca e trecho de áudio ---------------------------------------------- */

.audio-page { display: grid; gap: 1.5rem; padding-bottom: 3rem; }

/* Fila antes do envio */
.audio-queue { display: grid; gap: 0.9rem; padding: 1.15rem; }
.audio-queue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.audio-queue-list { display: grid; gap: 0.5rem; max-height: 24rem; overflow-y: auto; list-style: none; }
.audio-queue-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-base-300);
  border-left-width: 3px;
  border-radius: 0.7rem;
  background: var(--color-base-100);
}
.audio-queue-card[data-state="pending"] { border-left-color: var(--color-base-300); }
.audio-queue-card[data-state="uploading"] { border-left-color: var(--color-primary); }
.audio-queue-card[data-state="done"] { border-left-color: var(--color-success); }
.audio-queue-card[data-state="cancelled"] { border-left-color: var(--color-warning); }
.audio-queue-card[data-state="error"] { border-left-color: var(--color-error); }
.audio-queue-body { display: grid; gap: 0.2rem; min-width: 0; }
.audio-queue-name { overflow: hidden; color: var(--color-base-content); font-size: 0.86rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.audio-queue-meta, .audio-queue-state { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-family: var(--voe-mono); font-size: 0.73rem; }
.audio-queue-card[data-state="done"] .audio-queue-state { color: var(--color-success); }
.audio-queue-card[data-state="error"] .audio-queue-state { color: var(--color-error); }
.audio-queue-card[data-state="cancelled"] .audio-queue-state { color: var(--color-warning); }
.audio-queue-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--color-base-300); }
.audio-queue-foot > progress { flex: 1 1 14rem; min-width: min(14rem, 100%); }
.audio-queue-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.audio-queue-summary { color: var(--color-base-content); font-size: 0.85rem; font-weight: 650; }

/* Botão de play redondo, usado na fila e na tabela */
.audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary) 14%, var(--color-base-100));
  color: var(--color-primary);
  cursor: pointer;
  flex: none;
  transition: background-color 140ms ease, transform 140ms ease;
}
.audio-play:hover { background: color-mix(in oklab, var(--color-primary) 26%, var(--color-base-100)); transform: scale(1.05); }
.audio-play-icon, .audio-name-play {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-width: 0.36rem 0 0.36rem 0.6rem;
  border-style: solid;
  border-color: transparent transparent transparent currentColor;
}

/* Tabela */
.audio-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.audio-search { flex: 1 1 18rem; min-width: min(18rem, 100%); }
.audio-search input { width: 100%; }
.audio-bulk { display: flex; align-items: center; gap: 0.75rem; }
.audio-table { min-width: 60rem; }
.audio-table .col-order { width: 3rem; }
.audio-row:hover { background: color-mix(in oklab, var(--color-secondary) 5%, var(--color-base-100)); }
.audio-cell-name { min-width: 14rem; }
.audio-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 22rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-base-content);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}
.audio-name-play {
  margin-left: 0;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  color: var(--color-primary);
  opacity: 0.55;
  transition: opacity 140ms ease;
}
.audio-name:hover { color: var(--color-primary); }
.audio-name:hover .audio-name-play { opacity: 1; }
.audio-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-cell-id { font-family: var(--voe-mono); }
.audio-empty-filter { margin-top: 0.85rem; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 0.85rem; }

/* Player da modal */
.audio-player-box { display: grid; gap: 1.1rem; width: min(30rem, calc(100vw - 2rem)); }
.audio-player-title { overflow: hidden; color: var(--color-base-content); font-family: var(--voe-display); font-size: 1rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.audio-player { display: flex; align-items: center; gap: 0.9rem; }
.audio-player-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-content);
  cursor: pointer;
  flex: none;
  box-shadow: 0 0 0 0.35rem color-mix(in oklab, var(--color-primary) 14%, transparent);
  transition: transform 140ms ease;
}
.audio-player-button:hover { transform: scale(1.04); }
.audio-player-icon {
  width: 0;
  height: 0;
  margin-left: 0.2rem;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-style: solid;
  border-color: transparent transparent transparent currentColor;
}
/* Tocando, o triângulo vira as duas barras de pausa. */
.audio-player-button[data-playing="1"] .audio-player-icon {
  width: 0.85rem;
  height: 1.05rem;
  margin-left: 0;
  border: 0;
  background: linear-gradient(to right, currentColor 0 0.28rem, transparent 0.28rem 0.57rem, currentColor 0.57rem 0.85rem);
}
.audio-player-track { position: relative; flex: 1; height: 0.45rem; border-radius: 999px; background: var(--color-base-300); cursor: pointer; touch-action: none; }
.audio-player-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--color-primary); }
.audio-player-knob { position: absolute; top: 50%; width: 0.85rem; height: 0.85rem; border-radius: 999px; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-base-100); translate: -50% -50%; }
.audio-player-track:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.audio-player-time { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-family: var(--voe-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.music-picker { display: grid; gap: 0.4rem; max-height: 16rem; overflow-y: auto; margin-top: 0.55rem; padding-right: 0.2rem; }
.music-option { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-base-300); border-radius: 0.6rem; background: var(--color-base-100); cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; }
.music-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.music-option:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-base-300)); }
.music-option:has(input:checked) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); }
.music-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.music-option-body { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.music-option-body strong { overflow: hidden; color: var(--color-base-content); font-size: 0.82rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.music-option-body small { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-family: var(--voe-mono); font-size: 0.72rem; }
.music-option-check { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--color-base-300); border-radius: 0.4rem; color: transparent; flex: none; }
.music-option:has(input:checked) .music-option-check { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-content); }
.music-mix { display: grid; gap: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--color-base-300); }

.music-trim { display: grid; gap: 0.5rem; }
.music-trim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.music-bar {
  position: relative;
  height: 2.6rem;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  /* As listras dão a noção de "fita": sem elas a barra vazia não sugere áudio. */
  background:
    repeating-linear-gradient(to right,
      color-mix(in oklab, var(--color-base-content) 12%, transparent) 0 1px,
      transparent 1px 7px),
    var(--color-base-200);
  cursor: grab;
  touch-action: none;
}
.music-bar.is-dragging { cursor: grabbing; }
.music-bar-region {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0.35rem;
  background: color-mix(in oklab, var(--color-primary) 30%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.music-bar-handle { position: absolute; top: 0; bottom: 0; width: 0.75rem; background: var(--color-primary); cursor: ew-resize; }
.music-bar-handle::after { position: absolute; top: 50%; left: 50%; width: 2px; height: 40%; background: var(--color-primary-content); border-radius: 2px; content: ""; translate: -50% -50%; }
.music-bar-handle-start { left: 0; border-radius: 0.35rem 0 0 0.35rem; }
.music-bar-handle-end { right: 0; border-radius: 0 0.35rem 0.35rem 0; }
.music-bar-handle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.music-bar-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-base-content); }
.music-trim-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.music-trim-hint { flex: 1 1 12rem; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 0.75rem; line-height: 1.4; }

/* Lista de textos livres ---------------------------------------------------- */

.slice-custom { display: flex; align-items: center; gap: 0.35rem; }
.slice-custom input { width: 4.5rem; }
.slice-custom-sep { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.78rem; }
.control-help code { padding: 0.05rem 0.3rem; border-radius: 0.3rem; background: var(--color-base-200); font-family: var(--voe-mono); font-size: 0.72rem; }

.text-list { display: grid; gap: 0.7rem; }
.text-row { display: grid; gap: 0.7rem; min-width: 0; margin: 0; padding: 0.8rem; border: 1px solid var(--color-base-300); border-radius: 0.7rem; background: var(--color-base-200); }
.text-row-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.text-row-index { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 0.4rem; background: var(--color-base-100); color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-family: var(--voe-mono); font-size: 0.68rem; font-weight: 700; flex: none; }
.text-row-head .field { min-width: 0; }
.text-row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.text-row-grid .field { min-width: 0; }
.field-color { max-width: 6rem; }
.text-color { width: 100%; height: 2rem; padding: 0.15rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-field); background: var(--color-base-100); cursor: pointer; }
.text-anchors, .text-axis { display: grid; gap: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--color-base-300); }
.text-anchors .anchor-grid { margin-top: 0; }
/* A grade da linha de texto é de botões, não de radios: mesmo visual, estado
   pelo aria-pressed. */
.anchor-grid > button.anchor-cell { border: 0; padding: 0; }
.anchor-cell[aria-pressed="true"] { background: var(--color-primary); }
.anchor-cell[aria-pressed="true"] .anchor-dot { background: var(--color-primary-content); transform: scale(1.3); }
.text-shadow { display: grid; gap: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--color-base-300); }
.text-shadow-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.85rem; }
.text-shadow-controls > .slider-field { flex: 1 1 10rem; min-width: min(10rem, 100%); }
.switch-row-sm { padding: 0.5rem 0.65rem; }
.switch-row-sm strong { font-size: 0.8rem; }
.text-empty { color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 0.82rem; }
.text-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.text-count { color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-family: var(--voe-mono); font-size: 0.75rem; }

/* Lista de imagens (banner e marca) ----------------------------------------- */

.overlay-list { display: grid; gap: 0.7rem; }
/* O nome da imagem escolhida no cabeçalho: sem ele uma lista de tres banners é
   uma lista de tres cabeçalhos iguais. */
.overlay-row-name { flex: 1; overflow: hidden; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); font-size: 0.78rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.slider-slot { display: block; min-width: 0; }

/* O seletor de imagem de cada linha é de botões, não de radios: mesmo visual da
   biblioteca de marca, estado pelo aria-pressed. Radios de mesmo nome em linhas
   diferentes seriam um grupo só, e escolher a imagem do segundo banner apagaria
   a do primeiro. */
.brand-picker > button.brand-option { font: inherit; text-align: center; }
.brand-option[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--color-primary) 12%, transparent); }
.brand-option[aria-pressed="true"] .brand-option-name { color: var(--color-base-content); }

.template-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.7rem; background: var(--color-base-100); }
.template-bar-label { display: inline-flex; align-items: center; gap: 0.4rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.76rem; font-weight: 700; }
.template-bar-list { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.template-save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; padding: 0.85rem; border: 1px dashed var(--color-base-300); border-radius: 0.7rem; background: var(--color-base-100); }

.studio-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; padding-top: 0.25rem; }
.studio-submit .hint { flex: 1 1 14rem; margin: 0; }
.trim-group { padding: 1rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ------------------------------------------------------- medidor de plano ---

   O número é o que muda e o que interessa: ele fica em display, grande, e o resto
   recua. A barra existe para dispensar a conta — "2 de 3" e "20 de 30" dizem coisas
   diferentes que o texto sozinho não separa. */
.plan-meter { max-width: 20rem; margin-top: 0.9rem; }
.plan-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.plan-meter-count { color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.82rem; font-weight: 650; }
.plan-meter-count b {
  margin-right: 0.1rem; color: var(--color-base-content);
  font-family: var(--voe-display); font-size: 1.05rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.plan-meter-plan {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-family: var(--voe-mono); font-size: 0.7rem; letter-spacing: 0.02em; white-space: nowrap;
}
.plan-meter-track {
  display: block; overflow: hidden; height: 0.3rem; margin-top: 0.4rem;
  border-radius: 999px; background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
.plan-meter-fill {
  display: block; height: 100%; min-width: 0.3rem; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--color-primary) 70%, var(--voe-pro)), var(--color-primary));
  transition: width 240ms ease;
}
/* Vazio não ganha ponto nenhum: uma bolinha no começo do trilho parece "um já usado". */
.plan-meter-fill[style*="width:0%"] { min-width: 0; }
.plan-meter.is-full .plan-meter-fill { background: linear-gradient(90deg, var(--voe-pro), color-mix(in oklab, var(--voe-pro) 55%, var(--color-error))); }
.plan-meter-cta {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
  color: color-mix(in oklab, var(--voe-pro) 72%, var(--color-base-content));
  font-size: 0.78rem; font-weight: 700;
}
.plan-meter-cta:hover { text-decoration: underline; text-underline-offset: 0.15rem; }
.plan-meter-cta .pro-gem { width: 0.85rem; height: 0.85rem; flex: none; }

/* Lotes -------------------------------------------------------------------- */

/* Barra de busca e filtro das listagens. Fica fora da lista de propósito: a
   lista se recarrega sozinha e levaria o foco do campo junto. */
.list-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.list-search { flex: 1 1 18rem; min-width: min(18rem, 100%); }
.list-search input { width: 100%; }
.list-filter select { min-width: 12rem; }

.batch-table { min-width: 0; }
.batch-table-compact { min-width: 0; }
.batch-cell-name { min-width: 0; }
.batch-cell-name .cell-link { display: block; overflow: hidden; max-width: 22rem; text-overflow: ellipsis; white-space: nowrap; }
.batch-cell-style { max-width: 17rem; }
.batch-cell-progress { min-width: 0; }
.batch-progress { display: flex; align-items: center; gap: 0.55rem; }
.batch-progress .progress { width: 100%; min-width: 5rem; }
.batch-progress span { color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-family: var(--voe-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* A distribuição é declarada, não deixada para o conteúdo mais comprido decidir
   a largura da tabela. Assim título, estilos e ações continuam legíveis sem
   formar uma faixa lateral. */
.batch-table:not(.batch-table-compact) th:nth-child(1), .batch-table:not(.batch-table-compact) td:nth-child(1) { width: 28%; }
.batch-table:not(.batch-table-compact) th:nth-child(2), .batch-table:not(.batch-table-compact) td:nth-child(2) { width: 23%; }
.batch-table:not(.batch-table-compact) th:nth-child(3), .batch-table:not(.batch-table-compact) td:nth-child(3) { width: 6%; }
.batch-table:not(.batch-table-compact) th:nth-child(4), .batch-table:not(.batch-table-compact) td:nth-child(4) { width: 12%; }
.batch-table:not(.batch-table-compact) th:nth-child(5), .batch-table:not(.batch-table-compact) td:nth-child(5) { width: 10%; }
.batch-table:not(.batch-table-compact) th:nth-child(6), .batch-table:not(.batch-table-compact) td:nth-child(6) { width: 8%; }
.batch-table:not(.batch-table-compact) th:nth-child(7), .batch-table:not(.batch-table-compact) td:nth-child(7) { width: 13%; }
.batch-table-compact th:nth-child(1), .batch-table-compact td:nth-child(1) { width: 46%; }
.batch-table-compact th:nth-child(2), .batch-table-compact td:nth-child(2) { width: 9%; }
.batch-table-compact th:nth-child(3), .batch-table-compact td:nth-child(3) { width: 18%; }
.batch-table-compact th:nth-child(4), .batch-table-compact td:nth-child(4) { width: 13%; }
.batch-table-compact th:nth-child(5), .batch-table-compact td:nth-child(5) { width: 14%; }
.template-table th:nth-child(1), .template-table td:nth-child(1) { width: 34%; }
.template-table th:nth-child(2), .template-table td:nth-child(2) { width: 36%; }
.template-table th:nth-child(3), .template-table td:nth-child(3) { width: 14%; }
.template-table th:nth-child(4), .template-table td:nth-child(4) { width: 16%; }
.library-table th:nth-child(1), .library-table td:nth-child(1) { width: 5%; }
.library-table th:nth-child(2), .library-table td:nth-child(2) { width: 43%; }
.library-table th:nth-child(3), .library-table td:nth-child(3) { width: 10%; }
.library-table th:nth-child(4), .library-table td:nth-child(4) { width: 12%; }
.library-table th:nth-child(5), .library-table td:nth-child(5) { width: 11%; }
.library-table th:nth-child(6), .library-table td:nth-child(6) { width: 9%; }
.library-table th:nth-child(7), .library-table td:nth-child(7) { width: 10%; }

/* Renomear em linha: o campo ocupa o lugar do título, sem esticar a coluna. */
.rename-form { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.rename-form input { min-width: 12rem; }

.style-summary { position: relative; display: inline-flex; min-width: 0; outline: none; }
.style-summary:focus-visible { border-radius: var(--radius-selector); box-shadow: 0 0 0 2px var(--color-primary); }
.style-chips { display: flex; flex-wrap: nowrap; gap: 0.45rem; min-width: 0; max-width: min(15.75rem, 100%); overflow: hidden; }
.style-chips .badge { overflow: hidden; max-width: 8.75rem; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.style-chips .style-chip-more { min-width: 2.1rem; justify-content: center; padding-inline: 0.45rem; }
.style-summary-panel { position: absolute; z-index: 45; bottom: calc(100% + 0.55rem); left: 0; display: grid; gap: 0.5rem; width: max-content; min-width: 13.5rem; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.8rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); color: var(--color-base-content); box-shadow: var(--voe-shadow-md); opacity: 0; pointer-events: none; transform: translateY(0.25rem); transition: opacity 140ms ease, transform 140ms ease; visibility: hidden; }
.style-summary:hover, .style-summary:focus, .style-summary:focus-within { z-index: 50; }
.style-summary:hover .style-summary-panel, .style-summary:focus .style-summary-panel, .style-summary:focus-within .style-summary-panel { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.style-summary-title { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.style-summary-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.style-summary-panel .badge { border-color: var(--color-base-300); background: var(--color-base-200); color: var(--color-base-content); }
.chip-xs { min-height: 1.35rem; padding: 0.1rem 0.5rem; font-size: 0.68rem; }

.batch-summary { display: grid; gap: 1rem; padding: 1.35rem; margin-bottom: 1.25rem; }
.batch-page { container-name: batch-page; container-type: inline-size; }
.batch-page-head { align-items: flex-start; gap: clamp(1rem, 3vw, 2rem); }
.batch-page-intro { min-width: 0; flex: 1 1 34rem; }
.page-head .batch-page-title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  margin-top: 0.2rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--color-base-content);
  font-size: clamp(1.7rem, 2.7vw, 2.35rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}
.batch-page-sub { max-width: 70ch; }
.batch-page-actions { align-self: center; justify-content: flex-end; gap: 0.5rem; flex: 0 0 auto; }
.batch-page-actions .action-form { flex: 0 0 auto; }
.batch-page-actions .btn { min-height: 2.5rem; white-space: nowrap; }
.batch-summary-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.batch-summary-title { margin-top: 0.45rem; color: var(--color-base-content); font-family: var(--voe-display); font-size: 1.3rem; font-weight: 750; letter-spacing: -0.035em; }
.batch-summary-sub { margin-top: 0.15rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.85rem; }
.batch-summary-progress { display: grid; gap: 0.3rem; flex: 1 1 14rem; min-width: min(14rem, 100%); text-align: right; }
.batch-summary-progress strong { color: var(--color-primary); font-family: var(--voe-mono); font-size: 1.1rem; }
.batch-package { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; padding: 0.9rem 1rem; border: 1px solid var(--color-base-300); border-radius: 0.7rem; background: var(--color-base-200); }
.batch-package-copy { display: grid; gap: 0.15rem; min-width: 0; }
.batch-package-copy strong { color: var(--color-base-content); font-size: 0.88rem; }
.batch-package-copy small { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.76rem; }
/* O andamento do .zip ocupa o lugar do botão enquanto o pacote é montado, com a mesma
   largura que ele — assim a linha não muda de tamanho quando o botão volta. */
.batch-package-progress { display: grid; gap: 0.3rem; justify-items: end; min-width: 9rem; }
.batch-package-progress strong { color: var(--color-primary); font-family: var(--voe-mono); font-size: 0.95rem; }
.batch-package-progress .progress { width: 9rem; }

.batch-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; padding-bottom: 3rem; }
.batch-item { display: grid; gap: 0.6rem; padding: 0.7rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); }
/* O quadro é centralizado no cartão: antes ele encostava à esquerda e sobrava um
   vão branco de um lado só. A largura é declarada por proporção (a altura tem
   teto de 18rem) porque o conteúdo é posicionado por cima — sem largura própria
   o quadro colapsaria para zero. */
.batch-item-media {
  position: relative;
  display: flex;
  width: min(100%, 10.2rem);
  aspect-ratio: 9 / 16;
  max-height: 18rem;
  align-items: center;
  justify-content: center;
  justify-self: center;
  overflow: hidden;
  border-radius: 0.6rem;
  background: #05050a;
}
.batch-item-media[data-ratio="horizontal"], .batch-item-media[data-ratio="original"] { width: 100%; aspect-ratio: 16 / 9; }
.batch-item-media[data-ratio="square"] { width: min(100%, 18rem); aspect-ratio: 1 / 1; }
.batch-item-media[data-ratio="portrait"] { width: min(100%, 14.4rem); aspect-ratio: 4 / 5; }
.batch-item-media video { width: 100%; height: 100%; object-fit: contain; }
/* Esqueleto de carregamento: um brilho atravessando o quadro, o ícone de filme
   respirando e um anel girando. Substitui o retângulo preto, que parecia
   travado. */
.batch-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(100deg,
      transparent 25%,
      color-mix(in oklab, white 8%, transparent) 45%,
      color-mix(in oklab, white 16%, transparent) 50%,
      color-mix(in oklab, white 8%, transparent) 55%,
      transparent 75%),
    linear-gradient(180deg, #1b1b26, #0a0a12);
  background-size: 240% 100%, 100% 100%;
  animation: voe-skeleton 1.8s linear infinite;
}
.batch-skeleton-icon {
  display: inline-flex;
  color: color-mix(in oklab, white 34%, transparent);
  animation: voe-skeleton-breathe 1.8s ease-in-out infinite;
}
.batch-skeleton-icon .icon { width: 2.1rem; height: 2.1rem; }
.batch-skeleton-spinner {
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  border: 2px solid color-mix(in oklab, white 14%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 999px;
  animation: voe-skeleton-spin 1s linear infinite;
}
@keyframes voe-skeleton { from { background-position: 130% 0, 0 0; } to { background-position: -130% 0, 0 0; } }
@keyframes voe-skeleton-breathe { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes voe-skeleton-spin { to { transform: rotate(360deg); } }

.batch-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; }
.batch-item-icon-error { background: color-mix(in oklab, var(--color-error) 20%, transparent); color: var(--color-error); }
.batch-item-body { display: grid; gap: 0.4rem; min-width: 0; }
.batch-item-head { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.batch-item-index { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 0.4rem; background: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-family: var(--voe-mono); font-size: 0.68rem; font-weight: 700; flex: none; }
.batch-item-title { overflow: hidden; flex: 1; min-width: 0; color: var(--color-base-content); font-size: 0.82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.batch-item-error { color: var(--color-error); font-size: 0.74rem; line-height: 1.4; }
/* Rodapé do cartão de um corte que falhou: botão de tentar de novo, contador e a bolha de
   ajuda. `wrap` porque o cartão é estreito (três por linha no desktop, um no celular) e o
   rótulo do botão muda de tamanho conforme a espera — "Tentar de novo em 16 h" é bem mais
   largo que "Tentar de novo". O <form> entra como item do flex, sem display:contents: o
   contents em elemento de formulário ainda tira o campo da árvore de acessibilidade em
   navegador antigo, e aqui ele não compra nada. */
.batch-item-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.batch-item-retry:empty { display: none; }
.batch-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.batch-item-meta { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-family: var(--voe-mono); font-size: 0.7rem; }
.batch-item-succeeded { border-color: color-mix(in oklab, var(--color-success) 30%, var(--color-base-300)); }
.batch-item-failed { border-color: color-mix(in oklab, var(--color-error) 30%, var(--color-base-300)); }

@container batch-page (max-width: 52rem) {
  .batch-page-head { align-items: stretch; flex-direction: column; }
  .batch-page-actions { width: 100%; justify-content: flex-start; }
  .batch-page-actions .action-form, .batch-page-actions > .btn { flex: 1 1 12rem; }
  .batch-page-actions .action-form .btn { width: 100%; }
}

@container batch-page (max-width: 28rem) {
  .batch-page-actions .action-form, .batch-page-actions > .btn { flex-basis: 100%; width: 100%; }
}

.batch-sources { display: grid; gap: 0.9rem; padding: 1.1rem; }
.batch-upload-list { display: grid; gap: 0.4rem; }
.asset-pick-list { display: grid; gap: 0.4rem; max-height: 22rem; overflow-y: auto; padding-right: 0.2rem; }
.asset-pick { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-base-300); border-radius: 0.6rem; background: var(--color-base-100); cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; }
.asset-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.asset-pick:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-base-300)); }
.asset-pick:has(input:checked) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); }
.asset-pick:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.asset-pick-body { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.asset-pick-body strong { overflow: hidden; color: var(--color-base-content); font-size: 0.82rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.asset-pick-body small { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.72rem; }
.asset-pick-check { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--color-base-300); border-radius: 0.4rem; color: transparent; flex: none; }
.asset-pick:has(input:checked) .asset-pick-check { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-content); }

/* Biblioteca de marca ------------------------------------------------------ */

.brand-page { display: grid; gap: 1.5rem; padding-bottom: 3rem; }
.brand-library { display: grid; gap: 1.75rem; }
.brand-kind { display: flex; gap: 0.4rem; }
.brand-kind label { position: relative; }
.brand-kind input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.brand-kind label:has(input:checked) { background: var(--color-primary); color: var(--color-primary-content); border-color: var(--color-primary); }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.85rem; }
.brand-tile { position: relative; display: grid; gap: 0.5rem; padding: 0.6rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); }
.brand-tile-frame { display: flex; aspect-ratio: 16 / 10; align-items: center; justify-content: center; overflow: hidden; border-radius: 0.5rem; background: repeating-conic-gradient(color-mix(in oklab, var(--color-base-content) 8%, transparent) 0% 25%, transparent 0% 50%) 50% / 0.9rem 0.9rem; }
.brand-tile-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-tile figcaption { display: grid; gap: 0.1rem; min-width: 0; }
.brand-tile figcaption strong { overflow: hidden; color: var(--color-base-content); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.brand-tile figcaption small { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.7rem; }
.brand-tile .delete-form { position: absolute; top: 0.4rem; right: 0.4rem; }
/* O baixar fica ao lado do excluir, no mesmo canto. Recuado pela largura do
   outro botão para não sobrepor — os dois são absolutos sobre a miniatura. */
.brand-tile-baixar { position: absolute; top: 0.4rem; right: 2.4rem; }
.section-sub { margin-top: 0.2rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.82rem; }
.editor-status-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 1.5rem; }
.editor-status-icon { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 0.8rem; background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)); color: var(--color-primary); }
.editor-status-copy { min-width: 0; }
.editor-progress-value { color: var(--color-primary); font-family: var(--voe-mono); font-size: 0.8rem; }
.editor-progress { grid-column: 1 / -1; width: 100%; }
.editor-result-card { display: grid; gap: 1rem; padding: 1.5rem; }
.editor-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.editor-result-head h2 { margin-top: 0.2rem; color: var(--color-base-content); font-size: 1.2rem; font-weight: 800; }
.editor-result-video { display: block; width: min(100%, 48rem); max-height: 70vh; border: 1px solid var(--color-base-300); border-radius: 0.75rem; background: var(--color-neutral); }

/* Upload ------------------------------------------------------------------ */

.upload-wrap { display: grid; gap: 1.5rem; padding-bottom: 3rem; }
.dropzone { display: flex; min-height: 19rem; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2.5rem 1.5rem; border-style: dashed; background: var(--color-base-100); text-align: center; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--color-primary); }
.dropzone.is-dragover { background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--color-primary) 15%, transparent); }
.dz-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dz-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.35rem; border: 1px solid color-mix(in oklab, var(--color-primary) 25%, var(--color-base-300)); border-radius: 0.85rem; background: color-mix(in oklab, var(--color-primary) 9%, var(--color-base-100)); color: var(--color-primary); }
.dz-icon .icon { width: 1.5rem; height: 1.5rem; }
.dz-title { color: var(--color-base-content); font-family: var(--voe-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.035em; }
.dz-sub { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.9rem; }
.dropzone .btn { margin-top: 0.35rem; }
.dropzone-compact { min-height: 11rem; gap: 0.5rem; padding: 1.5rem 1.25rem; border: 1px dashed var(--color-base-300); border-radius: var(--radius-box); }
.dropzone-compact .dz-icon { width: 2.75rem; height: 2.75rem; margin-bottom: 0.1rem; }
.dropzone-compact .dz-title { font-size: 0.98rem; }
.dropzone-compact .dz-sub { font-size: 0.8rem; }
.batch-sources .dropzone { min-height: 12rem; gap: 0.55rem; padding: 1.5rem 1.25rem; }
.batch-sources .dropzone .dz-icon { width: 2.75rem; height: 2.75rem; }
.batch-sources .dropzone .dz-title { font-size: 1rem; }
.batch-sources .upload-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
.batch-sources .upload-panel-head { display: none; }

/* Fila de envio ------------------------------------------------------------ */

.upload-panel { display: grid; gap: 1rem; padding: 1.25rem; }
.upload-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.upload-queue { display: grid; gap: 0.6rem; max-height: 32rem; overflow-y: auto; }
.upload-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-left-width: 3px;
  border-radius: 0.7rem;
  background: var(--color-base-100);
  transition: border-color 160ms ease;
}
.upload-card[data-state="pending"] { border-left-color: var(--color-base-300); }
.upload-card[data-state="uploading"], .upload-card[data-state="finishing"] { border-left-color: var(--color-primary); }
.upload-card[data-state="done"] { border-left-color: var(--color-success); }
.upload-card[data-state="duplicate"] { border-left-color: var(--color-warning); }
.upload-card[data-state="error"] { border-left-color: var(--color-error); }

.upload-card-thumb {
  position: relative;
  display: block;
  width: 5.5rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: #05050a;
  cursor: pointer;
  flex: none;
}
.upload-card-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.upload-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, #05050a 30%, transparent);
  opacity: 0;
  transition: opacity 160ms ease;
}
.upload-card-play::after {
  width: 0;
  height: 0;
  border-width: 0.4rem 0 0.4rem 0.65rem;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  content: "";
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.upload-card-thumb:hover .upload-card-play, .upload-card-thumb:focus-visible .upload-card-play { opacity: 1; }
.upload-card-body { display: grid; gap: 0.25rem; min-width: 0; }
.upload-card-name { overflow: hidden; color: var(--color-base-content); font-size: 0.87rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.upload-card-meta { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.upload-card-bar { width: 100%; }
.upload-card-status { color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.upload-card[data-state="done"] .upload-card-status { color: var(--color-success); font-weight: 650; }
.upload-card[data-state="duplicate"] .upload-card-status { color: color-mix(in oklab, var(--color-warning) 82%, var(--color-base-content)); font-weight: 650; }
.upload-card[data-state="error"] .upload-card-status { color: var(--color-error); font-weight: 650; }
.upload-card-remove { flex: none; font-size: 1.15rem; line-height: 1; }

.upload-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-base-300); }
.upload-total { display: grid; gap: 0.35rem; flex: 1 1 16rem; min-width: min(16rem, 100%); }
.upload-total-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.82rem; }
.upload-total-head strong { color: var(--color-primary); font-family: var(--voe-mono); font-size: 0.95rem; }
.upload-total-bar { width: 100%; }
.upload-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; padding: 0.9rem 1rem; border: 1px solid color-mix(in oklab, var(--color-success) 32%, var(--color-base-300)); border-radius: var(--radius-box); background: color-mix(in oklab, var(--color-success) 6%, var(--color-base-100)); }
.upload-done .hint { margin: 0; flex: 1 1 12rem; }
.upload-actions-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Prévia de vídeo ---------------------------------------------------------- */

.video-preview-box { display: grid; gap: 0.85rem; width: min(48rem, calc(100vw - 2rem)); max-width: none; }
.video-preview-title { overflow: hidden; color: var(--color-base-content); font-family: var(--voe-display); font-size: 1rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.video-preview-player { display: block; width: 100%; max-height: min(70vh, 32rem); border-radius: 0.6rem; background: #05050a; object-fit: contain; }

@media (max-width: 30rem) {
  .video-preview-box { width: calc(100vw - 1rem); padding: 0.85rem; }
  .video-preview-player { max-height: 60vh; }
}

.editor-result-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dz-status { color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.85rem; }
.dz-error { color: var(--color-error); font-size: 0.85rem; font-weight: 650; }
.upload-steps { display: grid; max-width: 48rem; gap: 0.75rem; counter-reset: step; }
.upload-steps li { display: flex; align-items: flex-start; gap: 0.75rem; color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 0.9rem; counter-increment: step; }
.upload-steps li::before { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--color-base-300); border-radius: 999px; background: var(--color-base-100); color: var(--color-primary); content: counter(step); font-size: 0.75rem; font-weight: 800; flex: none; }
.upload-steps b { color: var(--color-base-content); font-weight: 750; }

/* Runs and clip review ---------------------------------------------------- */

.run-head { align-items: center; }
.run-head > div:first-child, .editor-head > div:first-child { min-width: 0; }
.run-head h1, .editor-head h1 { overflow-wrap: anywhere; }
.run-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
.chip { display: inline-flex; align-items: center; min-height: 1.7rem; padding: 0.2rem 0.65rem; border: 1px solid var(--color-base-300); border-radius: 999px; background: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.75rem; font-weight: 650; }
.run-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; }
.asset-run-ribbon { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.8rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); box-shadow: var(--voe-shadow-sm); }
.ribbon-node { min-width: 0; padding: 0.3rem 0.45rem; }
.ribbon-node-label { display: block; margin-bottom: 0.35rem; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ribbon-node strong { display: block; overflow: hidden; color: var(--color-base-content); font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.ribbon-node small { display: block; margin-top: 0.25rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.75rem; }
.ribbon-process { border-radius: 0.65rem; background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); }
.ribbon-output { border-radius: 0.65rem; background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); }
.ribbon-link { color: color-mix(in oklab, var(--color-base-content) 42%, transparent); font-size: 1.25rem; }
.status-card { margin-top: 1.5rem; padding: 1.5rem; box-shadow: var(--voe-shadow-sm); }
.status-row { display: flex; align-items: center; gap: 0.9rem; }
.status-row > div { min-width: 0; }
.status-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; flex: none; }
.status-icon-ok { background: color-mix(in oklab, var(--color-success) 14%, var(--color-base-100)); color: var(--color-success); }
.status-icon-danger { background: color-mix(in oklab, var(--color-error) 14%, var(--color-base-100)); color: var(--color-error); }
.status-title { color: var(--color-base-content); font-family: var(--voe-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.status-sub { margin-top: 0.25rem; overflow-wrap: anywhere; color: color-mix(in oklab, var(--color-base-content) 64%, transparent); font-size: 0.9rem; }
.status-card-ok .status-row, .status-card-failed .status-row, .status-card-cancelled .status-row { padding-bottom: 1rem; }
.process-steps { display: grid; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-base-300); }
.process-step { padding: 0.8rem 0.9rem; border: 1px solid var(--color-base-300); border-radius: 0.75rem; background: var(--color-base-200); }
.process-step-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.process-step-name { color: var(--color-base-content); font-size: 0.85rem; font-weight: 700; }
.process-step-status { color: color-mix(in oklab, var(--color-base-content) 54%, transparent); font-size: 0.8rem; }
.process-step-done { border-color: color-mix(in oklab, var(--color-success) 30%, var(--color-base-300)); background: color-mix(in oklab, var(--color-success) 8%, var(--color-base-200)); }
.process-step-active { border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-base-300)); background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-200)); }
.process-step-failed { border-color: color-mix(in oklab, var(--color-error) 30%, var(--color-base-300)); background: color-mix(in oklab, var(--color-error) 7%, var(--color-base-200)); }
.process-step .progress { height: 0.45rem; margin-top: 0.65rem; }
.process-step-message { margin-top: 0.45rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.8rem; }
.retry-form { margin-top: 1rem; }
.attempts { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-base-300); }
.attempts-title { margin-bottom: 0.5rem; color: color-mix(in oklab, var(--color-base-content) 54%, transparent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.attempt { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; padding: 0.45rem 0; font-size: 0.85rem; }
.attempt-name { font-family: var(--voe-mono); font-size: 0.8rem; }
.attempt-num, .attempt-duration { color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 0.8rem; }
.attempt-duration { font-family: var(--voe-mono); }
.attempt-status { margin-left: auto; color: color-mix(in oklab, var(--color-base-content) 64%, transparent); font-weight: 650; }
.panel { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-base-300); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.panel-head h2 { color: var(--color-base-content); font-family: var(--voe-display); font-size: 1rem; font-weight: 700; }
.transcript-text { max-width: 70ch; margin-top: 0.85rem; padding: 1rem; border: 1px solid var(--color-base-300); border-radius: 0.75rem; background: var(--color-base-200); font-size: 0.95rem; line-height: 1.7; }
.hint { margin-top: 0.65rem; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 0.8rem; }
.segs { display: grid; margin-top: 0.9rem; }
.seg { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.65rem 0.75rem; border: 0; border-bottom: 1px solid var(--color-base-300); border-radius: 0; background: transparent; text-align: left; cursor: pointer; transition: background-color 160ms ease; }
.seg:last-child { border-bottom: 0; }
.seg:hover { background: color-mix(in oklab, var(--color-primary) 7%, transparent); }
.seg-time { flex: none; color: var(--color-primary); font-family: var(--voe-mono); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg-text { color: var(--color-base-content); font-size: 0.9rem; }

/* Clip form and cards ----------------------------------------------------- */

.cand-form { margin-top: 1rem; padding: 1rem; border: 1px solid var(--color-base-300); border-radius: 0.75rem; background: var(--color-base-200); }
.cand-form-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.75rem; }
.field { display: flex; min-width: 7rem; flex-direction: column; gap: 0.35rem; }
.field-grow { min-width: 12rem; flex: 1; }
.field-label { color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 0.8rem; font-weight: 700; }
.field input { width: 100%; }
.field-btn { align-self: flex-end; }
.caption-config { display: grid; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--color-base-300); border-radius: 0.75rem; background: var(--color-base-100); }
.caption-config-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.caption-config-title { color: var(--color-base-content); font-size: 0.9rem; font-weight: 750; }
.caption-config-sub { margin-top: 0.2rem; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0.78rem; }
.caption-setting { min-width: 0; margin: 0; padding: 0; border: 0; }
.caption-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.65rem; margin-top: 0.5rem; }
.caption-style-option { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; padding: 0.55rem; border: 1px solid var(--color-base-300); border-radius: 0.7rem; background: var(--color-base-100); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.caption-style-option input, .caption-position-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.caption-style-option:hover, .caption-position-option:hover { border-color: color-mix(in oklab, var(--color-primary) 42%, var(--color-base-300)); }
.caption-style-option.is-selected, .caption-position-option.is-selected, .caption-style-option:has(input:checked), .caption-position-option:has(input:checked) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--color-primary) 12%, transparent); }
.caption-style-option:has(input:focus-visible), .caption-position-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.caption-style-preview { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; overflow: hidden; border-radius: 0.55rem; background: var(--color-neutral); }
.caption-preview-line { max-width: 100%; padding: 0.25rem 0.4rem; color: var(--color-neutral-content); font-size: 0.68rem; font-weight: 750; line-height: 1.15; text-align: center; }
.caption-preview-line b { color: var(--color-warning); }
.caption-style-preview-pop .caption-preview-line { border-radius: 0.4rem; background: color-mix(in oklab, var(--color-neutral) 84%, var(--color-primary)); }
.caption-style-preview-karaoke .caption-preview-line { text-decoration: underline; text-decoration-color: var(--color-warning); text-decoration-thickness: 0.15rem; text-underline-offset: 0.2rem; }
.caption-style-preview-boxed .caption-preview-line { border-radius: 0.4rem; background: var(--color-base-content); color: var(--color-base-100); }
.caption-style-preview-boxed .caption-preview-line b { color: var(--color-warning); }
.caption-style-preview-clean { background: color-mix(in oklab, var(--color-neutral) 92%, var(--color-primary)); }
.caption-style-preview-impact .caption-preview-line { padding: 0.35rem 0.5rem; border-radius: 0.25rem; background: var(--color-base-content); font-size: 0.72rem; letter-spacing: 0.02em; text-transform: uppercase; }
.caption-style-preview-impact .caption-preview-line b { color: var(--color-warning); }
.caption-style-preview-neon .caption-preview-line { color: var(--color-info); text-shadow: 0 0 0.35rem color-mix(in oklab, var(--color-info) 55%, transparent); }
.caption-style-preview-neon .caption-preview-line b { color: var(--color-warning); }
.caption-style-preview-marker .caption-preview-line { border-radius: 0.35rem; background: var(--color-warning); color: var(--color-warning-content); }
.caption-style-preview-marker .caption-preview-line b { color: var(--color-warning-content); }
.caption-style-copy { display: grid; min-width: 0; gap: 0.1rem; }
.caption-style-copy strong { overflow: hidden; color: var(--color-base-content); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.caption-style-copy small { overflow: hidden; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.caption-position-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.5rem; }
.caption-position-option { position: relative; display: flex; align-items: center; min-width: 0; gap: 0.55rem; padding: 0.55rem 0.65rem; border: 1px solid var(--color-base-300); border-radius: 0.7rem; background: var(--color-base-100); color: var(--color-base-content); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.caption-position-option strong { font-size: 0.78rem; }
.caption-position-glyph { display: flex; width: 1.65rem; height: 2.2rem; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--color-base-content) 25%, transparent); border-radius: 0.3rem; background: var(--color-neutral); color: var(--color-neutral-content); font-size: 0.58rem; font-weight: 800; flex: none; }
.caption-position-glyph-top { align-items: flex-start; padding-top: 0.2rem; }
.caption-position-glyph-center { align-items: center; }
.caption-position-glyph-bottom { align-items: flex-end; padding-bottom: 0.2rem; }
.caption-position-glyph-custom { align-items: center; justify-content: flex-end; padding-right: 0.15rem; padding-bottom: 0.5rem; }
.caption-axis { display: grid; gap: 0.75rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--color-base-300); }
.caption-axis-hint { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 0.78rem; line-height: 1.45; }
.caption-preview-form { display: grid; width: 100%; gap: 0.85rem; padding-top: 0.25rem; }
.caption-preview-form-head { display: grid; gap: 0.15rem; width: 100%; }
.caption-preview-form-head strong { color: var(--color-base-content); font-size: 0.82rem; }
.caption-preview-form-head span { color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: 0.75rem; }
.caption-preview-form .caption-config { margin-top: 0; }
.caption-preview-form > .btn { justify-self: start; }
.form-error, .cand-error { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.65rem 0.75rem; border-radius: 0.65rem; background: color-mix(in oklab, var(--color-error) 11%, var(--color-base-100)); color: var(--color-error); font-size: 0.85rem; font-weight: 650; }
.form-error .icon, .cand-error .icon { width: 0.9rem; height: 0.9rem; flex: none; }
.cands { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.empty-inline { padding: 0.85rem 0; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 0.9rem; }
.cand { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); box-shadow: var(--voe-shadow-sm); }
.cand-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-base-300); }
.cand-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)); color: var(--color-primary); font-size: 0.75rem; font-weight: 800; flex: none; }
.cand-title { min-width: 0; flex: 1; }
.cand-title h3 { overflow: hidden; color: var(--color-base-content); font-family: var(--voe-display); font-size: 0.9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cand-range { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.1rem; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-family: var(--voe-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.cand-range .icon { width: 0.75rem; height: 0.75rem; }
.cand-caption-meta { display: block; margin-top: 0.2rem; color: var(--color-primary); font-size: 0.68rem; font-weight: 700; }
.cand-body { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 1rem; }
.cand-video video { display: block; width: auto; max-width: 100%; height: 18rem; aspect-ratio: 9 / 16; border: 1px solid var(--color-base-300); border-radius: 0.75rem; background: var(--color-neutral); box-shadow: var(--voe-shadow-sm); }
.cands .cand-video video { height: clamp(16rem, 60cqi, 22rem); }
.cand-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.cand-loading { display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.65rem; padding: 0.5rem 0; color: color-mix(in oklab, var(--color-base-content) 64%, transparent); font-size: 0.85rem; }
.cand-progress { color: var(--color-primary); font-family: var(--voe-mono); font-size: 0.75rem; font-weight: 700; }

/* Empty, feedback, dialog ------------------------------------------------- */

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 17rem; gap: 0.5rem; padding-inline: 1rem; text-align: center; }
/* O daisyUI estica todo <p> dentro de .card-body (`flex-grow: 1`), e o vazio É um
   card-body: o título e a linha de baixo eram empurrados para longe um do outro e
   abriam um buraco no meio do cartão. */
.empty > p { flex-grow: 0; }
.empty-action { margin-top: 0.35rem; }
.empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 0.4rem; border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.empty-icon .icon { width: 1.35rem; height: 1.35rem; }
.empty-title { color: var(--color-base-content); font-size: 1rem; font-weight: 750; }
.empty-sub { max-width: 34ch; margin-bottom: 0.6rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.9rem; }
.toast-region { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 80; display: grid; width: min(24rem, calc(100vw - 2rem)); gap: 0.65rem; }
.toast { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0.8rem; border: 1px solid var(--color-base-300); border-radius: 0.8rem; background: var(--color-base-100); color: var(--color-base-content); box-shadow: var(--voe-shadow-md); font-size: 0.85rem; font-weight: 650; line-height: 1.4; animation: toast-in 180ms ease-out both; }
.toast-copy { min-width: 0; overflow-wrap: anywhere; }
.toast button { min-width: 1.5rem; margin-left: auto; border: 0; background: transparent; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.toast-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.5rem; background: color-mix(in oklab, var(--color-success) 14%, var(--color-base-100)); color: var(--color-success); font-size: 0.8rem; font-weight: 800; }
.toast-error { border-color: color-mix(in oklab, var(--color-error) 30%, var(--color-base-300)); }
.toast-error .toast-mark { background: color-mix(in oklab, var(--color-error) 14%, var(--color-base-100)); color: var(--color-error); }
.confirm-dialog-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; background: color-mix(in oklab, var(--color-error) 14%, var(--color-base-100)); color: var(--color-error); flex: none; }
.modal-box { width: min(28rem, calc(100vw - 2rem)); max-height: min(90vh, 42rem); max-height: min(90svh, 42rem); overflow-y: auto; padding: clamp(1rem, 4vw, 1.5rem); }
.modal-action { flex-wrap: wrap; }
.deletion-result { display: grid; gap: 1.25rem; margin-top: 2.5rem; padding: 1.5rem; }
.deletion-result:focus { outline: 2px solid var(--color-primary); outline-offset: 0.5rem; }
.deletion-result .status-row { align-items: flex-start; }
.deletion-result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--color-base-300); }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 70rem) {
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric + .metric { border-left: 0; }
  .metric:nth-child(even) { border-left: 1px solid var(--color-base-300); }
  .metric:nth-child(n + 3) { border-top: 1px solid var(--color-base-300); }
  .asset-run-ribbon { gap: 0.45rem; }
}

@media (max-width: 48rem) {
  .metric { padding: 1.15rem 1.25rem 1.25rem; }
  .caption-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-grid { grid-template-columns: 1fr; }
  .editor-panel-captions { grid-column: auto; }
  .editor-choice-grid { grid-template-columns: 1fr; }
  .editor-choice-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-status-card { grid-template-columns: auto minmax(0, 1fr); }
  .editor-status-copy { grid-column: 2; grid-row: 1; padding-inline-end: 3.5rem; }
  .editor-progress-value { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
  .asset-run-ribbon { grid-template-columns: 1fr; gap: 0.25rem; }
  .ribbon-link { display: none; }
  .run-head-actions { justify-content: flex-start; }
  .topbar { padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); }
  .topbar .btn-primary { padding-right: 0.75rem; padding-left: 0.75rem; }
  .dz-file { align-items: flex-start; flex-wrap: wrap; }
  .dz-file-actions { width: 100%; justify-content: flex-start; padding-left: 3.9rem; }
}

/* Listas de trabalho ------------------------------------------------------

   A tabela continua sendo tabela onde as colunas cabem. Quando não cabem, cada
   linha passa a ser uma ficha: o mesmo conteúdo, na mesma ordem e sem uma
   rolagem lateral escondendo ações ou status. `data-label` é o cabeçalho que
   acompanha cada valor, então a ficha conserva o contexto da coluna.
*/
@container data-table (max-width: 60rem) {
  .data-table-card { border: 0; background: transparent; box-shadow: none; }
  .data-table-mobile, .data-table-mobile tbody, .data-table-mobile tr, .data-table-mobile td { display: block; min-width: 0; }
  .data-table-mobile { width: 100%; }
  .data-table-mobile thead { display: none; }
  .data-table-mobile tbody { display: grid; gap: 0.7rem; padding: 0; }
  .data-table-mobile tbody tr {
    display: grid;
    gap: 0.05rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-box);
    background: var(--color-base-100);
    box-shadow: var(--voe-shadow-sm);
  }
  .data-table-mobile tbody tr:hover { background: var(--color-base-100); }
  .data-table-mobile td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.42rem 0;
    border: 0;
    text-align: right;
  }
  .data-table-mobile td::before {
    content: attr(data-label);
    flex: 0 0 6.75rem;
    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-align: left;
    text-transform: uppercase;
  }
  .data-table-mobile td[data-label=""] { justify-content: flex-start; padding-block: 0.1rem 0.35rem; }
  .data-table-mobile td[data-label=""]::before { display: none; }
  .data-table-mobile td[data-label="Produção"],
  .data-table-mobile td[data-label="Template"],
  .data-table-mobile td[data-label="Vídeo"] {
    display: block;
    padding-block: 0.25rem 0.55rem;
    text-align: left;
  }
  .data-table-mobile td[data-label="Produção"]::before,
  .data-table-mobile td[data-label="Template"]::before,
  .data-table-mobile td[data-label="Vídeo"]::before { display: none; }
  .data-table-mobile .library-name { max-width: 100%; }
  .data-table-mobile .batch-cell-name .cell-link { max-width: 100%; }
  .data-table-mobile .batch-cell-progress { align-items: center; }
  .data-table-mobile .batch-progress { width: 100%; }
  .data-table-mobile .batch-progress .progress { min-width: 0; }
  .data-table-mobile td[data-label="Ações"] {
    align-items: flex-start;
    margin-top: 0.3rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-base-300);
  }
  .data-table-mobile td[data-label="Ações"]::before { padding-top: 0.7rem; }
  .data-table-mobile .row-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .data-table-mobile .row-actions .btn { min-height: 2.75rem; }
  .data-table-mobile .row-action-danger.btn-square { width: auto; aspect-ratio: auto; padding-inline: 0.85rem; }
  .data-table-mobile .row-action-danger .row-action-text { display: inline; }
  .data-table-mobile .style-chips { max-width: min(14rem, 100%); }
  .data-table-mobile .style-summary-panel { right: 0; left: auto; max-width: min(20rem, calc(100vw - 2rem)); }
}

@media (max-width: 40rem) {
  .page-head { align-items: flex-start; flex-direction: column; padding-top: 2rem; }
  .page-head h1 { font-size: 1.8rem; }
  .dash-hero { padding-block-start: 2.25rem; }
  .dash-hero h1 { font-size: 2.2rem; }
  .caption-config-head { align-items: flex-start; flex-direction: column; }
  .caption-position-grid { grid-template-columns: 1fr; }
  .editor-panel { padding: 1rem; }
  .editor-status-card { padding: 1rem; }
  .editor-choice-grid-two { grid-template-columns: 1fr; }
  .editor-submit-row { align-items: stretch; flex-direction: column; }
  .editor-submit-row .btn { width: 100%; }
  .editor-result-head { flex-direction: column; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-head .section-note { align-self: flex-start; }
  .cand-form-row { align-items: stretch; flex-direction: column; }
  .field, .field-grow { width: 100%; min-width: 0; }
  .field-btn { align-self: stretch; }
  .steps { max-width: 100%; }
  .seg { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .notice { align-items: flex-start; flex-wrap: wrap; }
  .notice-link { margin-left: 0; padding-left: 1.2rem; }
  .dz-file-actions { align-items: stretch; flex-direction: column; padding-left: 0; }
  .dz-file-actions .btn { width: 100%; }
  .modal-action { align-items: stretch; flex-direction: column; }
  .modal-action .btn { width: 100%; }
  .toast-region { right: max(1rem, env(safe-area-inset-right)); left: max(1rem, env(safe-area-inset-left)); width: auto; }
  .attempt-status { width: 100%; margin-left: 0; }
}

@media (max-width: 30rem) {
  .topbar { gap: 0.5rem; }
  .topbar .navbar-start { gap: 0.5rem; }
  .topbar .drawer-button, .topbar .btn-primary { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding-inline: 0; }
  .topbar .btn-primary span { display: none; }
  .metric-row { grid-template-columns: 1fr; }
  .metric:nth-child(even) { border-left: 0; }
  .metric + .metric { border-top: 1px solid var(--color-base-300); }
  .caption-style-grid { grid-template-columns: 1fr; }
  .editor-status-copy { padding-inline-end: 2.75rem; }
}

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

/* ------------------------------------------------------------- Meu plano --- */
/* Os medidores da tela de plano. Grade que quebra sozinha: são quatro cartões de
   altura parecida, e em telas estreitas eles viram uma coluna sem media query. */
.plan-notice { margin-bottom: 1rem; align-items: flex-start; }

/* O cartão do plano: um só, com tudo dentro.
   Antes eram quatro cartões, cada um com um parágrafo explicando o próprio
   medidor. O texto empurrava o número para o meio do bloco e a tela virava
   leitura em vez de conferência. Aqui o número é o conteúdo, e o rótulo acima
   dele é toda a explicação de que ele precisa. */
.plan-panel {
	border: 1px solid var(--color-base-300);
	border-radius: var(--rounded-box, 1rem);
	background: var(--color-base-100);
	padding: 1.5rem;
}
.plan-panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-base-300);
}
.plan-panel-name {
	font-family: var(--voe-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.15;
	color: var(--color-base-content);
}

/* A grade quebra sozinha: em tela larga são duas ou três colunas, em telas
   estreitas vira uma coluna, sem media query. */
.plan-grid {
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	padding-top: 1.25rem;
}
.plan-item { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.plan-item-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
/* Monoespaçada e tabular: o valor se atualiza sozinho a cada 30s, e com fonte
   proporcional a linha inteira dança a cada troca de dígito. */
.plan-item-value {
	font-family: var(--voe-mono);
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	color: var(--color-base-content);
}

/* O medidor com o número DENTRO da barra.
   Posição relativa no trilho, preenchimento absoluto atrás e texto por cima:
   assim o valor exato e a proporção chegam no mesmo ponto do olhar, e a barra
   não precisa de uma segunda linha embaixo repetindo o número. */
.plan-gauge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.6rem;
	border-radius: 999px;
	overflow: hidden;
	background: var(--color-base-200);
}
/* O preenchimento é uma MISTURA com o fundo, não a cor cheia.
   Com a cor cheia, o texto que fica por cima some na metade que o preenchimento
   já cobriu — e o número no meio da barra é justamente o dado que a barra
   existe para acompanhar. Misturado com o base-100, o mesmo texto lê dos dois
   lados da divisa, e o tom acompanha o tema claro ou escuro sozinho. */
.plan-gauge-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	background: color-mix(in oklab, var(--color-primary) 30%, var(--color-base-100));
	border-radius: 999px;
	transition: width 320ms ease;
}
.plan-gauge-warn .plan-gauge-fill { background: color-mix(in oklab, var(--color-warning) 40%, var(--color-base-100)); }
.plan-gauge-full .plan-gauge-fill { background: color-mix(in oklab, var(--color-error) 30%, var(--color-base-100)); }
.plan-gauge-text {
	position: relative;
	font-family: var(--voe-mono);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--color-base-content);
	padding-inline: 0.5rem;
}

/* O rodapé do cancelamento agendado. Só existe depois de agendar. */
.plan-panel-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-base-300);
}
.plan-cancel-note { font-size: 0.9rem; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.plan-cancel-note strong { font-family: var(--voe-mono); font-variant-numeric: tabular-nums; color: var(--color-error); }
.plan-catalog { margin-top: 2rem; }
.plan-catalog .card-body { gap: 0.75rem; }
.plan-col-current { background: color-mix(in oklab, var(--color-primary) 8%, transparent); }

/* ---- Catálogo de planos em cards (F7) ---- */
.plan-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  margin-top: 1.5rem;
}
.plan-card { position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem); border: 1px solid var(--color-base-300); background: var(--color-base-100); padding: 1.75rem 1.5rem; transition: border-color 180ms ease, box-shadow 180ms ease; }
.plan-card:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-base-300)); }
.plan-card-current { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.plan-card-name { font-family: var(--voe-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.04em; color: var(--color-base-content); }
.plan-card-price { margin-top: 0.5rem; display: flex; align-items: baseline; gap: 0.3rem; }
.plan-card-price strong { font-family: var(--voe-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; color: var(--color-base-content); }
.plan-card-price span { font-size: 0.85rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.plan-card-price-free { font-family: var(--voe-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); margin-top: 0.5rem; }
.plan-card-features { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.plan-card-features li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; color: color-mix(in oklab, var(--color-base-content) 80%, transparent); line-height: 1.4; }
.plan-card-features li::before { content: ""; flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; background: var(--color-primary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat; }
.plan-card-action { margin-top: 1.5rem; }
.plan-card-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: var(--rounded-btn, 0.5rem); background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em; }

/* Seção de saldo avulso */
.plan-addon { margin-top: 2rem; }

/* ---- Checkout (F7) ---- */
.checkout-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 48rem; }
@media (min-width: 640px) { .checkout-grid { grid-template-columns: 1fr 1fr; } }
.checkout-qr-img { border-radius: 0.75rem; background: #fff; padding: 0.75rem; }
.checkout-price { font-family: var(--voe-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; }
.checkout-copypaste { width: 100%; display: flex; flex-direction: column; gap: 0.4rem; }
.checkout-timer { margin-top: 0.5rem; }
.checkout-status-indicator { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0; }
.checkout-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; }
.checkout-dot-pending { background: var(--color-warning); animation: pulse-dot 1.5s ease-in-out infinite; }
.checkout-dot-approved { background: var(--color-success); }
.checkout-dot-failed { background: var(--color-error); }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.checkout-form-wrap { max-width: 28rem; }
.checkout-form-card { }
.checkout-form-summary { padding-bottom: 1rem; border-bottom: 1px solid var(--color-base-300); display: flex; flex-direction: column; gap: 0.4rem; }
.checkout-form-row { display: flex; justify-content: space-between; align-items: baseline; }
.checkout-form-label { font-size: 0.85rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.checkout-form-value { font-weight: 600; }
.checkout-form-price { font-family: var(--voe-display); font-size: 1.1rem; letter-spacing: -0.03em; }
.checkout-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.checkout-form-submit { margin-top: 0.5rem; }
.checkout-form-note { font-size: 0.75rem; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); text-align: center; margin-top: 0.25rem; }
.checkout-amount { display: flex; flex-direction: column; gap: 0.2rem; }
.checkout-plan-label { font-size: 0.8rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.checkout-copypaste-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); }
.checkout-timer-label { font-size: 0.85rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.checkout-timer-value { font-family: var(--voe-mono); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 0.3rem; }

/* Ajuste fino travado pelo plano: ocupa o mesmo lugar do <details> liberado, para a
   pessoa ver que o recurso existe. O selo é o link para a comparação de planos. */
.edit-tuning-locked { opacity: 0.62; cursor: default; }
.edit-tuning-locked-head { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }

/* Recusa por limite dentro do formulário de produção: fica no lugar do erro comum,
   mas com caminho de saída. O formulário inteiro continua preenchido atrás dela. */
.plan-refusal { align-items: flex-start; margin-bottom: 0.75rem; }
.plan-refusal p { margin-bottom: 0.3rem; }

/* Autenticação ------------------------------------------------------------
   O fluxo inteiro (login, cadastro, recuperação, redefinição e confirmação)
   divide esta seção, e todas as telas são a MESMA: o cartão centrado no
   viewport, com a marca em cima. O login já teve um painel institucional ao
   lado; ele saiu junto com a landing, que é quem apresenta o produto agora.

   O fundo repete o mundo do modo claro da landing — as mesmas manchas da
   marca, na mesma ordem do logotipo — para a passagem de uma tela para a
   outra não parecer troca de produto. */

.auth-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--color-base-200);
  color: var(--color-base-content);
}
/* Duas manchas e uma trama, todas atrás de tudo. É enfeite: nada aqui
   intercepta clique nem entra na ordem de leitura. */
.auth-shell::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  /* Tamanhos explícitos, e não closest-side: com closest-side o raio vira a
     distância até a borda mais próxima, e um centro colado no topo produzia
     uma bolinha de contorno duro em vez de uma mancha. */
  background:
    radial-gradient(48rem 34rem at 6% -12%, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent 72%),
    radial-gradient(42rem 30rem at 98% -4%, color-mix(in oklab, #f02ce4 15%, transparent), transparent 72%),
    radial-gradient(52rem 32rem at 62% 112%, color-mix(in oklab, #2b7fff 13%, transparent), transparent 74%);
  content: "";
  pointer-events: none;
}
.auth-shell::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-primary) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-primary) 9%, transparent) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  content: "";
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 0%, transparent 100%);
}

.auth-grid { position: relative; z-index: 1; display: grid; min-height: 100vh; min-height: 100svh; place-items: center; grid-template-columns: 1fr; }

.auth-wordmark { display: inline-flex; align-items: center; border-radius: 0.6rem; transition: opacity 160ms ease; }
.auth-wordmark:hover { opacity: 0.82; }
.auth-wordmark .logo-wordmark { width: auto; height: 3.25rem; }

/* Coluna do formulário ----------------------------------------------------- */

.auth-stage { display: flex; width: 100%; align-items: center; justify-content: center; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem); }
.auth-column { display: flex; width: 100%; max-width: 27rem; flex-direction: column; align-items: center; gap: 2rem; }

/* A entrada é curta e só na primeira pintura: o cartão sobe 8px e aparece. Mais
   do que isso e o login começa a parecer lento. */
.auth-card { position: relative; width: 100%; overflow: hidden; border: 1px solid color-mix(in oklab, var(--color-primary) 12%, var(--color-base-300)); border-radius: 1.25rem; box-shadow: 0 1px 0 color-mix(in oklab, var(--color-neutral) 5%, transparent), 0 28px 70px -24px color-mix(in oklab, var(--color-primary) 34%, transparent); animation: auth-entrada 320ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.auth-card::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(102deg, #f02ce4, #8b3dff 46%, #2b7fff 78%, #22d3ee); content: ""; }
.auth-card-body { gap: 1.35rem; padding: clamp(1.75rem, 4vw, 2.5rem); }

@keyframes auth-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.auth-card-head .section-kicker { margin-bottom: 0.3rem; }
.auth-card-title { color: var(--color-base-content); font-family: var(--voe-display); font-size: clamp(1.7rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; }
.auth-card-sub { margin-top: 0.5rem; color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 0.95rem; line-height: 1.55; }

/* Selo do convite promocional na tela de cadastro. Cor do tema por color-mix:
   as variantes de opacidade do daisyUI só existem de 10 em 10 e nenhuma delas
   compõe o fundo suave com a borda que este bloco pede. */
.auth-convite { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; padding: 0.75rem 0.9rem; border: 1px solid color-mix(in oklab, var(--color-primary) 32%, transparent); border-radius: var(--radius-field); background: color-mix(in oklab, var(--color-primary) 8%, transparent); }
.auth-convite .icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--color-primary); }
.auth-convite strong { display: block; color: var(--color-base-content); font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.auth-convite span { display: block; margin-top: 0.1rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.8rem; letter-spacing: 0.02em; }

/* O painel é o conteúdo do cartão nas telas que trocam formulário por
   conclusão. Sem ritmo próprio ele encostava o rótulo do campo na linha de
   apoio do cabeçalho — o gap do card-body não atravessa o wrapper. */
.auth-panel { display: flex; flex-direction: column; gap: 1.15rem; }
.auth-form { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.auth-label { color: var(--color-base-content); font-size: 0.9rem; font-weight: 600; }
.auth-label-link { font-size: 0.82rem; font-weight: 600; }

/* 1rem cravado: abaixo de 16px o iOS dá zoom sozinho ao focar o campo e a tela
   inteira sai do lugar no meio do login. */
.auth-input { width: 100%; height: 3.1rem; border-radius: var(--radius-field); font-size: 1rem; transition: border-color 140ms ease, box-shadow 140ms ease; }

/* O foco NÃO desenha anel externo — essa é a regra global dos campos, e o
   fluxo de autenticação não abre exceção. A borda vira primary e ganha 1px por
   dentro: some a dúvida de onde está o cursor sem a segunda borda por fora. */
.auth-input:focus { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.auth-input[aria-invalid="true"] { border-color: var(--color-error); }
.auth-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--color-error); }
.auth-input-password { padding-right: 2.9rem; }

.auth-password { position: relative; display: block; }
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  display: inline-flex;
  width: 2.1rem;
  height: 2.1rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-selector);
  background: transparent;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 140ms ease, background-color 140ms ease;
}
.auth-password-toggle:hover { color: var(--color-base-content); background: color-mix(in oklab, var(--color-base-content) 7%, transparent); }
.auth-eye { display: inline-flex; }

.auth-link { color: var(--color-primary); font-weight: 600; }
.auth-link:hover { text-decoration: underline; text-underline-offset: 0.18rem; }
.auth-link-strong { margin-left: 0.3rem; }

/* Altura reservada: a mensagem de erro entra sem empurrar o botão para baixo,
   senão o clique seguinte cai no lugar errado. */
/* A margem negativa devolve parte do gap do formulário: o espaço da mensagem
   fica reservado (o botão não pula quando o erro aparece) sem abrir um vão
   morto entre o último campo e a ação enquanto não há erro nenhum. */
.auth-error { min-height: 1.15rem; margin-block: -0.35rem; color: var(--color-error); font-size: 0.85rem; line-height: 1.15rem; }

.auth-submit { height: 3.1rem; min-height: 3.1rem; gap: 0.5rem; font-size: 1rem; transition: transform 140ms ease, filter 140ms ease, background-position 380ms cubic-bezier(0.16, 1, 0.3, 1); }
.auth-submit:not(:disabled) { border: 0; background-image: linear-gradient(102deg, #c026d3 0%, #7c3aed 46%, #4f46e5 100%); background-size: 160% 100%; color: #fff; box-shadow: 0 0.7rem 1.6rem -0.8rem color-mix(in oklab, var(--color-primary) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22); }
.auth-submit:not(:disabled):hover { background-position: 100% 0; transform: translateY(-1px); }
.auth-google { height: 3.1rem; min-height: 3.1rem; gap: 0.6rem; border-color: var(--color-base-300); font-size: 0.95rem; font-weight: 600; }
.auth-google:hover { border-color: color-mix(in oklab, var(--color-base-content) 26%, transparent); background: var(--color-base-200); }
.auth-google .icon { width: 1.15rem; height: 1.15rem; }

.auth-divider { margin-block: 0.15rem; color: color-mix(in oklab, var(--color-base-content) 42%, transparent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

.auth-terms { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; font-size: 0.85rem; line-height: 1.5; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); }
.auth-terms .checkbox { margin-top: 0.12rem; flex: none; }

.auth-alt { text-align: center; font-size: 0.875rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }
.auth-back { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; align-self: center; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 0.85rem; font-weight: 600; }
.auth-back:hover { color: var(--color-primary); }
.auth-back .icon { width: 0.9rem; height: 0.9rem; }

/* Requisitos da senha: nascem discretos e só ganham cor quando cumpridos. Antes
   do primeiro caractere nada fica vermelho — a pessoa ainda não errou nada. */
.auth-reqs { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.55rem; list-style: none; }
.auth-req { display: flex; align-items: center; gap: 0.45rem; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 0.78rem; transition: color 140ms ease; }
.auth-req-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  color: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}
.auth-req-icon .icon { width: 0.65rem; height: 0.65rem; stroke-width: 3.2; }
.auth-req.is-ok { color: var(--color-success); }
.auth-req.is-ok .auth-req-icon { background: color-mix(in oklab, var(--color-success) 16%, transparent); color: var(--color-success); }

/* Estados de conclusão (link enviado, senha alterada, e-mail confirmado). */
.auth-state { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.auth-state .auth-card-title, .auth-state .auth-card-sub { text-align: center; }
.auth-state-icon {
  display: inline-flex;
  width: 3.25rem;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.auth-state-icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.auth-state-icon-check { background: color-mix(in oklab, var(--color-success) 14%, transparent); color: var(--color-success); }
/* Link vencido não é falha do sistema: é o combinado (uma hora, um uso) funcionando. Âmbar,
   e não vermelho — vermelho aqui faria a pessoa achar que quebrou alguma coisa. */
.auth-state-icon-alert { background: color-mix(in oklab, var(--color-warning) 16%, transparent); color: var(--color-warning); }
/* O endereço aparece em monoespaçada: e-mail é para CONFERIR caractere por
   caractere, e a fonte de texto embaralha l/1/I e O/0 justamente aqui. */
.auth-state-email:empty { display: none; }
.auth-state-email {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  padding: 0.45rem 0.8rem;
  color: var(--color-base-content);
  font-family: var(--voe-mono);
  font-size: 0.85rem;
}
/* O recado das ações que não são envio de formulário — hoje, o reenvio de e-mail. Nasce
   vazio e some quando está vazio: uma linha reservada no meio do cartão empurraria o botão
   para baixo à toa. Quando é recusa, veste a cor de erro. */
.auth-aviso:empty { display: none; }
.auth-aviso { margin-block: -0.2rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); font-size: 0.85rem; line-height: 1.4; }
.auth-aviso[data-erro] { color: var(--color-error); }

.auth-state > .btn, .auth-state > .auth-back { width: 100%; }
.auth-state > .auth-back { width: auto; }

/* Onboarding ---------------------------------------------------------------
   Mesma coluna e mesmo cartão do fluxo de autenticação: para quem está chegando,
   criar login e criar conta são o mesmo caminho. O que muda é a régua de passos
   em cima do cartão, que existe para dizer que são DOIS — e só dois. */
.onb-passos { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.onb-passo { display: inline-flex; align-items: center; gap: 0.45rem; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); font-size: 0.82rem; font-weight: 600; }
.onb-passo + .onb-passo::before { content: ""; width: 1.6rem; height: 1px; margin-right: 0.45rem; background: color-mix(in oklab, var(--color-base-content) 20%, transparent); }
.onb-passo-bolha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  font-size: 0.75rem; font-weight: 700;
}
.onb-passo-bolha .icon { width: 0.85rem; height: 0.85rem; stroke-width: 2.5; }
.onb-passo.is-atual { color: var(--color-base-content); }
.onb-passo.is-atual .onb-passo-bolha { background: var(--color-primary); color: var(--color-primary-content); }
.onb-passo.is-feito .onb-passo-bolha { background: color-mix(in oklab, var(--color-success) 18%, transparent); color: var(--color-success); }
@media (max-width: 30rem) { .onb-passo-rotulo { display: none; } }

.onb-foto { display: flex; align-items: center; gap: 1rem; }
.onb-foto-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 4.5rem; height: 4.5rem; flex: none; overflow: hidden;
  border-radius: 999px; background: var(--color-base-200);
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}
.onb-foto-avatar img { width: 100%; height: 100%; object-fit: cover; }
.onb-foto-vazio .icon { width: 1.8rem; height: 1.8rem; }
.onb-foto-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; }
.onb-foto-aviso:empty { display: none; }
.onb-foto-aviso { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 0.8rem; }
.onb-foto-aviso[data-erro] { color: var(--color-error); }

.onb-conta-email {
  margin-top: -0.35rem;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  font-family: var(--voe-mono); font-size: 0.8rem;
}

/* O endereço da conta não é um campo: é a consequência do nome, mostrada embaixo
   dele enquanto se digita. O ponto à direita é o estado — e é a única coisa nesta
   linha que muda de cor. */
.onb-endereco {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: -0.4rem; padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-base-300); border-radius: var(--radius-field);
  background: var(--color-base-200);
}
.onb-endereco-url { overflow-wrap: anywhere; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-family: var(--voe-mono); font-size: 0.82rem; }
.onb-endereco-url b { color: var(--color-base-content); font-weight: 600; }
.onb-endereco-estado { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; font-size: 0.75rem; font-weight: 600; }
.onb-endereco-estado::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: color-mix(in oklab, var(--color-base-content) 25%, transparent); }
.onb-endereco[data-estado="livre"] .onb-endereco-estado { color: var(--color-success); }
.onb-endereco[data-estado="livre"] .onb-endereco-estado::before { background: var(--color-success); }
.onb-endereco[data-estado="ocupado"] .onb-endereco-estado,
.onb-endereco[data-estado="invalido"] .onb-endereco-estado { color: var(--color-error); }
.onb-endereco[data-estado="ocupado"] .onb-endereco-estado::before,
.onb-endereco[data-estado="invalido"] .onb-endereco-estado::before { background: var(--color-error); }
.onb-endereco[data-estado="checando"] .onb-endereco-estado { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); }

/* Termos: o texto rola dentro do cartão, e o botão fica sempre visível embaixo.
   Sem isso a página inteira rolava e o "aceitar" ficava a três telas de distância
   do que se estava aceitando. */
.termos-texto {
  max-height: 15rem; overflow-y: auto; margin-block: 0.25rem 0.5rem;
  border: 1px solid var(--color-base-300); border-radius: var(--radius-box);
  padding: 0.6rem 0.9rem;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
  font-size: 0.88rem; line-height: 1.6;
}
.termos-texto h3 { margin-top: 0.9rem; color: var(--color-base-content); font-size: 0.85rem; font-weight: 700; }
.termos-texto p { margin-top: 0.35rem; }
.termos-versao { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 0.75rem; }

/* Documentos legais ---------------------------------------------------------
   Coluna estreita e alta: são textos para LER, e uma linha de 100 caracteres faz
   o olho perder o começo da seguinte. A mesma casca do fluxo de autenticação,
   porque quem chega aqui está no meio de criar uma conta. */
.legal-page { width: 100%; max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.legal-marca { display: inline-flex; margin-bottom: 1.5rem; }
.legal-doc {
  border: 1px solid var(--color-base-300); border-radius: var(--radius-box);
  background: var(--color-base-100); padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--voe-shadow-sm);
}
.legal-head { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-base-200); }
.legal-head h1 { margin-top: 0.15rem; color: var(--color-base-content); font-family: var(--voe-display); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; }
.legal-data { margin-top: 0.5rem; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 0.8rem; }
.legal-doc section + section { margin-top: 1.75rem; }
.legal-doc h2 { color: var(--color-base-content); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.legal-doc p { margin-top: 0.65rem; color: color-mix(in oklab, var(--color-base-content) 78%, transparent); font-size: 0.92rem; line-height: 1.7; }
.legal-doc ul { margin-top: 0.65rem; padding-left: 1.1rem; list-style: disc; }
.legal-doc li { margin-top: 0.35rem; color: color-mix(in oklab, var(--color-base-content) 78%, transparent); font-size: 0.92rem; line-height: 1.65; }
.legal-doc strong { color: var(--color-base-content); font-weight: 600; }
.legal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-base-200); }
.legal-troca { font-size: 0.88rem; }

.auth-alert { align-items: flex-start; gap: 0.7rem; text-align: left; }
.auth-alert-icon { display: inline-flex; flex: none; margin-top: 0.1rem; }
.auth-alert-body { min-width: 0; }
.auth-alert-title { font-size: 0.875rem; font-weight: 700; }
.auth-alert-text { margin-top: 0.15rem; font-size: 0.825rem; opacity: 0.8; }
.auth-alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.65rem; }
/* Dentro do alerta o link segue a cor do aviso: um link primary aqui puxaria o
   olho para fora da mensagem que acabou de aparecer. */
.auth-alert-actions .auth-link { color: inherit; text-decoration: underline; text-underline-offset: 0.18rem; }

.auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: 0.72rem; letter-spacing: 0.01em; }
.auth-foot .auth-link { font-weight: 500; color: inherit; }
.auth-foot .auth-link:hover { color: var(--color-primary); }
.auth-foot-dot { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
  .auth-submit:not(:disabled):hover { transform: none; }
  .auth-input, .auth-req, .auth-req-icon, .auth-password-toggle, .auth-submit { transition: none; }
}

/* Confirmação de pagamento (F7) — a tela que aparece quando o Pix cai.
   Sobreposta, e não empurrando o conteúdo: a pessoa estava olhando o QR, e o
   layout pulando embaixo da confirmação é o oposto de tranquilizador. */
/* Especificidade 0,2,0 — acima do .checkout-sucesso logo abaixo. É o que faz o
   esconder não depender da ordem em que as folhas foram carregadas. */
.checkout-sucesso[hidden] { display: none; }
.checkout-sucesso { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--color-base-300) 78%, transparent); backdrop-filter: blur(3px); }
.checkout-sucesso-card { display: grid; gap: 0.65rem; justify-items: center; max-width: 22rem; padding: 2rem 1.75rem; border-radius: 1.25rem; background: var(--color-base-100); box-shadow: 0 24px 60px rgb(0 0 0 / 0.22); text-align: center; animation: checkout-sucesso-entra 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.checkout-sucesso-selo { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.checkout-sucesso-selo .icon { width: 1.75rem; height: 1.75rem; stroke-width: 2.5; }
.checkout-sucesso-titulo { font-size: 1.35rem; font-weight: 800; }
.checkout-sucesso-texto { color: color-mix(in srgb, var(--color-base-content) 70%, transparent); }
.checkout-sucesso-nota { font-size: 0.8rem; color: color-mix(in srgb, var(--color-base-content) 50%, transparent); }
@keyframes checkout-sucesso-entra { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
/* O confete é enfeite: não intercepta clique e some com a animação. */
.checkout-confete { position: fixed; inset: 0; z-index: 61; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .checkout-sucesso-card { animation: none; } }

/* Landing pública -----------------------------------------------------------
   A raiz fala com quem ainda não tem workspace, e é a única tela do produto que
   oferece tema claro E escuro. As CORES são as do sistema (roxo primário, ciano
   de destaque) nos dois casos — as quatro paradas do gradiente abaixo foram
   medidas no PNG original do logotipo.

   Três famílias de token, e a separação importa:

   --brand-*  identidade. Igual nos dois temas.
   --s-*      "screen": as telas do produto desenhadas dentro da página. SEMPRE
              escuras, porque editor de vídeo é escuro — e porque o gradiente
              neon da marca não existe sobre branco.
   --l-*      a página em volta. É o que o tema troca. */
.landing-shell {
  --brand-magenta: #f02ce4;
  --brand-violet: #8b3dff;
  --brand-blue: #2b7fff;
  --brand-cyan: #22d3ee;
  /* As paradas param no índigo de propósito: o ciano do logotipo não segura
     texto branco com contraste legível. */
  --brand-fill: linear-gradient(102deg, #c026d3 0%, #7c3aed 46%, #4f46e5 100%);

  --s-bg: #0f0b20;
  --s-bg-deep: #0a0718;
  --s-line: rgb(170 150 255 / 0.16);
  --s-line-strong: rgb(170 150 255 / 0.3);
  --s-text: #f2eeff;
  --s-dim: rgb(226 220 255 / 0.7);
  --s-faint: rgb(226 220 255 / 0.56);

  --l-bg: #07050f;
  --l-bg-2: #0b0818;
  --l-surface: rgb(255 255 255 / 0.035);
  --l-line: rgb(170 150 255 / 0.16);
  --l-line-strong: rgb(170 150 255 / 0.3);
  --l-text: #f2eeff;
  --l-dim: rgb(226 220 255 / 0.7);
  --l-faint: rgb(226 220 255 / 0.56);
  --l-violet-ink: #a78bfa;
  --l-accent-ink: var(--brand-cyan);
  --l-card: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.012));
  --l-card-solid: #15112c;
  --l-band: linear-gradient(115deg, #150c2e 0%, #0a0718 45%, #0c1c33 100%);
  --l-band-cta: linear-gradient(118deg, #1a0f3d 0%, #0a0718 48%, #10233f 100%);
  --l-grid: rgb(167 139 250 / 0.07);
  --l-shadow: 0 2rem 4rem -2.2rem rgb(0 0 0 / 0.9);
  --l-aurora-a: 46%;
  --l-aurora-b: 34%;
  --l-aurora-c: 26%;
  --l-aurora-c-cor: var(--brand-cyan);
  --l-scroll-track: #0b0818;
  --l-scroll-thumb: color-mix(in oklab, var(--brand-violet) 62%, #0b0818);

  /* Escala de texto. A página é de VENDA: quem está decidindo lê parágrafo
     inteiro, não rótulo de dashboard. */
  --t-meta: 0.8rem;
  --t-small: 0.92rem;
  --t-body: 1.05rem;
  --t-body-lg: 1.15rem;
  --t-lead: clamp(1.15rem, 1.5vw, 1.35rem);

  --landing-display: var(--voe-display);

  min-width: 320px;
  overflow-x: clip;
  background: var(--l-bg);
  color: var(--l-text);
  color-scheme: dark;
  font-size: var(--t-body);
}

/* Claro pelo sistema, para quem nunca clicou no seletor. */
@media (prefers-color-scheme: light) {
  html:not([data-landing-tema="escuro"]) .landing-shell { --l-bg: #fbfaff; --l-bg-2: #f3f1fb; --l-surface: rgb(124 58 237 / 0.045); --l-line: rgb(76 44 140 / 0.14); --l-line-strong: rgb(76 44 140 / 0.26); --l-text: #160f2e; --l-dim: rgb(38 26 74 / 0.78); --l-faint: rgb(38 26 74 / 0.62); --l-violet-ink: #6d28d9; --l-accent-ink: #7c3aed; --l-card: linear-gradient(180deg, #ffffff, #fbfaff); --l-card-solid: #ffffff; --l-band: linear-gradient(115deg, #f1ebff 0%, #fbfaff 45%, #ece9fd 100%); --l-band-cta: linear-gradient(118deg, #efe7ff 0%, #fbfaff 48%, #eae6fd 100%); --l-grid: rgb(109 40 217 / 0.09); --l-shadow: 0 1.75rem 3.5rem -2rem rgb(46 24 96 / 0.24); --l-aurora-a: 24%; --l-aurora-b: 18%; --l-aurora-c: 13%; --l-aurora-c-cor: var(--brand-blue); --l-scroll-track: #efecf9; --l-scroll-thumb: color-mix(in oklab, var(--brand-violet) 52%, #efecf9); color-scheme: light; }
}
/* Escolha explícita vence o sistema, nas duas direções. */
html[data-landing-tema="claro"] .landing-shell { --l-bg: #fbfaff; --l-bg-2: #f3f1fb; --l-surface: rgb(124 58 237 / 0.045); --l-line: rgb(76 44 140 / 0.14); --l-line-strong: rgb(76 44 140 / 0.26); --l-text: #160f2e; --l-dim: rgb(38 26 74 / 0.78); --l-faint: rgb(38 26 74 / 0.62); --l-violet-ink: #6d28d9; --l-accent-ink: #7c3aed; --l-card: linear-gradient(180deg, #ffffff, #fbfaff); --l-card-solid: #ffffff; --l-band: linear-gradient(115deg, #f1ebff 0%, #fbfaff 45%, #ece9fd 100%); --l-band-cta: linear-gradient(118deg, #efe7ff 0%, #fbfaff 48%, #eae6fd 100%); --l-grid: rgb(109 40 217 / 0.09); --l-shadow: 0 1.75rem 3.5rem -2rem rgb(46 24 96 / 0.24); --l-aurora-a: 24%; --l-aurora-b: 18%; --l-aurora-c: 13%; --l-aurora-c-cor: var(--brand-blue); --l-scroll-track: #efecf9; --l-scroll-thumb: color-mix(in oklab, var(--brand-violet) 52%, #efecf9); color-scheme: light; }

/* Superfícies que o navegador desenha, e não nós. Sem isto a página inteira é
   da marca menos a barra de rolagem, o realce de seleção e o anel de foco. */
html:has(> body.landing-shell) { background: var(--l-bg, #07050f); }
body.landing-shell { scrollbar-color: var(--l-scroll-thumb) var(--l-scroll-track); scrollbar-width: thin; }
body.landing-shell::-webkit-scrollbar { width: 11px; height: 11px; }
body.landing-shell::-webkit-scrollbar-track { background: var(--l-scroll-track); }
body.landing-shell::-webkit-scrollbar-thumb { border: 3px solid var(--l-scroll-track); border-radius: 999px; background: var(--l-scroll-thumb); }
body.landing-shell::-webkit-scrollbar-thumb:hover { background: var(--brand-violet); }
.landing-shell ::selection { background: color-mix(in oklab, var(--brand-violet) 45%, transparent); color: var(--l-text); }
.landing-shell :focus-visible { outline: 2px solid var(--l-accent-ink); outline-offset: 3px; border-radius: 0.35rem; }
.landing-num { font-family: var(--voe-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

.landing-skip { position: absolute; z-index: 60; top: 0.6rem; left: 0.6rem; padding: 0.7rem 1rem; border-radius: 0.5rem; background: var(--brand-violet); color: #fff; font-size: var(--t-small); font-weight: 700; transform: translateY(-180%); transition: transform 160ms ease; }
.landing-skip:focus-visible { transform: none; }

.landing-shell a { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease; }
.landing-shell section { scroll-margin-top: 5.5rem; }
.landing-wrap { width: min(calc(100% - 2.5rem), 78rem); margin-inline: auto; }

/* --- barra ---------------------------------------------------------------- */

.landing-nav {
  position: sticky;
  z-index: 40;
  top: 0;
  background: color-mix(in srgb, var(--l-bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.landing-nav::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand-violet) 55%, transparent) 22%, color-mix(in oklab, var(--brand-cyan) 45%, transparent) 78%, transparent); content: ""; opacity: 0.5; }
.landing-nav-inner { display: flex; min-height: 5rem; align-items: center; gap: 2rem; }
.landing-brand { display: inline-flex; flex: none; align-items: center; }
.landing-brand .logo-wordmark { width: auto; height: 2.35rem; }
.landing-nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2rem); margin-inline: auto; }
.landing-nav-links a, .landing-login { position: relative; color: var(--l-dim); font-size: var(--t-small); font-weight: 600; }
.landing-nav-links a::after { position: absolute; bottom: -0.45rem; left: 0; width: 0; height: 1px; background: var(--l-accent-ink); content: ""; transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.landing-nav-links a:hover, .landing-login:hover { color: var(--l-text); }
.landing-nav-links a:hover::after { width: 100%; }
.landing-nav-actions { display: flex; align-items: center; gap: 1rem; }

.landing-theme { display: grid; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; padding: 0; border: 1px solid var(--l-line); border-radius: 0.65rem; background: var(--l-surface); color: var(--l-dim); cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.landing-theme:hover { border-color: color-mix(in oklab, var(--l-accent-ink) 55%, transparent); color: var(--l-text); }
.landing-theme .icon { width: 1.05rem; height: 1.05rem; }
.landing-theme-icon { display: grid; grid-area: 1 / 1; place-items: center; }
/* Mostra o destino do clique, não o estado atual: no escuro o botão oferece o
   sol. É o que a pessoa vai receber se apertar. */
.landing-theme-moon { display: none; }
html[data-landing-tema="claro"] .landing-theme-sun { display: none; }
html[data-landing-tema="claro"] .landing-theme-moon { display: grid; }
@media (prefers-color-scheme: light) {
  html:not([data-landing-tema="escuro"]) .landing-theme-sun { display: none; }
  html:not([data-landing-tema="escuro"]) .landing-theme-moon { display: grid; }
  html[data-landing-tema="claro"] .landing-theme-sun { display: none; }
  html[data-landing-tema="claro"] .landing-theme-moon { display: grid; }
}

/* Um único botão de marca: fundo é o gradiente do logotipo, rótulo branco. */
.btn.landing-cta {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 1.45rem;
  border: 0;
  border-radius: 0.7rem;
  background: var(--brand-fill);
  background-size: 160% 100%;
  color: #fff;
  box-shadow: 0 0.75rem 1.75rem -0.9rem color-mix(in oklab, var(--brand-violet) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22);
  font-size: var(--t-small);
  font-weight: 700;
  transition: background-position 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn.landing-cta:hover:not(:disabled) { background-position: 100% 0; box-shadow: 0 1.1rem 2.4rem -0.9rem color-mix(in oklab, var(--brand-magenta) 80%, transparent); transform: translateY(-1px); }
.btn.landing-cta:active:not(:disabled) { transform: translateY(0); }
.btn.landing-cta .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }
.btn.landing-nav-cta { min-height: 2.7rem; padding-inline: 1.05rem; font-size: 0.86rem; }
.btn.landing-cta-lg { flex: none; min-height: 3.6rem; padding-inline: 1.8rem; font-size: var(--t-body); }

/* --- hero ----------------------------------------------------------------- */

.landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 7vw, 6.5rem) 0;
}
.landing-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(to right, var(--l-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--l-grid) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 25%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 25%, #000 0%, transparent 100%);
}
/* A aurora é o único momento autorado de movimento da página: três manchas da
   marca respirando devagar. Só transform anima — o desfoque já está no próprio
   gradiente, e nenhum filtro precisa re-rasterizar a cada quadro. */
.landing-aurora { position: absolute; z-index: -3; inset: -30% -12% auto; height: 150%; pointer-events: none; }
.landing-aurora span { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.landing-aurora-a { top: -6%; left: 2%; width: min(46rem, 90vw); aspect-ratio: 1.25; background: radial-gradient(closest-side, color-mix(in oklab, var(--brand-violet) var(--l-aurora-a), transparent), transparent 100%); animation: landing-drift-a 26s ease-in-out infinite alternate; }
.landing-aurora-b { top: 4%; right: -4%; width: min(40rem, 85vw); aspect-ratio: 1.1; background: radial-gradient(closest-side, color-mix(in oklab, var(--brand-magenta) var(--l-aurora-b), transparent), transparent 100%); animation: landing-drift-b 31s ease-in-out infinite alternate; }
.landing-aurora-c { top: 46%; left: 34%; width: min(38rem, 80vw); aspect-ratio: 1.4; background: radial-gradient(closest-side, color-mix(in oklab, var(--l-aurora-c-cor) var(--l-aurora-c), transparent), transparent 100%); animation: landing-drift-c 24s ease-in-out infinite alternate; }
@keyframes landing-drift-a { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.12); } }
@keyframes landing-drift-b { from { transform: translate3d(4%, 3%, 0) scale(1.08); } to { transform: translate3d(-5%, -4%, 0) scale(0.94); } }
@keyframes landing-drift-c { from { transform: translate3d(-6%, 4%, 0) scale(0.95); } to { transform: translate3d(5%, -6%, 0) scale(1.15); } }

.landing-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3.25rem, 5vw, 4.75rem); justify-items: center; }
.landing-hero-copy { display: grid; width: min(100%, 66rem); min-width: 0; justify-items: center; text-align: center; }
.landing-hero h1 { width: 100%; max-width: 66rem; min-width: 0; color: var(--l-text); font-family: var(--landing-display); font-size: clamp(3.25rem, 5.8vw, 4.5rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.97; text-wrap: balance; }
.landing-hero-line { display: block; }
.landing-hero-line-accent { color: var(--l-violet-ink); }
.landing-hero-lead { width: 100%; max-width: 41rem; margin-top: 1.65rem; color: var(--l-dim); font-size: var(--t-lead); line-height: 1.6; }
.landing-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.1rem; margin-top: 2.15rem; }
.landing-hero-link { display: inline-flex; min-height: 3.6rem; align-items: center; gap: 0.6rem; padding: 0.75rem 1.2rem; border: 1px solid var(--l-line-strong); border-radius: 0.7rem; background: var(--l-surface); color: var(--l-text); font-size: var(--t-small); font-weight: 650; }
.landing-hero-link .icon { width: 0.75rem; height: 0.75rem; fill: currentColor; color: var(--l-accent-ink); stroke-width: 1; }
.landing-hero-link:hover { border-color: color-mix(in oklab, var(--l-accent-ink) 55%, transparent); background: color-mix(in oklab, var(--l-accent-ink) 9%, transparent); }
.landing-hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem clamp(1rem, 2.5vw, 2rem); margin-top: 1.5rem; list-style: none; }
.landing-hero-proof li { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--l-faint); font-size: var(--t-meta); }
.landing-hero-proof .icon { width: 0.85rem; height: 0.85rem; color: var(--l-accent-ink); stroke-width: 3; }

/* --- mesa de edição do hero (tela do produto: sempre escura) --------------- */

.landing-demo-wrap { position: relative; width: min(100%, 68rem); min-width: 0; justify-self: center; }
.landing-demo-wrap::before { position: absolute; inset: 2rem -0.65rem -0.75rem 0.65rem; border: 1px solid color-mix(in oklab, var(--brand-cyan) 32%, transparent); border-radius: 1.25rem; content: ""; transform: rotate(-1.2deg); }
.landing-demo-insight { display: inline-flex; max-width: 100%; align-items: center; gap: 0.65rem; margin: 0 auto 0.9rem; padding: 0.55rem 0.8rem 0.55rem 0.55rem; border: 1px solid var(--l-line-strong); border-radius: 999px; background: color-mix(in oklab, var(--l-surface) 82%, var(--l-bg)); box-shadow: 0 0.85rem 2rem -1rem color-mix(in oklab, var(--brand-violet) 45%, transparent); color: var(--l-dim); font-size: 0.76rem; font-weight: 650; }
.landing-demo-insight-icon { display: grid; width: 1.55rem; height: 1.55rem; flex: none; place-items: center; border-radius: 0.45rem; background: color-mix(in oklab, var(--brand-violet) 18%, transparent); color: var(--l-violet-ink); }
.landing-demo-insight-icon .icon { width: 0.9rem; height: 0.9rem; stroke-width: 2.2; }
.landing-demo-insight strong { color: var(--l-text); font-weight: 750; }
.landing-demo-insight-status { padding-left: 0.65rem; border-left: 1px solid var(--l-line); color: var(--l-violet-ink); font-family: var(--voe-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.landing-demo { position: relative; overflow: hidden; border: 1px solid var(--s-line-strong); border-radius: 1.1rem; background: linear-gradient(168deg, #16112c, #0a0718); box-shadow: 0 2.8rem 5.5rem -2.1rem rgb(0 0 0 / 0.72), 0 0 0 1px rgb(255 255 255 / 0.04); color: var(--s-text); transform: perspective(1600px) rotateX(1.2deg) rotateY(-0.6deg); }
.landing-demo-chrome, .landing-demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.85rem, 2vw, 1rem) clamp(1rem, 2.7vw, 1.5rem); color: var(--s-faint); font-size: 0.7rem; font-weight: 600; }
.landing-demo-chrome { border-bottom: 1px solid var(--s-line); }
.landing-demo-chrome > span:first-child, .landing-demo-foot-status { display: inline-flex; align-items: center; gap: 0.45rem; }
.landing-demo-chrome i, .landing-demo-foot-status i { display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--brand-cyan); box-shadow: 0 0 0 0.22rem color-mix(in oklab, var(--brand-cyan) 16%, transparent); }
.landing-demo-body { position: relative; display: grid; grid-template-columns: minmax(12rem, 0.64fr) minmax(0, 1.36fr); gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.15rem, 3vw, 2rem); }
.landing-demo-portrait { width: min(100%, 17.5rem); justify-self: center; aspect-ratio: 9 / 14; }
.landing-demo-video { position: relative; display: flex; height: 100%; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 0.7rem; background: var(--s-bg-deep); box-shadow: inset 0 0 3rem rgb(0 0 0 / 0.5); }
/* O quadro é um campo de cor da marca, não uma pessoa desenhada com
   border-radius: um recorte geométrico fingindo cabeça e ombro fica pior que
   não desenhar nada. O que a interface promete — o enquadramento — está
   desenhado como o que ele é: uma guia. */
.landing-demo-field { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 30%, color-mix(in oklab, var(--brand-violet) 62%, transparent), transparent 72%), radial-gradient(ellipse 80% 60% at 72% 88%, color-mix(in oklab, var(--brand-magenta) 40%, transparent), transparent 70%), linear-gradient(160deg, #1a1140, #0b0820 62%, #131a3d); }
.landing-demo-field::after { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 5px); content: ""; }
.landing-demo-crop { position: absolute; inset: 14% 12% 34%; border: 1px solid color-mix(in oklab, var(--brand-cyan) 70%, transparent); }
.landing-demo-crop i { position: absolute; width: 0.6rem; height: 0.6rem; border: 2px solid var(--brand-cyan); }
.landing-demo-crop i:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.landing-demo-crop i:nth-child(2) { top: -1px; right: -1px; border-bottom: 0; border-left: 0; }
.landing-demo-crop i:nth-child(3) { bottom: -1px; left: -1px; border-top: 0; border-right: 0; }
.landing-demo-crop i:nth-child(4) { right: -1px; bottom: -1px; border-top: 0; border-left: 0; }
.landing-demo-crop b { position: absolute; bottom: -0.15rem; left: 0.55rem; padding: 0.1rem 0.3rem; border-radius: 0.2rem; background: var(--brand-cyan); color: #04121a; font-family: var(--voe-mono); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.landing-demo-video-label { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; color: rgb(255 255 255 / 0.8); font-size: 0.55rem; }
.landing-demo-speaker { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.4rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 0.3rem; background: rgb(10 7 24 / 0.68); color: rgb(255 255 255 / 0.82); font-family: var(--voe-mono); font-size: 0.47rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.landing-demo-speaker i { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--brand-cyan); box-shadow: 0 0 0 0.16rem color-mix(in oklab, var(--brand-cyan) 18%, transparent); }
.landing-demo-caption { position: relative; z-index: 1; margin: 0.9rem 0.8rem 1.3rem; color: #fff; font-family: var(--landing-display); font-size: clamp(0.9rem, 1.9vw, 1.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; text-shadow: 0 0.15rem 0.8rem rgb(0 0 0 / 0.55); }
.landing-demo-caption b { color: var(--brand-cyan); }
.landing-demo-caption-line { position: absolute; right: 0.8rem; bottom: 0.75rem; left: 0.8rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-magenta), var(--brand-violet), var(--brand-cyan)); box-shadow: 0 0 0.8rem color-mix(in oklab, var(--brand-violet) 80%, transparent); }
.landing-demo-timeline { display: grid; align-content: end; gap: 0.7rem; min-width: 0; padding-bottom: 0.25rem; }
.landing-demo-timeline-head, .landing-demo-ruler { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; color: var(--s-faint); font-size: 0.64rem; }
.landing-demo-timeline-head b { color: var(--brand-cyan); font-weight: 600; }
.landing-demo-analysis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.45rem 0.8rem; color: var(--s-faint); font-family: var(--voe-mono); font-size: 0.58rem; letter-spacing: 0.02em; }
.landing-demo-analysis > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.landing-demo-analysis > span:first-child i { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--brand-cyan); box-shadow: 0 0 0 0.16rem color-mix(in oklab, var(--brand-cyan) 14%, transparent); }
.landing-demo-analysis > span:last-child { color: #bba8ff; }
.landing-demo-analysis .icon { width: 0.72rem; height: 0.72rem; color: var(--brand-violet); stroke-width: 2.2; }
.landing-demo-track { position: relative; display: flex; min-width: 0; gap: 0.25rem; overflow: hidden; border-radius: 0.25rem; background: rgb(255 255 255 / 0.05); }
.landing-demo-track-video { height: 2.3rem; }
.landing-demo-track-video span { display: block; height: 100%; border-radius: 0.18rem; background: linear-gradient(135deg, #2b2350, #1b1838); }
.landing-demo-track-video span:nth-child(1) { flex: 1; }
.landing-demo-track-video span:nth-child(2) { flex: 1.7; }
.landing-demo-track-video span:nth-child(3) { flex: 0.75; }
.landing-demo-track-video span:nth-child(4) { flex: 1.25; }
/* O bloco escolhido pela automação: é o único pedaço da timeline pintado com o
   gradiente inteiro da marca, e o brilho corre por ele. */
.landing-demo-track-video span.is-picked { position: relative; background: linear-gradient(102deg, var(--brand-magenta), var(--brand-violet) 48%, var(--brand-blue) 78%, var(--brand-cyan)); background-size: 220% 100%; box-shadow: 0 0 1.4rem -0.2rem color-mix(in oklab, var(--brand-violet) 85%, transparent); animation: landing-shift 6s ease-in-out infinite alternate; }
@keyframes landing-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.landing-demo-track-voice { height: 2.7rem; align-items: center; padding-inline: 0.4rem; color: color-mix(in oklab, var(--brand-cyan) 85%, white); }
.landing-demo-wave { display: block; width: 100%; height: 100%; }
.landing-demo-track-caption { height: 1.35rem; align-items: center; gap: 0.35rem; padding-inline: 0.45rem; }
.landing-demo-track-caption span { color: var(--s-faint); font-size: 0.57rem; }
.landing-demo-track-caption i { display: block; height: 0.38rem; border-radius: 0.15rem; background: color-mix(in oklab, var(--brand-violet) 78%, white); }
.landing-demo-track-caption i:nth-of-type(1) { width: 35%; }
.landing-demo-track-caption i:nth-of-type(2) { width: 28%; opacity: 0.5; }
.landing-demo-ruler { font-size: 0.55rem; }
.landing-demo-playhead { position: absolute; top: 0; bottom: 0; left: 61%; z-index: 2; width: 1px; background: var(--brand-cyan); box-shadow: 0 0 0.8rem color-mix(in oklab, var(--brand-cyan) 85%, transparent); animation: landing-playhead 4.2s ease-in-out infinite alternate; }
@keyframes landing-playhead { from { transform: translateX(-0.5rem); } to { transform: translateX(0.7rem); } }
.landing-demo-foot { border-top: 1px solid var(--s-line); }
.landing-demo-foot-status { color: color-mix(in oklab, var(--brand-cyan) 82%, white); }

/* --- faixa de público ----------------------------------------------------- */

.landing-signal { border-block: 1px solid var(--l-line); background: var(--l-bg-2); }
.landing-signal-inner { display: flex; min-height: 5.5rem; align-items: center; justify-content: space-between; gap: 2rem; }
.landing-signal-inner > p { color: var(--l-faint); font-size: 0.86rem; font-weight: 650; }
.landing-signal ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: clamp(0.75rem, 2.4vw, 2rem); list-style: none; }
.landing-signal li { color: var(--l-dim); font-family: var(--landing-display); font-size: var(--t-body); font-weight: 700; letter-spacing: -0.03em; }
.landing-signal li::before { display: inline-block; width: 0.3rem; height: 0.3rem; margin: 0 0.55rem 0.15rem 0; border-radius: 50%; background: var(--l-accent-ink); content: ""; }

/* --- seções --------------------------------------------------------------- */

.landing-demo-section, .landing-process, .landing-features, .landing-plans, .landing-faq { padding-block: clamp(5.5rem, 10vw, 9.5rem); }
.landing-demo-section, .landing-plans { background: var(--l-bg); }
.landing-process, .landing-faq { background: var(--l-bg-2); }
.landing-features { background: var(--l-bg); }
.landing-section-intro { max-width: 42rem; }
.landing-section-intro-wide { max-width: 52rem; }
.landing-section-intro-center { max-width: 48rem; margin-inline: auto; text-align: center; }
.landing-section-intro h2, .landing-capability-grid h2, .landing-final-copy h2, .landing-rail-title { color: var(--l-text); font-family: var(--landing-display); font-size: clamp(2.15rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.03; text-wrap: balance; }
.landing-section-intro > p { max-width: 62ch; margin-top: 1.35rem; color: var(--l-dim); font-size: var(--t-body-lg); line-height: 1.62; }
.landing-section-intro-center > p { margin-inline: auto; }

/* --- player de demonstração ---------------------------------------------- */

.landing-player { max-width: 64rem; margin: clamp(3rem, 5.5vw, 4.5rem) auto 0; }
/* O fio girando é o gesto de marca da página: um gradiente cônico rodando na
   borda. Rotação de elemento, não @property — funciona em qualquer navegador e
   não pinta nada dentro do quadro. */
.landing-player-frame { position: relative; border-radius: 1.35rem; }
.landing-player-ring { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.landing-player-ring::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 6%, var(--brand-cyan) 15%, var(--brand-blue) 24%, var(--brand-violet) 35%, var(--brand-magenta) 45%, transparent 58% 100%);
  content: "";
  translate: -50% -50%;
  animation: landing-spin 8s linear infinite;
}
.landing-player-ring::after { position: absolute; inset: 1px; border-radius: calc(1.35rem - 1px); background: var(--s-bg); content: ""; }
@keyframes landing-spin { to { rotate: 360deg; } }
.landing-player-frame::after { position: absolute; z-index: -1; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--brand-violet) 34%, transparent), transparent); content: ""; filter: blur(2.5rem); pointer-events: none; }
.landing-player-stage { position: relative; z-index: 1; overflow: hidden; border-radius: calc(1.35rem - 2px); margin: 2px; aspect-ratio: 16 / 9; background: var(--s-bg-deep); }
.landing-player-video { display: block; width: 100%; height: 100%; object-fit: cover; }

.landing-player-empty { position: relative; display: grid; height: 100%; align-content: center; justify-items: center; gap: 1.1rem; overflow: hidden; color: var(--s-text); background: radial-gradient(ellipse 55% 60% at 50% 42%, color-mix(in oklab, var(--brand-violet) 40%, transparent), transparent 70%), linear-gradient(148deg, #1a1240 0%, #0a0718 55%, #10203f 100%); }
.landing-player-empty::before { position: absolute; inset: 0; background-image: linear-gradient(to right, rgb(167 139 250 / 0.09) 1px, transparent 1px), linear-gradient(to bottom, rgb(167 139 250 / 0.09) 1px, transparent 1px); background-size: 2.5rem 2.5rem; content: ""; }
.landing-player-scan { position: absolute; top: 0; right: 0; left: 0; height: 16%; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--brand-cyan) 10%, transparent) 65%, color-mix(in oklab, var(--brand-cyan) 26%, transparent)); border-bottom: 1px solid color-mix(in oklab, var(--brand-cyan) 55%, transparent); animation: landing-scan 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes landing-scan { 0% { transform: translateY(-100%); opacity: 0; } 14% { opacity: 1; } 76% { opacity: 1; } 100% { transform: translateY(625%); opacity: 0; } }
.landing-player-play { position: relative; display: grid; width: 4.75rem; height: 4.75rem; align-items: center; justify-items: center; border: 1px solid color-mix(in oklab, var(--brand-cyan) 45%, transparent); border-radius: 50%; background: rgb(255 255 255 / 0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.landing-player-play .icon { width: 1.5rem; height: 1.5rem; margin-left: 0.2rem; fill: var(--s-text); stroke-width: 1; }
.landing-player-empty p { position: relative; color: var(--s-text); font-family: var(--landing-display); font-size: var(--t-body-lg); font-weight: 700; letter-spacing: -0.03em; }
.landing-player-strip { position: absolute; bottom: 1.1rem; display: flex; gap: 1.4rem; color: var(--s-faint); font-size: 0.62rem; }
.landing-player-strip i { font-style: normal; }
.landing-player-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; color: var(--l-dim); font-size: var(--t-small); }
.landing-player-chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.landing-player-chapters b { display: inline-grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--brand-violet) 24%, transparent); color: var(--l-violet-ink); font-size: 0.72rem; font-weight: 700; }
.landing-player-chapters i { width: 1.2rem; height: 1px; background: var(--l-line-strong); }
.landing-player-length { color: var(--l-faint); }

/* --- como funciona -------------------------------------------------------- */

.landing-process-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(3rem, 6vw, 4.5rem); list-style: none; }
/* Cartões, sim — mas cada um mostra a tela daquele passo. Três retângulos com
   ícone e parágrafo seriam a mesma frase escrita três vezes. */
.landing-step { display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--l-line); border-radius: 1rem; background: var(--l-card); box-shadow: var(--l-shadow); transition: border-color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.landing-step:hover { border-color: color-mix(in oklab, var(--brand-violet) 55%, transparent); transform: translateY(-3px); }
.landing-step-visual { display: grid; align-content: space-between; gap: 0.9rem; min-height: 9rem; padding: 1.2rem; border-bottom: 1px solid var(--l-line); color: var(--s-text); background: radial-gradient(ellipse 70% 90% at 20% 0%, color-mix(in oklab, var(--brand-violet) 16%, transparent), transparent 70%), var(--s-bg-deep); }
.landing-step-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; color: var(--s-faint); font-family: var(--voe-mono); font-size: 0.62rem; }
.landing-step-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: center; }
.landing-step-file .icon { width: 1.2rem; height: 1.2rem; color: #a78bfa; }
.landing-step-file b { display: block; overflow: hidden; color: var(--s-text); font-size: 0.8rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.landing-step-bar { display: block; height: 0.3rem; margin-top: 0.5rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 0.09); }
.landing-step-bar i { display: block; width: 64%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-violet), var(--brand-cyan)); animation: landing-fill 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
@keyframes landing-fill { from { width: 22%; } to { width: 82%; } }
.landing-step-lines { display: grid; gap: 0.3rem; }
.landing-step-lines > span { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.55rem; align-items: center; padding: 0.3rem 0.4rem; border: 1px solid transparent; border-radius: 0.35rem; }
.landing-step-lines time { color: var(--s-faint); font-family: var(--voe-mono); font-size: 0.6rem; font-variant-numeric: tabular-nums; }
.landing-step-lines i { display: block; height: 0.32rem; border-radius: 999px; background: rgb(255 255 255 / 0.14); }
.landing-step-lines > span:nth-child(1) i { width: 78%; }
.landing-step-lines > span:nth-child(2) i { width: 92%; }
.landing-step-lines > span:nth-child(3) i { width: 64%; }
.landing-step-lines .is-picked { border-color: color-mix(in oklab, var(--brand-cyan) 45%, transparent); background: color-mix(in oklab, var(--brand-cyan) 9%, transparent); }
.landing-step-lines .is-picked time { color: var(--brand-cyan); }
.landing-step-lines .is-picked i { background: linear-gradient(90deg, var(--brand-violet), var(--brand-cyan)); }
.landing-step-lines .is-picked b { grid-column: 2; color: var(--brand-cyan); font-family: var(--voe-mono); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.landing-step-render { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; }
.landing-step-ratio { padding: 0.28rem 0.45rem; border: 1px solid var(--s-line-strong); border-radius: 0.3rem; color: var(--s-dim); font-family: var(--voe-mono); font-size: 0.6rem; }
.landing-step-progress { display: block; height: 0.5rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 0.09); }
.landing-step-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-magenta), var(--brand-violet) 55%, var(--brand-cyan)); animation: landing-fill 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
.landing-step-done { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--brand-cyan) 20%, transparent); color: var(--brand-cyan); }
.landing-step-done .icon { width: 0.85rem; height: 0.85rem; stroke-width: 3; }
.landing-step-copy { padding: 1.4rem 1.4rem 1.6rem; }
.landing-step-index { color: var(--l-violet-ink); font-family: var(--voe-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.landing-step-copy h3 { margin-top: 0.6rem; color: var(--l-text); font-family: var(--landing-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.landing-step-copy p { margin-top: 0.7rem; color: var(--l-dim); font-size: var(--t-small); line-height: 1.62; }

/* --- recursos ------------------------------------------------------------- */

.landing-feature-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; margin-top: clamp(3.5rem, 6vw, 6rem); }
.landing-feature-row + .landing-feature-row { margin-top: clamp(5rem, 11vw, 9rem); }
.landing-feature-row-reverse { grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr); }
.landing-feature-row-reverse .landing-feature-copy { grid-column: 2; grid-row: 1; }
.landing-feature-row-reverse .landing-board { grid-column: 1; grid-row: 1; }
.landing-feature-copy { min-width: 0; }
.landing-feature-copy h3 { max-width: 15ch; color: var(--l-text); font-family: var(--landing-display); font-size: clamp(1.85rem, 3.3vw, 2.75rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; text-wrap: balance; }
.landing-feature-copy > p { max-width: 50ch; margin-top: 1.3rem; color: var(--l-dim); font-size: var(--t-body-lg); line-height: 1.65; }
.landing-check-list { display: grid; gap: 0.8rem; margin-top: 1.8rem; list-style: none; }
.landing-check-list li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--l-dim); font-size: var(--t-small); line-height: 1.5; }
.landing-check-list .icon { width: 0.95rem; height: 0.95rem; flex: none; margin-top: 0.22rem; color: var(--l-accent-ink); stroke-width: 3; }
.landing-inline-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.8rem; color: var(--l-violet-ink); font-size: var(--t-small); font-weight: 700; }
.landing-inline-link .icon { width: 0.95rem; height: 0.95rem; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.landing-inline-link:hover { color: var(--l-accent-ink); }
.landing-inline-link:hover .icon { transform: translateX(0.25rem); }

/* Os quadros abaixo são TELAS DO PRODUTO: escuras nos dois temas. */
.landing-board { min-width: 0; overflow: hidden; border: 1px solid var(--s-line); border-radius: 0.95rem; background: var(--s-bg); color: var(--s-text); box-shadow: 0 2rem 4rem -2.2rem rgb(0 0 0 / 0.75); }
.landing-board-head, .landing-board-foot, .landing-style-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.05rem; color: var(--s-faint); font-size: 0.72rem; font-weight: 600; }
.landing-board-head { border-bottom: 1px solid var(--s-line); }
.landing-board-head b { color: var(--brand-cyan); font-weight: 600; }
.landing-transcript-board { transform: rotate(-0.9deg); }
.landing-transcript-wave { height: 3.25rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--s-line); color: color-mix(in oklab, var(--brand-cyan) 88%, white); background: color-mix(in oklab, var(--brand-violet) 10%, transparent); }
.landing-transcript-wave svg { display: block; width: 100%; height: 100%; }
.landing-transcript-lines { display: grid; gap: 0.2rem; padding: 0.85rem; }
.landing-transcript-line { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.8rem; min-width: 0; padding: 0.8rem 0.75rem; border: 1px solid transparent; border-radius: 0.5rem; }
.landing-transcript-line time { color: var(--s-faint); font-size: 0.72rem; }
.landing-transcript-line p { color: var(--s-dim); font-size: var(--t-meta); line-height: 1.45; }
.landing-transcript-line mark { padding: 0.05em 0.2em; border-radius: 0.2rem; background: color-mix(in oklab, var(--brand-cyan) 26%, transparent); color: var(--s-text); }
.landing-transcript-line.is-selected { border-color: color-mix(in oklab, var(--brand-cyan) 45%, transparent); background: color-mix(in oklab, var(--brand-cyan) 8%, transparent); }
.landing-transcript-line.is-selected time { color: var(--brand-cyan); }
.landing-transcript-line.is-selected p { color: var(--s-text); }
.landing-transcript-line.is-selected > span { grid-column: 2; color: var(--brand-cyan); font-family: var(--voe-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }
.landing-board-foot { border-top: 1px solid var(--s-line); }
.landing-board-foot > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.landing-board-foot i, .landing-board-head i { display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--brand-cyan); }
.landing-board-foot b { color: #a78bfa; font-weight: 700; }

.landing-style-board { transform: rotate(1deg); }
.landing-style-board .landing-board-head b { display: inline-flex; align-items: center; gap: 0.4rem; }
.landing-style-layout { display: grid; grid-template-columns: minmax(8.5rem, 0.62fr) minmax(0, 1fr); gap: 1rem; padding: 1rem; }
.landing-style-preview { position: relative; display: flex; min-height: 18rem; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0.9rem; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 0.55rem; }
.landing-style-field { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 42% at 52% 28%, color-mix(in oklab, var(--brand-magenta) 55%, transparent), transparent 72%), linear-gradient(158deg, #24123f, #0b0820 58%, #102a44); }
.landing-style-field::after { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 5px); content: ""; }
.landing-style-crop { position: absolute; inset: 12% 14% 36%; border: 1px solid color-mix(in oklab, var(--brand-cyan) 62%, transparent); }
.landing-style-crop i { position: absolute; width: 0.55rem; height: 0.55rem; border: 2px solid var(--brand-cyan); }
.landing-style-crop i:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.landing-style-crop i:nth-child(2) { top: -1px; right: -1px; border-bottom: 0; border-left: 0; }
.landing-style-crop i:nth-child(3) { bottom: -1px; left: -1px; border-top: 0; border-right: 0; }
.landing-style-crop i:nth-child(4) { right: -1px; bottom: -1px; border-top: 0; border-left: 0; }
.landing-style-mark { position: relative; z-index: 1; align-self: flex-end; color: var(--brand-cyan); font-family: var(--landing-display); font-size: 0.8rem; font-weight: 700; letter-spacing: -0.04em; }
.landing-style-preview p { position: relative; z-index: 1; margin-top: 0.8rem; color: #fff; font-family: var(--landing-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; text-shadow: 0 0.15rem 0.7rem rgb(0 0 0 / 0.5); }
.landing-style-preview p b { color: var(--brand-cyan); }
.landing-style-controls { display: grid; align-content: center; gap: 0.55rem; min-width: 0; }
.landing-style-controls > div { display: grid; gap: 0.25rem; padding: 0.75rem 0.8rem; border: 1px solid var(--s-line); border-radius: 0.45rem; background: rgb(255 255 255 / 0.035); }
.landing-style-controls > div > span, .landing-style-footer > span { color: var(--s-faint); font-family: var(--voe-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }
.landing-style-controls strong { display: flex; align-items: center; gap: 0.35rem; overflow: hidden; color: var(--s-text); font-size: 0.82rem; font-weight: 600; }
.landing-style-controls strong .icon { width: 0.8rem; height: 0.8rem; flex: none; margin-left: auto; color: var(--brand-cyan); stroke-width: 3; }
.landing-style-footer { border-top: 1px solid var(--s-line); }
.landing-style-footer b { display: inline-flex; align-items: center; gap: 0.4rem; color: #a78bfa; font-weight: 700; }
.landing-style-footer .icon { width: 0.85rem; height: 0.85rem; }

/* --- banda de capacidade -------------------------------------------------- */

.landing-capability-band { position: relative; overflow: hidden; padding-block: clamp(4rem, 7.5vw, 6.5rem); border-block: 1px solid var(--l-line); background: var(--l-band); }
.landing-capability-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(22rem, 1.15fr); gap: clamp(2.5rem, 8vw, 7rem); align-items: center; }
.landing-capability-grid h2 { max-width: 12ch; }
.landing-capability-list { display: grid; gap: 1rem; list-style: none; }
.landing-capability-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 1.1rem; align-items: center; padding: 1.15rem 1.25rem; border: 1px solid var(--l-line); border-radius: 0.85rem; background: var(--l-surface); }
.landing-capability-icon { display: grid; width: 2.3rem; height: 2.3rem; grid-row: span 2; place-items: center; border-radius: 0.6rem; background: color-mix(in oklab, var(--brand-violet) 22%, transparent); color: var(--l-violet-ink); }
.landing-capability-icon .icon { width: 1.15rem; height: 1.15rem; }
.landing-capability-label { color: var(--l-faint); font-family: var(--voe-mono); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; }
.landing-capability-list strong { color: var(--l-text); font-size: var(--t-body); font-weight: 600; line-height: 1.4; }

/* --- planos --------------------------------------------------------------- */

.landing-plan-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.landing-plan-block[aria-busy="true"] { opacity: 0.55; transition: opacity 140ms ease; }

/* Seletor de ciclo: dois LINKS de verdade, e não botões. Sem JavaScript ele
   recarrega a página no ciclo pedido em vez de não fazer nada. */
.landing-cycle { display: inline-flex; margin: 0 auto clamp(2rem, 4vw, 3rem); padding: 0.3rem; border: 1px solid var(--l-line); border-radius: 999px; background: var(--l-surface); }
.landing-plans .landing-cycle { display: flex; width: fit-content; }
.landing-cycle-option { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.15rem; border-radius: 999px; color: var(--l-dim); font-size: var(--t-small); font-weight: 700; }
.landing-cycle-option:hover { color: var(--l-text); }
.landing-cycle-option.is-on { background: var(--brand-fill); color: #fff; box-shadow: 0 0.5rem 1.2rem -0.7rem color-mix(in oklab, var(--brand-violet) 90%, transparent); }
.landing-cycle-option b { padding: 0.15rem 0.45rem; border-radius: 999px; background: color-mix(in oklab, var(--l-accent-ink) 18%, transparent); color: var(--l-accent-ink); font-size: 0.68rem; font-weight: 700; }
.landing-cycle-option.is-on b { background: rgb(255 255 255 / 0.22); color: #fff; }

.landing-plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1.25rem; align-items: stretch; }
.landing-plan { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr; min-width: 0; padding: 1.8rem 1.6rem 1.7rem; border: 1px solid var(--l-line); border-radius: 1.1rem; background: var(--l-card); box-shadow: var(--l-shadow); transition: border-color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.landing-plan:hover { border-color: color-mix(in oklab, var(--brand-violet) 50%, transparent); transform: translateY(-4px); }
/* O plano em destaque ganha o mesmo fio girando do player: é o mesmo gesto da
   marca aplicado ao lugar em que ela quer que a pessoa pare. */
.landing-plan.is-featured { border-color: transparent; }
.landing-plan-ring { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.landing-plan-ring::before { position: absolute; top: 50%; left: 50%; width: 200%; aspect-ratio: 1; background: conic-gradient(from 0deg, transparent 0 8%, var(--brand-cyan) 16%, var(--brand-blue) 25%, var(--brand-violet) 36%, var(--brand-magenta) 46%, transparent 60% 100%); content: ""; translate: -50% -50%; animation: landing-spin 9s linear infinite; }
.landing-plan-ring::after { position: absolute; inset: 1px; border-radius: calc(1.1rem - 1px); background: var(--l-card-solid); content: ""; }
.landing-plan > *:not(.landing-plan-ring):not(.landing-plan-badge) { position: relative; z-index: 1; }
.landing-plan-badge { position: absolute; top: -0.75rem; left: 1.6rem; z-index: 2; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--brand-fill); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.landing-plan-heading h3 { color: var(--l-text); font-family: var(--landing-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; }
.landing-plan-heading p { min-height: 2.9em; margin-top: 0.5rem; color: var(--l-faint); font-size: var(--t-meta); line-height: 1.45; }
.landing-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.4rem; }
.landing-plan-price strong { color: var(--l-text); font-family: var(--landing-display); font-size: clamp(1.9rem, 2.8vw, 2.35rem); font-weight: 700; letter-spacing: -0.05em; }
.landing-plan-price span { color: var(--l-faint); font-size: var(--t-meta); }
/* Altura reservada mesmo vazia: sem isto o cartão sem preço anual sobe e os
   botões da linha param de se alinhar. */
.landing-plan-pricenote { display: grid; gap: 0.2rem; min-height: 2.6rem; align-content: start; margin-top: 0.5rem; }
.landing-plan-block:not(:has(.landing-plan-detail)) .landing-plan-pricenote { min-height: 0; margin-top: 0; }
.landing-plan-detail { color: var(--l-faint); font-size: 0.82rem; }
.landing-plan-saving { color: var(--l-accent-ink); font-size: 0.82rem; font-weight: 700; }
.btn.landing-plan-cta { display: inline-flex; min-height: 3.05rem; align-items: center; justify-content: center; width: 100%; margin-top: 0.6rem; padding-inline: 1rem; border: 1px solid var(--l-line-strong); border-radius: 0.65rem; background: var(--l-surface); color: var(--l-text); font-size: var(--t-small); font-weight: 700; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease; }
.btn.landing-plan-cta:hover:not(:disabled) { border-color: color-mix(in oklab, var(--l-accent-ink) 60%, transparent); background: color-mix(in oklab, var(--l-accent-ink) 12%, transparent); }
.landing-plan.is-featured .btn.landing-plan-cta { border: 0; background: var(--brand-fill); background-size: 160% 100%; box-shadow: 0 0.7rem 1.6rem -0.8rem color-mix(in oklab, var(--brand-violet) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22); color: #fff; }
.landing-plan.is-featured .btn.landing-plan-cta:hover:not(:disabled) { background-position: 100% 0; }

.landing-plan-facts { align-content: start; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--l-line); }
.landing-plan-facts-label { color: var(--l-faint); font-family: var(--voe-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.landing-plan-facts-label + ul { display: grid; gap: 0.7rem; margin-top: 0.8rem; list-style: none; }
.landing-plan-facts-label:not(:first-child) { margin-top: 1.5rem; }
.landing-plan-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; color: var(--l-dim); font-size: var(--t-small); line-height: 1.45; }
.landing-plan-facts .icon { width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; color: var(--l-accent-ink); stroke-width: 3; }
.landing-plan-facts li.is-off { color: var(--l-faint); }
.landing-plan-facts li.is-off .icon { color: color-mix(in oklab, var(--l-faint) 90%, transparent); stroke-width: 2.4; }

/* A unidade não vira parágrafo na tela: fica atrás de um ícone, e só abre para
   quem perguntou. */
.landing-plan:has(.landing-hint:hover), .landing-plan:has(.landing-hint:focus-within) { z-index: 5; }
.landing-hint { position: relative; display: inline-flex; }
.landing-hint-btn { display: grid; padding: 0; place-items: center; border: 0; background: none; color: var(--l-faint); cursor: help; }
.landing-hint-btn .icon { width: 0.88rem; height: 0.88rem; margin: 0; color: inherit; stroke-width: 2; }
.landing-hint-btn:hover { color: var(--l-accent-ink); }
.landing-hint-bubble { position: absolute; z-index: 30; right: -0.5rem; bottom: calc(100% + 0.6rem); width: min(19rem, 62vw); padding: 0.8rem 0.9rem; border: 1px solid var(--l-line-strong); border-radius: 0.6rem; background: var(--l-card-solid); color: var(--l-dim); box-shadow: 0 1rem 2.5rem -1rem rgb(0 0 0 / 0.55); font-size: 0.82rem; font-weight: 400; line-height: 1.5; opacity: 0; text-transform: none; transition: opacity 140ms ease, transform 140ms ease; transform: translateY(0.3rem); pointer-events: none; }
.landing-hint:hover .landing-hint-bubble, .landing-hint:focus-within .landing-hint-bubble { opacity: 1; transform: none; }

.landing-plans-foot { max-width: 60ch; margin: clamp(1.8rem, 3vw, 2.5rem) auto 0; color: var(--l-faint); font-size: var(--t-small); line-height: 1.6; text-align: center; }
.landing-plans-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.6rem; border: 1px solid var(--l-line); border-radius: 1rem; background: var(--l-surface); }
.landing-plans-empty strong { color: var(--l-text); font-family: var(--landing-display); font-size: var(--t-body-lg); }
.landing-plans-empty p { margin-top: 0.35rem; color: var(--l-faint); font-size: var(--t-small); }
.landing-plans-empty .landing-inline-link { margin-top: 0; }

/* --- perguntas ------------------------------------------------------------ */

.landing-faq-grid { display: grid; grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr); gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.landing-faq-list { border-top: 1px solid var(--l-line); }
.landing-faq-item { border-bottom: 1px solid var(--l-line); }
.landing-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 0; color: var(--l-text); cursor: pointer; font-family: var(--landing-display); font-size: var(--t-body-lg); font-weight: 700; letter-spacing: -0.025em; list-style: none; transition: color 160ms ease; }
.landing-faq-item summary:hover { color: var(--l-accent-ink); }
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after { display: grid; width: 1.5rem; height: 1.5rem; flex: none; place-items: center; border: 1px solid var(--l-line-strong); border-radius: 50%; color: var(--l-accent-ink); content: "+"; font-family: var(--voe-body); font-size: 1rem; font-weight: 400; line-height: 1; }
.landing-faq-item[open] summary::after { border-color: color-mix(in oklab, var(--l-accent-ink) 55%, transparent); content: "−"; }
.landing-faq-item p { max-width: 66ch; padding: 0 2rem 1.45rem 0; color: var(--l-dim); font-size: var(--t-body); line-height: 1.65; }

/* --- faixa de cortes ------------------------------------------------------ */

.landing-rail-section { overflow: hidden; padding-block: clamp(4rem, 8vw, 6.5rem) clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--l-line); background: var(--l-bg-2); }
.landing-rail-title { max-width: 22ch; }
.landing-rail { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.55) 7%, #000 17%, #000 83%, rgb(0 0 0 / 0.55) 93%, transparent); mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.55) 7%, #000 17%, #000 83%, rgb(0 0 0 / 0.55) 93%, transparent); }
/* A lista sai duplicada do templ e cada cartão carrega a folga em margin, não
   em gap: com gap o deslocamento de -50% erra meia folga e o laço pisca. */
.landing-rail-track { display: flex; width: max-content; animation: landing-rail 64s linear infinite; }
.landing-rail:hover .landing-rail-track, .landing-rail:focus-within .landing-rail-track { animation-play-state: paused; }
@keyframes landing-rail { to { transform: translate3d(-50%, 0, 0); } }
.landing-clip { position: relative; display: flex; width: 11rem; flex: none; flex-direction: column; justify-content: flex-end; overflow: hidden; margin-right: 1rem; padding: 0.8rem; border: 1px solid var(--s-line); border-radius: 0.7rem; aspect-ratio: 9 / 16; }
.landing-clip-field { position: absolute; inset: 0; background: var(--clip-art); }
.landing-clip-field::after { position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 4 14 / 0.85) 0%, transparent 52%), repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 5px); content: ""; }
.landing-clip.tone-violet { --clip-art: radial-gradient(ellipse 62% 44% at 46% 30%, color-mix(in oklab, var(--brand-violet) 72%, transparent), transparent 72%), linear-gradient(158deg, #241155, #0a0718); }
.landing-clip.tone-magenta { --clip-art: radial-gradient(ellipse 58% 40% at 56% 26%, color-mix(in oklab, var(--brand-magenta) 62%, transparent), transparent 70%), linear-gradient(150deg, #3a0f45, #0a0718); }
.landing-clip.tone-cyan { --clip-art: radial-gradient(ellipse 60% 42% at 42% 32%, color-mix(in oklab, var(--brand-cyan) 55%, transparent), transparent 70%), linear-gradient(162deg, #0d2b46, #0a0718); }
.landing-clip.tone-blue { --clip-art: radial-gradient(ellipse 64% 44% at 52% 28%, color-mix(in oklab, var(--brand-blue) 62%, transparent), transparent 72%), linear-gradient(146deg, #12245e, #0a0718); }
/* O corte: uma lâmina que atravessa o quadro de vez em quando. Cada cartão
   entra com atraso próprio, senão os oito piscam juntos e vira estroboscópio. */
.landing-clip-cut { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent); box-shadow: 0 0 0.6rem color-mix(in oklab, var(--brand-cyan) 80%, transparent); opacity: 0; animation: landing-cut 7s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.landing-clip:nth-child(8n + 2) .landing-clip-cut { animation-delay: -0.9s; }
.landing-clip:nth-child(8n + 3) .landing-clip-cut { animation-delay: -1.8s; }
.landing-clip:nth-child(8n + 4) .landing-clip-cut { animation-delay: -2.6s; }
.landing-clip:nth-child(8n + 5) .landing-clip-cut { animation-delay: -3.5s; }
.landing-clip:nth-child(8n + 6) .landing-clip-cut { animation-delay: -4.3s; }
.landing-clip:nth-child(8n + 7) .landing-clip-cut { animation-delay: -5.2s; }
.landing-clip:nth-child(8n + 8) .landing-clip-cut { animation-delay: -6.1s; }
@keyframes landing-cut { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 26% { transform: translateY(19.6rem); opacity: 0; } 100% { transform: translateY(19.6rem); opacity: 0; } }
.landing-clip-top { position: absolute; top: 0.65rem; left: 0.75rem; color: rgb(255 255 255 / 0.78); font-size: 0.58rem; }
.landing-clip-caption { position: relative; color: #fff; font-family: var(--landing-display); font-size: 0.88rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; text-shadow: 0 0.12rem 0.6rem rgb(0 0 0 / 0.55); }
/* Onda: três camadas de barras de alturas diferentes, deslocadas entre si.
   Textura de áudio sem imagem, sem SVG e sem 16 cópias de um path. */
.landing-clip-wave { position: relative; display: block; height: 1rem; margin-top: 0.55rem; color: color-mix(in oklab, var(--brand-cyan) 80%, white); background-image: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 15px), repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 15px), repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 15px); background-position: 0 50%, 5px 50%, 10px 50%; background-size: 100% 100%, 100% 44%, 100% 72%; opacity: 0.85; }
.landing-clip-foot { position: relative; margin-top: 0.6rem; color: rgb(255 255 255 / 0.62); font-family: var(--voe-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* --- fechamento ----------------------------------------------------------- */

.landing-final-cta { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 8vw, 7rem); border-top: 1px solid var(--l-line); background: var(--l-band-cta); }
.landing-final-cta::before { position: absolute; inset: -40% -10% auto; height: 160%; background: radial-gradient(ellipse 40% 50% at 50% 30%, color-mix(in oklab, var(--brand-violet) 24%, transparent), transparent 70%); content: ""; pointer-events: none; }
.landing-final-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.landing-final-copy { min-width: 0; }
.landing-final-copy h2 { max-width: 18ch; }
.landing-final-copy p { max-width: 52ch; margin-top: 1.2rem; color: var(--l-dim); font-size: var(--t-body); line-height: 1.6; }

.landing-footer { border-top: 1px solid var(--l-line); background: var(--l-bg); }
.landing-footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; min-height: 7rem; }
.landing-footer-brand { display: inline-flex; }
.landing-footer-brand .logo-wordmark { width: auto; height: 1.85rem; }
.landing-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3rem; }
.landing-footer-links a, .landing-footer-inner > p { color: var(--l-faint); font-size: var(--t-meta); }
.landing-footer-links a:hover { color: var(--l-accent-ink); }
.landing-footer-inner > p { justify-self: end; }

/* --- respiro por largura -------------------------------------------------- */

@media (max-width: 68rem) {
  .landing-process-list { grid-template-columns: 1fr 1fr; }
  .landing-process-list > li:last-child { grid-column: 1 / -1; }
  .landing-nav-links { gap: 1.1rem; }
  .landing-nav-links a { font-size: 0.85rem; }
}

@media (max-width: 56rem) {
  .landing-nav-links { display: none; }
  .landing-nav-actions { margin-left: auto; }
  .landing-hero { padding-top: 3.5rem; }
  .landing-hero-grid { gap: 3.5rem; }
  .landing-hero h1 { font-size: clamp(3rem, 8vw, 4.25rem); }
  .landing-demo-wrap { width: min(100%, 58rem); }
  .landing-capability-grid, .landing-faq-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .landing-capability-grid h2 { max-width: 16ch; }
  .landing-final-inner { align-items: flex-start; flex-direction: column; gap: 2rem; }
}

@media (max-width: 46rem) {
  .landing-hero { padding-top: 3rem; }
  .landing-hero h1 { font-size: clamp(2.85rem, 9vw, 4.1rem); }
  .landing-demo-insight { font-size: 0.72rem; }
  .landing-signal-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.8rem; padding-block: 1.4rem; }
  .landing-signal ul { justify-content: flex-start; gap: 0.45rem 1.1rem; }
  .landing-signal li { font-size: var(--t-small); }
  .landing-process-list { grid-template-columns: 1fr; }
  .landing-process-list > li:last-child { grid-column: auto; }
  .landing-feature-row, .landing-feature-row-reverse { grid-template-columns: 1fr; gap: 2.5rem; }
  .landing-feature-row-reverse .landing-feature-copy, .landing-feature-row-reverse .landing-board { grid-column: auto; grid-row: auto; }
  .landing-feature-row-reverse .landing-feature-copy { order: 1; }
  .landing-feature-row-reverse .landing-board { order: 2; }
  .landing-feature-copy h3 { max-width: 18ch; }
  .landing-board { transform: none; }
  .landing-player-caption { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .landing-plan-heading p, .landing-plan-pricenote { min-height: 0; }
  .landing-hint-bubble { right: auto; left: -8rem; }
  .landing-footer-inner { grid-template-columns: 1fr; justify-items: start; gap: 0.9rem; padding-block: 1.7rem; }
  .landing-footer-links { justify-content: flex-start; }
  .landing-footer-inner > p { justify-self: start; }
}

@media (max-width: 30rem) {
  .landing-wrap { width: min(calc(100% - 1.6rem), 78rem); }
  .landing-brand .logo-wordmark { height: 1.95rem; }
  .landing-nav-inner { min-height: 4.4rem; gap: 0.6rem; }
  .landing-nav-actions { gap: 0.6rem; }
  .landing-login { font-size: 0.82rem; }
  .btn.landing-nav-cta { min-height: 2.45rem; padding-inline: 0.8rem; font-size: 0.78rem; }
  .landing-theme { width: 2.3rem; height: 2.3rem; }
  .landing-hero { padding-block: 3rem 0; }
  .landing-hero h1 { font-size: clamp(2.6rem, 12vw, 3.7rem); }
  .landing-hero-actions { align-items: stretch; flex-direction: column; gap: 0.85rem; }
  .landing-hero-actions .landing-cta, .landing-hero-link { width: 100%; justify-content: center; }
  .landing-hero-proof { align-items: center; gap: 0.5rem; flex-direction: column; }
  .landing-demo-insight { border-radius: 0.7rem; font-size: 0.68rem; }
  .landing-demo-insight-status { display: none; }
  .landing-demo-body { grid-template-columns: 0.85fr 1fr; gap: 0.65rem; padding: 0.75rem; }
  .landing-demo-video-label { top: 0.45rem; left: 0.45rem; font-size: 0.42rem; }
  .landing-demo-speaker { top: 0.42rem; right: 0.42rem; padding: 0.24rem 0.3rem; font-size: 0.4rem; }
  .landing-demo-timeline-head, .landing-demo-ruler { font-size: 0.52rem; }
  .landing-demo-track-video { height: 1.75rem; }
  .landing-demo-track-voice { height: 2.1rem; }
  .landing-demo-foot, .landing-demo-chrome { padding-inline: 0.7rem; font-size: 0.6rem; }
  .landing-section-intro h2, .landing-capability-grid h2, .landing-final-copy h2, .landing-rail-title { font-size: 2.2rem; }
  .landing-cycle { width: 100%; }
  .landing-cycle-option { flex: 1; justify-content: center; padding-inline: 0.6rem; font-size: 0.85rem; }
  .landing-cycle-option b { font-size: 0.6rem; }
  .landing-capability-list li { padding: 0.95rem 1rem; }
  .landing-plan { padding: 1.6rem 1.3rem 1.45rem; }
  .landing-style-layout { grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1fr); gap: 0.65rem; padding: 0.7rem; }
  .landing-style-preview { min-height: 15rem; }
  .landing-style-controls > div { padding: 0.6rem; }
  .landing-style-controls strong { font-size: 0.74rem; }
  .landing-clip { width: 8.75rem; margin-right: 0.7rem; }
  .landing-player-strip { gap: 0.9rem; }
  .landing-hint-bubble { left: -6rem; width: min(15rem, 70vw); }
}

/* Movimento é sempre opcional. Sobram as posições finais: a lâmina some, o fio
   para no lugar, a faixa fica parada e legível. */
@media (prefers-reduced-motion: reduce) {
  .landing-shell *, .landing-shell *::before, .landing-shell *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .landing-aurora span, .landing-demo, .landing-demo-wrap::before, .landing-transcript-board, .landing-style-board { transform: none; }
  .landing-clip-cut, .landing-player-scan { display: none; }
  .landing-rail-track { transform: none; }
}

/* Sistema (painel de plataforma) ------------------------------------------

   A tela de operação é DENSA de propósito: quem a abre está procurando um número
   fora do lugar, e rolar três telas para achá-lo é o oposto do que ela serve.
   Daí a régua abaixo — cartão sem gordura, tipografia pequena e tabular, e cor
   usada só onde ela significa alguma coisa.

   A cor é a única linguagem repetida na tela inteira, e ela tem três palavras:
   verde/neutro é "em dia", âmbar é "olhe quando puder", vermelho é "olhe agora".
   Nada aqui é colorido por decoração — um cartão neutro é uma afirmação. */

.sys { --sys-gap: 0.85rem; }
.sys code { font-family: var(--voe-mono); font-size: 0.72rem; }

/* Números que o olho compara em coluna precisam de largura fixa por dígito;
   sem isso "1.204" e "998" começam em pontos diferentes e a coluna deixa de ser
   uma régua. */
.sys-indicador strong, .sys-maquina-topo span, .sys-processo-numeros dd,
.sys-matriz td, .sys-tabela td, .sys-cel { font-variant-numeric: tabular-nums; }

/* --- veredito ----------------------------------------------------------- */

.sys-veredito {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-base-300); border-left: 3px solid var(--color-success);
  border-radius: var(--radius-box); background: var(--color-base-100);
  box-shadow: var(--voe-shadow-sm);
}
.sys-veredito.is-warning { border-left-color: var(--color-warning); }
.sys-veredito.is-error { border-left-color: var(--color-error); }

.sys-veredito-selo { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.sys-veredito-selo strong {
  display: block; font-family: var(--voe-display); font-size: 1.05rem;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
}
.sys-veredito-selo small {
  display: block; color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  font-size: 0.78rem;
}

/* O pulso é o único movimento da tela, e ele carrega informação: enquanto pisca,
   o batimento de 10 s está chegando. Parado, a tela está velha. */
.sys-pulso {
  position: relative; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 999px;
  background: var(--color-success);
}
.sys-pulso::after {
  content: ""; position: absolute; inset: -0.35rem; border-radius: 999px;
  border: 1px solid var(--color-success); opacity: 0;
  animation: sys-pulsar 2.4s ease-out infinite;
}
.sys-veredito.is-warning .sys-pulso { background: var(--color-warning); }
.sys-veredito.is-warning .sys-pulso::after { border-color: var(--color-warning); }
.sys-veredito.is-error .sys-pulso { background: var(--color-error); }
.sys-veredito.is-error .sys-pulso::after { border-color: var(--color-error); }
@keyframes sys-pulsar {
  0% { opacity: 0.7; transform: scale(0.6); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}

.sys-veredito-lado { display: flex; align-items: center; gap: 0.6rem; }
.sys-carimbo {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 0.78rem;
}
.sys-carimbo .icon { width: 0.9rem; height: 0.9rem; }

/* --- alertas ------------------------------------------------------------ */

.sys-alertas { display: grid; gap: 0.5rem; margin-top: var(--sys-gap); }
.sys-alerta {
  display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--color-warning) 35%, transparent);
  border-radius: var(--radius-field);
  background: color-mix(in oklab, var(--color-warning) 8%, var(--color-base-100));
}
.sys-alerta.is-error {
  border-color: color-mix(in oklab, var(--color-error) 38%, transparent);
  background: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100));
}
.sys-alerta-icone { flex: none; color: var(--color-warning); }
.sys-alerta.is-error .sys-alerta-icone { color: var(--color-error); }
.sys-alerta strong { display: block; font-size: 0.87rem; font-weight: 700; }
.sys-alerta span {
  display: block; color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
  font-size: 0.8rem; line-height: 1.45;
}

/* --- indicadores -------------------------------------------------------- */

.sys-indicadores {
  display: grid; gap: 0.6rem; margin-top: var(--sys-gap);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.sys-indicador {
  padding: 0.7rem 0.85rem; border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box); background: var(--color-base-100);
  box-shadow: var(--voe-shadow-sm);
}
.sys-indicador.is-aviso {
  border-color: color-mix(in oklab, var(--color-warning) 45%, transparent);
  background: color-mix(in oklab, var(--color-warning) 6%, var(--color-base-100));
}
.sys-indicador.is-erro {
  border-color: color-mix(in oklab, var(--color-error) 45%, transparent);
  background: color-mix(in oklab, var(--color-error) 6%, var(--color-base-100));
}
.sys-indicador.is-ok { border-color: color-mix(in oklab, var(--color-success) 35%, transparent); }
.sys-indicador-topo {
  display: flex; align-items: center; gap: 0.3rem;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.sys-indicador strong {
  display: block; margin-top: 0.2rem; font-family: var(--voe-display);
  font-size: 1.55rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05;
}
.sys-indicador.is-erro strong { color: var(--color-error); }
.sys-indicador.is-aviso strong { color: var(--color-warning); }
.sys-indicador small {
  display: block; margin-top: 0.15rem;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent); font-size: 0.72rem;
}

/* --- cartões e títulos de seção ----------------------------------------- */

.sys-card { box-shadow: var(--voe-shadow-sm); }
.sys-card .sys-card-body { gap: 0.7rem; padding: 1rem 1.1rem 1.1rem; }
.sys-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sys-titulo .section-kicker { margin-bottom: 0; }
.sys-titulo-nota {
  margin-left: auto; color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  font-size: 0.78rem;
}
.sys-vazio {
  margin: 0.2rem 0 0; color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-size: 0.82rem;
}

.sys-colunas { display: grid; gap: var(--sys-gap); }
.sys-dupla { display: grid; gap: var(--sys-gap); }
@media (min-width: 60rem) { .sys-dupla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 78rem) { .sys-colunas { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }

/* --- máquina ------------------------------------------------------------ */

.sys-maquina-topo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-base-300);
}
.sys-maquina-topo > div { text-align: center; }
.sys-maquina-topo span {
  display: block; font-family: var(--voe-display); font-size: 1.2rem;
  font-weight: 700; letter-spacing: -0.03em;
}
.sys-maquina-topo small {
  display: block; color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
  font-size: 0.68rem;
}

.sys-barra { display: block; }
.sys-barra-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.25rem; font-size: 0.76rem;
}
.sys-barra-topo > span { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); }
.sys-barra-topo > strong { font-weight: 600; }
.sys-barra-trilho {
  height: 0.4rem; overflow: hidden; border-radius: 999px;
  background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
}
.sys-barra-preenchimento {
  height: 100%; border-radius: 999px; background: var(--color-primary);
  transition: width 400ms ease;
}
.sys-barra-preenchimento.is-ok { background: var(--color-primary); }
.sys-barra-preenchimento.is-aviso { background: var(--color-warning); }
.sys-barra-preenchimento.is-erro { background: var(--color-error); }

.sys-lista { display: grid; gap: 0.3rem; margin: 0.2rem 0 0; }
.sys-lista > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  font-size: 0.78rem;
}
.sys-lista dt { color: color-mix(in oklab, var(--color-base-content) 52%, transparent); }
.sys-lista dd { margin: 0; font-weight: 600; }

/* --- gráficos ----------------------------------------------------------- */

.sys-graficos { display: grid; gap: var(--sys-gap); }
@media (min-width: 60rem) { .sys-graficos { grid-template-columns: 1fr 1fr; } }
.sys-card-largo { grid-column: 1 / -1; }
.sys-tela { position: relative; height: 11rem; }
.sys-tela-baixa { height: 9rem; }
.sys-tela canvas { position: absolute; inset: 0; }

/* --- processos ---------------------------------------------------------- */

/* auto-fit, e não auto-fill: com dois processos, o auto-fill cria seis trilhas
   e deixa quatro vazias — os dois cartões ficam espremidos em 16rem e cada
   número quebra em duas linhas. O auto-fit recolhe as trilhas vazias e os
   cartões existentes ocupam a largura. */
.sys-processos {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.sys-processo {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-base-300); border-left: 3px solid var(--color-success);
  border-radius: var(--radius-field); background: var(--color-base-100);
}
.sys-processo.is-aviso { border-left-color: var(--color-warning); }
.sys-processo.is-erro { border-left-color: var(--color-error); }
.sys-processo .sys-ponto {
  flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--color-success);
}
.sys-processo.is-aviso .sys-ponto { background: var(--color-warning); }
.sys-processo.is-erro .sys-ponto { background: var(--color-error); }

.sys-processo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.sys-processo-nome { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sys-processo-nome strong {
  display: block; font-family: var(--voe-display); font-size: 0.95rem;
  font-weight: 700; letter-spacing: -0.02em;
}
.sys-processo-nome small {
  display: block; overflow: hidden; color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-family: var(--voe-mono); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap;
}

.sys-processo-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin: 0; }
.sys-processo-numeros dt {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.sys-processo-numeros dd { margin: 0; font-size: 0.8rem; font-weight: 600; }

.sys-processo-versao, .sys-processo-filas, .sys-processo-mudo {
  margin: 0; overflow: hidden; color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap;
}
.sys-processo-mudo { display: flex; align-items: center; gap: 0.3rem; color: var(--color-warning); }
.sys-processo-mudo .icon { width: 0.85rem; height: 0.85rem; flex: none; }

.sys-executando { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.sys-executando li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.4rem; align-items: baseline;
  padding: 0.28rem 0.45rem; border-radius: var(--radius-selector);
  background: color-mix(in oklab, var(--color-base-content) 4%, transparent); font-size: 0.7rem;
}
.sys-executando li.is-erro {
  background: color-mix(in oklab, var(--color-error) 10%, transparent); color: var(--color-error);
}
.sys-executando-tipo { overflow: hidden; font-family: var(--voe-mono); text-overflow: ellipsis; white-space: nowrap; }
.sys-executando-fila { color: color-mix(in oklab, var(--color-base-content) 45%, transparent); }
.sys-executando-tempo { font-variant-numeric: tabular-nums; font-weight: 600; }
.sys-executando-mais {
  display: block; color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  background: none; font-size: 0.68rem;
}

/* --- a matriz de filas -------------------------------------------------- */

.sys-tabela-rolagem { overflow-x: auto; }
.sys-matriz { width: 100%; border-collapse: separate; border-spacing: 0.2rem; font-size: 0.75rem; }
.sys-matriz th {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-align: center;
  text-transform: uppercase; white-space: nowrap;
}
.sys-matriz thead th small {
  display: block; color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
  font-family: var(--voe-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0;
  text-transform: none;
}
.sys-matriz tbody th, .sys-matriz-canto {
  min-width: 9rem; padding-right: 0.5rem; color: var(--color-base-content);
  font-size: 0.76rem; letter-spacing: 0; text-align: left; text-transform: none;
}
.sys-matriz-total {
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  font-weight: 700; text-align: center;
}
.sys-matriz tfoot th { padding-top: 0.5rem; }

/* A célula é a menor unidade da tela: um número, um fundo que diz o peso dele e
   um title que abre a decomposição. Vazia ela recua ao máximo — trinta e cinco
   células cheias de zero disputariam atenção com a única que importa. */
.sys-cel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.05rem; min-height: 2.1rem; padding: 0.25rem 0.4rem;
  border: 1px solid transparent; border-radius: var(--radius-selector);
  font-size: 0.85rem; font-weight: 700;
}
.sys-cel em {
  font-size: 0.55rem; font-style: normal; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sys-cel.is-inexistente {
  border-style: dashed; border-color: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
}
.sys-cel.is-vazia {
  background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
  color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
}
.sys-cel.is-baixa {
  background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary);
}
.sys-cel.is-media {
  background: color-mix(in oklab, var(--color-primary) 30%, transparent);
  color: color-mix(in oklab, var(--color-primary) 85%, var(--color-base-content));
}
.sys-cel.is-alta { background: var(--color-primary); color: var(--color-primary-content); }
.sys-cel.is-pausada {
  background: color-mix(in oklab, var(--color-warning) 18%, transparent); color: var(--color-warning);
}
.sys-cel.is-perdida {
  background: color-mix(in oklab, var(--color-error) 16%, transparent); color: var(--color-error);
}
.sys-servicos { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sys-cel-servico {
  flex-direction: row; gap: 0.4rem; min-height: 1.9rem; padding-inline: 0.6rem;
}
.sys-cel-servico b { font-size: 0.68rem; font-weight: 600; }

/* --- tabelas de detalhe ------------------------------------------------- */

.sys-tabela { font-size: 0.76rem; }
.sys-tabela th {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.sys-tabela td { padding-block: 0.35rem; }
.sys-tabela .sys-codigo {
  display: block; color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  font-size: 0.62rem;
}

/* --- falhas por classe -------------------------------------------------- */

.sys-falhas { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sys-falha-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.2rem; font-size: 0.76rem;
}
.sys-falha-topo strong { font-variant-numeric: tabular-nums; }

/* --- publicação de métricas --------------------------------------------- */

.sys-publicacao { display: grid; gap: 0.75rem; }
@media (min-width: 60rem) { .sys-publicacao { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); } }
.sys-alvos { display: grid; gap: 0.3rem; }
.sys-alvo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.55rem; align-items: center;
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-base-300);
  border-radius: var(--radius-selector); font-size: 0.74rem;
}
.sys-alvo .sys-ponto {
  width: 0.45rem; height: 0.45rem; border-radius: 999px;
  background: color-mix(in oklab, var(--color-base-content) 25%, transparent);
}
.sys-alvo.is-ok .sys-ponto { background: var(--color-success); }
.sys-alvo.is-aviso .sys-ponto { background: var(--color-warning); }
.sys-alvo strong { display: block; font-size: 0.78rem; }
.sys-alvo code {
  display: block; overflow: hidden;
  color: color-mix(in oklab, var(--color-base-content) 42%, transparent);
  text-overflow: ellipsis; white-space: nowrap;
}
.sys-alvo-estado {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  font-size: 0.7rem; text-align: right; white-space: nowrap;
}

@media (max-width: 40rem) {
  .sys-processo-numeros { grid-template-columns: repeat(2, 1fr); row-gap: 0.5rem; }
  .sys-veredito { align-items: flex-start; flex-direction: column; }
  .sys-veredito-lado { width: 100%; justify-content: space-between; }
}

/* O pulso é decoração de estado, não informação exclusiva: o texto ao lado já diz
   o veredito. Quem pediu menos movimento fica sem ele e não perde nada. */
@media (prefers-reduced-motion: reduce) {
  .sys-pulso::after { animation: none; }
  .sys-barra-preenchimento { transition: none; }
}

/* ---------------------------------------------------------------- marca ---
   A marca d'água da PLATAFORMA no painel: o quadro de prévia de cada formato e a
   grade de nove posições dentro dele.

   Mora aqui, e não em utilitários, porque o estado que importa é o `:checked` de
   um input escondido — e a variante peer-checked do Tailwind não alcança as cores
   do daisyUI, que neste projeto são CSS pronto e não utilitário gerado. */
.marca-quadro {
  position: relative; width: 100%; overflow: hidden; border-radius: 0.6rem;
}
.marca-grade {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
}
.marca-ponto {
  position: relative; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.marca-ponto input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.marca-ponto i {
  width: 0.45rem; height: 0.45rem; border-radius: 999px;
  /* Claro fixo, e não uma cor do tema: o quadro é sempre escuro (é o vídeo), e um
     ponto tingido pelo base-content sumiria dentro dele no tema claro. */
  background: rgba(255, 255, 255, 0.3);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.marca-ponto:hover i { background: rgba(255, 255, 255, 0.65); }
.marca-ponto input:checked + i {
  background: var(--color-primary);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--color-primary) 30%, transparent);
}
.marca-ponto input:focus-visible + i { outline: 2px solid var(--color-primary); outline-offset: 3px; }
/* O selo é a marca desenhada onde o render vai pô-la. pointer-events desligado
   para ele não roubar o clique do ponto que está embaixo. */
.marca-selo { position: absolute; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .marca-ponto i { transition: none; }
}