/* Identidade visual propria do Octa Market (projeto 18.2, telas 16): por cima da estrutura de componentes.
   Design escolhido pelo Rangel em 10/11: base branca, cinzas frios, UMA cor de destaque so para a acao principal
   (violeta #047857 desde 11/11: o laranja lembrava a Shopee e o verde ja quer dizer "deu certo" no painel), Inter com espacamento negativo, cantos de 12px (etiquetas 6px), sem sombra: separacao por fundo
   e linha fina. Moldura (menu) escura. As variaveis (cores, cantos) ficam em octa-tokens.css. */

/* Tipo: Inter apertada, sem ligaduras contextuais; pesos 400/500/600 */
body { font-feature-settings: "calt" 0, "liga" 0, "ss03", "cv01", "cv10"; letter-spacing: -.01em; }
h1, h2, h3 { letter-spacing: -.02em; }
.page-header h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.page-header .eyebrow { color: var(--link); font-weight: 500; }
.panel__header h2 { font-weight: 600; letter-spacing: -.01em; }
.stat strong { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.stat p, .context-bar b, .data-table a, .text-link { font-weight: 600; }
.btn { font-weight: 600; }
.btn--plain { color: var(--ink); }
.btn--plain:hover { color: var(--link); }
.badge { border-radius: var(--radius-tag); }
.data-table code { border-radius: var(--radius-tag); }
.theme-toggle button { border-radius: 9px; }

/* Moldura escura; o item ativo leva o violeta so na marca da esquerda */
.nav-root.is-active, .nav-root.has-active-child, .nav-child.is-active { font-weight: 600; }
.nav-root.is-active, .nav-root.has-active-child { box-shadow: inset 2px 0 0 var(--octa-violeta-claro); }
.nav-child.is-active { color: #fff; }

/* Marca: simbolo + "octa" + "market" bem juntos; o ponto do octogono e violeta (claro sobre o menu escuro) */
/* Polvo do Octa (Rangel 11/11): desenho em assets/octa-polvo.svg usado como mascara, pintado na cor da marca */
.octa-polvo { display: inline-block; flex: 0 0 auto; background: var(--octa-violeta); -webkit-mask: url(/assets/octa-polvo.svg) center / contain no-repeat; mask: url(/assets/octa-polvo.svg) center / contain no-repeat; }
.sidebar .octa-polvo, .topbar .octa-polvo, html[data-theme="dark"] .octa-polvo { background: var(--octa-violeta-claro); }
.octa-logo { display: inline-flex; align-items: center; gap: 7px; color: inherit; line-height: 1; text-decoration: none; }
.octa-logo svg { flex: 0 0 auto; }
.octa-logo__nome { font-size: 18px; font-weight: 700; letter-spacing: -.045em; }
.octa-logo__sub { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; opacity: .6; margin-left: -3px; position: relative; top: 1px; }
.sidebar .octa-logo, .topbar .octa-logo { color: #fff; }

/* Telas sem menu (entrar, convite, senha): fundo abismo liso, caixa papel */
.octa-entrada { background: var(--octa-abismo) !important; }
.octa-entrada__caixa { box-shadow: none; }
.octa-entrada__caixa .octa-logo { color: var(--ink); margin-bottom: var(--space-5); }

.badge--octa { background: var(--action-soft); color: var(--link); }

/* Seletor de tema dentro da moldura escura */
.sidebar .octa-tema { background: var(--frame-field); border-color: var(--frame-field-border); }
.sidebar .octa-tema button { color: var(--frame-ink); }
.sidebar .octa-tema button:hover { background: var(--frame-active); }
.sidebar .octa-tema button[aria-pressed="true"] { background: var(--action); color: var(--on-action); }

/* O recuo de 8px da area branca empurra a pagina para baixo e deixava uma faixa clara no alto, que aparecia como um
   retangulo no canto arredondado (Rangel 11/11). O fundo da pagina com menu e o da moldura. */
body:has(> .app) { background: var(--frame); }
/* Causa da faixa: a margem de cima da area branca "vazava" para fora do menu (margin collapse), a pagina comecava 8px
   abaixo e ficava 8px maior que a tela. Com flow-root a margem fica dentro da moldura escura. */
.app__main { display: flow-root; }

/* Tela cheia (OCTA IA, 11/11): sem titulo nem caixa, o conteudo ocupa a area branca inteira ate o fim da tela. */
.app__canvas:has(> .octa-cheia) { display: flex; flex-direction: column; height: calc(100vh - 16px); min-height: 0; overflow: hidden; }
.app__content.octa-cheia { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 0; padding: 0; }
.octa-cheia > iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--bg); }
@media (max-width: 1024px) {
  .app__canvas:has(> .octa-cheia) { height: calc(100vh - 56px); }
  .octa-cheia > iframe { border-radius: 0; }
}

/* Fundo animado bem leve (assets/octa-fundo.js, Rangel 11/11): fica atras do conteudo da area branca e da tela de entrar */
.octa-fundo { position: fixed; top: 8px; bottom: 8px; left: 220px; right: 8px; width: calc(100vw - 228px); height: calc(100vh - 16px); border-radius: var(--radius-card); pointer-events: none; z-index: 0; }
.app__canvas.tem-fundo > :not(.octa-fundo) { position: relative; z-index: 1; }
.octa-entrada .octa-fundo { inset: 0; width: 100vw; height: 100vh; border-radius: 0; }
.octa-entrada.tem-fundo > :not(.octa-fundo) { position: relative; z-index: 1; }
@media (max-width: 1024px) { .octa-fundo { top: 56px; bottom: 0; left: 0; right: 0; width: 100vw; height: calc(100vh - 56px); border-radius: 0; } }
@media print { .octa-fundo { display: none; } }

/* Graficos de linha (assets/octa-grafico.js, "Chart" do Spell UI, Rangel 11/11): linha violeta, degrade suave, balao escuro */
.octa-grafico-painel .panel__header { flex-wrap: wrap; gap: var(--space-2); }
.octa-grafico__abas { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-sunken); box-shadow: 0 0 0 1px var(--border); }
.octa-grafico__abas button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.octa-grafico__abas button:hover { color: var(--ink); }
.octa-grafico__abas button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.octa-grafico { position: relative; padding: var(--space-2) var(--space-4) var(--space-3); touch-action: pan-y; outline: none; }
.octa-grafico > p { margin: 0; padding: var(--space-3) 0; }
.octa-grafico:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: var(--radius-card); }
.octa-grafico__svg { display: block; width: 100%; height: auto; overflow: visible; }
.octa-grafico__grade { stroke: var(--chart-grid); stroke-width: 1; }
.octa-grafico__eixo { fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.octa-grafico__linha { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.octa-grafico__linha--cinza { stroke: var(--border-strong); }
.octa-grafico__stop1 { stop-color: var(--accent); stop-opacity: .18; }
.octa-grafico__stop2 { stop-color: var(--accent); stop-opacity: 0; }
.octa-grafico__ponto-solo { fill: var(--accent); }
.octa-grafico__cursor { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.octa-grafico__ponto { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.octa-grafico__anel { fill: var(--accent); opacity: .16; }
.octa-grafico__cursor, .octa-grafico__ponto, .octa-grafico__anel, .octa-grafico__dica { transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .15s; }
.octa-grafico.sem-anim .octa-grafico__cursor, .octa-grafico.sem-anim .octa-grafico__ponto, .octa-grafico.sem-anim .octa-grafico__anel, .octa-grafico.sem-anim .octa-grafico__dica { transition: none; }
.octa-grafico__dica { position: absolute; top: 0; left: 0; pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px;
  background: var(--octa-abismo); color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.octa-grafico__dica small { font-size: 11px; color: var(--octa-bruma); }
.octa-grafico__dica b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.octa-grafico__dica.is-vazio b { color: var(--octa-bruma); font-weight: 500; }
html[data-theme="dark"] .octa-grafico__dica { background: #f3f3f7; color: #000710; }
html[data-theme="dark"] .octa-grafico__dica small, html[data-theme="dark"] .octa-grafico__dica.is-vazio b { color: var(--octa-grafite); }
.octa-grafico__nota { margin: 0; padding: 0 var(--space-4) var(--space-3); font-size: 12px; color: var(--muted); }
@media print { .octa-grafico__dica, .octa-grafico__cursor, .octa-grafico__anel, .octa-grafico__ponto { display: none; } }

/* Versao Alpha (Rangel 11/11): selo ao lado da marca e aviso no pe de cada tela */
.octa-alpha { display: inline-block; flex: 0 0 auto; height: 18px; line-height: 18px; padding: 0 7px; vertical-align: middle; border-radius: 999px; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  color: var(--octa-violeta-claro, #34d399); background: rgba(4, 120, 87, .18); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35); cursor: help; }
.sidebar__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sidebar__head .sidebar__home { display: inline-flex; align-items: center; }
.topbar { align-items: center; }
.topbar .octa-alpha { margin-left: 8px; }
.sidebar__head .octa-alpha { margin-left: 35px; }
.octa-entrada__marca { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); }
.octa-entrada__caixa .octa-entrada__marca .octa-logo { margin-bottom: 0; }
.octa-entrada__caixa .octa-alpha { color: var(--accent); background: rgba(4, 120, 87, .12); box-shadow: inset 0 0 0 1px rgba(4, 120, 87, .3); }
.octa-vazio-acoes { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.octa-versao { margin: var(--space-8) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.5; }
.octa-cheia + .octa-versao, .octa-cheia .octa-versao { display: none; }

/* Caixa de marcar dentro de formulario: tamanho de caixa, nao de campo de texto (Arquivos e outras telas) */
.form-field input[type="checkbox"], .form-field input[type="radio"], .octa-check input { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; box-shadow: none; }
.octa-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.octa-check small { color: var(--muted); }
.toolbar .octa-check { height: 32px; }
/* Campo de busca da barra de filtros: sem a setinha de lista */
input.filter-select { background-image: none; padding-right: 10px; max-width: 100%; }
@media (min-width: 700px) { input.filter-select { min-width: 220px; } }
/* Escolher arquivo */
.form-field input[type="file"] { padding: 5px; min-height: 36px; font-size: 13px; }
.form-field input[type="file"]::file-selector-button { margin-right: 10px; padding: 4px 10px; border: 0; border-radius: 7px; background: var(--surface-sunken); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
/* Cartoes de numero seguidos da barra de filtros */
.app__content > .octa-cartoes + .toolbar { margin-top: 0; }
.app__content > .toolbar { margin-bottom: var(--space-4); }
/* Cartao de numero que funciona como aba (Ordens) */
a.octa-cartao.is-ativo { box-shadow: inset 0 0 0 2px var(--accent); }
.octa-cartao b.octa-num { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
/* Envio recolhido (Arquivos) */
.octa-recolhe > summary { list-style: none; cursor: pointer; }
.octa-recolhe > summary::-webkit-details-marker { display: none; }
.octa-recolhe > summary .octa-recolhe__seta { transition: transform .15s; }
.octa-recolhe[open] > summary .octa-recolhe__seta { transform: rotate(180deg); }
.octa-envio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-4); align-items: start; }
@media (min-width: 900px) { .octa-envio { grid-template-columns: repeat(3, 1fr); } }
.octa-envio .form-field { max-width: none; align-content: start; }
.octa-envio__titulo { grid-column: 1 / -1; margin: var(--space-2) 0 var(--space-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.octa-envio__fim { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.octa-arquivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.octa-arquivo { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); }
.octa-arquivo:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.octa-arquivo img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: var(--surface-sunken); }
.octa-arquivo > input { position: absolute; top: calc(var(--space-3) + 8px); left: calc(var(--space-3) + 8px); width: 18px; height: 18px; }
.octa-arquivo b { font-size: 13px; }
.octa-selecao { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.octa-grafico__abas .btn { min-height: 0; height: auto; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.octa-grafico__abas .btn.is-ativo { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.octa-ordem__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.octa-cartoes--abas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { min-width: 0; } .stat strong .val--indisponivel { font-size: 15px; font-weight: 600; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.octa-entrada__caixa .octa-versao { margin-top: var(--space-5); }
@media (max-width: 760px) { .toolbar__group { width: 100%; } .toolbar .filter-select { flex: 1 1 100%; width: 100%; } }

/* Carregando: o polvo mexendo os bracos (botoes enviando, graficos, OCTA IA) */
@keyframes octa-polvo-nada { 0%, 100% { transform: rotate(-8deg) scale(1, 1); } 25% { transform: rotate(0deg) scale(1.06, .94); } 50% { transform: rotate(8deg) scale(1, 1); } 75% { transform: rotate(0deg) scale(.94, 1.06); } }
.octa-carregando { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; background: currentColor; -webkit-mask: url(/assets/octa-polvo.svg) center / contain no-repeat; mask: url(/assets/octa-polvo.svg) center / contain no-repeat;
  animation: octa-polvo-nada 1.1s ease-in-out infinite; transform-origin: 50% 40%; }
.octa-carregando--g { width: 44px; height: 44px; color: var(--accent); }
.btn.is-carregando { pointer-events: none; opacity: .85; }
.btn.is-carregando .octa-carregando { margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .octa-carregando { animation: none; } }
@media (max-width: 760px) { .octa-cartoes--abas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } .octa-cartoes--abas .octa-cartao { padding: 8px 10px; } .octa-cartoes--abas .octa-num { font-size: 18px; } }

/* Filtros recolhiveis (acabamento 11/11): no computador abertos; no celular uma linha com o que esta escolhido */
.octa-filtros-recolhe { margin-bottom: var(--space-4); }
.octa-filtros-recolhe > summary { display: none; }
.octa-filtros-recolhe > .toolbar { margin-bottom: 0; }
@media (max-width: 760px) {
  .octa-filtros-recolhe > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px var(--space-4); border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; list-style: none; font-size: 13px; }
  .octa-filtros-recolhe > summary::-webkit-details-marker { display: none; }
  .octa-filtros-recolhe > summary span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
  .octa-filtros-recolhe > summary b { font-weight: 600; text-align: right; }
  .octa-filtros-recolhe[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .octa-filtros-recolhe[open] > .toolbar { border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* Acabamento 11/11: um estilo so de cartao de numero. Os cartoes .octa-cartao (rotulo + numero) ficam iguais aos .stat da Visao geral. */
.octa-cartao:not(:has(img)) { padding: 18px var(--space-5); gap: 10px; }
.octa-cartao:not(:has(img)) > small:first-child { color: var(--ink); font-size: 13px; font-weight: 600; }
.octa-cartao:not(:has(img)) > b { color: var(--ink); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.octa-cartao:not(:has(img)) > small:not(:first-child) { color: var(--muted); font-size: 12px; margin-top: -4px; }
.octa-cartao > b .selo, .octa-cartao > b .badge { font-size: 13px; letter-spacing: 0; }
@media (max-width: 760px) { .octa-cartao:not(:has(img)) { padding: 14px var(--space-4); } .octa-cartao:not(:has(img)) > b { font-size: 20px; } }
.data-table th { position: relative; }
@media (max-width: 760px) { .stat { padding: 14px var(--space-4); } .stat strong { font-size: 19px; } }
/* menu (Rangel 11/11 "administrativo torto"): a setinha nao divide espaco com o nome; nome numa linha so */
.nav-root .nav-root__chevron { flex: 0 0 auto; display: inline-flex; }
.nav-root > span:not(.nav-root__chevron) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Seletor de periodo como o do Bling (Rangel 11/11): botao + quadro com a grade dos meses e os atalhos */
.octa-periodo { position: relative; }
.octa-periodo > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 220px; white-space: nowrap; }
.octa-periodo > summary::-webkit-details-marker { display: none; }
.octa-periodo > summary svg { color: var(--accent); flex: 0 0 auto; }
.octa-periodo > summary small { color: var(--muted); font-size: 12px; }
.octa-periodo[open] > summary { box-shadow: 0 0 0 2px var(--focus); }
.octa-periodo__quadro { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 520px; max-width: calc(100vw - 32px); box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card);
  background: var(--surface-raised); box-shadow: 0 0 0 1px var(--border-strong), 0 16px 40px rgba(0, 0, 0, .18); }
.octa-periodo__ano { border: 0; margin: 0; padding: 0; min-width: 0; }
.octa-periodo__ano[hidden] { display: none; }
.octa-periodo__ano legend { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0 0 var(--space-3); }
.octa-periodo__ano legend b { font-size: 15px; }
.octa-periodo__seta { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.octa-periodo__seta:hover:not(:disabled) { background: var(--surface-subtle); }
.octa-periodo__seta:disabled { opacity: .25; cursor: default; }
.octa-periodo__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.octa-periodo__mes input, .octa-periodo__atalho input { position: absolute; opacity: 0; pointer-events: none; }
.octa-periodo__mes span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 8px; font-size: 13px; font-weight: 550; cursor: pointer; }
.octa-periodo__mes span:hover { background: var(--surface-subtle); }
.octa-periodo__mes input:checked + span { background: var(--action); color: var(--on-action); }
.octa-periodo__mes input:focus-visible + span, .octa-periodo__atalho input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.octa-periodo__mes.is-futuro span { opacity: .3; cursor: default; }
.octa-periodo__mes.is-futuro span:hover { background: transparent; }
.octa-periodo__atalhos { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--divider); padding-left: var(--space-3); }
.octa-periodo__atalho span { display: block; padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 550; cursor: pointer; }
.octa-periodo__atalho span:hover { background: var(--surface-subtle); }
.octa-periodo__atalho input:checked + span { background: var(--action-soft); color: var(--link); }
.octa-periodo__datas { display: none; flex-direction: column; gap: 6px; padding: 6px 2px 0; }
.octa-periodo__atalhos:has(input[value=personalizado]:checked) .octa-periodo__datas { display: flex; }
.octa-periodo__datas label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.octa-periodo__datas input { width: 100%; min-width: 0; }
.octa-periodo__acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--divider); }
@media (max-width: 760px) {
  .octa-periodo, .octa-periodo > summary { width: 100%; min-width: 0; }
  .octa-periodo__quadro { position: static; width: 100%; max-width: none; margin-top: var(--space-2); grid-template-columns: 1fr; box-shadow: 0 0 0 1px var(--border-strong); }
  .octa-periodo__atalhos { border-left: 0; padding-left: 0; border-top: 1px solid var(--divider); padding-top: var(--space-2); }
}

/* Vendas > Anúncios em cartões (Rangel 11/11: "lista muito rústica"): foto grande, preço e estoque em destaque */
.octa-ver { margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-sunken); box-shadow: 0 0 0 1px var(--border); }
.octa-ver a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.octa-ver a:hover { color: var(--ink); }
.octa-ver a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.octa-anuncios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.octa-anuncio { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-card, 12px); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color .15s; }
.octa-anuncio:hover { border-color: var(--border-strong, var(--border)); }
.octa-anuncio:has(input:checked) { border-color: var(--action); outline: 1px solid var(--action); }
.octa-anuncio__foto { display: block; }
.octa-anuncio__img, .octa-anuncio__mini { position: relative; display: grid; place-items: center; overflow: hidden; background: #fff; }
.octa-anuncio__img { aspect-ratio: 4 / 5; border-bottom: 1px solid var(--border); }
.octa-anuncio__img img, .octa-anuncio__mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.octa-anuncio__img img { object-fit: cover; object-position: center 30%; transition: transform .25s; }
.octa-anuncio:hover .octa-anuncio__img img { transform: scale(1.04); }
.octa-anuncio__img .octa-polvo { width: 38%; height: 38%; opacity: .25; }
.octa-anuncio__mini { width: 44px; height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); }
.octa-anuncio__mini img { object-fit: cover; object-position: center top; }
.octa-anuncio__mini .octa-polvo { width: 22px; height: 22px; opacity: .25; }
html[data-theme="dark"] .octa-anuncio__img, html[data-theme="dark"] .octa-anuncio__mini { background: #fff; }
.octa-anuncio__marca { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; }
.octa-anuncio__marca input { margin: 0; width: 16px; height: 16px; accent-color: var(--action); cursor: pointer; }
.octa-anuncio__sit { position: absolute; top: 10px; right: 10px; z-index: 2; }
.octa-anuncio__corpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; min-width: 0; }
.octa-anuncio__loja { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.octa-mkt { flex: 0 0 auto; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 16px; }
.octa-mkt--mercado_livre { background: #FFE600; color: #2D3277; }
.octa-mkt--shopee { background: #EE4D2D; color: #fff; }
.octa-mkt--shein, .octa-mkt--tiktok_shop { background: #111; color: #fff; }
.octa-anuncio__titulo { color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.octa-anuncio__titulo::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.octa-anuncio__titulo:hover { color: var(--action-text, var(--action)); }
.octa-anuncio__titulo:focus-visible { outline: none; }
.octa-anuncio:has(.octa-anuncio__titulo:focus-visible) { border-color: var(--action); outline: 1px solid var(--action); }
.octa-anuncio__id { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.octa-anuncio__numeros { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.octa-anuncio__numeros b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.octa-anuncio__numeros span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.octa-anuncio__vinculo { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .octa-anuncios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .octa-anuncio__corpo { padding: 10px; }
  .octa-anuncio__numeros { flex-direction: column; align-items: flex-start; gap: 0; }
  .octa-anuncio__numeros b { font-size: 16px; }
  .octa-ver a { padding: 5px 8px; }
}
.octa-anuncios-lista td:has(> input[type="checkbox"]), .octa-anuncios-lista td:has(> .octa-anuncio__mini), .octa-anuncios-lista th:first-child { width: 1%; }
.octa-anuncios-lista td:has(> .octa-anuncio__mini) { padding-right: 0; }
.data-table td input[type="checkbox"], .data-table td input[type="radio"] { width: 16px; min-width: 0; height: 16px; padding: 0; accent-color: var(--action); cursor: pointer; }
#f-comparar.octa-acoes { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* Números por loja em linguagem simples (Rangel 11/11: "qualquer pessoa bata o olho e entenda") */
.octa-loja .octa-mes { padding: 18px 20px; border-top: 1px solid var(--divider); }
.octa-loja .octa-mes:first-of-type { border-top: 0; }
.octa-mes__topo h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.octa-mes--atual .octa-mes__topo h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.octa-mes__grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.octa-destaques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.octa-destaque { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.octa-destaque:first-child { grid-column: 1 / -1; }
.octa-destaque > span { font-size: 13px; color: var(--muted); font-weight: 500; }
.octa-destaque strong { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.octa-destaque:not(:first-child) strong { font-size: 22px; }
.octa-destaque small { font-size: 12.5px; color: var(--muted); }
.octa-destaque--sobra { border-color: color-mix(in srgb, var(--action) 45%, var(--border)); background: color-mix(in srgb, var(--action) 7%, var(--surface)); }
.octa-destaque--sobra strong { color: var(--action-text, var(--action)); }
.octa-destaque strong .octa-sem-dado { font-size: 16px; }
.octa-mes__conta h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.octa-conta { margin: 0; display: flex; flex-direction: column; }
.octa-conta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--divider); }
.octa-conta dt { font-size: 14px; } .octa-conta dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.octa-conta .is-menos dt, .octa-conta .is-menos dd { color: var(--muted); font-weight: 500; }
.octa-conta .is-sub { border-bottom-style: solid; }
.octa-conta .is-total { border-bottom: 0; padding-top: 10px; }
.octa-conta .is-total dt { font-weight: 700; } .octa-conta .is-total dd { font-size: 17px; font-weight: 700; color: var(--action-text, var(--action)); }
.octa-conta__nota { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.octa-sem-dado { color: var(--muted); font-weight: 500; font-style: italic; }
.octa-incompleto { vertical-align: 3px; font-size: 11px; cursor: help; }
.octa-loja details.octa-mes { padding: 0; }
.octa-mes__linha { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(130px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) 20px; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; list-style: none; }
.octa-mes__linha::-webkit-details-marker { display: none; }
.octa-mes__linha:hover { background: var(--surface-sunken); }
.octa-mes__nome { font-weight: 600; }
.octa-mes__qtd { font-size: 13px; color: var(--muted); }
.octa-mes__val { display: flex; flex-direction: column; font-weight: 600; font-variant-numeric: tabular-nums; }
.octa-mes__val small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.octa-mes__val--sobra { color: var(--action-text, var(--action)); }
.octa-mes__abrir { color: var(--muted); transition: transform .15s; display: grid; place-items: center; }
details[open] > .octa-mes__linha .octa-mes__abrir { transform: rotate(180deg); }
.octa-mes__corpo { padding: 4px 20px 18px; max-width: 560px; }
.octa-variacao { font-size: 11.5px; font-weight: 600; }
.octa-variacao.is-sobe { color: var(--success-text, #047857); } .octa-variacao.is-desce { color: var(--danger-text, #B91C1C); }
.octa-loja__fonte { margin: 0; padding: 12px 20px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--divider); }
@media (max-width: 900px) {
  .octa-mes__grade { grid-template-columns: 1fr; }
  .octa-mes__linha { grid-template-columns: 1fr 1fr 20px; padding: 12px 16px; }
  .octa-mes__qtd { grid-column: 1; grid-row: 2; }
  .octa-mes__val { grid-row: 1 / 3; } .octa-mes__val:not(.octa-mes__val--sobra) { display: none; }
  .octa-mes__abrir { grid-column: 3; grid-row: 1 / 3; }
  .octa-loja .octa-mes { padding: 16px; } .octa-loja details.octa-mes { padding: 0; } .octa-mes__corpo { padding: 4px 16px 16px; }
  .octa-destaque strong { font-size: 24px; } .octa-destaque:not(:first-child) strong { font-size: 19px; }
}

/* Conectar loja nova: uma caixa por plataforma */
.octa-integracoes { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.octa-integracao { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--color-border, #E5E7EB); border-radius: 12px; }
.octa-integracao small { color: var(--color-text-muted, #6B7280); min-height: 2.6em; }
.octa-integracao .btn, .octa-integracao .badge { margin-top: auto; }
.octa-integracao.is-embreve { opacity: .7; }
.octa-mkt--nuvemshop { background: #0050C3; color: #fff; }
.octa-mkt--shopify { background: #5E8E3E; color: #fff; }
.octa-mkt--woocommerce { background: #7F54B3; color: #fff; }
.octa-mkt--yampi { background: #E6007E; color: #fff; }
.octa-integracao__form { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }
.octa-integracao__form input { width: 100%; min-width: 0; }
.octa-integracao__form .btn { align-self: flex-start; margin-top: 0; }

/* Lista simples dentro de painel e acoes no fim da pagina (produtos em lote, primeiros passos; 12/11) */
.octa-lista { margin: 0; padding-left: 1.2em; }
.octa-lista li { margin: 4px 0; }
.octa-acoes-fim { margin: var(--space-4) 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.octa-inicio-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.octa-inicio-passo { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-3); align-items: start; }
.octa-inicio-passo b { display: block; }
.octa-inicio-passo small { display: block; color: var(--muted); margin-top: 2px; }
.octa-inicio-passo__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; border: 1.5px solid var(--border-strong); }
.octa-inicio-passo.is-feito .octa-inicio-passo__n { background: var(--octa-esmeralda, #047857); border-color: transparent; color: #fff; }
.octa-inicio-passo.is-feito b { color: var(--muted); font-weight: 500; }
.octa-progresso { display: grid; grid-template-columns: minmax(80px, 160px) 1fr 44px; gap: var(--space-2); align-items: center; margin-top: 6px; font-size: 13px; }
.octa-progresso b { text-align: right; font-variant-numeric: tabular-nums; }
.octa-progresso__trilho { height: 8px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; }
.octa-progresso__trilho i { display: block; height: 100%; background: var(--octa-esmeralda, #047857); border-radius: 99px; }
@media (max-width: 640px) { .octa-inicio-passo { grid-template-columns: 32px 1fr; } .octa-inicio-passo > .btn { grid-column: 2; justify-self: start; } }
.octa-qr { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin: var(--space-3) 0; }
.octa-qr #octa-qr { width: 180px; height: 180px; background: #fff; border-radius: var(--radius-card); padding: 4px; }
.octa-qr #octa-qr svg { width: 100%; height: 100%; display: block; }
.octa-qr > div:last-child { display: grid; gap: 4px; }
.octa-chave { font-size: 15px; letter-spacing: .04em; user-select: all; }
.octa-reservas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); list-style: none; padding: 0; }
.octa-reservas code { font-size: 15px; }
.octa-codigo { font-size: 20px; letter-spacing: .2em; text-align: center; }

/* Paginas publicas de privacidade, termos e tratamento de dados (LGPD, 12/11) */
.octa-legal { background: var(--bg, #fff); color: var(--ink); }
.octa-legal__caixa { max-width: 760px; margin: 0 auto; padding: var(--space-8, 40px) var(--space-4, 16px) var(--space-10, 64px); line-height: 1.6; }
.octa-legal__caixa .octa-entrada__marca { margin-bottom: var(--space-6, 24px); }
.octa-legal__caixa .octa-entrada__marca a { color: var(--ink); text-decoration: none; }
.octa-legal__caixa h1 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 4px; }
.octa-legal__caixa h2 { font-size: 18px; margin: var(--space-6, 24px) 0 var(--space-2, 8px); }
.octa-legal__caixa ul { padding-left: 20px; }
.octa-legal__caixa li { margin: 4px 0; }
.octa-legal__caixa hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8, 40px) 0 var(--space-4, 16px); }
.octa-legal-links { font-size: 13px; color: var(--muted); }
.octa-entrada .octa-legal-links { margin-top: var(--space-3, 12px); text-align: center; }
.octa-subtitulo { font-size: 15px; margin: var(--space-5, 20px) 0 var(--space-1, 4px); }
/* Menu enxuto (12/11): link no fim do menu para mostrar as telas guardadas */
.octa-menu-tudo { display: block; margin: var(--space-3, 12px) var(--space-3, 12px) 0; padding: 8px 10px; font-size: 12px; color: rgba(255,255,255,.62); text-decoration: none; border-radius: 8px; border: 1px dashed rgba(255,255,255,.18); }
.octa-menu-tudo:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* Tabela larga vira cartoes no celular (analise 12/11): cada linha e um cartao, cada celula mostra o titulo da coluna */
@media (max-width: 640px) {
  .table-scroll:has(.data-table--cartoes) { overflow: visible; }
  .table-scroll > .data-table--cartoes { min-width: 0; }
  .data-table--cartoes, .data-table--cartoes tbody, .data-table--cartoes tr, .data-table--cartoes td { display: block; width: 100%; }
  .data-table--cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--cartoes tr { padding: 10px var(--space-4); border-bottom: 1px solid var(--border); }
  .data-table--cartoes tr:last-child { border-bottom: 0; }
  .data-table--cartoes td { display: flow-root; padding: 4px 0; border: 0; text-align: right; min-height: 0; }
  .data-table--cartoes td.num { text-align: right; }
  .data-table--cartoes td[data-rotulo]::before { content: attr(data-rotulo); float: left; margin-right: 12px; max-width: 48%; text-align: left; color: var(--muted); font-size: 12px; font-weight: 500; }
  .data-table--cartoes td:first-child { text-align: left; font-weight: 600; }
  .data-table--cartoes td:first-child::before { display: none; }
  .data-table--cartoes td:empty { display: none; }
  .data-table--cartoes .data-table__vazio td { display: block; text-align: left; }
  .data-table--cartoes td input:not([type=hidden]), .data-table--cartoes td select { min-width: 0; max-width: 60%; }
}