/* ═══════════════════════════════════════════════════════════════════════
   ODIM — sistema de design (fonte única de cor, tipo e componente)

   Identidade: interface CLARA e limpa sobre "Superfície", sidebar e blocos
   de destaque em "Noite Profunda", ação em "Energia", texto de apoio em
   "Equilíbrio". Títulos em Manrope pesado; interface em Inter. Rótulos
   curtos em caixa alta espaçada ("CRIAR · CONECTAR · EVOLUIR").

   Toda tela do ODIM importa ESTE arquivo e usa as variáveis. Cor solta no
   HTML é dívida: a próxima troca de marca teria de caçar cada uma.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/vendor/fonts/odim/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/vendor/fonts/odim/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/vendor/fonts/odim/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/vendor/fonts/odim/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ── Paleta da marca ── */
  --odim-noite: #070C16;        /* Noite Profunda */
  --odim-noite-2: #0E1626;      /* camada acima da noite (sidebar, cards escuros) */
  --odim-noite-3: #16213A;      /* hover/selecionado no escuro */
  --odim-energia: #197BFF;      /* Energia: ação principal, foco, destaque */
  --odim-energia-forte: #0B63E6;
  --odim-energia-suave: #E8F1FF;
  --odim-superficie: #F4F7FB;   /* Superfície: fundo claro */
  --odim-branco: #FFFFFF;
  --odim-equilibrio: #8797AC;   /* Equilíbrio: texto de apoio */

  /* ── Papéis (use estes, não a paleta crua) ── */
  --fundo: var(--odim-superficie);
  --fundo-elevado: var(--odim-branco);
  --fundo-escuro: var(--odim-noite);
  --texto: #0B1220;
  --texto-2: #475569;
  /* ⛔ Equilíbrio (#8797AC) dá 2,98:1 sobre branco e REPROVA a WCAG AA como
     texto. Ele fica para ícone, borda e detalhe (--decor); texto de apoio usa
     este tom, 5,19:1 sobre branco e 4,83:1 sobre a Superfície. O portão em
     testes/contraste-marca.test.js não deixa regredir. */
  --texto-3: #5E6E85;
  --decor: var(--odim-equilibrio);
  --texto-no-escuro: #EEF3FA;
  --texto-no-escuro-2: #93A3BA;
  --borda: #E3E9F2;              /* divisória e contorno de card (decorativo) */
  --borda-forte: #CFD8E4;
  /* Contorno de CAMPO precisa de 3:1 (WCAG 1.4.11): #E3E9F2 dava 1,22:1 e o
     campo sumia no fundo. */
  --borda-campo: #7D8EA4;
  /* ⛔ Texto branco sobre a Energia pura (#197BFF) dá 3,95:1: reprova num
     botão de 14px. O fundo de AÇÃO é o mesmo matiz, um passo mais fundo
     (#006CFF, 4,58:1). A Energia pura segue como cor de marca: brilho, ícone,
     foco, selo e títulos grandes. Link em texto usa --link (5,33:1). */
  --acao: #006CFF;
  --acao-hover: #0058D6;
  --link: var(--odim-energia-forte);
  --acao-texto: #FFFFFF;
  /* Foco por OUTLINE sólido (4,58:1): o halo a 25% dava 1,37:1 e some no
     alto contraste do Windows, que apaga box-shadow. */
  --foco-cor: #006CFF;
  --foco-cor-escuro: #4D8DFF;
  /* Texto de status em tom que passa AA sobre o próprio fundo suave (o tom
     médio da cor reprovava: ok 2,97, alerta 2,90, energia 4,02). */
  --ok: #15803D;   --ok-suave: #E7F7EC;
  --alerta: #B45309; --alerta-suave: #FDF3E1;
  --erro: #B91C1C; --erro-suave: #FDECEC;
  --energia-texto: #0B63E6;

  /* ── Tipografia ── */
  --fonte-titulo: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* ── Espaço (grade de 4px) ── */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
  /* Alturas de controle IGUAIS por tamanho: botão, campo e select lado a lado
     alinham. p 32 · m 40 · g 48. */
  --altura-p: 32px; --altura: 40px; --altura-g: 48px;

  /* ── Motion ── entrada ease-out; saída a 75% da duração; só transform/opacity */
  --dur-1: 100ms; --dur-2: 160ms; --dur-3: 220ms; --dur-4: 300ms;
  --curva-saida: cubic-bezier(.2, .7, .2, 1);
  --curva-entrada: cubic-bezier(.4, 0, 1, 1);

  /* ── Forma ── */
  --raio-p: 8px; --raio: 12px; --raio-g: 16px; --raio-xg: 22px;
  --sombra-1: 0 1px 2px rgba(7, 12, 22, .05), 0 1px 1px rgba(7, 12, 22, .03);
  --sombra-2: 0 6px 20px -8px rgba(7, 12, 22, .14), 0 2px 6px -2px rgba(7, 12, 22, .06);
  --sombra-3: 0 24px 48px -16px rgba(7, 12, 22, .22);
  /* Halo azul SÓ no CTA da landing. Em botão de produto e item de menu ele é
     o maior sinal de "template de IA". */
  --sombra-energia: 0 8px 22px -8px rgba(25, 123, 255, .55);
  --transicao: var(--dur-2) var(--curva-saida);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.odim {
  margin: 0; background: var(--fundo); color: var(--texto);
  /* 14px no produto (15 dá cara de site); a landing sobe para 16 (.odim-site). */
  font: 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
body.odim.odim-site { font-size: 16px; line-height: 1.6; }
.odim .num, .odim td, .odim .tabular { font-variant-numeric: tabular-nums; }
.odim h1, .odim h2, .odim h3, .odim-titulo { font-family: var(--fonte-titulo); color: var(--texto); letter-spacing: -.02em; }
/* :where() zera a especificidade: link solto no texto fica azul, mas qualquer
   componente que é um <a> (botão, logo, provedor, item de menu) manda na
   própria cor. Com `.odim a` o "Continuar com Google" e o logo saíam azuis. */
:where(.odim) a { color: var(--link); }
.odim :focus-visible { outline: 2px solid var(--foco-cor); outline-offset: 2px; }
.odim .no-escuro :focus-visible, .odim-sidebar :focus-visible { outline-color: var(--foco-cor-escuro); }

/* Títulos de impacto ("Da ideia ao projeto publicado.") */
.odim-display { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(34px, 5.2vw, 68px); margin: 0; color: var(--texto); }
.odim-subtitulo { font-size: clamp(16px, 1.6vw, 21px); color: var(--texto-3); margin: 10px 0 0; }
/* Rótulo em caixa alta espaçada */
.odim-rotulo { font: 600 11px/1.4 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }

/* ── Logo ── */
.odim-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--texto); }
.odim-logo img { width: 28px; height: 28px; flex: none; }
.odim-logo svg { width: 28px; height: 28px; flex: none; }
.odim-logo b { font: 800 20px/1 var(--fonte-titulo); letter-spacing: .02em; }
.no-escuro .odim-logo, .odim-logo.no-escuro { color: #fff; }

/* ── Botões ── */
.odim-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  height: var(--altura); padding: 0 var(--e-4); border-radius: var(--raio-p); border: 1px solid var(--borda-forte);
  background: var(--fundo-elevado); color: var(--texto); font: 600 14px/1 var(--fonte);
  cursor: pointer; text-decoration: none; transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); }
.odim-btn:active { transform: scale(.98); }
.odim-btn:disabled, .odim-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* Carregando: mantém a largura, some o texto, gira o indicador (só após 300ms,
   para ação rápida não piscar). */
.odim-btn[aria-busy="true"] { color: transparent !important; position: relative; pointer-events: none; }
.odim-btn[aria-busy="true"]::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(127, 140, 160, .35); border-top-color: var(--texto);
  animation: odim-gira .7s linear infinite; animation-delay: 300ms; opacity: 0; animation-fill-mode: both; }
.odim-btn.primario[aria-busy="true"]::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
@keyframes odim-gira { from { opacity: 1; transform: rotate(0); } to { opacity: 1; transform: rotate(360deg); } }
.odim-btn.primario { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); }
@media (hover: hover) {
  .odim-btn:hover { border-color: var(--decor); background: #FAFBFD; }
  .odim-btn.primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
}
.odim-btn.escuro { background: var(--odim-noite); border-color: var(--odim-noite); color: #fff; }
.odim-btn.fantasma { background: transparent; border-color: transparent; }
@media (hover: hover) { .odim-btn.fantasma:hover { background: rgba(7, 12, 22, .05); } }
.odim-btn.pequeno { height: var(--altura-p); padding: 0 var(--e-3); font-size: 13px; }
.odim-btn.grande { height: var(--altura-g); padding: 0 var(--e-6); font-size: 15px; border-radius: var(--raio); }
/* O ÚNICO lugar com halo azul: o CTA principal da landing. */
.odim-btn.cta { box-shadow: var(--sombra-energia); }
.odim-btn.bloco { width: 100%; }
.odim-btn svg { width: 18px; height: 18px; flex: none; }

/* ── Campos ── */
.odim-campo { display: block; margin: 0 0 var(--e-4); }
.odim-campo > span { display: block; font: 600 13px/1.3 var(--fonte); color: var(--texto); margin: 0 0 var(--e-2); }
.odim-campo .odim-ajuda { font-size: 12px; color: var(--texto-3); margin-top: var(--e-1); }
.odim-campo .odim-erro { font-size: 12px; color: var(--erro); margin-top: var(--e-1); }
/* Caixa de aceite (Termos e Privacidade no cadastro, confirmação de exclusão):
   a caixa nativa com a cor da ação, alvo de toque de 44 px e texto que quebra
   ao lado dela. Nativa de propósito: leitor de tela e teclado já sabem usar. */
.odim-aceite { display: flex; align-items: flex-start; gap: var(--e-2); min-height: 44px; margin: 0 0 var(--e-4);
  font-size: 13px; line-height: 1.45; color: inherit; cursor: pointer; text-wrap: pretty; }
.odim-aceite input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acao); cursor: pointer; }
.odim-aceite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Lugar do captcha (Turnstile): reserva a altura do quadro para a tela não
   pular quando ele carrega; vazio (captcha desligado) não ocupa nada. */
.odim-captcha { min-height: 65px; margin: 0 0 var(--e-4); }
.odim-captcha:empty { display: none; }
.odim-input, .odim-textarea, .odim-select {
  width: 100%; height: var(--altura); padding: 0 var(--e-3); border-radius: var(--raio-p); border: 1px solid var(--borda-campo);
  background: var(--fundo-elevado); color: var(--texto); font: 14px/1.4 var(--fonte);
  transition: border-color var(--transicao), box-shadow var(--transicao); }
.odim-textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.odim-input::placeholder, .odim-textarea::placeholder { color: #9AA8BB; }
.odim-input:focus-visible, .odim-textarea:focus-visible, .odim-select:focus-visible { outline: 2px solid var(--foco-cor); outline-offset: 1px; border-color: var(--acao); }
.odim-input[aria-invalid="true"], .odim-textarea[aria-invalid="true"] { border-color: var(--erro); }
.odim-input:disabled, .odim-textarea:disabled, .odim-select:disabled { background: var(--fundo); color: var(--texto-3); cursor: not-allowed; }

/* Caixa de ideia ("Descreva o que você quer criar...") */
.odim-ideia { background: var(--fundo-elevado); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra-2); padding: 16px 16px 12px; }
.odim-ideia textarea { width: 100%; border: 0; outline: none; resize: none; min-height: 64px; background: transparent;
  font: 16px/1.5 var(--fonte); color: var(--texto); }
.odim-ideia textarea::placeholder { color: #93A1B5; }
.odim-ideia-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }

