/* ============================================================================
 * theme-linear-wave2-canais-contas-agendamento-products.css
 * Redesign Linear (dark) do CRM Avalanche — fatia wave2 "canais-contas-
 * agendamento-products". Cobre: #page-channels, #page-products,
 * #page-agendamento e #page-contas (owner).
 *
 * Carregada DEPOIS do app.css e junto das outras folhas theme-linear-*.
 * Toda regra é namespaced pelo id da página e escopada em
 * :root[data-theme]: light/hybrid e outras páginas intactos.
 *
 * Os fragmentos HTML desta fatia vivem em design-reference/fragments/
 * (channels.html, products.html, agendamento.html, contas.html). O que o JS
 * injeta em runtime (ch-card, ag-month, owner-account-row, evoc__*) é
 * revestido aqui sem tocar nos templates.
 *
 * Regras duras: zero degradê (cor sólida sempre), zero emoji autoral,
 * âmbar reservado a valor em dinheiro, tokens do theme-linear-core.css.
 * ========================================================================== */


/* ============================================================================
   0. TOKENS · remap local das vars legadas que os blocos ch-*, ag-* e
   owner-account-* consomem, para herdar a paleta Linear sem brigar com
   especificidade. Mesma estratégia das fatias a/b/c.
   ========================================================================== */
:root[data-theme] :is(#page-channels, #page-products, #page-agendamento, #page-contas){
  --bg: var(--color-carbon);
  --panel: var(--color-obsidian);
  --panel-2: var(--color-carbon);
  --raised: var(--color-graphite);
  --line: var(--color-graphite);
  --line-strong: var(--color-smoke);
  --text: var(--color-mist);
  --text-primary: var(--color-mist);
  --text-secondary: var(--color-fog);
  --text-dim: var(--color-fog);
  --text-muted: var(--color-ash);
  --dim: var(--color-fog);
  --mute: var(--color-ash);
  --accent: var(--color-acid-lime);
  --accent-deep: var(--color-acid-lime);
  --accent-glow: rgba(228, 242, 34, 0.10);
  --live: var(--color-pulse-green);
  --bad: var(--color-coral-red);
  --warn: var(--lx-amber);
  --info: var(--color-signal-teal);
  --bg-card-solid: var(--color-obsidian);
  --border-color: var(--color-graphite);
  --border-hover: var(--color-smoke);
  --r: 12px;
  --r-sm: 6px;
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
}

:root[data-theme] :is(#page-channels, #page-products, #page-agendamento, #page-contas){
  background: var(--color-carbon);
}


/* ============================================================================
   1. CANAIS · topbar 52px + barra de período segmentada + grade de canais
   (ch-card injetado pelo app.js) + bloco Evolution (evoc__* injetado pelo
   evolution-channel-control).
   ========================================================================== */

/* ── topbar ── */
:root[data-theme] #page-channels .cnx-top{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--lx-h-topbar);
  padding: 0 20px;
  border-bottom: 1px solid var(--color-graphite);
  background: var(--color-carbon);
  flex-wrap: wrap;
  row-gap: 8px;
}
:root[data-theme] #page-channels .cnx-h1{
  margin: 0;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -.288px;
  font-weight: var(--lx-w-510);
  color: var(--color-paper);
}
:root[data-theme] #page-channels .cnx-sub{
  font-size: 13px;
  color: var(--color-ash);
  white-space: nowrap;
}
:root[data-theme] #page-channels .cnx-spacer{ flex: 1; }

:root[data-theme] #page-channels .cnx-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--lx-h-btn);
  padding: 0 12px;
  border-radius: var(--lx-r-md);
  border: 1px solid var(--color-graphite);
  background: transparent;
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
  font-size: 13px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.011em;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
:root[data-theme] #page-channels .cnx-btn:hover{
  background: var(--lx-wash-hover);
  border-color: var(--color-smoke);
  color: var(--color-bone);
}
:root[data-theme] #page-channels .cnx-btn svg{ width: 15px; height: 15px; flex: 0 0 auto; }
:root[data-theme] #page-channels .cnx-btn.cnx-primary{
  background: var(--color-acid-lime);
  border-color: var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-channels .cnx-btn.cnx-primary:hover{
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
  color: var(--lx-on-lime);
}

