* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #f4f5f7; color: #1f2430; }
/* Faixa fixa no topo avisando qual banco está ativo (teste ou real) — pra
   nunca ter dúvida olhando a tela em qual ambiente você está mexendo. */
.env-banner { text-align: center; padding: 5px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.env-banner-teste { background: #fef3c7; color: #92400e; }
.env-banner-real { background: #dc2626; color: #fff; }

.topbar { display: flex; align-items: center; gap: 24px; background: #bbf7d0; color: #14532d; padding: 12px 20px; flex-wrap: wrap; position: relative; }
.topbar .logo { font-weight: 700; font-size: 1.1rem; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; align-items: center; }
.topbar nav > a { color: #166534; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-size: 0.92rem; }
.topbar nav > a:hover { background: #86efac; color: #14532d; }
.topbar nav > a.active { background: #16a34a; color: #fff; }
.dropdown { position: relative; }
.dropdown summary { list-style: none; cursor: pointer; color: #166534; padding: 8px 12px; border-radius: 6px; font-size: 0.92rem; user-select: none; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::after { content: ' \25BE'; font-size: 0.7rem; }
.dropdown summary:hover { background: #86efac; color: #14532d; }
.dropdown summary.active { background: #16a34a; color: #fff; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); min-width: 200px; z-index: 50; overflow: hidden; }
.dropdown-menu a { display: block; padding: 10px 14px; color: #1f2937; text-decoration: none; font-size: 0.9rem; }
.dropdown-menu a:hover { background: #f3f4f6; }
.dropdown-menu a.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
.user-box { font-size: 0.9rem; color: #166534; }
.user-box a { color: #15803d; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 1.5rem; margin-bottom: 4px; }
.subtitle { color: #6b7280; margin-bottom: 20px; }
/* Padrão único de destaque de bloco/módulo, usado em todo o site — qualquer
   ajuste futuro de "quanto um card se separa do fundo" muda aqui, não em
   cada página. Borda sutil + sombra um pouco mais visível que antes (era
   quase imperceptível), sem introduzir cor nova na paleta. */
.card { background: #fff; border-radius: 10px; padding: 20px; border: 1px solid #e5e7eb; box-shadow: 0 2px 6px rgba(0,0,0,0.10); margin-bottom: 20px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.stat .label { color: #6b7280; font-size: 0.85rem; }
.stat .value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; font-size: 0.92rem; }
th { color: #6b7280; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

/* Cada linha da tabela cabe numa linha só, sem quebrar (sem diminuir fonte) —
   se não couber na largura do card, rola horizontalmente em vez de quebrar
   célula. Usado nos relatórios com muitas colunas financeiras lado a lado. */
.tabela-linha-unica { overflow-x: auto; }
.tabela-linha-unica table th, .tabela-linha-unica table td { white-space: nowrap; }
form.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.8rem; color: #6b7280; }

/* Formulário de filtro dos relatórios de Compra/Venda: grid em vez do
   .inline flex genérico — os campos de checkbox (Fornecedor/Cliente,
   Subcategoria) têm altura bem maior que os selects/inputs simples, e no
   flex isso deixava tudo desalinhado e "flutuando" sem estrutura. Cada
   campo ocupa sua própria célula, com o label sempre no topo; os botões
   ficam numa linha própria embaixo, ocupando a largura toda. Classe
   separada de .form-lancamento pra não afetar os outros formulários do
   sistema que usam .inline. */
.form-relatorio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; align-items: start; margin-bottom: 4px; }
.form-relatorio .field label { font-weight: 600; color: #374151; }
.form-relatorio .field > input, .form-relatorio .field > select { width: 100%; }
.form-relatorio-acoes { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.form-relatorio .campo-span2 { grid-column: span 2; }

/* Campo de escolha de pessoa (Fornecedor/Cliente) recolhido por padrão —
   fechado, "Todos" já vale sem precisar abrir nada; só expande quando o
   usuário clica pra escolher específicos. */
.form-relatorio details > summary { cursor: pointer; list-style: none; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.92rem; font-weight: 600; color: #374151; user-select: none; }
.form-relatorio details > summary::-webkit-details-marker { display: none; }
.form-relatorio details > summary::after { content: '\25BE'; float: right; color: #6b7280; }
.form-relatorio details[open] > summary::after { content: '\25B4'; }
.form-relatorio details[open] > summary { margin-bottom: 8px; }

/* Variante de 4 colunas fixas — usada só em Relatório de Compras/Vendas, que
   têm campos demais pra caber direito no auto-fit genérico do .form-relatorio
   (sobrava campo "sozinho" numa linha, com espaço vazio desproporcional do
   lado). Com número fixo de colunas os campos ficam sempre em no máximo 2
   linhas, do mesmo tamanho, ocupando a largura toda — os campos de busca
   (cliente/fornecedor, produto) usam .campo-span2 pra ficar maiores (o dobro
   da largura), e os campos restantes de cada linha (Categoria/Agrupar)
   também ganham .campo-span2 pra fechar a segunda linha sem buraco. */
.form-relatorio-4col { grid-template-columns: repeat(4, 1fr); }
input, select, textarea { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.92rem; font-family: inherit; }
textarea { resize: vertical; width: 100%; }
button { background: #2563eb; color: #fff; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 0.92rem; }
button:hover { background: #1d4ed8; }
button.secondary { background: #6b7280; }
button.danger { background: #dc2626; }
button.danger:hover { background: #b91c1c; }
button.small { padding: 5px 10px; font-size: 0.8rem; }
/* Botão de ação em lançamento automático (Caixa) — parece desabilitado, mas
   continua clicável de propósito: o clique mostra o aviso explicando o
   motivo, em vez de simplesmente não fazer nada. */
button.travado { opacity: 0.45; cursor: not-allowed; }
/* Link com aparência de botão (ex: "Ver pedido") — opt-in via classe .btn,
   não afeta nenhum link existente no site. */
a.btn { display: inline-block; text-decoration: none; background: #2563eb; color: #fff; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 0.92rem; }
a.btn:hover { background: #1d4ed8; }
a.btn.secondary { background: #6b7280; }
a.btn.small { padding: 5px 10px; font-size: 0.8rem; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.92rem; }
.flash-sucesso { background: #dcfce7; color: #166534; }
.flash-erro { background: #fee2e2; color: #991b1b; }
.login-box { max-width: 360px; margin: 80px auto; background: #fff; padding: 28px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; }
.badge-baixo { background: #fee2e2; color: #991b1b; }
.badge-alto { background: #dcfce7; color: #166534; }
/* Convenção geral pra qualquer registro/relatório financeiro: crédito ou
   saldo positivo em azul, débito ou saldo negativo em vermelho — usada em
   valores de caixa, saldo de troco, resultado de DRE/auditoria, margem de
   contribuição etc. Ver classeSaldo() em config.php. */
.valor-credito { color: #2563eb; font-weight: 600; white-space: nowrap; }
.valor-debito { color: #dc2626; font-weight: 600; white-space: nowrap; }
.badge-credito { background: #dbeafe; color: #2563eb; }
.badge-debito { background: #fee2e2; color: #dc2626; }

/* Tarja de destaque do saldo de troco no popup de pendências (entradas.php/
   saidas.php) — cor decidida em JS conforme quem deve a quem. */
.saldo-tarja { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-weight: 700; font-size: 1rem; }
.saldo-tarja-favor { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.saldo-tarja-deve { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.valor-entrada { color: #2563eb; font-weight: 600; white-space: nowrap; }
.valor-saida { color: #991b1b; font-weight: 600; white-space: nowrap; }

/* Campo de busca com autocomplete (cliente/fornecedor nos relatórios) */
.autocomplete-wrap { position: relative; display: flex; flex-direction: column; gap: 4px; }
.autocomplete-list { display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; min-width: 220px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto; z-index: 60; }
.autocomplete-list.visible { display: block; }
.autocomplete-item { padding: 8px 12px; font-size: 0.9rem; cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.active { background: #eff6ff; }
.autocomplete-cadastrar { color: #2563eb; font-weight: 600; }

/* DRE: resultado (lucro/prejuízo) */
.dre-linha { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e5e7eb; font-size: 1rem; }
.dre-linha:last-of-type { border-bottom: none; }
.dre-label { color: #4b5563; }
.dre-valor { font-weight: 600; }
/* Valor + percentual (análise vertical, % da Receita total) agrupados à
   direita de cada linha do DRE — largura fixa no percentual pra alinhar
   verticalmente entre as linhas, independente do tamanho do valor em R$. */
.dre-valores { display: flex; align-items: baseline; gap: 14px; }
.dre-percentual { display: inline-block; min-width: 58px; text-align: right; color: #9ca3af; font-size: 0.85rem; font-weight: 400; }
.dre-resultado .dre-percentual { color: inherit; opacity: 0.75; font-size: 0.95rem; }
.dre-resultado { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 10px; margin-top: 12px; font-size: 1.15rem; font-weight: 700; }

/* Árvore de 3 níveis do DRE (Categoria > Subcategoria > Lançamentos),
   accordion aninhado — fechado por padrão, só a Categoria com o total já
   aparece. Mesmo padrão estético da árvore de Categorias Financeiras
   (categorias_financeiras.php): fonte reduzida e badge quadrado "+"/"−" no
   lugar de seta, pra manter harmonia visual entre as duas telas. */
.dre-arvore { margin: 4px 0 12px 0; font-size: 0.82rem; }
.dre-arvore-nivel1, .dre-arvore-nivel2 { border-radius: 6px; }
.dre-arvore-nivel1 > summary, .dre-arvore-nivel2 > summary {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; list-style: none; padding: 5px 8px; font-size: 0.82rem;
}
.dre-arvore-nivel1 > summary::-webkit-details-marker,
.dre-arvore-nivel2 > summary::-webkit-details-marker { display: none; }
/* O badge fica dentro do span do título (não solto na summary), senão o
   display:flex + justify-content:space-between da summary trataria ele como
   um 3º item e o afastaria do nome em vez de colar nele. */
.dre-arvore-titulo { display: inline-flex; align-items: center; gap: 6px; }
.dre-arvore-titulo::before {
    content: '+';
    flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #d1d5db; border-radius: 4px; background: #f9fafb; color: #2563eb;
    font-weight: 700; font-size: 0.75rem; line-height: 1;
}
details[open] > summary > .dre-arvore-titulo::before { content: '−'; }
.dre-arvore-nivel1 > summary:hover, .dre-arvore-nivel2 > summary:hover { background: #eff6ff; }
.dre-arvore-nivel1 { background: #f9fafb; margin-bottom: 4px; }
.dre-arvore-nivel1 > summary { font-weight: 600; color: #374151; }
.dre-arvore-nivel2 { margin: 2px 0 2px 20px; }
.dre-arvore-nivel2 > summary { color: #4b5563; }
.dre-arvore-lancamentos { margin: 0 0 6px 40px; width: calc(100% - 40px); font-size: 0.8rem; }
.dre-arvore-lancamentos td { padding: 3px 10px; font-size: 0.8rem; color: #6b7280; border-bottom: 1px solid #f3f4f6; }
.dre-resultado.lucro { background: #dbeafe; color: #1d4ed8; }
.dre-resultado.prejuizo { background: #fee2e2; color: #991b1b; }
.page-header-actions { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
tfoot td { border-top: 2px solid #d1d5db; border-bottom: none; padding-top: 12px; }

/* Exclusão lógica (entradas/saídas anuladas) */
.badge-anulado { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 4px; background: #fee2e2; color: #dc2626; font-weight: 700; font-size: 0.85rem; cursor: help; }
tr.linha-anulada td { color: #9ca3af; }
tr.linha-anulada { background: #fafafa; }

/* Modais de editar/anular (entradas e saídas) */
dialog.modal { border: none; border-radius: 10px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); max-width: 480px; width: 90vw; }
dialog.modal::backdrop { background: rgba(15, 23, 42, 0.5); }
dialog.modal h3 { margin-top: 0; }
dialog.modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Mini calendário ano/mês do filtro "Pesquisar por Mês" (relatorio_dre_proprio.php)
   — grade compacta de 12 meses, em vez de uma lista suspensa longa. */
.mes-picker-ano { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; font-size: 1.1rem; font-weight: 700; color: #374151; }
.mes-picker-ano button { padding: 4px 12px; }
.mes-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mes-picker-botao { padding: 12px 4px; font-weight: 600; }

/* Formulário de lançamento manual (Caixa) — usa a largura toda do card, com
   mais espaço pro campo de descrição (grid em vez do .inline flex genérico,
   pra não afetar os outros formulários do sistema que usam .inline). */
.form-lancamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; align-items: end; margin-bottom: 16px; }
.form-lancamento input, .form-lancamento select { width: 100%; }
.form-lancamento .field-descricao { grid-column: span 2; }
/* Campos de busca (subcategoria, cliente/fornecedor) ocupam o dobro do
   espaço de um campo comum — mesmo padrão já usado em .field-descricao —
   já que são os campos que mais precisam de espaço pra digitar/ler. */
.form-lancamento .autocomplete-wrap.field { grid-column: span 2; }

/* Destaque sutil no card de listagem de lançamentos (Caixa) — mesma cor já usada
   na faixa do Dashboard pra marcar o item mais importante (.band-item-total). */
.card-destaque { border-left: 4px solid #93c5fd; padding: 4px 0 4px 16px; }
.card-destaque h2, .card-destaque h3 { color: #2563eb; }

/* Formulário de pedido com múltiplos itens (entradas.php/saidas.php) — bloco
   único empilhado verticalmente, largura total, sem colunas paralelas. Campos
   pequenos do cabeçalho (data/fornecedor) ficam lado a lado numa linha só; o
   bloco de itens e os botões ocupam a largura inteira, um abaixo do outro. */
.form-pedido { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; }
.form-pedido .campos-cabecalho { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.form-pedido table { width: 100%; }
/* Data fica compacta; cliente/fornecedor alonga pra caber o nome inteiro sem cortar */
.form-pedido .campos-cabecalho > .field:first-child { flex: 0 0 160px; }
.form-pedido .campos-cabecalho > .autocomplete-wrap { flex: 1 1 360px; }
.form-pedido .campos-cabecalho input { width: 100%; }
/* Comprador/Vendedor + % Comissão sempre juntos, na mesma linha — agrupados
   num item de flex só pra não quebrar em linhas separadas quando o formulário
   fica estreito. */
.form-pedido .campos-cabecalho > .campo-comissao-grupo { display: flex; gap: 16px; align-items: end; flex: 1 1 480px; }
.form-pedido .campos-cabecalho > .campo-comissao-grupo > .autocomplete-wrap { flex: 2 1 280px; }
.form-pedido .campos-cabecalho > .campo-comissao-grupo > .campo-comissao-percentual { flex: 1 1 120px; max-width: 160px; }
.total-pedido-linha { margin: 12px 0 0; font-size: 1.05rem; text-align: right; }

/* Destaque do campo "Valor recebido" no pedido de venda — chama atenção sem
   parecer erro (é opcional), mesma paleta azul de informação já usada no
   .card-destaque. */
.campo-recebimento-destaque { margin-top: 16px; padding: 14px 16px; border: 1px solid #93c5fd; background: #eff6ff; border-radius: 8px; }
.campo-recebimento-destaque label { font-weight: 600; color: #1e40af; display: block; margin-bottom: 6px; }

/* Bloco "Nova categoria" (categorias.php): formulário à esquerda, listagem das
   categorias já cadastradas à direita, em vez de embaixo. flex-wrap (mesmo
   padrão já usado em form.inline/campos-cabecalho, sem media query nova) faz a
   listagem empilhar abaixo do formulário em telas estreitas. */
.categorias-split { display: flex; flex-wrap: wrap; gap: 28px; align-items: start; }
.categorias-form-nova { flex: 0 0 260px; margin-bottom: 0; }
.categorias-lista { flex: 1 1 380px; min-width: 0; }
.categorias-lista h3 { margin: 0 0 10px; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; }
.categorias-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.categoria-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px; }
.categoria-item-nome { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.categoria-item-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.categoria-item-inativa { opacity: 0.55; background: #f9fafb; }

/* Árvore de categorias FINANCEIRAS (categorias_financeiras.php) — classes
   próprias, não reaproveita .categoria-item/.categorias-grid porque essas
   são compartilhadas com categorias.php (produto/sucata), que não deve ser
   afetado. Indentação crescente por nível deixa a hierarquia óbvia; cada nó
   já nasce com o botão "Incluir Subcategoria" quando ainda pode ter filho
   (nível 1 ou 2 — nível 3 é o mais fundo permitido). */
.categorias-arvore { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.categoria-no-linha { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.categoria-no-nivel2 > .categoria-no-linha { background: #f9fafb; }
.categoria-no-nivel3 > .categoria-no-linha { background: #f3f4f6; }
.categoria-no-nome { font-size: 0.82rem; flex: 1 1 auto; }
.categoria-no-nivel1 > .categoria-no-linha .categoria-no-nome { font-weight: 600; }
.categoria-no-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.categoria-no-acoes .small { font-size: 0.75rem; padding: 4px 8px; }
/* Botão "+"/"−" que recolhe/expande só os filhos daquele nó — some (troca
   por um espaço em branco do mesmo tamanho) quando o nó não tem filho, pra
   manter o alinhamento dos nomes entre linhas com e sem subcategoria. */
.categoria-no-toggle {
    flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    border: 1px solid #d1d5db; border-radius: 4px; background: #f9fafb; color: #2563eb;
    font-weight: 700; font-size: 0.8rem; line-height: 1; cursor: pointer; user-select: none;
}
.categoria-no-toggle:hover { background: #eff6ff; }
.categoria-no-toggle-vazio { flex: 0 0 20px; width: 20px; }
.categoria-no-filhos { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; margin-left: 22px; padding-left: 12px; border-left: 2px solid #e5e7eb; }
.categoria-no-filhos[hidden] { display: none; }

.print-only { display: none; }

@media print {
    .topbar, .no-print { display: none !important; }
    .print-only { display: block; }
    body { background: #fff; }
    .container { max-width: 100%; margin: 0; }
    .card { box-shadow: none; border: 1px solid #d1d5db; }
}

.relatorio-timbre { margin-bottom: 16px; }
.relatorio-timbre strong { font-size: 1.05rem; }
.relatorio-timbre p { margin: 2px 0; font-size: 0.85rem; color: #374151; }

/* Faixa de indicadores (Dashboard) */
.band { display: flex; flex-wrap: wrap; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; }
.band-item { padding: 16px 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-left: 1px solid #e5e7eb; }
.band-item:first-child { border-left: none; }
.band-label { font-size: 0.78rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.02em; }
.band-value { font-size: 1.25rem; font-weight: 700; }
.band-item-total { border-left-color: #93c5fd; }
.band-item-total .band-label { color: #2563eb; font-weight: 600; }
.band-item-total .band-value { color: #1d4ed8; font-size: 1.5rem; }

/* Gráfico de área (evolução do Ativo Circulante) */
.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: #eef0f3; stroke-width: 1; }
.chart-zero { stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 4 3; }
.chart-crosshair { stroke: #cbd5e1; stroke-width: 1; opacity: 0; }
.chart-crosshair.visible { opacity: 1; }
.chart-area { fill: rgba(37, 99, 235, 0.12); stroke: none; }
.chart-line { fill: none; stroke: #2563eb; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: #fff; stroke: #2563eb; stroke-width: 2; }
.chart-axis-label { fill: #6b7280; font-size: 11px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.chart-value-label { fill: #1f2430; font-size: 13px; font-weight: 700; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-hit:hover { fill: rgba(37, 99, 235, 0.12); }
.chart-tooltip { position: absolute; pointer-events: none; background: #1f2937; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 0.82rem; opacity: 0; transition: opacity .1s; transform: translate(-50%, -125%); white-space: nowrap; z-index: 10; }
.chart-tooltip.visible { opacity: 1; }