/* ── Cards ── */
.odim-card { background: var(--fundo-elevado); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.odim-card.elevado { box-shadow: var(--sombra-2); }
.odim-card.escuro { background: var(--odim-noite); border-color: var(--odim-noite-2); color: var(--texto-no-escuro); }

/* Card de projeto (miniatura + nome + status) */
.odim-projeto { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform var(--transicao), box-shadow var(--transicao); }
.odim-projeto:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.odim-projeto-capa { aspect-ratio: 16/10; background: #E9EEF5 center/cover no-repeat; }
.odim-projeto-corpo { padding: 12px 14px 14px; }
.odim-projeto-nome { font: 700 15px/1.3 var(--fonte-titulo); margin: 0; }
.odim-projeto-tipo { font-size: 13px; color: var(--texto-3); margin: 2px 0 10px; }

/* ── Chips de status ── */
.odim-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font: 600 12px/1 var(--fonte); background: #EEF2F7; color: var(--texto-2); }
.odim-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.odim-chip.ok { background: var(--ok-suave); color: var(--ok); }
.odim-chip.energia { background: var(--odim-energia-suave); color: var(--energia-texto); }
.odim-chip.alerta { background: var(--alerta-suave); color: var(--alerta); }
.odim-chip.sem-ponto::before { display: none; }
/* Chips de sugestão ("Landing page para meu produto") */
.odim-sugestao { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--fundo-elevado); border: 1px solid var(--borda); color: var(--texto-2); font: 500 13px/1 var(--fonte); cursor: pointer; }
@media (hover: hover) { .odim-sugestao:hover { border-color: var(--acao); color: var(--energia-texto); } }
/* Seletor de tipo (Site · App · Sistema) */
.odim-segmento { display: inline-flex; gap: 6px; }
.odim-segmento button { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo-elevado);
  font: 600 13px/1 var(--fonte); color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.odim-segmento button[aria-pressed="true"] { border-color: var(--acao); color: var(--energia-texto); background: var(--odim-energia-suave); }

/* ── Layout do app: sidebar escura + conteúdo claro ── */
.odim-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.odim-sidebar { background: var(--odim-noite); color: var(--texto-no-escuro-2); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; }
.odim-sidebar .odim-logo { color: #fff; padding: 4px 10px 18px; }
.odim-nav { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--texto-no-escuro-2); text-decoration: none; font: 500 14px/1 var(--fonte); cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.odim-nav svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .odim-nav:hover { background: var(--odim-noite-2); color: var(--texto-no-escuro); } }
/* Item ativo: fundo um tom acima + barra de 2px na Energia. Sem halo azul. */
.odim-nav[aria-current="page"] { background: var(--odim-noite-3); color: #fff; box-shadow: inset 2px 0 0 var(--odim-energia); }
.odim-sidebar-sep { height: 1px; background: rgba(255, 255, 255, .06); margin: 10px 8px; }
.odim-sidebar-pe { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.odim-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--odim-noite-3); color: #fff; display: grid; place-items: center;
  font: 700 13px/1 var(--fonte); flex: none; overflow: hidden; }
.odim-principal { min-width: 0; }
.odim-topo { display: flex; align-items: center; gap: var(--e-3); height: 64px; padding: 0 var(--e-8); border-bottom: 1px solid var(--borda); background: var(--fundo-elevado);
  position: sticky; top: 0; z-index: 5; }
.odim-conteudo { padding: var(--e-8) var(--e-8) var(--e-16); max-width: 1180px; }

/* Navegação inferior (celular) */
.odim-tabbar { display: none; }
@media (max-width: 860px) {
  .odim-app { grid-template-columns: 1fr; }
  .odim-sidebar { display: none; }
  .odim-topo { padding: 0 16px; }
  .odim-conteudo { padding: 20px 16px 96px; }
  .odim-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--fundo-elevado); border-top: 1px solid var(--borda); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .odim-tabbar a, .odim-tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--texto-3);
    font: 600 11px/1 var(--fonte); text-decoration: none; border: 0; background: none; }
  .odim-tabbar svg { width: 22px; height: 22px; }
  .odim-tabbar [aria-current="page"] { color: var(--acao); }
}

/* ── Tela dividida: formulário + anel (login, cadastro) ── */
.odim-dividida { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 520px) 1fr; background: var(--fundo-elevado); }
.odim-dividida-form { padding: 40px clamp(24px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.odim-dividida-arte { background: linear-gradient(160deg, #F7F9FC 0%, #E7EDF5 100%) center/cover no-repeat; position: relative; overflow: hidden; }
.odim-dividida-arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* O anel entra devagar (escala e foco) e fica 4% maior que a moldura, para a
   paralaxe do mouse não mostrar a borda. A faixa de luz da anel-claro.webp
   fica a 49,6% da altura, de 2% a 86% da largura. */
.odim-dividida-arte { --luz-y: 49.6%; --luz-x0: 4%; --luz-x1: 84%; }
.odim-dividida-arte img { scale: 1.04; animation: odim-arte-chega 1200ms var(--curva-suave) backwards; }
@keyframes odim-arte-chega { from { opacity: 0; scale: 1.1; filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { .odim-dividida-arte img { animation: odim-aparece 200ms linear backwards; } }
@media (max-width: 900px) {
  .odim-dividida { grid-template-columns: 1fr; }
  .odim-dividida-arte { display: none; }
  .odim-dividida-form { padding: 32px 20px; justify-content: flex-start; padding-top: 12vh; }
}

/* Coluna do formulário da tela dividida (login, primeiro acesso, definir
   senha): mesma largura, mesmo título e o mesmo lema no pé da arte, para
   quem chega pelo link do e-mail reconhecer a tela onde vai entrar. */
.odim-dividida-caixa { width: 100%; max-width: 380px; margin: 0 auto; }
.odim-dividida-caixa > .odim-logo { margin-bottom: var(--e-12); }
.odim-dividida-caixa h1 { font-size: 40px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.odim-dividida-caixa .apoio { color: var(--texto-3); font-size: 15px; margin: var(--e-2) 0 var(--e-8); text-wrap: pretty; }
.odim-dividida-caixa .odim-rotulo { display: block; margin-bottom: var(--e-3); }
.odim-dividida-caixa .odim-input { height: var(--altura-g); font-size: 15px; }
.odim-dividida-caixa .odim-btn.grande { width: 100%; margin-top: var(--e-2); }
.odim-dividida-caixa .odim-provedor { height: var(--altura-g); }
.odim-dividida-lema { position: absolute; left: var(--e-10); bottom: var(--e-10); z-index: 1; margin: 0; color: var(--texto-2); }
.odim-dividida-lema::before { content: ''; display: block; width: 28px; height: 1px; background: var(--decor); margin-bottom: var(--e-3); }
@media (max-width: 900px) {
  .odim-dividida-form { padding: max(var(--e-10), 8vh) var(--e-4) var(--e-8); }
  .odim-dividida-caixa > .odim-logo { display: flex; justify-content: center; margin: 0 auto var(--e-10); }
  .odim-dividida-caixa .cabeca { text-align: center; }
  .odim-dividida-caixa h1 { font-size: 28px; }
  .odim-dividida-caixa .apoio { margin-bottom: var(--e-6); }
}

/* Login com arte clara e formulário escuro: variante restrita a esta tela.
   Os tokens globais continuam iguais para o painel e a redefinição de senha.
   A arte permanece imóvel para preservar a leitura e o material da marca. */
body.odim-login { background: var(--odim-noite); }
.odim-login .odim-dividida { min-height: 100svh; grid-template-columns: minmax(0, 1.82fr) minmax(400px, 1fr); background: var(--odim-noite); }
.odim-login .odim-dividida-form { grid-column: 2; grid-row: 1; position: relative; min-width: 0;
  padding: 128px clamp(var(--e-6), 3.8vw, var(--e-16)) var(--e-10); justify-content: center;
  background: linear-gradient(145deg, var(--odim-noite-2), var(--odim-noite) 70%); color: var(--texto-no-escuro); }
.odim-login .odim-dividida-caixa { max-width: 420px; }
.odim-login .odim-dividida-arte { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100svh; background: var(--fundo-elevado); }
.odim-login .odim-dividida-arte img { object-position: center; scale: 1; animation: none; transform: none; }
.odim-login .login-marca { position: absolute; z-index: 2; top: var(--e-10); left: clamp(var(--e-8), 3.7vw, var(--e-16)); }
.odim-login .login-marca .odim-logo { gap: var(--e-3); font-size: 32px; letter-spacing: -.055em; }
.odim-login .login-marca .odim-logo b { font-size: inherit; letter-spacing: -.04em; }
.odim-login .login-marca picture { display: flex; }
.odim-login .login-marca img { width: 44px; height: 44px; }
.odim-login .login-arte-texto { position: absolute; top: 33%; left: clamp(var(--e-8), 3.7vw, var(--e-16)); width: 52%; max-width: 480px; }
.odim-login .login-arte-texto h2 { margin: 0; font-size: clamp(56px, 5.25vw, 88px); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; }
.odim-login .login-arte-texto p { margin: var(--e-4) 0 0; max-width: 470px; color: var(--texto-2); font-size: clamp(17px, 1.45vw, 22px); line-height: 1.4; text-wrap: pretty; }
.odim-login .login-voltar { position: absolute; top: var(--e-10); right: clamp(var(--e-6), 3.8vw, var(--e-16));
  display: inline-flex; align-items: center; gap: var(--e-3); min-height: 44px; font-size: 14px; color: var(--texto-no-escuro); text-decoration: none; }
.odim-login .login-voltar svg { width: 20px; height: 20px; color: var(--foco-cor-escuro); }
.odim-login .odim-dividida-caixa .cabeca { text-align: left; }
.odim-login .odim-dividida-caixa h1 { font-size: clamp(30px, 2.8vw, 44px); color: var(--texto-no-escuro); }
.odim-login .odim-dividida-caixa .apoio { font-size: 16px; line-height: 1.5; color: var(--texto-no-escuro-2); margin: var(--e-3) 0 var(--e-8); }
.odim-login .odim-campo { margin-bottom: var(--e-6); }
.odim-login .odim-campo > span, .odim-login .rotulo-campo { font-size: 14px; font-weight: 500; color: var(--texto-no-escuro); }
.odim-login .odim-dividida-caixa .odim-input { padding-inline: var(--e-4); background: var(--odim-noite-2); border-color: var(--borda-campo); color: var(--texto-no-escuro); font-size: 16px; }
.odim-login .odim-input::placeholder { color: var(--texto-no-escuro-2); opacity: 1; }
.odim-login .odim-dividida-caixa .com-acao .odim-input { padding-right: 56px; }
.odim-login .com-acao button { top: 2px; right: 2px; width: 44px; height: 44px; color: var(--texto-no-escuro-2); }
.odim-login .com-acao button svg { width: 22px; height: 22px; }
.odim-login .login-recuperar { display: flex; justify-content: flex-end; margin-top: var(--e-1); }
.odim-login .login-recuperar .link-discreto { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.odim-login .link-discreto, .odim-login .login-links a, .odim-login .pe-form, .odim-login .pe-form a,
.odim-login .odim-campo .odim-ajuda, .odim-login .odim-rotulo { color: var(--texto-no-escuro-2); }
.odim-login .odim-dividida-caixa .odim-btn.grande { margin-top: 0; font-size: 16px; }
.odim-login .login-provedores { display: flex; gap: var(--e-3); }
.odim-login .login-provedores .odim-provedor { flex: 1; min-width: 0; margin: 0; height: var(--altura-g);
  background: transparent; border-color: var(--borda-campo); color: var(--texto-no-escuro); font-size: 16px; font-weight: 500; }
.odim-login .login-provedores svg { width: 24px; height: 24px; }
.odim-login .odim-ou { color: var(--texto-no-escuro-2); }
.odim-login .odim-ou::before, .odim-login .odim-ou::after { background: var(--odim-noite-3); }
.odim-login .pe-form { margin: var(--e-6) 0 0; font-size: 12px; line-height: 1.6; }
.odim-login .pe-form .link-discreto { min-height: 44px; }
.odim-login .login-rodape { margin-top: var(--e-16); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); }
.odim-login .login-links { display: flex; align-items: center; gap: var(--e-6); font-size: 12px; }
.odim-login .login-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.odim-login .login-links a + a { position: relative; }
.odim-login .login-links a + a::before { content: ''; position: absolute; left: -12px; height: 12px; width: 1px; background: var(--borda-campo); }
.odim-login .odim-dividida-idioma { margin-top: 0; }
.odim-login .odim-idioma { color: var(--texto-no-escuro-2); }
.odim-login .odim-idioma-select { min-height: 44px; }
.odim-login .odim-segmento.bloco { background: var(--odim-noite-2); border-color: var(--borda-campo); }
.odim-login .odim-segmento.bloco button { background: var(--odim-noite-2); border-color: var(--borda-campo);
  color: var(--texto-no-escuro-2); min-height: 44px; padding-inline: var(--e-2); }
.odim-login .odim-segmento.bloco button[aria-pressed="true"] { background: var(--odim-noite-3); color: var(--texto-no-escuro); }
.odim-login .claude-link { background: var(--odim-noite-2); border-color: var(--borda-campo); }
.odim-login .claude-link p { color: var(--texto-no-escuro-2); }
.odim-login .claude-link a { color: var(--foco-cor-escuro); }
.odim-login .claude-link .odim-linha, .odim-login #claude-code-wrap .odim-linha { flex-wrap: wrap; }
.odim-login .claude-link .odim-input { flex: 1; min-width: 180px; }
.odim-login #claude-code-wrap .odim-input { flex: 1; min-width: 150px; }
.odim-login #claude-code-msg[data-tipo] { border-radius: var(--raio-p); padding: var(--e-2) var(--e-3); }
.odim-login #claude-code-msg[data-tipo="erro"] { background: var(--erro-suave); }
.odim-login #claude-code-msg[data-tipo="ok"] { background: var(--ok-suave); }
.odim-login .no-escuro :focus-visible { outline-color: var(--foco-cor-escuro); }
@media (hover: hover) {
  .odim-login .login-provedores .odim-provedor:hover, .odim-login .com-acao button:hover { background: var(--odim-noite-3); color: var(--texto-no-escuro); }
  .odim-login .login-links a:hover, .odim-login .link-discreto:hover, .odim-login .odim-idioma-select:hover { color: var(--texto-no-escuro); }
  .odim-login .login-voltar:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .odim-login .login-arte-texto { width: 60%; }
  .odim-login .login-arte-texto h2 { font-size: 56px; }
  .odim-login .login-arte-texto p { font-size: 17px; }
}
@media (max-width: 900px) {
  .odim-login .odim-dividida { display: block; }
  .odim-login .odim-dividida-arte { display: none; }
  .odim-login .odim-dividida-form { min-height: 100svh; padding: 144px var(--e-6) var(--e-8); justify-content: flex-start; }
  .odim-login .login-marca { top: var(--e-6); left: var(--e-6); }
  .odim-login .login-marca .odim-logo { gap: var(--e-2); font-size: 25px; color: var(--texto-no-escuro); }
  .odim-login .login-marca img { width: 34px; height: 34px; }
  .odim-login .login-voltar { top: var(--e-5); right: var(--e-6); gap: var(--e-2); font-size: 12px; }
  .odim-login .login-voltar svg { width: 16px; height: 16px; }
  .odim-login .odim-dividida-caixa h1 { font-size: 32px; }
  .odim-login .odim-dividida-caixa .apoio { font-size: 15px; }
  .odim-login .login-rodape { margin-top: var(--e-12); }
  .odim-login .login-provedores .odim-provedor { font-size: 14px; }
}

/* Botão de provedor (Continuar com Google/GitHub) */
.odim-provedor { display: flex; align-items: center; justify-content: center; gap: var(--e-3); width: 100%; height: var(--altura); border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte); background: var(--fundo-elevado); color: var(--texto); font: 600 14px/1 var(--fonte); text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao); }
.odim-provedor:hover { background: #F8FAFD; border-color: var(--borda-forte); }
.odim-provedor + .odim-provedor { margin-top: 10px; }
.odim-provedor svg { width: 18px; height: 18px; flex: none; }
.odim-ou { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--texto-3); font-size: 12px; }
.odim-ou::before, .odim-ou::after { content: ''; flex: 1; height: 1px; background: var(--borda); }

/* Mensagens */
.odim-aviso { border-radius: var(--raio); padding: 12px 14px; font-size: 14px; background: var(--odim-energia-suave); color: #0B3C85; }
.odim-aviso.erro { background: var(--erro-suave); color: #8A1C1C; }
.odim-aviso.ok { background: var(--ok-suave); color: #14532D; }

/* ── Card de plano (comprar.html e a landing, via /marca/planos.js) ──
   O que o plano inclui, em lista curta com o traço de confirmação da marca
   (auditoria de monetização, B6): quem compra vê créditos, modelos, limites
   e selo, não só o preço. O plano da conta ganha a borda de Energia. */
.plano-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.plano-inclui { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; gap: var(--e-2); font-size: 14px; color: var(--texto-2); }
.plano-inclui li { display: flex; align-items: flex-start; gap: var(--e-2); line-height: 1.45; }
.plano-inclui svg { flex: none; margin-top: 2px; color: var(--odim-energia); }
.odim-card.plano.atual { border-color: var(--odim-energia); box-shadow: 0 0 0 1px var(--odim-energia); }
.plano-atual { background: var(--odim-energia-suave); color: var(--energia-texto); }

/* ── Página de leitura (Termos, Privacidade) ──
   Usada no app e na cópia do site institucional: as duas precisam ter a
   mesma cara, e texto longo pede coluna de ~68 caracteres e corpo 16px. */
.odim-leitura { max-width: 720px; margin: 0 auto; padding: var(--e-8) var(--e-4) var(--e-16); font-size: 16px; line-height: 1.7; color: var(--texto-2); }
.odim-leitura-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding-bottom: var(--e-8); border-bottom: 1px solid var(--borda); }
.odim-leitura h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: var(--e-10) 0 var(--e-2); text-wrap: balance; }
.odim-leitura .data { font-size: 14px; color: var(--texto-3); margin: 0 0 var(--e-8); }
.odim-leitura h2 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: var(--e-10) 0 var(--e-2); }
.odim-leitura p, .odim-leitura li { text-wrap: pretty; }
.odim-leitura ul { padding-left: var(--e-5); }
.odim-leitura li { margin: var(--e-2) 0; }
.odim-leitura li::marker { color: var(--decor); }
.odim-leitura :is(p, li) :is(b, strong) { color: var(--texto); font-weight: 600; }
.odim-leitura-pe { display: flex; flex-wrap: wrap; gap: var(--e-6); margin-top: var(--e-12); padding-top: var(--e-6); border-top: 1px solid var(--borda); font-size: 14px; }

/* ── Ajuda (public/ajuda.html) ──
   Perguntas frequentes em <details>, que abre e fecha sem script e é lido
   como botão pelo leitor de tela. O cartão do suporte fica no topo porque
   quem chega aqui por uma tela de erro quer o contato, não a lista. */
.odim-suporte-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); margin: var(--e-6) 0 var(--e-2);
  padding: var(--e-5) var(--e-6); background: var(--fundo-elevado); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.odim-suporte-card h2 { margin: 0 0 var(--e-1); font-size: 17px; }
.odim-suporte-card p { margin: 0; font-size: 15px; max-width: 46ch; }
.odim-suporte-card small { display: block; margin-top: var(--e-2); color: var(--texto-3); font-size: 13px; word-break: break-all; }
.odim-indice { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.odim-leitura .odim-indice { padding-left: 0; }
.odim-leitura .odim-indice li { margin: 0; }
.odim-indice a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e-3); border: 1px solid var(--borda-forte); border-radius: 999px;
  color: var(--texto); font-size: 14px; text-decoration: none; }
.odim-indice a:hover { background: var(--fundo-hover); }
.odim-faq { border-top: 1px solid var(--borda); }
.odim-faq details { border-bottom: 1px solid var(--borda); }
.odim-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 52px; padding: var(--e-3) 0;
  color: var(--texto); font-weight: 600; cursor: pointer; list-style: none; }
.odim-faq summary::-webkit-details-marker { display: none; }
.odim-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3);
  transform: rotate(45deg); transition: transform var(--transicao); }