/* Botão injetado pelo EvolutionChannelControl na toolbar: mesma cara dos demais. */
:root[data-theme] #page-channels .cnx-evo-toolbar{ display: inline-flex; align-items: center; }
:root[data-theme] #page-channels .evoc__launch{
  min-height: var(--lx-h-btn);
  padding: 0 12px;
  border-radius: var(--lx-r-md);
  border: 1px solid var(--color-graphite);
  background: transparent;
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
  font-size: 13px;
  font-weight: var(--lx-w-510);
  box-shadow: none;
}
:root[data-theme] #page-channels .evoc__launch:hover{
  background: var(--lx-wash-hover);
  border-color: var(--color-smoke);
  color: var(--color-bone);
}

/* ── corpo ── */
:root[data-theme] #page-channels .cnx-body{
  max-width: none;
  margin: 0 auto;
  padding: 20px 24px 48px;
}

/* ── barra de período (chips segmentados do protótipo) ── */
:root[data-theme] #page-channels .cnx-periodbar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
:root[data-theme] #page-channels .cnx-micro{
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
:root[data-theme] #page-channels .cn-periods{
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-md);
}
:root[data-theme] #page-channels .cn-period{
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--lx-r-badge);
  background: transparent;
  color: var(--color-fog);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  font-weight: var(--lx-w-510);
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease;
}
:root[data-theme] #page-channels .cn-period:hover{ color: var(--color-bone); }
:root[data-theme] #page-channels .cn-period.active{
  background: var(--color-graphite);
  color: var(--color-paper);
  box-shadow: none;
}
:root[data-theme] #page-channels .cnx-range{ display: flex; align-items: center; gap: 8px; }
:root[data-theme] #page-channels .cnx-range-sep{ font-size: 12px; color: var(--color-ash); }
:root[data-theme] #page-channels .cn-date{
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--lx-r-md);
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  color-scheme: dark;
}
:root[data-theme] #page-channels .cn-date:focus{ border-color: var(--color-mist); outline: none; }
:root[data-theme] #page-channels .cn-period.cnx-apply{
  background: var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-weight: var(--lx-w-590);
  height: 30px;
  padding: 0 12px;
}
:root[data-theme] #page-channels .cnx-usage{
  margin-left: auto;
  font-family: var(--lx-font-mono);
  font-size: 12px;
  letter-spacing: -.013em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ash);
}

/* ── grade de canais (cards injetados por renderChannels) ── */
:root[data-theme] #page-channels .channels-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
:root[data-theme] #page-channels .ch-card{
  background: var(--color-obsidian) !important;
  background-image: none !important;
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-card);
  padding: 16px;
  gap: 12px;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .12s ease;
}
:root[data-theme] #page-channels .ch-card:hover{
  border-color: var(--color-smoke);
  background: var(--color-obsidian) !important;
  transform: none;
}
/* faixa colorida de topo do provedor: fora do sistema, removida */
:root[data-theme] #page-channels .ch-card::before{ content: none; }

:root[data-theme] #page-channels .ch-avatar{
  width: 40px;
  height: 40px;
  border-radius: var(--lx-r-pill);
  border: 0;
  background: var(--color-graphite);
  color: var(--color-bone);
  font-size: 15px;
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-channels .ch-display{
  font-size: 14px;
  font-weight: var(--lx-w-510);
  color: var(--color-bone);
  letter-spacing: -.011em;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Item 6 — ch-username sem reticências vinha cortado a 204px. Largura flexível
   + ellipsis nos dois temas (o title[hover] depende do JS que monta a linha). */
:root[data-theme] #page-channels .ch-username{
  font-family: var(--lx-font-mono);
  font-size: 12px;
  color: var(--color-ash);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] #page-channels .ch-provider-tag{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  margin-top: 4px;
  border-radius: var(--lx-r-badge);
  background: var(--lx-wash-violet);
  color: var(--lx-violet-text);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
  letter-spacing: 0;
}
:root[data-theme] #page-channels .ch-provider-tag.wa{
  background: var(--lx-wash-green);
  color: var(--lx-green-text);
}

/* pill de status: badge Linear de 20px */
:root[data-theme] #page-channels .ch-status-pill{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--lx-r-badge);
  background: var(--lx-wash-hover);
  color: var(--color-fog);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
  letter-spacing: 0;
  text-transform: none;
}
:root[data-theme] #page-channels .ch-status-pill.active{
  background: var(--lx-wash-green);
  color: var(--lx-green-text);
}
:root[data-theme] #page-channels .ch-status-pill.expired,
:root[data-theme] #page-channels .ch-status-pill.token_refresh_warning{
  background: var(--lx-wash-coral);
  color: var(--lx-coral-text);
}
:root[data-theme] #page-channels .ch-status-pill.inactive{
  background: var(--lx-wash-hover);
  color: var(--color-fog);
}