.odim-faq details[open] summary::after { transform: rotate(-135deg); }
.odim-faq summary:focus-visible { outline: 2px solid var(--foco-cor); outline-offset: 2px; border-radius: var(--raio-p); }
.odim-faq details p { margin: 0 0 var(--e-4); }

/* Utilidades */
.odim-linha { display: flex; align-items: center; gap: 10px; }
.odim-entre { justify-content: space-between; }
.odim-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.odim-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Movimento reduzido: sem deslocamento/escala; troca de cor e opacidade seguem
   (elas informam estado e não causam desconforto). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .odim-btn:active, .odim-projeto:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Componentes de PAINEL (tabela, métricas, abas, janela, aviso flutuante,
   estado vazio, esqueleto). Nasceram no painel do dono (/admin), mas toda
   tela com lista de dados vai precisar deles: o app do cliente (projetos,
   cobrança) e o editor. Ficam aqui para a segunda tela não reinventar com
   outro raio, outro cinza e outro cabeçalho de tabela.
   Os tokens abaixo COMPLEMENTAM o :root lá de cima (nenhum valor antigo muda).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --fundo-sutil: #FAFBFD;   /* cabeçalho de tabela, rodapé de card */
  --fundo-hover: #F3F6FA;   /* hover de linha, menu e botão fantasma sobre branco */
  --fundo-ativo: #E8EDF4;   /* pressionado / selecionado neutro */
  --esqueleto: #E9EEF5;     /* bloco de carregamento (mesma cor da capa vazia de projeto) */
  /* Véu atrás da janela: escuro e SEM blur (vidro borrado é o sinal de template). */
  --veu: rgba(7, 12, 22, .44);
  --sombra-popover: 0 8px 24px -6px rgba(7, 12, 22, .16), 0 0 0 1px rgba(7, 12, 22, .06);
  --sombra-modal: 0 24px 64px -12px rgba(7, 12, 22, .28), 0 0 0 1px rgba(7, 12, 22, .06);
  --z-topo: 10; --z-drawer: 40; --z-modal: 50; --z-toast: 60;
}

/* Chip de erro e botão de perigo faltavam: suspender, excluir e "falhou"
   usavam vermelho solto em cada tela. */
.odim-chip.erro { background: var(--erro-suave); color: var(--erro); }
.odim-painel .odim-btn.perigo { background: var(--fundo-elevado); border-color: #F1C4C4; color: var(--erro); }
@media (hover: hover) { .odim-painel .odim-btn.perigo:hover { background: var(--erro-suave); border-color: var(--erro); } }

/* ── Tabela de dados ── cabeçalho em caixa alta pequena, números tabulares,
   separador de 1px sem zebra, hover sutil. No celular a tabela rola DENTRO do
   próprio contorno (.odim-tabela-rolo), nunca a página. */
.odim-tabela-rolo { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.odim-tabela { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.odim-tabela th { text-align: left; height: 36px; padding: 0 var(--e-4); background: var(--fundo-sutil);
  font: 600 11px/1.2 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3);
  border-bottom: 1px solid var(--borda); white-space: nowrap; }
.odim-tabela td { padding: 10px var(--e-4); border-bottom: 1px solid var(--borda); color: var(--texto-2); vertical-align: middle; }
.odim-tabela tbody tr:last-child td { border-bottom: 0; }
.odim-tabela th.dir, .odim-tabela td.dir { text-align: right; }
@media (hover: hover) { .odim-tabela tbody tr:hover td { background: var(--fundo-hover); } }

/* ── Métricas (faixa de números no topo das telas) ── uma moldura só, com
   divisória fina entre os números, no lugar de quatro cards soltos. */
.odim-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); overflow: hidden;
  background: var(--fundo-elevado); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.odim-metrica { padding: var(--e-4) var(--e-5); box-shadow: -1px 0 0 var(--borda), 0 -1px 0 var(--borda); min-width: 0; }
.odim-metrica-rot { font: 500 13px/1.3 var(--fonte); color: var(--texto-3); }
.odim-metrica-num { font: 700 24px/1.15 var(--fonte-titulo); letter-spacing: -.02em; color: var(--texto); margin-top: var(--e-2);
  font-variant-numeric: tabular-nums; }
.odim-metrica-cap { font-size: 12px; color: var(--texto-3); margin-top: var(--e-1); }

/* ── Abas ── sublinhado de 2px na Energia sob a aba ativa (aria-selected). */
.odim-painel .odim-abas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.odim-painel .odim-abas::-webkit-scrollbar { display: none; }
.odim-aba { display: inline-flex; align-items: center; gap: var(--e-2); height: 40px; padding: 0 var(--e-3); margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--texto-3); font: 500 14px/1 var(--fonte);
  white-space: nowrap; cursor: pointer; }
.odim-aba svg { width: 16px; height: 16px; }
@media (hover: hover) { .odim-aba:hover { color: var(--texto); } }
.odim-aba[aria-selected="true"] { color: var(--texto); font-weight: 600; border-bottom-color: var(--acao); }

/* ── Janela (<dialog> + showModal): foco preso, Esc e inert de graça. ── */
.odim-painel .odim-dialogo { padding: 0; border: 0; border-radius: var(--raio-g); background: var(--fundo-elevado); color: var(--texto);
  box-shadow: var(--sombra-modal); width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 88dvh); }
.odim-painel .odim-dialogo.largo { width: min(880px, calc(100vw - 32px)); }
.odim-painel .odim-dialogo::backdrop { background: var(--veu); }
.odim-painel .odim-dialogo[open] { animation: odim-janela var(--dur-3) var(--curva-saida); }
@keyframes odim-janela { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ── Aviso flutuante (toast) ── fundo Noite, no máximo 3; erro fica até fechar. */
.odim-painel .odim-toasts { position: fixed; right: var(--e-6); bottom: var(--e-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--e-2);
  width: min(380px, calc(100vw - 32px)); }
.odim-painel .odim-toast { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--raio);
  background: var(--odim-noite); color: var(--texto-no-escuro); font-size: 13px; line-height: 1.5; box-shadow: var(--sombra-3);
  animation: odim-toast var(--dur-3) var(--curva-saida); }