/* número WhatsApp em destaque: mono tabular, verde de sistema */
:root[data-theme] #page-channels .ch-phone-row{
  margin-top: 0;
  padding: 8px 10px;
  border-radius: var(--lx-r-md);
  background: var(--lx-wash-green);
  border: 1px solid rgba(var(--lx-green-rgb),.30);
  color: var(--lx-green-text);
  font-family: var(--lx-font-mono);
  font-size: 13px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.013em;
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-channels .ch-phone-copy{
  border-radius: var(--lx-r-badge);
  color: var(--color-fog);
  font-family: var(--lx-font-ui);
  font-size: 12px;
}
:root[data-theme] #page-channels .ch-phone-copy:hover{
  background: var(--lx-wash-hover-2);
  color: var(--color-bone);
}

/* chip de dono do número: badge, sem pill arredondada */
:root[data-theme] #page-channels .ch-owner-row{ margin-top: 0; }
:root[data-theme] #page-channels .ch-owner-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--lx-r-badge);
  border: 0;
  background: var(--lx-wash-violet);
  color: var(--lx-violet-text);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
  letter-spacing: 0;
  box-shadow: none;
}
:root[data-theme] #page-channels .ch-owner-chip.me{
  background: var(--lx-wash-green);
  color: var(--lx-green-text);
}
:root[data-theme] #page-channels .ch-owner-chip.admin{
  background: var(--lx-wash-lime);
  color: var(--lx-lime-ink);
}
:root[data-theme] #page-channels .ch-owner-chip.none{
  background: var(--lx-wash-hover);
  color: var(--color-fog);
}

/* custo de disparo: "Investido" é dinheiro, vai em âmbar (regra do sistema) */
:root[data-theme] #page-channels .ch-usage{ gap: 8px; }
:root[data-theme] #page-channels .ch-usage-box{
  background: var(--color-carbon);
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-md);
  padding: 10px 12px;
}
:root[data-theme] #page-channels .ch-usage-box .lbl{
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
:root[data-theme] #page-channels .ch-usage-box .val{
  font-family: var(--lx-font-mono);
  font-size: 18px;
  font-weight: var(--lx-w-590);
  letter-spacing: -.013em;
  color: var(--color-paper);
}
:root[data-theme] #page-channels .ch-usage-box.cost .val{ color: var(--lx-amber); }
:root[data-theme] #page-channels .ch-usage-bd{
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-md);
  background: var(--color-carbon);
}

:root[data-theme] #page-channels .ch-bio{
  font-size: 12px;
  color: var(--color-fog);
  min-height: 0;
}
:root[data-theme] #page-channels .ch-stats{
  border-top: 1px solid var(--color-graphite);
  border-bottom: 1px solid var(--color-graphite);
}
:root[data-theme] #page-channels .ch-stat-num{
  font-family: var(--lx-font-mono);
  font-size: 15px;
  font-weight: var(--lx-w-590);
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-channels .ch-stat-lbl{
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  color: var(--color-ash);
}
:root[data-theme] #page-channels .ch-meta-row{
  font-size: 12px;
  color: var(--color-ash);
}
:root[data-theme] #page-channels .ch-meta-row b{ color: var(--color-fog); font-weight: var(--lx-w-510); }
:root[data-theme] #page-channels .ch-meta-row .webhook{
  color: var(--lx-teal-text);
  font-family: var(--lx-font-mono);
}
:root[data-theme] #page-channels .ch-meta-row .no-webhook{ color: var(--lx-coral-text); }

/* ações do card: botão padrão Linear + danger */
:root[data-theme] #page-channels .ch-actions{ gap: 8px; }
:root[data-theme] #page-channels .ch-btn{
  min-height: var(--lx-h-btn-sm);
  padding: 0 10px;
  border-radius: var(--lx-r-md);
  border: 1px solid var(--color-graphite);
  background: transparent;
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  font-weight: var(--lx-w-510);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
:root[data-theme] #page-channels .ch-btn.edit{
  background: transparent;
  color: var(--color-mist);
}
:root[data-theme] #page-channels .ch-btn.edit:hover{
  background: var(--lx-wash-hover);
  border-color: var(--color-smoke);
  color: var(--color-bone);
}
:root[data-theme] #page-channels .ch-btn.danger{
  background: transparent;
  border-color: rgba(var(--lx-coral-rgb),.28);
  color: var(--lx-coral-text);
}
:root[data-theme] #page-channels .ch-btn.danger:hover{
  background: rgba(var(--lx-coral-rgb),.10);
  border-color: rgba(var(--lx-coral-rgb),.45);
  color: var(--color-coral-red);
}
/* os dois botões WA carregam style inline colorido; neutralizados abaixo */
:root[data-theme] #page-channels .ch-actions .ch-btn[style]{
  background: transparent;
  color: var(--color-mist);
}

/* ── estados de superfície (loading/empty/error) na linguagem do protótipo ── */
:root[data-theme] #page-channels .surface-state,
:root[data-theme] #page-contas .surface-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  border: 1px dashed var(--color-graphite);
  border-radius: var(--lx-r-card);
  background: transparent;
  color: var(--color-fog);
  font-size: 13px;
  text-align: center;
}
:root[data-theme] :is(#page-channels, #page-contas) .surface-state strong{
  color: var(--color-mist);
  font-weight: var(--lx-w-510);
}
:root[data-theme] :is(#page-channels, #page-contas) .surface-state button{
  min-height: var(--lx-h-btn-sm);
  padding: 0 10px;
  border-radius: var(--lx-r-md);
  border: 1px solid var(--color-graphite);
  background: transparent;
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  cursor: pointer;
}
:root[data-theme] :is(#page-channels, #page-contas) .surface-state button:hover{
  background: var(--lx-wash-hover);
  border-color: var(--color-smoke);
  color: var(--color-bone);
}
:root[data-theme] :is(#page-channels, #page-contas) .surface-state.is-error strong{
  color: var(--lx-coral-text);
}

/* ── bloco Evolution (evoc__* injetado com <style> próprio: sobrescrito aqui) ── */
:root[data-theme] #page-channels .cnx-evo{ margin-top: 24px; }
:root[data-theme] #page-channels .evoc__summary h3{
  font-size: 15px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.165px;
  color: var(--color-bone);
}
:root[data-theme] #page-channels .evoc__summary p{ color: var(--color-ash); }
:root[data-theme] #page-channels .evoc__list{
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-card);
  background: var(--color-obsidian);
}
:root[data-theme] #page-channels .evoc__row{
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-graphite);
}
:root[data-theme] #page-channels .evoc__name{
  font-size: 13px;
  font-weight: var(--lx-w-510);
  color: var(--color-bone);
}
:root[data-theme] #page-channels .evoc__meta{
  font-family: var(--lx-font-mono);
  font-size: 11px;
  color: var(--color-ash);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-channels .evoc__empty{
  padding: 32px 20px;
  border: 1px dashed var(--color-graphite);
  border-radius: var(--lx-r-card);
  color: var(--color-fog);
  font-size: 13px;
  text-align: center;
}
:root[data-theme] #page-channels .evoc__status[data-state="active"]{ color: var(--lx-green-text); }
:root[data-theme] #page-channels .evoc__status[data-state="active"]:before{ background: var(--color-pulse-green); }
:root[data-theme] #page-channels .evoc__status[data-state="connecting"]{ color: var(--lx-amber); }
:root[data-theme] #page-channels .evoc__status[data-state="connecting"]:before{ background: var(--lx-amber); }
:root[data-theme] #page-channels .evoc__actions button{
  border-radius: var(--lx-r-md);
  border: 1px solid var(--color-graphite);
  background: transparent;
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
}


/* ============================================================================
   2. PRODUCTS · bio pública (link-in-bio). O app.css já organiza o layout
   consumindo as vars --bio-*; aqui elas são remapeadas pros tokens Linear
   e o que estava hardcoded (vermelho de marca, LED, raios grandes) é
   reescrito. Acento de CTA vira lime; verde do status vira pulse-green.
   ========================================================================== */
:root[data-theme] #page-products{
  --bio-bg: var(--color-carbon);
  --bio-surface: var(--color-obsidian);
  --bio-card: var(--color-obsidian);
  --bio-ink: var(--color-bone);
  --bio-muted: var(--color-fog);
  --bio-line: var(--color-graphite);
  --bio-red: var(--color-acid-lime);
  --bio-green: var(--color-pulse-green);
  background: var(--color-carbon);
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
}

:root[data-theme] #page-products .bio-shell{
  max-width: none;
  margin: 0 auto;
  padding: 0 28px 64px;
}
:root[data-theme] #page-products .bio-topbar{
  min-height: var(--lx-h-topbar);
  padding: 0;
  border-bottom: 1px solid var(--color-graphite);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: var(--lx-w-510);
}
:root[data-theme] #page-products .bio-mark{
  color: var(--color-paper);
  font-size: 15px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.165px;
}
:root[data-theme] #page-products .bio-status{
  color: var(--color-ash);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
  letter-spacing: 0;
  text-transform: none;
}
:root[data-theme] #page-products .bio-status i{
  width: 6px;
  height: 6px;
  background: var(--color-pulse-green);
  box-shadow: none;
}