.odim-toast-marca { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--texto-no-escuro-2); }
.odim-painel .odim-toast.ok .odim-toast-marca { background: #4ADE80; }
.odim-painel .odim-toast.erro .odim-toast-marca { background: #F87171; }
.odim-toast-fechar { margin-left: auto; border: 0; background: none; color: var(--texto-no-escuro-2); cursor: pointer; font-size: 18px; line-height: 1;
  width: 24px; height: 24px; border-radius: 6px; flex: none; }
.odim-toast-fechar:hover { color: #fff; background: var(--odim-noite-3); }
.odim-painel .odim-toast :focus-visible { outline-color: var(--foco-cor-escuro); }
@keyframes odim-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .odim-painel .odim-toasts { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; } }

/* ── Estado vazio ── o que falta, o que fazer, um botão. Sem ilustração. */
.odim-painel .odim-vazio { text-align: center; padding: var(--e-10) var(--e-6); }
.odim-vazio-icone { width: 40px; height: 40px; margin: 0 auto var(--e-3); border-radius: var(--raio); display: grid; place-items: center;
  background: var(--fundo); color: var(--decor); border: 1px solid var(--borda); }
.odim-vazio-icone svg { width: 20px; height: 20px; }
.odim-painel .odim-vazio h3 { font: 600 15px/1.35 var(--fonte); letter-spacing: 0; margin: 0 0 var(--e-1); }
.odim-painel .odim-vazio p { margin: 0 auto var(--e-4); max-width: 420px; color: var(--texto-3); font-size: 13px; }

/* ── Esqueleto ── a FORMA do conteúdo; pulso de opacidade, sem brilho correndo. */
.odim-esqueleto { background: var(--esqueleto); border-radius: var(--raio-p); animation: odim-pulso 1.2s ease-in-out infinite alternate; }
@keyframes odim-pulso { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .odim-esqueleto { animation: none; } }
/* ─── Componentes com DUAS versões ────────────────────────────────────
   abas, janela (dialog), avisos flutuantes, estado vazio e o botão de perigo nasceram em duas
   frentes ao mesmo tempo: o painel do dono (/admin, body.odim-painel) e as
   telas do cliente. Cada versão vale no seu território até alguém unificar
   com calma e fotografar as duas: .odim-painel … no admin,
   body:not(.odim-painel) … no resto. Tokens repetidos ficaram uma vez só. */
/* ═══════════════════════════════════════════════════════════════════════
   Telas do produto (início, editor, ferramentas): componentes que mais de
   uma tela usa. Ficam aqui, e não no <style> de cada página, porque a home,
   o editor e as telas auxiliares mostram os MESMOS menus, janelas e abas: se
   cada uma desenhasse o seu, o produto voltaria a ter quatro caras.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Camadas por papel (a pesquisa de design system, §3): o número diz quem
     fica por cima de quem sem guerra de z-index solto em cada tela. O
     comentário acima estava aberto sem o "/*" e engolia este bloco: o
     .odim-menu citava --z-dropdown e caía em z-index automático. */
  --z-dropdown: 30;
}

/* Botão de perigo (excluir, esvaziar): texto branco sobre --erro dá 6,5:1. */
body:not(.odim-painel) .odim-btn.perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
@media (hover: hover) { body:not(.odim-painel) .odim-btn.perigo:hover { background: #991B1B; border-color: #991B1B; } }
/* Botão só com ícone: quadrado, sempre com aria-label no HTML. */
.odim-btn.icone { width: var(--altura); padding: 0; }
.odim-btn.icone.pequeno { width: var(--altura-p); }

/* Janela (<dialog> + showModal: foco preso, Esc e fundo inerte de graça). */
body:not(.odim-painel) dialog.odim-dialogo { border: 0; padding: 0; border-radius: var(--raio-g); background: var(--fundo-elevado); color: var(--texto);
  box-shadow: var(--sombra-modal); width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  font: 14px/1.5 var(--fonte); }
body:not(.odim-painel) dialog.odim-dialogo.largo { width: min(560px, calc(100vw - 32px)); }
body:not(.odim-painel) dialog.odim-dialogo.extra { width: min(720px, calc(100vw - 32px)); }
body:not(.odim-painel) :is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo)::backdrop { background: var(--veu); }
body:not(.odim-painel) dialog.odim-dialogo[open] { animation: odim-entra var(--dur-3) var(--curva-saida); }
@keyframes odim-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.odim-dialogo-corpo { padding: var(--e-6) var(--e-6) var(--e-4); }
.odim-dialogo-corpo h2 { font: 800 18px/1.3 var(--fonte-titulo); margin: 0 0 var(--e-2); letter-spacing: -.02em; color: var(--texto); }
.odim-dialogo-corpo p { margin: 0 0 var(--e-3); color: var(--texto-2); white-space: pre-line; }
.odim-dialogo-acoes { display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-6) var(--e-6); flex-wrap: wrap; }
@media (max-width: 480px) { .odim-dialogo-acoes .odim-btn { flex: 1; } }
/* Caixa de detalhe dentro da janela (caminho de pasta, tamanho). */
.odim-detalhe { border: 1px solid var(--borda); background: var(--fundo-sutil); border-radius: var(--raio-p); padding: var(--e-3); margin: 0 0 var(--e-3);
  font-size: 13px; color: var(--texto-2); }
.odim-detalhe code, .odim-detalhe .mono { font: 12px/1.5 var(--fonte-mono); color: var(--texto); word-break: break-all; }
.odim-detalhe.perigo { border-color: #F5C2C2; background: var(--erro-suave); color: #8A1C1C; }
/* Lista de escolhas dentro da janela ("Remover da lista" / "Excluir tudo"). */
.odim-escolha { display: flex; align-items: flex-start; gap: var(--e-3); width: 100%; text-align: left; padding: var(--e-3); margin: 0 0 var(--e-2);
  border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--fundo-elevado); color: var(--texto); cursor: pointer; font: inherit; }
.odim-escolha svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--texto-3); }
.odim-escolha b { display: block; font-weight: 600; }
.odim-escolha small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.odim-escolha.perigo, .odim-escolha.perigo svg { color: var(--erro); }
@media (hover: hover) { .odim-escolha:hover { background: var(--fundo-hover); } .odim-escolha.perigo:hover { background: var(--erro-suave); } }

/* Menu de ações (popover): item 32px, destrutivo por último em vermelho. */
.odim-menu { min-width: 200px; padding: var(--e-1); border-radius: var(--raio); background: var(--fundo-elevado); box-shadow: var(--sombra-popover);
  z-index: var(--z-dropdown); border: 0; }
.odim-menu-item { display: flex; align-items: center; gap: var(--e-2); width: 100%; height: var(--altura-p); padding: 0 var(--e-2); border: 0; border-radius: var(--raio-p);
  background: none; color: var(--texto); font: 500 13px/1 var(--fonte); cursor: pointer; text-align: left; text-decoration: none; }
.odim-menu-item svg { width: 16px; height: 16px; flex: none; color: var(--texto-3); }
.odim-menu-item.perigo, .odim-menu-item.perigo svg { color: var(--erro); }
@media (hover: hover) { .odim-menu-item:hover { background: var(--fundo-hover); } .odim-menu-item.perigo:hover { background: var(--erro-suave); } }
.odim-menu-item:focus-visible { outline-offset: -2px; }
.odim-menu-sep { height: 1px; background: var(--borda); margin: var(--e-1) var(--e-1); }

/* Abas com sublinhado (Conversa · Histórico, Páginas · Estilo). */
body:not(.odim-painel) .odim-abas { display: flex; gap: var(--e-5); border-bottom: 1px solid var(--borda); }
body:not(.odim-painel) .odim-abas > button, body:not(.odim-painel) .odim-abas > a { position: relative; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 500 13px/1 var(--fonte); color: var(--texto-3); display: inline-flex; align-items: center; gap: 6px; }
body:not(.odim-painel) .odim-abas > [aria-selected="true"], body:not(.odim-painel) .odim-abas > [aria-current="page"] { color: var(--texto); font-weight: 600; }
body:not(.odim-painel) .odim-abas > [aria-selected="true"]::after, body:not(.odim-painel) .odim-abas > [aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--acao); border-radius: 2px; }

/* Aviso passageiro (toast): canto inferior; erro não some sozinho. */
body:not(.odim-painel) .odim-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
@media (max-width: 860px) { body:not(.odim-painel) .odim-toasts { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; } }
body:not(.odim-painel) .odim-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--raio); background: var(--odim-noite); color: var(--texto-no-escuro);
  box-shadow: var(--sombra-3); font: 14px/1.45 var(--fonte); animation: odim-entra var(--dur-3) var(--curva-saida); }
body:not(.odim-painel) .odim-toast p { margin: 0; flex: 1; white-space: pre-line; }
body:not(.odim-painel) .odim-toast.erro { background: #3A0D0D; }
body:not(.odim-painel) .odim-toast button { border: 0; background: none; color: var(--texto-no-escuro-2); cursor: pointer; font: 600 13px/1 var(--fonte); padding: 2px; }

/* Cabeçalho de página: título + frase de apoio + ações no mesmo eixo. */
.odim-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; margin: 0 0 var(--e-6); }
.odim-cabecalho h1 { font: 800 28px/1.15 var(--fonte-titulo); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.odim-cabecalho p { margin: 6px 0 0; color: var(--texto-3); font-size: 14px; }

/* Estado vazio: o que falta, o que fazer, um botão. */
body:not(.odim-painel) .odim-vazio { text-align: center; padding: var(--e-12) var(--e-4); border: 1px dashed var(--borda-forte); border-radius: var(--raio-g); background: var(--fundo-elevado); }
body:not(.odim-painel) .odim-vazio img, body:not(.odim-painel) .odim-vazio svg { width: 48px; height: 48px; color: var(--decor); margin: 0 auto var(--e-3); display: block; }
body:not(.odim-painel) .odim-vazio h3 { font: 700 16px/1.3 var(--fonte-titulo); margin: 0 0 4px; }
body:not(.odim-painel) .odim-vazio p { margin: 0 0 var(--e-4); color: var(--texto-3); }

/* Pílula de estado do salvamento ("Salvo", "Salvando"). */
.odim-salvo { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--fonte); color: var(--texto-3); }
.odim-salvo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ═══════════════════════════════════════════════════════════════════════
   MOTION E VIDRO

   O pedido do dono (2026-09-27): tudo com movimento e acabamento de produto
   global, sem trocar a identidade. Regras que valem para tudo abaixo:

   • Movimento curto (160 a 420ms), curva que CHEGA devagar, e só
     transform/translate/opacity/filter: o navegador compõe na GPU e fica em
     60fps. Nada anima largura, altura, top ou left.
   • O conteúdo nunca depende do JavaScript para aparecer: o "revelar ao
     rolar" só esconde quando o odim-motion.js já marcou <html class="odim-js">.
   • Movimento reduzido (prefers-reduced-motion) vira fade simples ou nada.
   • Vidro com critério: só em camada que FLUTUA sobre conteúdo (topo e barra
     inferior sobre a rolagem, janela, menu, aviso, cards do herói). A
     opacidade de cada vidro foi escolhida para o texto passar AA mesmo com a
     Noite Profunda inteira por baixo (o pior caso); o portão está em
     testes/contraste-marca.test.js. Sem backdrop-filter, vira sólido.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --dur-5: 420ms;
  /* Chega devagar e assenta (entrada de conteúdo, janela, revelar). */
  --curva-suave: cubic-bezier(.22, 1, .36, 1);
  /* Passa um fio do ponto e volta: só no soltar do botão. */
  --curva-mola: cubic-bezier(.34, 1.4, .64, 1);
  --sobe: 12px;          /* distância da entrada: curta, é acabamento e não coreografia */
  --passo: 55ms;         /* intervalo entre itens na entrada escalonada */

  /* Vidro claro. O número é a opacidade do branco; o comentário, o que ele
     aguenta por cima com a Noite (#070C16) inteira atrás. */
  --vidro: rgba(255, 255, 255, .80);         /* topo: --texto e --texto-2 */
  --vidro-forte: rgba(255, 255, 255, .88);   /* barra inferior, menu: + --acao-hover */
  --vidro-janela: rgba(255, 255, 255, .94);  /* janela: + --texto-3 (texto de apoio) */
  --vidro-escuro: rgba(7, 12, 22, .86);      /* aviso flutuante: --texto-no-escuro e -2 */
  --vidro-filtro: saturate(180%) blur(20px);
  --vidro-filtro-leve: saturate(160%) blur(12px);
  /* Fio de luz no alto do vidro (a borda que pega luz) + contorno de 1px. */
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .75);
  --vidro-contorno: rgba(7, 12, 22, .07);
  --vidro-sombra: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 16px 40px -18px rgba(7, 12, 22, .22), 0 0 0 1px rgba(7, 12, 22, .05);

  /* Luz do anel (a faixa azul). */
  --luz-anel: rgba(77, 141, 255, .75);
  --luz-anel-suave: rgba(25, 123, 255, .22);
}

/* A luz que percorre uma borda é um ângulo animado. @property deixa o
   navegador interpolar o ângulo; sem suporte, a borda fica parada (ok). */
@property --odim-angulo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── Transição entre páginas (login → início → editor) ──
   View Transitions entre documentos: o navegador faz um cross-fade curto no
   lugar do "piscar branco". Sem suporte, a navegação é a de sempre. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: odim-vt-sai 160ms var(--curva-entrada) both; }
::view-transition-new(root) { animation: odim-vt-entra 280ms var(--curva-suave) both; }
@keyframes odim-vt-sai { to { opacity: 0; } }
@keyframes odim-vt-entra { from { opacity: 0; transform: translateY(6px); } }

/* ── Entrada escalonada (CSS puro: funciona sem JS) ──
   .odim-entrada no CONTÊINER: cada filho sobe 12px e aparece, um depois do
   outro. `translate` (e não `transform`) para não brigar com o hover dos
   cards; fill "backwards" para não segurar valor nenhum depois de acabar. */
@keyframes odim-surge { from { opacity: 0; translate: 0 var(--sobe); } }
@keyframes odim-surge-leve { from { opacity: 0; translate: 0 6px; } }
@keyframes odim-aparece { from { opacity: 0; } }
.odim-entrada > * { animation: odim-surge var(--dur-5) var(--curva-suave) backwards; }
.odim-entrada > :nth-child(2) { animation-delay: calc(var(--passo) * 1); }
.odim-entrada > :nth-child(3) { animation-delay: calc(var(--passo) * 2); }
.odim-entrada > :nth-child(4) { animation-delay: calc(var(--passo) * 3); }
.odim-entrada > :nth-child(5) { animation-delay: calc(var(--passo) * 4); }
.odim-entrada > :nth-child(6) { animation-delay: calc(var(--passo) * 5); }
.odim-entrada > :nth-child(n+7) { animation-delay: calc(var(--passo) * 6); }
/* Listas montadas pelo JS (cards, seções do painel): o odim-motion.js põe o
   índice em --i e liga a classe só na chegada, para refazer a lista (filtro,
   favorito) não reanimar tudo a cada toque. */
.odim-chegando > * { animation: odim-surge var(--dur-5) var(--curva-suave) backwards;
  animation-delay: calc(min(var(--i, 0), 8) * var(--passo)); }
.odim-chegando tbody tr { animation: odim-surge-leve 320ms var(--curva-suave) backwards;
  animation-delay: calc(120ms + min(var(--l, 0), 12) * 28ms); }

/* ── Revelar ao rolar ── [data-revelar] some só com JS ligado; o
   IntersectionObserver põe .revelado e o atraso (--atraso) de quem entrou
   junto na tela. */
.odim-js [data-revelar]:not(.revelado) { opacity: 0; translate: 0 22px; }
.odim-js [data-revelar] { transition: opacity 560ms var(--curva-suave), translate 720ms var(--curva-suave);
  transition-delay: var(--atraso, 0ms); }