:root[data-theme] #page-products .bio-hero{
  padding: 56px 0 44px;
  gap: 40px;
}
:root[data-theme] #page-products .bio-kicker,
:root[data-theme] #page-products .bio-label{
  color: var(--color-ash);
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  text-transform: uppercase;
}
:root[data-theme] #page-products .bio-hero h1{
  margin: 12px 0 16px;
  letter-spacing: -.045em;
  color: var(--color-paper);
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-products .bio-hero h1 strong{
  color: var(--lx-lime-ink);
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-products .bio-hero-copy > p{
  color: var(--color-fog);
  font-size: 14px;
  line-height: 1.6;
  max-width: 560px;
}
:root[data-theme] #page-products .bio-proof{ gap: 6px; }
:root[data-theme] #page-products .bio-proof span{
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-pill);
  background: var(--lx-wash-hover);
  color: var(--color-mist);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
  letter-spacing: 0;
}
:root[data-theme] #page-products .bio-avatar{
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  padding: 8px;
}
:root[data-theme] #page-products .bio-avatar img{ filter: none; }
:root[data-theme] #page-products .bio-avatar > span{
  background: var(--color-pulse-green);
  border-color: var(--color-obsidian);
}

/* card de prioridade: obsidian, hairline, sem raio gigante */
:root[data-theme] #page-products .bio-priority{
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-card);
  background: var(--color-obsidian);
  box-shadow: none;
  transition: border-color .12s ease;
}
:root[data-theme] #page-products .bio-priority:hover{ border-color: var(--color-smoke); }
:root[data-theme] #page-products .bio-priority-body{ padding: 28px; gap: 24px; }
:root[data-theme] #page-products .bio-priority h2{
  color: var(--color-paper);
  letter-spacing: -.03em;
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-products .bio-priority p{ color: var(--color-fog); font-size: 13px; }
:root[data-theme] #page-products .bio-priority p strong{ color: var(--color-bone); }
:root[data-theme] #page-products .bio-priority-media{ background: var(--color-carbon); }

/* CTA: lime de sistema, sentença normal */
:root[data-theme] #page-products .bio-action,
:root[data-theme] #page-products .bio-module-cta{
  color: var(--lx-lime-ink);
  font-size: 13px;
  font-weight: var(--lx-w-510);
  letter-spacing: 0;
  text-transform: none;
}
:root[data-theme] #page-products .bio-action b,
:root[data-theme] #page-products .bio-module-cta b{ font-weight: var(--lx-w-reg); }

/* módulos: cards obsidian com thumb, hover só na borda */
:root[data-theme] #page-products .bio-links{ gap: 12px; margin-top: 12px; }
:root[data-theme] #page-products .bio-module{
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-card);
  background: var(--color-obsidian);
  box-shadow: none;
  min-height: 200px;
  transition: border-color .12s ease;
}
:root[data-theme] #page-products .bio-module:hover{
  transform: none;
  border-color: var(--color-smoke);
}
:root[data-theme] #page-products .bio-module:hover img{ transform: none; }
:root[data-theme] #page-products .bio-priority:hover img{ transform: none; }
:root[data-theme] #page-products .bio-thumb{ background: var(--color-carbon); }
:root[data-theme] #page-products .bio-module-content{ padding: 20px; }
:root[data-theme] #page-products .bio-module-top{
  color: var(--color-ash);
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
}
:root[data-theme] #page-products .bio-module-top b{
  color: var(--color-fog);
  font-weight: var(--lx-w-510);
}
:root[data-theme] #page-products .bio-module h3{
  margin: 16px 0 8px;
  color: var(--color-bone);
  font-size: 15px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.165px;
}
:root[data-theme] #page-products .bio-module p{
  color: var(--color-fog);
  font-size: 13px;
  line-height: 1.55;
}
:root[data-theme] #page-products .bio-feature{
  border-color: rgba(var(--lx-lime-rgb),.35);
}

/* galeria e rodapé */
:root[data-theme] #page-products .bio-gallery{
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-graphite);
}
:root[data-theme] #page-products .bio-gallery-head{
  color: var(--color-ash);
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
}
:root[data-theme] #page-products .bio-gallery-item{
  border-radius: var(--lx-r-md);
  border: 1px solid var(--color-graphite);
  background: var(--color-obsidian);
}
:root[data-theme] #page-products .bio-footer{
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-graphite);
  color: var(--color-ash);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
  letter-spacing: 0;
  text-transform: none;
}