/* ── Elevação no hover (cards clicáveis) ── */
.odim-elevar { transition: transform var(--dur-3) var(--curva-suave), box-shadow var(--dur-3) var(--curva-suave), border-color var(--dur-3); }
@media (hover: hover) {
  .odim-elevar:hover { transform: translateY(-3px); box-shadow: var(--sombra-2), 0 18px 36px -24px rgba(7, 12, 22, .28); }
}
.odim-elevar:active { transform: translateY(-1px) scale(.995); transition-duration: 80ms; }
.odim-projeto { transition: transform var(--dur-3) var(--curva-suave), box-shadow var(--dur-3) var(--curva-suave); }
@media (hover: hover) {
  .odim-projeto:hover { transform: translateY(-3px); box-shadow: var(--sombra-2), 0 18px 36px -24px rgba(7, 12, 22, .28); }
  /* A miniatura aproxima um fio dentro do próprio recorte: o card "respira". */
  .odim-projeto :is(.odim-projeto-capa, .proj-thumb) img { transition: transform 600ms var(--curva-suave); }
  .odim-projeto:hover :is(.odim-projeto-capa, .proj-thumb) img { transform: scale(1.03); }
}

/* ── Botões: press curto, soltar com mola, CTA com reflexo ── */
.odim-btn { transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao), color var(--transicao),
  transform var(--dur-3) var(--curva-mola), outline-offset var(--dur-2) var(--curva-suave); }
.odim-btn:active:not(:disabled) { transform: scale(.97); transition-duration: 80ms; transition-timing-function: var(--curva-saida); }
@media (hover: hover) {
  .odim-btn.primario:not(:disabled):hover { box-shadow: 0 6px 16px -8px rgba(7, 12, 22, .35); }
}
/* Reflexo que atravessa o CTA uma vez por hover (o único halo da marca). */
.odim-btn.cta { position: relative; overflow: hidden; isolation: isolate; }
.odim-btn.cta::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%); }
@media (hover: hover) { .odim-btn.cta:hover::before { transform: translateX(120%); transition: transform 760ms var(--curva-suave); } }
/* Carregando: o indicador gira com a luz da marca no lugar do cinza. */
.odim-btn[aria-busy="true"]::after { border-top-color: var(--odim-energia); }

/* ── Borda com luz percorrendo (foco da caixa de ideia, IA trabalhando) ──
   Um ::before do tamanho da caixa, com gradiente cônico recortado em 1px
   pela máscara. Acende só em .odim-luz-borda:focus-within ou .luz-ativa. */
.odim-luz-borda { position: relative; isolation: isolate; }
.odim-luz-borda::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--odim-angulo), transparent 0 62%, rgba(25, 123, 255, .0) 64%, var(--odim-energia) 76%, #8EC0FF 80%, var(--odim-energia) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--dur-4) var(--curva-suave); }
.odim-luz-borda:focus-within::before, .odim-luz-borda.luz-ativa::before { opacity: 1; animation: odim-volta 5.2s linear infinite; }
@keyframes odim-volta { to { --odim-angulo: 360deg; } }

/* ── Esqueleto com brilho correndo (carregando) ── */
.odim-esqueleto, .z-esqueleto { position: relative; overflow: hidden; animation: none; }
.odim-esqueleto::after, .z-esqueleto::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: odim-brilho 1.5s var(--curva-saida) infinite; }
@keyframes odim-brilho { to { transform: translateX(100%); } }

/* ── O anel vivo ──
   .odim-anel-vivo no contêiner da foto do anel. ::before é o brilho da faixa
   (respira em 5s, devagar); ::after é o reflexo que corre pela faixa a cada
   7s. A posição da faixa na foto vem de --luz-y/--luz-x0/--luz-x1. */
.odim-anel-vivo { --luz-y: 49%; --luz-x0: 8%; --luz-x1: 85%; position: relative; isolation: isolate; }
.odim-anel-vivo::before, .odim-anel-vivo::after { content: ''; position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  left: var(--luz-x0); width: calc(var(--luz-x1) - var(--luz-x0)); translate: var(--px, 0) var(--py, 0); }
.odim-anel-vivo::before { top: calc(var(--luz-y) - 22px); height: 44px;
  background: radial-gradient(50% 50% at 50% 50%, var(--luz-anel) 0, var(--luz-anel-suave) 45%, transparent 72%);
  filter: blur(8px); opacity: .25; animation: odim-respira 5s ease-in-out infinite alternate; }
.odim-anel-vivo::after { top: calc(var(--luz-y) - 6px); height: 12px;
  background: radial-gradient(9% 50% at 50% 50%, rgba(220, 236, 255, .95) 0, rgba(120, 180, 255, .55) 45%, transparent 100%);
  opacity: 0; animation: odim-reflexo 7s var(--curva-suave) 1.2s infinite; }
@keyframes odim-respira { from { opacity: .18; } to { opacity: .62; } }
@keyframes odim-reflexo {
  0% { opacity: 0; transform: translateX(-46%); }
  6% { opacity: 1; }
  30% { opacity: .9; }
  36%, 100% { opacity: 0; transform: translateX(46%); }
}
/* Paralaxe (odim-motion.js escreve --px/--py em quem tem data-paralaxe). */
[data-paralaxe] { --px: 0px; --py: 0px; }
.odim-paralaxe-alvo { translate: var(--px) var(--py); will-change: translate; }

/* ══ VIDRO ══════════════════════════════════════════════════════════════ */
.odim-vidro { background: var(--vidro-forte); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--vidro-sombra); }

/* Topo e barra inferior: translúcidos sobre o conteúdo que rola por baixo.
   Por cima deles só --texto/--texto-2 (topo) e --acao-hover (aba ativa). */
.odim-topo { background: var(--vidro); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
  border-bottom-color: var(--vidro-contorno); }
@media (max-width: 860px) {
  .odim-tabbar { background: var(--vidro-forte); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
    border-top-color: var(--vidro-contorno); box-shadow: var(--vidro-brilho); }
  .odim-tabbar a, .odim-tabbar button { color: var(--texto-2); transition: color var(--dur-2), transform var(--dur-3) var(--curva-mola); }
  .odim-tabbar a:active, .odim-tabbar button:active { transform: scale(.94); transition-duration: 80ms; }
  .odim-tabbar [aria-current="page"] { color: var(--acao-hover); }
}

/* Janela: vidro quase sólido (o texto de apoio passa AA) sobre véu com um
   desfoque leve. Entra subindo e crescendo 3%; sai pelo mesmo caminho
   (@starting-style + allow-discrete; sem suporte, só aparece). */
/* :is() iguala a especificidade das duas versões da janela (painel e cliente),
   que declaram fundo sólido antes daqui. */
:is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo) { background: var(--vidro-janela); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--vidro-brilho), var(--sombra-modal);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity 220ms var(--curva-saida), transform 320ms var(--curva-suave), overlay 320ms allow-discrete, display 320ms allow-discrete; }
:is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo)[open] { animation: none; opacity: 1; transform: none; }
@starting-style { :is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo)[open] { opacity: 0; transform: translateY(10px) scale(.97); } }
:is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo)::backdrop { background: var(--veu); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 240ms var(--curva-saida), overlay 320ms allow-discrete, display 320ms allow-discrete; }
:is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo)[open]::backdrop { opacity: 1; }
@starting-style { :is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo)[open]::backdrop { opacity: 0; } }

/* Menu flutuante: vidro forte, cai 4px ao abrir (inclusive quando o JS só
   troca display:none → block, graças ao @starting-style). */
.odim-menu { background: var(--vidro-forte); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--vidro-brilho), var(--sombra-popover);
  transition: opacity var(--dur-2) var(--curva-saida), transform var(--dur-3) var(--curva-suave); transform-origin: top right; }
@starting-style { .odim-menu { opacity: 0; transform: translateY(-4px) scale(.98); } }
.odim-menu-item { transition: background var(--dur-1) linear, color var(--dur-1) linear; }

/* Aviso flutuante: vidro escuro, entra subindo com mola curta. */
body:not(.odim-painel) .odim-toast, .odim-painel .odim-toast { background: var(--vidro-escuro);
  -webkit-backdrop-filter: var(--vidro-filtro-leve); backdrop-filter: var(--vidro-filtro-leve);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--sombra-3);
  animation: odim-toast-entra 380ms var(--curva-suave) backwards; }
body:not(.odim-painel) .odim-toast.erro { background: rgba(58, 13, 13, .92); }
@keyframes odim-toast-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* Linhas de tabela: o hover acende suave, sem piscar. */
.odim-tabela td { transition: background var(--dur-2) linear; }
.odim-metrica-num { font-variant-numeric: tabular-nums; }

/* Sem vidro no navegador (ou com transparência reduzida pedida pelo sistema):
   tudo vira sólido na mesma cor do papel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .odim-vidro, .odim-topo, .odim-menu, :is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo) { background: var(--fundo-elevado); }
  .odim-tabbar { background: var(--fundo-elevado) !important; }
  body:not(.odim-painel) .odim-toast, .odim-painel .odim-toast { background: var(--odim-noite); }
}
@media (prefers-reduced-transparency: reduce) {
  .odim-vidro, .odim-topo, .odim-menu, :is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo) { background: var(--fundo-elevado); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .odim-tabbar { background: var(--fundo-elevado) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body:not(.odim-painel) .odim-toast, .odim-painel .odim-toast { background: var(--odim-noite); }
}

/* Movimento reduzido: sem deslocamento, sem loop; o que sobra é fade curto.
   (A regra geral lá em cima já encurta toda animação para 1ms.) */
@media (prefers-reduced-motion: reduce) {
  .odim-js [data-revelar]:not(.revelado) { translate: none; }
  .odim-js [data-revelar] { transition: opacity 200ms linear; transition-delay: 0ms; }
  .odim-elevar:hover, .odim-elevar:active, .odim-projeto:hover, .odim-btn:active:not(:disabled) { transform: none !important; }
  .odim-projeto:hover :is(.odim-projeto-capa, .proj-thumb) img { transform: none; }
  .odim-anel-vivo::before { animation: none; opacity: .4; }
  .odim-anel-vivo::after, .odim-esqueleto::after, .z-esqueleto::after, .odim-btn.cta::before { display: none; }
  .odim-luz-borda:focus-within::before, .odim-luz-borda.luz-ativa::before { animation: none; }
  .odim-paralaxe-alvo { translate: none; }
  :is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo), :is(body:not(.odim-painel) dialog.odim-dialogo, .odim-painel .odim-dialogo)[open], .odim-menu { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Seletor de idioma (montado por marca/i18n.js em [data-odim-idioma]).
   Discreto de propósito: aparece no rodapé e nas configurações, e quem chega
   já vê a tela no idioma do navegador. Select nativo, sem borda, com o globo. */
.odim-idioma { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3); font: 500 13px/1 var(--fonte); }
.odim-idioma-rotulo { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.odim-idioma-rotulo svg { width: 16px; height: 16px; flex: none; }
.odim-idioma-select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit;
  min-height: 32px; padding: 0 18px 0 2px; cursor: pointer; border-radius: var(--raio-p); field-sizing: content;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; background-size: 4px 4px; background-repeat: no-repeat; }
.odim-idioma-select:focus-visible { outline: 2px solid var(--foco-cor); outline-offset: 2px; }
@media (hover: hover) { .odim-idioma-select:hover { color: var(--texto); } }
.no-escuro .odim-idioma, .odim-idioma.no-escuro { color: var(--texto-no-escuro-2); }
.odim-idioma-select option { color: var(--texto); background: var(--fundo-elevado); }
.odim-dividida-idioma { display: flex; justify-content: center; margin-top: var(--e-6); }

/* Landing editorial: o papel perolado e os títulos contidos reproduzem a
   referência aprovada sem trocar a tipografia ou o peso das telas do app.
   Os tokens ficam aqui para as próximas seções da landing usarem a mesma
   proporção e para o teste conferir o contraste do novo fundo. */
:root {
  --landing-papel: #FAFAF7;
  --landing-titulo-tamanho: clamp(2rem, 3.5vw, 3.375rem);
  --landing-peso-titulo: 500;
  --landing-secao-tamanho: clamp(1.5rem, 2.4vw, 2.125rem);
  --landing-peso-secao: 600;
  --landing-apoio-tamanho: clamp(1rem, 1.5vw, 1.25rem);
  --landing-cta-tamanho: clamp(2rem, 3.7vw, 3.25rem);
  --landing-sombra-composer: 0 16px 40px -24px rgba(7, 12, 22, .18);
  --landing-sombra-anel: 0 32px 32px -24px rgba(7, 12, 22, .26);
  /* A prévia ilustra um site de arquitetura, com tipo editorial próprio;
     o véu claro protege o texto mesmo quando a fotografia muda de recorte. */
  --landing-fonte-previa: Georgia, 'Times New Roman', serif;
  --landing-previa-veu: linear-gradient(90deg, var(--landing-papel) 0%, var(--landing-papel) 28%, transparent 85%);
}
.odim-display.contido {
  font-size: var(--landing-titulo-tamanho);
  font-weight: var(--landing-peso-titulo);
  line-height: 1.12;
  letter-spacing: -.035em;
}

/* Anel recortado (850 x 676): a luz existe só nas duas fendas da peça.
   A máscara deixa o centro vazado sem luz artificial atravessando o fundo.
   O corpo permanece fixo. Só a luz atravessa as fendas e a superfície;
   não há animação de entrada, paralaxe ou pulso de luminosidade. */
.odim-anel-vivo.preciso {
  --luz-y: 48.82%;
  --luz-x0: 11.65%;
  --luz-x1: 86.35%;
}
.odim-anel-vivo.preciso img { display: block; width: 100%; height: auto; }
.odim-anel-vivo.preciso::before {
  top: calc(var(--luz-y) - 5px);
  height: 10px;
  translate: none;
  background:
    radial-gradient(24% 50% at 17% 50%, var(--luz-anel) 0, var(--luz-anel-suave) 55%, transparent 100%),
    radial-gradient(24% 50% at 82% 50%, var(--luz-anel) 0, var(--luz-anel-suave) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 33.4%, transparent 33.4% 63.8%, #000 63.8% 100%);
  mask-image: linear-gradient(90deg, #000 0 33.4%, transparent 33.4% 63.8%, #000 63.8% 100%);
  filter: blur(1px);
  opacity: .18;
  animation: none;
}
.odim-anel-vivo.preciso::after { display: none; }
.odim-anel-vivo.preciso .anel-reflexo {
  position: absolute;
  z-index: 3;
  top: calc(var(--luz-y) - 4px);
  left: var(--luz-x0);
  width: calc(var(--luz-x1) - var(--luz-x0));
  height: 8px;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, #000 0 33.4%, transparent 33.4% 63.8%, #000 63.8% 100%);
  mask-image: linear-gradient(90deg, #000 0 33.4%, transparent 33.4% 63.8%, #000 63.8% 100%);
}
.odim-anel-vivo.preciso .anel-reflexo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, var(--luz-anel-suave) 20%, var(--odim-branco) 50%, var(--luz-anel) 65%, transparent);
  opacity: 0;
  transform: translateX(-120%);
  animation: odim-fenda-reflexo 7s var(--curva-suave) 1.2s infinite;
}
@keyframes odim-fenda-reflexo {
  0% { opacity: 0; transform: translateX(-120%); }
  7% { opacity: .9; }
  35% { opacity: .7; }
  45%, 100% { opacity: 0; transform: translateX(550%); }
}
/* A máscara segue o alpha real da peça. O reflexo especular dá acabamento
   ao metal sem acender o centro vazado ou criar uma mancha sobre o fundo. */
.odim-anel-vivo.preciso .anel-reflexo-metal {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask: url('/marca/landing/anel-isolado.webp') center / contain no-repeat;
  mask: url('/marca/landing/anel-isolado.webp') center / contain no-repeat;
}
.odim-anel-vivo.preciso .anel-reflexo-metal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 36%, var(--odim-branco) 50%, transparent 64%);
  opacity: 0;
  transform: translateX(-110%);
  animation: odim-metal-reflexo 7s var(--curva-suave) 1.2s infinite;
}
@keyframes odim-metal-reflexo {
  0% { opacity: 0; transform: translateX(-110%); }
  7% { opacity: .18; }
  35% { opacity: .14; }
  45%, 100% { opacity: 0; transform: translateX(110%); }
}
/* O site pausa apenas os reflexos quando a peça sai da tela ou a aba fica
   oculta. A geometria nunca é animada, nem ao retomar a preferência. */
.odim-anel-vivo.preciso.anel-pausado .anel-reflexo::before,
.odim-anel-vivo.preciso.anel-pausado .anel-reflexo-metal::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .odim-anel-vivo.preciso::before { animation: none; opacity: .16; }
  .odim-anel-vivo.preciso .anel-reflexo,
  .odim-anel-vivo.preciso .anel-reflexo-metal { display: none; }
}

/* Início após o login: o vidro flutua sobre uma fotografia conhecida. Estes
   papéis ficam aqui para mudar o acabamento sem espalhar cores pelas telas.
   O menu é medido sobre branco e a caixa de criação sobre a Noite (pior caso).
   Toda a variante é restrita a .odim-inicio; login e editor mantêm seus tokens. */
:root {
  --inicio-paisagem: url('/marca/inicio-paisagem.webp');
  --inicio-menu-vidro: rgba(7,12,22,.74);
  --inicio-menu-texto: #D1DCED;
  --inicio-menu-foco: #9CC3FF;
  --inicio-menu-camada: rgba(238,243,250,.08);
  --inicio-menu-ativo: rgba(25,123,255,.16);
  --inicio-menu-borda: rgba(238,243,250,.18);
  --inicio-criar-vidro: rgba(255,255,255,.48);
  /* Mais paisagem exige texto e foco escuros, inclusive sobre rocha escura. */
  --inicio-criar-texto: var(--odim-noite);
  --inicio-saudacao-texto: #334155;
  --inicio-criar-borda: rgba(255,255,255,.64);
  --inicio-criar-sombra: 0 8px 24px -8px rgba(7,12,22,.24), 0 1px 3px rgba(7,12,22,.08);
  --inicio-upgrade-borda: rgba(209,220,237,.30);
  --inicio-upgrade-vidro: rgba(7,12,22,.78);
  --inicio-upgrade-reflexo: rgba(238,243,250,.10);
}
body.odim-inicio::before { content: ''; position: fixed; inset: 0; pointer-events: none;
  background: var(--inicio-paisagem) left center/cover no-repeat; }
body.odim-inicio .inicio-app { position: relative; grid-template-columns: 232px minmax(0,1fr); }
body.odim-inicio .inicio-app.menu-recolhido { grid-template-columns: 0 minmax(0,1fr); }
body.odim-inicio .inicio-app .odim-sidebar.sidebar { width: 232px; height: 100dvh; min-height: 0; padding: var(--e-4) var(--e-3) var(--e-3);
  gap: var(--e-2); color: var(--inicio-menu-texto); background: var(--inicio-menu-vidro);
  border-right: 1px solid var(--inicio-menu-borda); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur-3) var(--curva-saida), opacity var(--dur-3) var(--curva-saida); }
body.odim-inicio .inicio-app.menu-recolhido .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
body.odim-inicio .inicio-menu-cabecalho { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: var(--e-3); }
body.odim-inicio .sidebar .odim-logo { padding: 0 var(--e-1); gap: var(--e-2); }
body.odim-inicio .sidebar .odim-logo img { width: 28px; height: 28px; }
body.odim-inicio .sidebar .odim-logo b { font-size: 20px; letter-spacing: -.04em; }
body.odim-inicio .sidebar .sidebar-collapse-btn { position: static; width: 32px; height: 32px; border-radius: var(--raio-p);
  background: var(--inicio-menu-camada); border: 1px solid var(--inicio-menu-borda); box-shadow: none; color: var(--texto-no-escuro); flex: none; }
body.odim-inicio .sidebar :focus-visible { outline-color: var(--inicio-menu-foco); }
body.odim-inicio .sidebar nav { margin: 0; padding: 0; gap: var(--e-1); overflow-y: auto; scrollbar-width: thin; }
body.odim-inicio .inicio-menu-principal { display: grid; gap: 2px; }
body.odim-inicio .sidebar .sidebar-link, body.odim-inicio .sidebar .sidebar-recent {
  min-height: 32px; height: 32px; padding: 0 var(--e-3); gap: var(--e-2); font: 500 13px/1.3 var(--fonte); color: var(--inicio-menu-texto); border-radius: var(--raio-p); }
body.odim-inicio .sidebar .sidebar-link svg, body.odim-inicio .sidebar .sidebar-recent svg { width: 16px; height: 16px; opacity: 1; }
body.odim-inicio .sidebar .sidebar-link.active, body.odim-inicio .sidebar .sidebar-link[aria-current="page"] {
  color: var(--texto-no-escuro); background: var(--inicio-menu-ativo); box-shadow: inset 3px 0 0 var(--odim-energia); }
body.odim-inicio .sidebar .sidebar-link.active > svg { color: var(--inicio-menu-foco); }
body.odim-inicio .inicio-espaco { position: relative; margin-bottom: var(--e-1); }
body.odim-inicio .inicio-espaco > summary, body.odim-inicio .inicio-menu-busca { display: flex; align-items: center; gap: var(--e-2);
  width: 100%; height: 36px; padding: 0 var(--e-3); font: 500 13px/1.3 var(--fonte); color: var(--texto-no-escuro);
  border: 1px solid var(--inicio-menu-borda); border-radius: var(--raio-p); background: var(--inicio-menu-camada); cursor: pointer; list-style: none; }
body.odim-inicio .inicio-espaco > summary::-webkit-details-marker { display: none; }
body.odim-inicio .inicio-espaco svg, body.odim-inicio .inicio-menu-busca svg { width: 16px; height: 16px; flex: none; }
body.odim-inicio .inicio-espaco > summary svg:last-child { margin-left: auto; }
body.odim-inicio .inicio-espaco > div { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  padding: var(--e-1); border-radius: var(--raio); background: var(--odim-noite-2); border: 1px solid var(--inicio-menu-borda); box-shadow: var(--sombra-3); }
body.odim-inicio .inicio-espaco-opcoes a { display: flex; align-items: center; min-height: 32px; padding: 0 var(--e-3);
  color: var(--texto-no-escuro); font: 500 13px/1.3 var(--fonte); text-decoration: none; border-radius: var(--raio-p); }
body.odim-inicio .inicio-menu-busca { margin-bottom: var(--e-3); color: var(--inicio-menu-texto); }
body.odim-inicio .inicio-menu-busca kbd { margin-left: auto; padding: 2px 4px; font: 500 11px/1.3 var(--fonte);
  border: 1px solid var(--inicio-menu-borda); border-radius: 4px; color: inherit; background: transparent; }
body.odim-inicio .inicio-menu-recentes { padding-top: var(--e-4); }
body.odim-inicio .inicio-menu-recentes > p, body.odim-inicio .inicio-menu-recentes > h2 { margin: 0 0 var(--e-2); padding-inline: var(--e-3);
  color: var(--inicio-menu-texto); font: 400 12px/1.4 var(--fonte); letter-spacing: 0; }
body.odim-inicio .inicio-menu-utilitarios { margin-top: auto; padding-top: var(--e-8); display: grid; gap: 2px; }
body.odim-inicio .inicio-avancado > summary { display: flex; align-items: center; gap: var(--e-2); min-height: 32px; padding: 0 var(--e-3);
  font: 500 13px/1.3 var(--fonte); cursor: pointer; list-style: none; border-radius: var(--raio-p); }
body.odim-inicio .inicio-avancado > summary::-webkit-details-marker { display: none; }
body.odim-inicio .inicio-avancado > summary svg { width: 16px; height: 16px; }
body.odim-inicio .inicio-avancado > summary svg:last-child { margin-left: auto; }
body.odim-inicio .inicio-avancado[open] > summary svg:last-child { transform: rotate(90deg); }
body.odim-inicio .inicio-avancado .sidebar-link { padding-left: var(--e-6); }
body.odim-inicio .sidebar #sidebar-credits { margin-top: var(--e-2); background: var(--odim-noite-2); flex: none; }
body.odim-inicio .sidebar .odim-sidebar-pe { padding: var(--e-2) var(--e-1) 0; margin: 0; border: 0; gap: var(--e-2); }
body.odim-inicio .sidebar #user-label { font-weight: 500; }
body.odim-inicio .sidebar .odim-avatar { width: 32px; height: 32px; color: var(--texto); background: var(--borda-forte); font-size: 12px; }
body.odim-inicio .sidebar .sidebar-sair { color: var(--inicio-menu-texto); }
/* O upgrade reutiliza a paisagem com tinta escura conhecida. Não recebe um
   segundo backdrop-filter dentro do menu: a imagem dá profundidade sem
   empilhar vidros ou competir com a área principal. */
body.odim-inicio .inicio-upgrade { position: relative; flex: none; display: grid; gap: 6px; min-height: 112px; overflow: hidden;
  padding: var(--e-4); border-radius: var(--raio); border: 1px solid var(--inicio-upgrade-borda);
  background-image: linear-gradient(var(--inicio-upgrade-vidro),var(--inicio-upgrade-vidro)), var(--inicio-paisagem);
  background-size: cover; background-position: 76% center;
  color: var(--texto-no-escuro); text-decoration: none; box-shadow: inset 0 1px 0 var(--inicio-upgrade-reflexo); }
body.odim-inicio .inicio-upgrade > strong { font: 600 15px/1.3 var(--fonte); }
body.odim-inicio .inicio-upgrade > span { font-size: 12px; line-height: 1.4; max-width: 19ch; color: var(--inicio-menu-texto); }
body.odim-inicio .inicio-upgrade .inicio-upgrade-botao { display: inline-flex; align-items: center; gap: var(--e-2); justify-self: start; max-width: none;
  min-height: 30px; padding: 0 var(--e-2); margin-top: var(--e-1); border: 1px solid var(--inicio-upgrade-borda); border-radius: 6px;
  background: var(--odim-noite); color: var(--texto-no-escuro); font-weight: 500; }
body.odim-inicio .inicio-upgrade-botao svg { width: 14px; height: 14px; color: var(--inicio-menu-foco); }
body.odim-inicio .odim-principal { background: var(--fundo-elevado); }
body.odim-inicio .odim-principal > .odim-topo { border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: var(--e-6); }
body.odim-inicio .odim-principal > .odim-topo.inicio-topo-rolado { background: var(--vidro-forte); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body.odim-inicio .inicio-abrir-menu { display: none; gap: var(--e-2); height: 36px; padding: 0 var(--e-3); border-radius: var(--raio-p);
  border: 1px solid var(--borda-campo); background: var(--vidro-forte); color: var(--texto); font: 500 13px/1 var(--fonte); cursor: pointer; align-items: center; }
body.odim-inicio .inicio-abrir-menu svg { width: 18px; height: 18px; }
body.odim-inicio .menu-recolhido .inicio-abrir-menu { display: inline-flex; }
body.odim-inicio .menu-recolhido .topo-logo { display: inline-flex; }
body.odim-inicio .odim-topo .topo-direita { gap: var(--e-2); }
body.odim-inicio .odim-topo .odim-btn { background: transparent; color: var(--texto); }
body.odim-inicio .home-conteudo { max-width: none; padding: 0; margin: 0; }
body.odim-inicio .inicio-heroi { position: relative; isolation: isolate; min-height: 540px; margin-top: -64px;
  padding: 150px var(--e-8) var(--e-10); background: var(--inicio-paisagem) center/cover no-repeat; }
body.odim-inicio .inicio-heroi::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.40) 54%, rgba(255,255,255,0) 84%); }
body.odim-inicio .inicio-criar-conteudo { width: 100%; max-width: 920px; margin-inline: auto; }
body.odim-inicio .home-saudacao { margin: 0 0 var(--e-8); text-align: center; text-wrap: balance; }
body.odim-inicio .home-saudacao #hero-greeting { margin-bottom: var(--e-2); font: 400 22px/1.4 var(--fonte); letter-spacing: -.02em; color: var(--inicio-saudacao-texto); }
body.odim-inicio .home-saudacao .home-sub { color: var(--texto); font: 800 clamp(30px,3vw,44px)/1.12 var(--fonte-titulo); letter-spacing: -.04em; }
body.odim-inicio .home-ideia { min-height: 180px; padding: var(--e-5) var(--e-5) var(--e-4); border: 1px solid var(--inicio-criar-borda);
  border-radius: var(--raio-g); background: var(--inicio-criar-vidro); box-shadow: var(--inicio-criar-sombra); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.odim-inicio .home-ideia::before, body.odim-inicio .home-ideia::after { display: none; }
body.odim-inicio .home-ideia textarea { border: 0; padding: 0; border-radius: 4px; min-height: 76px; max-height: 200px;
  background: transparent; font: 400 18px/1.5 var(--fonte); resize: none; color: var(--texto); }
body.odim-inicio .home-ideia textarea::placeholder { color: var(--inicio-criar-texto); opacity: 1; }
body.odim-inicio .home-ideia textarea:focus-visible { background: transparent; border: 0; outline-offset: 5px; }
body.odim-inicio .home-ideia :focus-visible { outline-color: var(--inicio-criar-texto); }
body.odim-inicio .home-ideia .odim-ideia-rodape { flex-wrap: nowrap; margin-top: var(--e-2); gap: var(--e-3); }
body.odim-inicio .home-ideia .ideia-esq { gap: var(--e-3); flex-wrap: nowrap; min-width: 0; }
body.odim-inicio .home-ideia .inicio-anexar { width: auto; height: 40px; padding: 0; font-weight: 400; color: var(--inicio-criar-texto); }
body.odim-inicio .home-ideia .inicio-anexar svg { width: 20px; height: 20px; }
body.odim-inicio .inicio-tipo { position: relative; }
body.odim-inicio .inicio-tipo-abrir { display: flex; align-items: center; gap: var(--e-2); height: 40px; padding: 0 var(--e-3);
  border: 1px solid var(--inicio-criar-texto); border-radius: var(--raio-p); background: transparent; color: var(--inicio-criar-texto); cursor: pointer; list-style: none; }
body.odim-inicio .inicio-tipo-abrir::-webkit-details-marker { display: none; }
body.odim-inicio .inicio-tipo-abrir svg { width: 18px; height: 18px; display: block; }
body.odim-inicio .inicio-tipo .ideia-seletor { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 8px); left: 0;
  min-width: 156px; display: grid; padding: var(--e-1); border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--fundo-elevado); box-shadow: var(--sombra-popover); }
body.odim-inicio .inicio-tipo:not([open]) .ideia-seletor { display: none; }
body.odim-inicio .inicio-tipo .ideia-seletor button { height: 36px; border: 0; border-radius: var(--raio-p); justify-content: flex-start; }
body.odim-inicio .home-ideia .inicio-planejar { padding: 0; background: transparent; border: 0; color: var(--inicio-criar-texto); font-weight: 400; white-space: nowrap; }
body.odim-inicio .home-ideia .inicio-planejar[aria-pressed="true"] { background: transparent; color: var(--texto); }
body.odim-inicio .inicio-switch { position: relative; width: 36px; height: 22px; border-radius: 999px;
  border: 1px solid var(--inicio-criar-texto); background: var(--borda-campo); flex: none; }
body.odim-inicio .inicio-switch::after { content: ''; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; border-radius: 50%;
  background: var(--odim-branco); box-shadow: var(--sombra-1); transition: transform var(--dur-2) var(--curva-saida); }
body.odim-inicio [aria-pressed="true"] .inicio-switch { background: var(--acao-hover); }
body.odim-inicio [aria-pressed="true"] .inicio-switch::after { transform: translateX(14px); }
body.odim-inicio #hero-criar { flex: none; height: 44px; gap: var(--e-3); font-weight: 500; }
body.odim-inicio .home-conectar { margin: var(--e-5) 0 0; text-align: center; }
body.odim-inicio .home-conectar button { font-weight: 500; color: var(--acao-hover); background: var(--vidro-forte); border-radius: 6px; padding: var(--e-1) var(--e-2); }
body.odim-inicio .inicio-projetos { margin: 0; padding: var(--e-6) var(--e-6) var(--e-12); background: var(--fundo-elevado); }
body.odim-inicio .inicio-projetos .home-secao-topo h2 { font-size: 20px; }
body.odim-inicio .inicio-projetos-acoes { display: flex; align-items: center; gap: var(--e-6); }
body.odim-inicio .inicio-projetos .home-abas { margin: 0; gap: var(--e-4); border: 0; }
body.odim-inicio .inicio-projetos .proj-grade { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--e-6); }
body.odim-inicio .inicio-projetos .proj-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.odim-inicio .inicio-projetos .proj-thumb { aspect-ratio: 16/9; border: 1px solid var(--borda); border-radius: var(--raio-p); }
body.odim-inicio .inicio-projetos .proj-info { position: relative; padding: var(--e-2) var(--e-10) 0 0; }
body.odim-inicio .inicio-projetos .proj-info h3 { font-size: 15px; }
body.odim-inicio .inicio-projetos .proj-info p { margin-bottom: var(--e-2); font-size: 12px; }
body.odim-inicio .inicio-projetos .proj-mais { position: absolute; top: var(--e-1); right: 0; margin: 0; }
body.odim-inicio .inicio-projetos .proj-rodape { align-items: flex-end; }
body.odim-inicio .inicio-projetos .home-vazio { padding: var(--e-8) var(--e-4); border: 1px solid var(--borda); border-radius: var(--raio-g); }
body.odim-inicio .inicio-ajuda { max-width: 480px; width: calc(100% - 32px); border: 0; border-radius: var(--raio-g);
  color: var(--texto); background: var(--fundo-elevado); padding: var(--e-6); box-shadow: var(--sombra-modal); }
body.odim-inicio .inicio-ajuda::backdrop { background: var(--veu); }
body.odim-inicio .inicio-ajuda-passos { padding-left: var(--e-5); color: var(--texto-2); }
body.odim-inicio .inicio-ajuda-passos li + li { margin-top: var(--e-3); }
@media (hover: hover) {
  body.odim-inicio .sidebar .sidebar-link:hover, body.odim-inicio .sidebar .sidebar-recent:hover,
  body.odim-inicio .inicio-avancado > summary:hover { background: var(--inicio-menu-camada); color: var(--texto-no-escuro); }
  body.odim-inicio .inicio-upgrade:hover { border-color: var(--inicio-menu-foco); }
}
@media (max-width: 1100px) and (min-width: 861px) {
  body.odim-inicio .inicio-heroi { padding-inline: var(--e-6); }
  body.odim-inicio .home-ideia .ideia-esq { gap: var(--e-2); }
  body.odim-inicio .inicio-anexar span { display: none; }
  body.odim-inicio #hero-criar { padding-inline: var(--e-3); }
}
@media (max-width: 860px) {
  body.odim-inicio .inicio-app, body.odim-inicio .inicio-app.menu-recolhido { grid-template-columns: minmax(0,1fr); }
  body.odim-inicio .inicio-app .odim-sidebar.sidebar { display: flex; position: fixed; height: 100dvh; width: min(288px,calc(100vw - 48px)) !important;
    transform: translateX(-100%); opacity: 0; pointer-events: none; }
  body.odim-inicio .inicio-app .odim-sidebar.sidebar.open { transform: none; opacity: 1; pointer-events: auto; }
  body.odim-inicio .sidebar .sidebar-collapse-btn { display: flex; width: 44px; height: 44px; }
  body.odim-inicio .sidebar .sidebar-link, body.odim-inicio .sidebar .sidebar-recent,
  body.odim-inicio .inicio-avancado > summary, body.odim-inicio .inicio-menu-busca, body.odim-inicio .inicio-espaco > summary { min-height: 44px; height: auto; }
  body.odim-inicio .sidebar .sidebar-sair { width: 44px; height: 44px; }
  body.odim-inicio .sidebar .inicio-menu-utilitarios { padding-top: var(--e-6); }
  body.odim-inicio .odim-principal > .odim-topo { padding: 0 var(--e-4); }
  body.odim-inicio .inicio-abrir-menu { display: inline-flex; width: 44px; height: 44px; justify-content: center; padding: 0; }
  body.odim-inicio .inicio-abrir-menu span { display: none; }
  body.odim-inicio .odim-topo .topo-logo { display: inline-flex; gap: var(--e-1); }
  body.odim-inicio .odim-topo .topo-logo b { font-size: 18px; }
  body.odim-inicio .odim-topo .topo-avatar { width: 32px; height: 32px; }
  body.odim-inicio .inicio-heroi { margin-top: -60px; min-height: 488px; padding: 112px var(--e-4) var(--e-8); background-position: 62% center; }
  body.odim-inicio .home-saudacao { margin-bottom: var(--e-6); }
  body.odim-inicio .home-saudacao #hero-greeting { display: block; font-size: 18px; }
  body.odim-inicio .home-saudacao .home-sub { display: block; font-size: 30px; line-height: 1.15; }
  body.odim-inicio .home-saudacao .home-mobile { display: none !important; }
  body.odim-inicio .home-apoio-mobile { display: none; }
  body.odim-inicio .home-ideia { min-height: 224px; padding: var(--e-4); }
  body.odim-inicio .home-ideia textarea { min-height: 90px; font-size: 16px; }
  body.odim-inicio .home-ideia .odim-ideia-rodape { flex-wrap: wrap; gap: var(--e-2); }
  body.odim-inicio .home-ideia .ideia-esq { width: 100%; gap: var(--e-2); flex-wrap: wrap; justify-content: space-between; }
  body.odim-inicio .home-ideia .inicio-anexar { width: 44px; height: 44px; }
  body.odim-inicio .inicio-anexar span { display: none; }
  body.odim-inicio .inicio-planejar .rotulo-longo { display: inline !important; }
  body.odim-inicio .inicio-planejar span { font-size: 12px; }
  body.odim-inicio .home-ideia .inicio-planejar, body.odim-inicio .inicio-tipo-abrir { height: 44px; }
  body.odim-inicio .inicio-tipo .ideia-seletor { display: none !important; }
  body.odim-inicio .inicio-tipo[open] .ideia-seletor { display: grid !important; }
  body.odim-inicio .inicio-tipo .ideia-seletor button { height: 44px; }
  body.odim-inicio #hero-criar { width: 100%; }
  body.odim-inicio .inicio-projetos { padding: var(--e-6) var(--e-4) 104px; }
  body.odim-inicio .inicio-projetos .home-secao-topo h2 { font-size: 18px; }
  body.odim-inicio .inicio-projetos .home-secao-topo { flex-wrap: wrap; }
  body.odim-inicio .inicio-projetos-acoes { width: 100%; justify-content: space-between; gap: var(--e-3); }
  body.odim-inicio .inicio-projetos-acoes .link-ver-todos { white-space: nowrap; }
  body.odim-inicio .inicio-projetos .proj-grade { grid-template-columns: minmax(0,1fr); }
  body.odim-inicio .inicio-projetos .proj-card { flex-direction: column; }
  body.odim-inicio .inicio-projetos .proj-thumb { width: 100%; aspect-ratio: 16/9; min-height: 0; flex: auto; border: 1px solid var(--borda); }
  body.odim-inicio .inicio-projetos .proj-info { padding: var(--e-2) var(--e-10) 0 0; }
}
/* Transparência reduzida e navegadores sem blur usam superfícies sólidas;
   os mesmos controles e a mesma hierarquia continuam disponíveis. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.odim-inicio .inicio-app .odim-sidebar.sidebar { background: var(--odim-noite-2); }
  body.odim-inicio .home-ideia { background: var(--fundo-elevado); }
  body.odim-inicio .odim-principal > .odim-topo,
  body.odim-inicio .odim-principal > .odim-topo.inicio-topo-rolado { background: var(--fundo-elevado); }
}
@media (prefers-reduced-transparency: reduce) {
  body.odim-inicio .inicio-app .odim-sidebar.sidebar { background: var(--odim-noite-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.odim-inicio .home-ideia { background: var(--fundo-elevado); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.odim-inicio .odim-principal > .odim-topo,
  body.odim-inicio .odim-principal > .odim-topo.inicio-topo-rolado { background: var(--fundo-elevado); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.odim-inicio .inicio-app .odim-sidebar.sidebar, body.odim-inicio .inicio-switch::after { transition: none; }
}

/* Login e site público aprovados: cenas de criação separadas da interface.
   O vidro sobre imagem recebe papéis próprios medidos nos extremos; as
   variantes não alteram o painel interno, editor ou redefinição de senha. */
:root {
  --criacao-login-vidro: rgba(14,32,52,.78);
  --criacao-login-campo: rgba(255,255,255,.045);
  --criacao-login-apoio: #D1DCED;
  --criacao-login-contorno: #A3B6CF;
  --criacao-login-foco: #9CC3FF;
  --criacao-composer-vidro: rgba(255,255,255,.54);
  --criacao-composer-texto: var(--odim-noite);
  /* Variante grafite escolhida para a landing; o cenário continua visível
     atrás do campo, e a tinta clara mantém a escrita legível. */
  --criacao-chat-vidro: rgba(26,35,46,.70);
  --criacao-chat-texto: var(--texto-no-escuro);
  --criacao-borda-luz: rgba(255,255,255,.70);
  --criacao-login-cena: url('/marca/login/criacao-ambiente.webp?v=20260929-criacao');
  --criacao-site-cena: url('/marca/landing/criacao-ambiente.webp?v=20260929-criacao');
}
body.odim-login-criacao { background: var(--fundo-elevado); }
body.odim-login-criacao .odim-dividida { position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: 100svh; padding-block: 112px var(--e-10); background: transparent; }
body.odim-login-criacao .odim-dividida-arte { display: block; position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; min-height: 100svh; background: var(--fundo-elevado); }
body.odim-login-criacao .odim-dividida-arte img { object-fit: cover; object-position: center; width: 100%; height: 100%; scale: 1; transform: none; animation: none; }
body.odim-login-criacao .odim-dividida-form { position: static; display: block; min-height: 0; width: 440px; max-width: 44%;
  margin: 0 clamp(var(--e-8),5.8vw,96px) 0 auto; padding: 0; background: transparent; }
body.odim-login-criacao .odim-dividida-caixa { max-width: none; width: 100%; padding: var(--e-8) var(--e-8) var(--e-6);
  border: 1px solid var(--criacao-login-contorno); border-radius: var(--raio-xg); background: var(--criacao-login-vidro);
  color: var(--texto-no-escuro); box-shadow: var(--sombra-3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.odim-login-criacao .login-marca { top: var(--e-10); left: clamp(var(--e-6),4vw,var(--e-16)); z-index: var(--z-topo); }
body.odim-login-criacao .login-marca .odim-logo { color: var(--texto); font-size: 28px; gap: var(--e-2); }
body.odim-login-criacao .login-marca img { width: 36px; height: 36px; }
body.odim-login-criacao .login-voltar { top: var(--e-10); right: clamp(var(--e-6),4vw,var(--e-16)); color: var(--texto); min-height: 44px; font-size: 14px; }
body.odim-login-criacao .login-voltar svg { color: var(--texto); }
body.odim-login-criacao .login-arte-texto { top: 37%; left: clamp(var(--e-10),7.2vw,120px); width: 34%; max-width: 480px; }
body.odim-login-criacao .login-arte-texto h2 { font-size: clamp(48px,4.5vw,76px); line-height: 1.04; color: var(--texto); }
body.odim-login-criacao .login-arte-texto p { margin-top: var(--e-4); color: var(--texto-2); font-size: clamp(16px,1.4vw,21px); }
body.odim-login-criacao .odim-dividida-caixa h1 { font-size: 32px; line-height: 1.15; }
body.odim-login-criacao .odim-dividida-caixa .apoio { color: var(--criacao-login-apoio); font-size: 15px; margin: var(--e-2) 0 var(--e-6); }
body.odim-login-criacao .odim-campo { margin-bottom: var(--e-4); }
body.odim-login-criacao .odim-dividida-caixa .odim-input { background: var(--criacao-login-campo); border-color: var(--criacao-login-contorno); }
body.odim-login-criacao .odim-input::placeholder { color: var(--criacao-login-apoio); }
body.odim-login-criacao .rotulo-campo, body.odim-login-criacao .odim-campo > span { font-size: 13px; }
body.odim-login-criacao .odim-dividida-caixa :focus-visible { outline-color: var(--criacao-login-foco); }
body.odim-login-criacao .login-recuperar .link-discreto { color: var(--criacao-login-foco); font-size: 13px; }
body.odim-login-criacao .com-acao button { color: var(--criacao-login-apoio); }
body.odim-login-criacao .login-provedores { gap: var(--e-3); }
body.odim-login-criacao .login-provedores .odim-provedor { height: 44px; background: var(--criacao-login-campo);
  border-color: var(--criacao-login-contorno); font-size: 14px; color: var(--texto-no-escuro); }
body.odim-login-criacao .login-provedores svg { width: 24px; height: 24px; }
body.odim-login-criacao #login-social .odim-ou { margin-block: var(--e-5); color: var(--criacao-login-apoio); }
body.odim-login-criacao .odim-ou::before, body.odim-login-criacao .odim-ou::after { background: var(--criacao-login-contorno); }
body.odim-login-criacao .odim-dividida-caixa .odim-btn.grande { height: 48px; font-size: 15px; font-weight: 500; }
body.odim-login-criacao .pe-form, body.odim-login-criacao .pe-form a, body.odim-login-criacao .login-links a,
body.odim-login-criacao .odim-idioma, body.odim-login-criacao .odim-campo .odim-ajuda,
body.odim-login-criacao .odim-rotulo { color: var(--criacao-login-apoio); }
body.odim-login-criacao .pe-form { margin-top: var(--e-4); font-size: 11px; }
body.odim-login-criacao .login-convite { text-align: center; margin: var(--e-5) 0 0; font-size: 13px; color: var(--criacao-login-apoio); }
body.odim-login-criacao .login-convite-link { color: var(--criacao-login-foco); display: inline-flex; min-height: 32px; align-items: center; text-underline-offset: 3px; }
body.odim-login-criacao .login-rodape { margin-top: var(--e-6); gap: var(--e-3); }
body.odim-login-criacao .login-links { gap: var(--e-4); }
body.odim-login-criacao .login-links a + a::before { display: none; }
/* O i18n.js monta globo e select como irmãos. O fundo pertence ao contêiner:
   no select isolado o ícone ficava solto e a seta nativa perdia o desenho. */
body.odim-login-criacao .odim-dividida-idioma.odim-idioma { gap: var(--e-1); min-height: 44px;
  padding-inline: var(--e-2); border-radius: var(--raio-p); background: var(--odim-noite-2); color: var(--criacao-login-apoio); }
body.odim-login-criacao .odim-idioma-rotulo { flex: none; }
body.odim-login-criacao .odim-idioma-select { min-height: 44px; padding-left: 0; color: inherit; background-color: transparent; }
body.odim-login-criacao .odim-dividida-idioma:focus-within { outline: 2px solid var(--criacao-login-foco); outline-offset: 2px; }
body.odim-login-criacao .odim-idioma-select:focus-visible { outline: none; }

body.odim-landing-criacao { background: var(--fundo-elevado); }
body.odim-landing-criacao .heroi-ambiente { background-image: var(--criacao-site-cena); background-position: center top; background-size: cover; }
body.odim-landing-criacao .heroi::after { height: 48px; background: linear-gradient(transparent,var(--fundo-elevado)); }
body.odim-landing-criacao .heroi-grade { min-height: 560px; padding-top: 160px; padding-bottom: var(--e-10); }
body.odim-landing-criacao .heroi-texto { max-width: 860px; }
body.odim-landing-criacao .heroi .odim-display { font-size: clamp(34px,3.3vw,54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; max-width: none; }
body.odim-landing-criacao .heroi .odim-subtitulo { color: var(--texto-2); font-size: clamp(16px,1.45vw,21px); margin-top: var(--e-3); }
body.odim-landing-criacao .heroi-ideia { padding: var(--e-5) var(--e-5) var(--e-4); margin-top: var(--e-6); min-height: 176px;
  border: 1px solid var(--criacao-borda-luz); border-radius: var(--raio-g); background: var(--criacao-composer-vidro);
  box-shadow: var(--inicio-criar-sombra); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.odim-landing-criacao .heroi-ideia:focus-within { outline-color: var(--criacao-composer-texto); }
body.odim-landing-criacao .heroi-ideia textarea { min-height: 88px; background: transparent; color: var(--criacao-composer-texto); font-size: 18px; }
body.odim-landing-criacao .heroi-ideia textarea::placeholder { color: var(--criacao-composer-texto); }
body.odim-landing-criacao .anexar-editor { color: var(--criacao-composer-texto); }
body.odim-landing-criacao .heroi-ideia { background: var(--criacao-chat-vidro); }
body.odim-landing-criacao .heroi-ideia textarea,
body.odim-landing-criacao .heroi-ideia textarea::placeholder,
body.odim-landing-criacao .anexar-editor { color: var(--criacao-chat-texto); }
body.odim-landing-criacao .heroi-ideia:focus-within { outline-color: var(--odim-noite); }
body.odim-landing-criacao .heroi-ideia .odim-btn.primario { border-color: var(--criacao-borda-luz); }
body.odim-landing-criacao .heroi-ideia .odim-btn { height: 44px; font-size: 14px; }
body.odim-landing-criacao .exemplos { margin-top: var(--e-4); }
body.odim-landing-criacao .exemplos .odim-sugestao { color: var(--criacao-composer-texto); }
body.odim-landing-criacao .destaque { padding-top: var(--e-6); background: var(--fundo-elevado); }
body.odim-landing-criacao .secao-cabeca { margin-bottom: var(--e-5); }
body.odim-landing-criacao .secao-cabeca h2 { font-size: clamp(24px,2vw,30px); font-weight: 700; }
body.odim-landing-criacao .secao-cabeca p { font-size: 15px; }
body.odim-landing-criacao .vitrine { gap: var(--e-6); }
body.odim-landing-criacao .tela { aspect-ratio: 16/9; }
body.odim-landing-criacao .topo .odim-logo img { width: 30px; height: 30px; }
body.odim-landing-criacao .topo .odim-logo b { font-size: 22px; }
body.odim-landing-criacao .menu a { font-size: 14px; }
@media (max-width: 1100px) {
  body.odim-login-criacao .odim-dividida-form { margin-right: var(--e-8); width: 416px; max-width: 45%; }
  body.odim-login-criacao .odim-dividida-caixa { padding: var(--e-6); }
  body.odim-login-criacao .login-arte-texto { left: var(--e-10); width: 42%; }
  body.odim-login-criacao .login-arte-texto h2 { font-size: 52px; }
  body.odim-landing-criacao .heroi-texto { max-width: 760px; }
}
@media (max-width: 900px) {
  body.odim-login-criacao .odim-dividida { padding: 104px var(--e-4) var(--e-8); min-height: 100svh; align-items: flex-start; }
  body.odim-login-criacao .odim-dividida-form { margin: 0 auto; width: 440px; max-width: 100%; min-height: 0; padding: 0; }
  body.odim-login-criacao .odim-dividida-caixa { padding: var(--e-6); }
  body.odim-login-criacao .odim-dividida-arte { display: block; }
  body.odim-login-criacao .odim-dividida-arte img { object-position: 62% top; }
  body.odim-login-criacao .login-arte-texto { display: none; }
  body.odim-login-criacao .login-marca { top: var(--e-6); left: var(--e-4); }
  body.odim-login-criacao .login-marca .odim-logo { font-size: 22px; color: var(--texto); }
  body.odim-login-criacao .login-marca img { width: 30px; height: 30px; }
  body.odim-login-criacao .login-voltar { top: var(--e-4); right: var(--e-4); font-size: 12px; }
  body.odim-login-criacao .odim-dividida-caixa h1 { font-size: 30px; }
  body.odim-login-criacao .login-rodape { margin-top: var(--e-6); }
}
@media (max-width: 600px) {
  body.odim-login-criacao .odim-dividida-caixa { padding: var(--e-5); }
  body.odim-landing-criacao .heroi-ambiente { background-position: 50% top; }
  body.odim-landing-criacao .heroi-grade { padding-top: 132px; padding-bottom: var(--e-8); min-height: 490px; }
  body.odim-landing-criacao .heroi .odim-display { font-size: 32px; max-width: 20ch; }
  body.odim-landing-criacao .heroi .odim-subtitulo { font-size: 16px; max-width: 30ch; }
  body.odim-landing-criacao .heroi-ideia { margin-top: var(--e-5); padding: var(--e-4); min-height: 166px; }
  body.odim-landing-criacao .heroi-ideia textarea { font-size: 16px; }
  body.odim-landing-criacao .exemplos .odim-sugestao { min-height: 44px; }
  body.odim-landing-criacao .destaque { padding-top: var(--e-6); }
  body.odim-landing-criacao .secao-cabeca h2 { font-size: 24px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.odim-login-criacao .odim-dividida-caixa { background: var(--odim-noite-2); }
  body.odim-login-criacao .odim-dividida-caixa .odim-input, body.odim-login-criacao .login-provedores .odim-provedor { background: var(--odim-noite-2); }
  body.odim-landing-criacao .heroi-ideia { background: var(--odim-noite-2); }
}
@media (prefers-reduced-transparency: reduce) {
  body.odim-login-criacao .odim-dividida-caixa { background: var(--odim-noite-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.odim-login-criacao .odim-dividida-caixa .odim-input, body.odim-login-criacao .login-provedores .odim-provedor { background: var(--odim-noite-2); }
  body.odim-landing-criacao .heroi-ideia { background: var(--odim-noite-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}