/* Waypoint — interface de pesquisa de tarifas.

   Um produto de viagem claro e calmo: página em branco-osso quente, cartões
   brancos um degrau acima dela, tinta azul-marinho profunda, e um acento só.
   A separação vem de troca de superfície e de espaço; o fio de 1px só aparece
   onde duas coisas precisam ser distinguidas. Nada aqui grita, porque o que
   esta tela faz é uma conta que muda enquanto você arrasta um controle — a
   resposta é que deve ser a coisa mais visível, não a moldura.

   Petróleo (`--accent`) é a única cor do produto: a ação principal, as
   sobrescritas, bordas ativas, anéis de foco, o selo "Melhor opção". É uma cor
   e um só significado — "isto é o que recomendamos / isto está ligado". O
   verde de status (`--green`) é da mesma família de propósito: o desenho não
   tem um verde separado, senão "melhor escolha" e "acento" seriam duas cores
   dizendo a mesma coisa. `--accent-fill` existe como nome próprio da ação
   preenchida e hoje vale o mesmo que `--accent`; o nome fica para os seletores
   existentes, e a letra branca sobre ele passa o piso de 4.5:1 sem anel nem
   isenção.

   Âmbar é reservado. Ele quer dizer "isto te custa mais" (o lado preterido da
   comparação, a barra da desvantagem) ou "algo pede a sua atenção" (aviso,
   cota apertando). Nunca é decoração e nunca é uma segunda cor de marca: se o
   âmbar aparecer num lugar que não é desvantagem nem aviso, está errado.
   O `--amber-solid` do dia é `#B4650A` e não o `#E8890B` do protótipo: o tom
   mais aceso faz só 2.2:1 sobre `--track`, abaixo do piso de 3:1 de uma barra
   que carrega significado.

   A rampa de calor (matriz de datas, barras de valor) tem três degraus
   informativos — `--accent-deep` → `--accent-mid` → `--accent-wash` — e daí
   desce para as superfícies (`--sunken`, `--surface` com fio), que já não
   dizem "bom", só "existe". Três degraus porque é o máximo que ainda se conta
   de relance: cada um passa 3:1 sobre o trilho em que é desenhado e 1.6:1
   sobre o vizinho — sem isso "rende mais" e "rende menos" são a mesma barra.
   `--fill` é o degrau surdo ("rende menos que o seu valor"), um cinza-ardósia
   de propósito fora da família do petróleo, para não parecer um petróleo
   desbotado. `tests/test_frontend_contrast.py` cobra os três pisos.

   `--pitch*` não é `--accent`. Superfícies cheias e grandes — a barra
   superior, a metade de venda da entrada, o bloco da chave de acesso — têm
   tokens próprios porque no tema noturno o acento *clareia*: meia tela de
   petróleo aceso às duas da manhã é lanterna na cara. `--pitch` é o marinho
   da tinta no dia e afunda mais ainda à noite; o petróleo entra nele em
   pinceladas (`--pitch-accent`), nunca como campo inteiro.

   `--pick*` pinta as duas linhas da comparação: o lado escolhido é lavado de
   petróleo (`--pick`) e o preterido é lavado de âmbar (`--pick-alt`). Essa
   ordem vale nos dois temas — se inverter, quem brilha é o lado que perdeu.

   `--azul` e `--gol` são identidade, não status: o disco e o monograma de
   cada companhia, e nada mais. Nunca significam bom ou barato.

   A tinta é marinho, não preto, e tem três tons — `--ink`, `--ink-dim`,
   `--ink-mute` — todos acima de 4.5:1 sobre as superfícies em que aparecem.
   `--ink-mute` carrega quase todo rótulo miúdo do desenho e é o mais claro
   que ainda passa: a hierarquia entre rótulo e valor já vem de corpo e peso,
   então não se clareia o rótulo para "dar contraste".

   Tipografia: uma pilha de sistema só, sem webfont e sem face de display.
   Pesos 500 e 600 (700 apenas nos chips de código de aeroporto e nos
   monogramas, onde o glifo identifica em corpo miúdo). Caixa de frase em
   tudo. A mono sobrevive em exatamente dois lugares — a chave de acesso e o
   comando de convite — onde distinguir caracteres parecidos é o ponto.
   `tabular-nums` alinha coluna, não a mono.

   Noite (`[data-theme="night"]`) redeclara cada token em vez de remendar, e o
   papel de impressão é um terceiro tema completo: nenhum dos três é o "real"
   que os outros imitam. */

@layer reset, base, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  summary { cursor: pointer; }
  ul { list-style: none; padding: 0; }
  dialog { color: inherit; }
  [hidden] { display: none !important; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@layer base {
  :root {
    /* ── Superfícies ───────────────────────────────────────────────────
       A página é um branco-osso quente, nunca branco puro; o cartão é o
       branco, um degrau acima dela. --sunken lê como rebaixado porque mora
       sobre cartões brancos. */
    --paper:     #F7F6F3;   /* a página */
    --surface:   #FFFFFF;   /* o cartão */
    --sunken:    #F7F6F3;   /* campo, cabeçalho de tabela, célula rebaixada */
    --track:     #E4EDEA;   /* trilho de barra e de régua */
    --row-alt:   #F7FAF9;   /* a linha ou cartão que a busca quer que você note */
    --edge:      #E9E7E2;   /* fio de 1px */
    --edge-soft: #F0EEE9;   /* divisória interna, cama do controle segmentado */
    --divider:   #F5F3EF;   /* separador de linha de tabela */

    /* ── Tinta ───────────────────────────────────────────────────────── */
    /* Marinho profundo, não preto, em três tons — todos acima de 4.5:1 sobre
       as superfícies em que aparecem. --ink-mute carrega quase todo rótulo
       miúdo e é o mais claro que ainda passa: corpo e peso já fazem a
       hierarquia, não se clareia o rótulo para "dar contraste". */
    --ink:      #0F2233;
    --ink-dim:  #3D4C5A;
    --ink-mute: #5A6B7A;

    /* ── Petróleo: a única cor do produto ────────────────────────────── */
    /* Ação principal, sobrescritas, bordas ativas, anéis de foco, ícones.
       --accent-fill vale o mesmo que --accent — o nome fica para os
       seletores existentes; a letra branca sobre ele passa 4.5:1 sem anel. */
    --accent:          #0E7C66;
    --accent-fill:     #0E7C66;
    --accent-fill-ink: #FFFFFF;

    --accent-deep:    #062820;   /* topo da rampa: a célula mais barata, a barra mais funda */
    --accent-mid:     #0C6654;   /* meio da rampa: rende mais que o seu valor */
    --accent-edge:    #CFE5DE;   /* fio de 1px em petróleo — o contorno do recomendado */
    --accent-wash:    #E7F3EF;   /* fundo tingido: chip ativo, selo positivo */
    --accent-ink:     #FFFFFF;   /* texto sobre petróleo cheio e sobre a rampa */
    --accent-ink-dim: #E4F4EF;   /* texto secundário sobre petróleo cheio */
    --fill:           #707C85;   /* o pé da rampa: "rende menos que o seu valor".
                                    Ardósia, de propósito fora da família do petróleo. */

    /* ── Superfícies escuras cheias ──────────────────────────────────── */
    /* A barra superior e a metade de venda da entrada. --pitch* não é
       --accent: no tema noturno o acento clareia, e meia tela de petróleo
       aceso às duas da manhã é lanterna na cara. O petróleo entra aqui em
       pinceladas (--pitch-accent), nunca como campo. */
    --pitch:         #0F2233;
    --pitch-ink:     #FFFFFF;
    --pitch-ink-dim: #C3D0DA;
    --pitch-edge:    transparent;
    --pitch-rule:    color-mix(in srgb, var(--pitch-ink) 16%, transparent);
    --pitch-accent:     #5FC7AE;
    --pitch-accent-dim: #9FD9C9;

    /* ── As duas linhas da comparação ────────────────────────────────── */
    /* O lado escolhido é lavado de petróleo; o preterido, de âmbar. A ordem
       vale nos dois temas, senão quem brilha é o lado que perdeu. */
    --pick:         #F7FAF9;
    --pick-ink:     #0F2233;
    --pick-alt:     #FDF2E3;
    --pick-alt-ink: #8F4108;

    /* ── Status ──────────────────────────────────────────────────────── */
    /* O verde é família do petróleo — o desenho não tem um verde separado. */
    --green:       #0B5245;   /* texto "melhor escolha" */
    --green-wash:  #E7F3EF;   /* o fundo dele */
    --green-solid: #0E7C66;   /* o disco do marcador */

    /* Âmbar é reservado: desvantagem monetária e aviso, nunca decoração.
       O sólido do dia é #B4650A e não o #E8890B do protótipo — o aceso faz
       2.2:1 sobre --track, abaixo do piso de 3:1 de barra com significado. */
    --amber:       #8F4108;   /* texto de aviso e de desvantagem */
    --amber-wash:  #FDF2E3;   /* o fundo dele */
    --amber-solid: #B4650A;   /* a barra da desvantagem */
    --amber-track: #FAE3C4;   /* a região "pontos ganham" do slider */

    --red:       #B03A20;   /* erro: texto e borda de campo */
    --red-wash:  #FEF6F4;   /* fundo de campo inválido */
    --red-track: #F3D8D0;   /* trilho da cota bloqueada */

    /* ── Identidade das companhias — identidade, não status ──────────── */
    --azul: #1A66C4;
    --gol:  #B4650A;

    /* ── Elevação: sombras tingidas do marinho da tinta ──────────────── */
    --shadow-card:   0 1px 2px rgba(15, 34, 51, .06);
    --shadow-raised: 0 1px 2px rgba(15, 34, 51, .06), 0 4px 16px rgba(15, 34, 51, .05);
    --shadow-lift:   0 4px 18px rgba(15, 34, 51, .11);
    --shadow-pop:    0 10px 30px rgba(15, 34, 51, .2);
    --shadow-toast:  0 10px 30px rgba(15, 34, 51, .28);
    --shadow-action: 0 4px 14px rgba(14, 124, 102, .3);
    --shadow-thumb:  0 2px 8px rgba(15, 34, 51, .24);
    /* Nomes herdados do desenho anterior; saem quando os componentes migrarem. */
    --shadow-1: var(--shadow-card);
    --shadow-2: var(--shadow-pop);
    --shadow-3: 0 26px 64px rgba(15, 34, 51, .3);

    --radius:    16px;   /* cartão: formulário, recomendação, companhia, lista */
    --radius-sm: 12px;   /* campo, painel de filtros, popover, toast */
    --radius-xs: 12px;   /* célula da matriz */
    --pill:      9999px; /* pílula, chip, selo, chave, barra, trilho */

    --pad:      clamp(18px, 2.4vw, 32px);
    /* A medida da página. Larga o bastante para a recomendação respirar em
       duas colunas e estreita o bastante para o texto não virar linha de 200
       caracteres; as duas grades que passam disso rolam por dentro. */
    --shell:    1180px;
    /* Altura real da barra superior; quem gruda embaixo dela — a busca e os
       títulos de seção — se posiciona a partir daqui. */
    --topbar-h: 64px;

    /* Uma pilha de sistema só: sem webfont, sem face de display. A mono fica
       para a chave de acesso e o comando de convite, onde distinguir
       caracteres parecidos é o ponto. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
            Helvetica, Arial, sans-serif;
    --display: var(--font);
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --ease:     ease-out;
    --ease-pop: ease-out;
    --dur:      .16s;

    color-scheme: light;
  }

  /* "Noite": a mesma página com a luz apagada e o petróleo aceso. A rampa
     inverte de sentido junto com o acento — --accent-deep, que no claro é o
     mais escuro, aqui é o petróleo mais pálido, porque o topo da rampa é
     sempre o mais distante do trilho — e os textos sobre petróleo cheio
     invertem com ela. --pitch faz o contrário do acento e afunda, porque ele
     é superfície grande. Nenhum token fica para trás: este bloco redeclara o
     conjunto inteiro, não remenda o do dia. */
  :root[data-theme="night"] {
    --paper:     #0B1A24;
    --surface:   #13252F;
    --sunken:    #0F202A;
    --track:     #1D3A38;
    --row-alt:   #162C33;
    --edge:      #263C48;
    --edge-soft: #1B2E3A;
    --divider:   #182A34;

    --ink:      #EDF3F5;
    --ink-dim:  #BACBD4;
    --ink-mute: #9AAFBA;

    --accent:          #4FBFA3;
    --accent-fill:     #4FBFA3;
    --accent-fill-ink: #04231C;

    --accent-deep:    #92EBCF;
    --accent-mid:     #23AE92;
    --accent-edge:    #2C5A50;
    --accent-wash:    #14322C;
    --accent-ink:     #04231C;
    --accent-ink-dim: #0B3A30;
    --fill:           #6D7883;

    --pitch:         #081319;
    --pitch-ink:     #F2F7F8;
    --pitch-ink-dim: #A9BDC7;
    --pitch-edge:    transparent;
    --pitch-rule:    color-mix(in srgb, var(--pitch-ink) 16%, transparent);
    --pitch-accent:     #5FC7AE;
    --pitch-accent-dim: #8FD6C2;

    --pick:         #16332C;
    --pick-ink:     #E8F5F0;
    --pick-alt:     #33240F;
    --pick-alt-ink: #F3C98A;

    --green:       #6FD3B4;
    --green-wash:  #14322C;
    --green-solid: #4FBFA3;

    --amber:       #EFA85A;
    --amber-wash:  #33240F;
    --amber-solid: #E8890B;
    --amber-track: #4A3416;

    --red:       #F2907A;
    --red-wash:  #331812;
    --red-track: #4A211A;

    --azul: #7FB2F0;
    --gol:  #EFA85A;

    color-scheme: dark;
  }

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

  /* Papel liso. A lavagem em gradiente que ficava atrás de tudo existia para
     dar profundidade ao papelão; sobre papel claro ela só suja o canto da tela. */
  body {
    font-family: var(--font);
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s var(--ease), color .25s var(--ease);
  }

  /* Todo número da tela alinha por coluna. Ligar isto uma vez aqui é mais
     confiável que lembrar de ligar em cada célula nova. */
  .tabular, .num, input[type="number"], input[type="date"], input[type="time"],
  .pick-figure, .pv-v, .pv-tip, .pv-ends, .explain-rows dd,
  .airline-stats dd, .f-time b, .f-cash, .f-pts, .f-rate, .matrix-cell,
  .rung-pts, .rung-cash, .rung-rate, .result-meta, .ruler-axis,
  .range-ends, .range-fact dd, .cost, .progress-count, .quota-text,
  .window-card-v b, .window-card-alt, .cell-leg-time, .cell-leg-meta {
    font-variant-numeric: tabular-nums;
  }

  h1, h2, h3 { letter-spacing: -.02em; font-weight: 600; }
  h2 { font-size: 19px; letter-spacing: -.02em; line-height: 1.25; }
  h3 { font-size: 17px; line-height: 1.3; }

  /* O contorno acompanha o border-radius do próprio elemento, então não
     forçamos raio aqui — uma pílula focada continua pílula. */
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  ::selection { background: var(--accent-wash); color: var(--ink); }

  .icon {
    width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; flex: none;
  }

  /* O feedback sobrevive a isto: toda mudança de estado também muda cor e
     texto — ela só deixa de viajar. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {

  /* ── Boot ─────────────────────────────────────────────────────────── */
  .boot { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; background: var(--paper); }
  .boot-mark { opacity: .4; animation: drift 1.4s var(--ease) infinite; }
  @keyframes drift { 0%, 100% { transform: translateX(-8px); opacity: .25 } 50% { transform: translateX(8px); opacity: .7 } }

  /* ── Marca ──────────────────────────────────────────────────────────
     Três retângulos: a barra âmbar, a barra petróleo e o poste que cruza as
     duas — um marcador de rota sobre a linha da rota. O âmbar da marca é o
     aceso (#E8890B) de propósito: a marca identifica, não informa, e é o
     único lugar em que o aceso aparece sobre claro. */
  .logo { flex: none; display: block; }
  .wordmark { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }

  /* ── Entrada ──────────────────────────────────────────────────────────
     Duas metades iguais: à esquerda o que o Waypoint faz, em --pitch, com a
     conta que ele responde em números de verdade; à direita, sobre o papel,
     o único campo que a pessoa precisa preencher. */
  .gate { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width: 940px) { .gate { grid-template-columns: 1fr; } }

  .gate-pitch {
    background: var(--pitch); color: var(--pitch-ink);
    padding: clamp(32px, 4.4vw, 56px);
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  }
  /* No estreito a coluna de venda vira um cabeçalho curto: a manchete e o
     número ficam, o parágrafo sai. Quem abriu no celular quer o campo. */
  @media (max-width: 940px) {
    .gate-pitch { gap: 24px; padding-bottom: 32px; }
  }
  .gate-pitch .wordmark { color: var(--pitch-ink); font-size: 22px; }

  .gate-brand { display: flex; align-items: center; gap: 12px; }
  .gate-say { display: flex; flex-direction: column; gap: 24px; }
  .gate-say h1 {
    font-size: clamp(34px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -.035em;
    max-width: 16ch; color: var(--pitch-ink);
  }
  .gate-lede {
    font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; max-width: 36ch;
    color: var(--pitch-ink-dim); text-wrap: pretty;
  }
  @media (max-width: 940px) { .gate-lede { display: none; } }

  /* A conta que a ferramenta responde, dita antes de entrar: é a unidade do
     produto, e ninguém chega sabendo lê-la. */
  .gate-proof {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 20px 24px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--pitch-ink) 12%, transparent);
  }
  .gate-proof b {
    font-weight: 600; font-size: clamp(28px, 2.8vw, 40px);
    line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    color: var(--pitch-ink);
  }
  .gate-proof small { font-size: 15px; line-height: 1.3; color: var(--pitch-ink-dim); }

  .gate-panel { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); background: var(--paper); }
  .gate-card { width: 100%; max-width: 400px; }
  .gate-form { display: grid; gap: 20px; }
  .gate-head { display: grid; gap: 8px; }
  .gate-head h2 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1; letter-spacing: -.03em; }
  .gate-head p { font-size: 15px; line-height: 1.4; color: var(--ink-dim); text-wrap: pretty; }
  .gate-note { font-size: 13px; color: var(--ink-mute); text-wrap: pretty; }
  /* A mono sobrevive aqui e no campo da chave: distinguir caracteres
     parecidos é o ponto destes dois lugares, e só deles. */
  .gate-note code { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
  .input-key { font-family: var(--mono); }

  .gate-form input:not([type="checkbox"]) {
    width: 100%; min-width: 0; padding: 12px 14px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--edge); border-radius: var(--radius-sm); font-size: 15px;
    transition: border-color var(--dur), box-shadow var(--dur);
  }
  .gate-form input:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px rgba(14, 124, 102, .15);
  }

  .gate-error {
    margin-top: 16px; color: var(--red); font-size: 13px; text-wrap: pretty;
    background: var(--red-wash); border-radius: var(--radius-sm); padding: 11px 14px;
  }
  .gate-ok {
    display: inline-flex; align-items: center; gap: 8px; justify-self: start;
    padding: 6px 13px; border-radius: var(--pill);
    background: var(--green-wash); color: var(--green); font-size: 13px; font-weight: 600;
  }
  .gate-ok b { color: inherit; }

  /* A chave de acesso, mostrada uma única vez. Ela ganha o bloco em escuro
     cheio porque é a única coisa nesta tela que não dá para recuperar depois. */
  .keycard {
    display: grid; gap: 14px; padding: 22px; border-radius: var(--radius);
    background: var(--pitch); color: var(--pitch-ink-dim);
  }
  .keycard .field-label { color: var(--pitch-ink-dim); }
  .keycard-value {
    font-family: var(--mono); font-size: 15px; line-height: 1.5; color: var(--pitch-ink);
    word-break: break-all; user-select: all;
    background: color-mix(in srgb, var(--pitch-ink) 16%, transparent);
    border-radius: var(--radius-sm); padding: 14px 16px;
  }
  .keycard-actions { display: flex; gap: 8px; }
  .keycard-actions .btn { flex: 1; }
  .btn-on-accent { background: var(--pitch-ink); color: var(--pitch); }
  .btn-on-accent:hover:not(:disabled) { background: color-mix(in srgb, var(--pitch-ink) 88%, var(--pitch)); }
  /* 70%, não 50%: esta borda é tinta clara sobre escuro, e a 50% ela
     desaparecia — o botão ficava sem contorno nenhum. */
  .btn-on-accent-outline {
    background: transparent; color: var(--pitch-ink);
    border-color: color-mix(in srgb, var(--pitch-ink) 70%, transparent);
  }
  .btn-on-accent-outline:hover:not(:disabled) { background: color-mix(in srgb, var(--pitch-ink) 14%, transparent); }

  .gate-warn {
    font-size: 14px; line-height: 1.4; color: var(--red); text-wrap: pretty;
    background: var(--red-wash); border-radius: var(--radius-sm); padding: 14px 16px;
  }
  .gate-warn b { color: inherit; font-weight: 600; }

  .check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-dim); }
  .check input { width: auto; flex: none; accent-color: var(--accent); }

  /* ── Barra superior ─────────────────────────────────────────────────
     A única superfície escura cheia da aplicação, e é --pitch e não
     --accent de propósito: no tema noturno o acento clareia, e uma barra
     inteira de petróleo aceso é lanterna na cara. */
  .app { min-height: 100vh; display: flex; flex-direction: column; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-inline: max(var(--pad), calc((100% - var(--shell)) / 2));
    min-height: var(--topbar-h); flex: none;
    background: var(--pitch); color: var(--pitch-ink);
    position: sticky; top: 0; z-index: 20;
  }
  /* Sobre o escuro o anel de foco padrão some: aqui ele é o petróleo aceso. */
  .topbar :focus-visible { outline-color: var(--pitch-accent); }
  .topbar-left { display: flex; align-items: center; gap: 11px; }
  .topbar-right { display: flex; align-items: center; gap: 8px; }
  @media (max-width: 520px) {
    .topbar { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
    .topbar-right { flex-basis: 100%; justify-content: flex-end; }
  }

  .top-status {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 7px 10px; border-radius: var(--pill);
    font-size: 13px; color: var(--pitch-ink-dim);
    transition: background var(--dur);
  }
  .top-status:hover { background: color-mix(in srgb, var(--pitch-ink) 9%, transparent); }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pitch-ink-dim); flex: none; }
  .top-status.is-online .dot { background: var(--pitch-accent); }
  /* Salmão claro em vez de --red: o vermelho de status não foi medido sobre
     --pitch, e estes dois passam de 8:1 sobre as duas noites da barra. */
  .top-status.is-offline { color: #FFC9BC; }
  .top-status.is-offline .dot { background: #FFB4A3; }
  @media (max-width: 700px) { .top-status { display: none; } }

  /* A cota mostra a barra e o número juntos: "58 de 80" sozinho não diz se
     isso é muito, e a barra sozinha não diz de quanto. Calma por padrão;
     âmbar perto do fim; bloqueada quando acabou — limite, nunca erro. */
  .top-quota {
    display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    padding: 7px 10px; border-radius: var(--pill);
    font-size: 13px; color: var(--pitch-ink-dim);
    transition: background var(--dur), color var(--dur);
  }
  .quota-bar { width: 52px; height: 4px; border-radius: var(--pill); background: color-mix(in srgb, var(--pitch-ink) 22%, transparent); overflow: hidden; flex: none; }
  .quota-bar i { display: block; height: 100%; background: var(--pitch-accent); transition: width .4s var(--ease); }
  .top-quota.is-warn { background: color-mix(in srgb, var(--pitch-ink) 12%, transparent); color: #FFE0B5; }
  .top-quota.is-warn .quota-bar i { background: #FFD08A; }
  .top-quota.is-blocked { background: color-mix(in srgb, var(--pitch-ink) 12%, transparent); color: #FFC9BC; }
  .top-quota.is-blocked .quota-bar i { background: #FFB4A3; }
  @media (max-width: 860px) { .top-quota { display: none; } }

  .top-pill {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 7px 12px; border-radius: var(--pill);
    background: color-mix(in srgb, var(--pitch-ink) 9%, transparent);
    font-size: 13px; color: var(--pitch-ink-dim);
    transition: background var(--dur);
  }
  .top-pill:hover { background: color-mix(in srgb, var(--pitch-ink) 14%, transparent); }
  .top-pill output { font-weight: 600; color: var(--pitch-accent); font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) { .pill-label { display: none; } }

  .btn-icon {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border-radius: var(--pill); color: var(--pitch-ink-dim);
    font-size: 15px; transition: background var(--dur), color var(--dur);
  }
  .btn-icon:hover { background: color-mix(in srgb, var(--pitch-ink) 12%, transparent); color: var(--pitch-ink); }
  .btn-icon .icon-moon { display: none; }
  [data-theme="night"] .btn-icon .icon-sun { display: none; }
  [data-theme="night"] .btn-icon .icon-moon { display: block; }
  /* Fora da barra escura o mesmo botão volta à tinta da página. */
  .filters-head .btn-icon { color: var(--ink-dim); }
  .filters-head .btn-icon:hover { background: var(--edge); color: var(--ink); }

  .menu { position: relative; }
  .menu-trigger {
    display: flex; align-items: center; gap: 9px; list-style: none;
    padding: 4px 13px 4px 4px; border-radius: var(--pill);
    background: color-mix(in srgb, var(--pitch-ink) 9%, transparent);
    transition: background var(--dur);
  }
  .menu-trigger::-webkit-details-marker { display: none; }
  .menu-trigger:hover { background: color-mix(in srgb, var(--pitch-ink) 14%, transparent); }
  .avatar {
    display: grid; place-items: center; width: 26px; height: 26px; flex: none;
    border-radius: 50%; background: var(--pitch-accent); color: #0F2233;
    font-size: 12px; font-weight: 600;
  }
  .who { font-size: 13px; color: var(--pitch-ink-dim); }
  @media (max-width: 560px) { .who { display: none; } }
  .menu-body {
    position: absolute; right: 0; top: calc(100% + 8px); width: 244px; display: grid; gap: 12px;
    padding: 16px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
    border: 1px solid var(--edge); box-shadow: var(--shadow-pop); z-index: 25;
  }
  .menu[open] .menu-body { animation: pop-in .16s var(--ease) both; }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
  .menu-note { font-size: 13px; color: var(--ink-mute); text-wrap: pretty; }

  /* Popover do valor do ponto na barra: o irmão pequeno da calculadora do
     resultado — mesma faixa, mesma unidade, disponível antes de haver
     resultado. Os dois controles escrevem no mesmo número. */
  .popover { position: relative; }
  .popover-trigger { list-style: none; }
  .popover-trigger::-webkit-details-marker { display: none; }
  .popover-body {
    position: absolute; left: 0; top: calc(100% + 8px); width: min(340px, 90vw);
    display: grid; gap: 14px; padding: 16px; border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--edge); box-shadow: var(--shadow-pop); z-index: 25;
  }
  .popover[open] .popover-body { animation: pop-in .16s var(--ease) both; }
  .topbar-right .popover-body { left: auto; right: 0; }
  /* At the width where .topbar-right wraps onto its own row, the point-value
     trigger sits mid-row rather than flush with the right edge — re-center on
     the trigger instead of hugging either of its sides. */
  @media (max-width: 520px) {
    .topbar-right .popover-body {
      left: 50%; right: auto; margin-left: -150px;
      width: min(300px, calc(100vw - 32px));
    }
  }
  .point-value { display: grid; gap: 10px; }
  .point-value input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 24px;
    padding: 0; margin: 0; background: none; border: 0; box-shadow: none;
  }
  .point-value input[type="range"]::-webkit-slider-runnable-track {
    height: 8px; border-radius: var(--pill); background: var(--track); margin-top: 8px;
  }
  .point-value input[type="range"]::-moz-range-track {
    height: 8px; border-radius: var(--pill); background: var(--track);
  }
  .point-value input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px;
    border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent);
    box-shadow: var(--shadow-thumb); cursor: grab;
  }
  .point-value input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
    background: var(--surface); border: 2.5px solid var(--accent);
    box-shadow: var(--shadow-thumb); cursor: grab;
  }
  .point-value input[type="range"]:focus-visible { outline: none; }
  .point-value input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(14, 124, 102, .28); }
  .point-value input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(14, 124, 102, .28); }
  .point-value-note { font-size: 12.5px; color: var(--ink-mute); text-wrap: pretty; }

  /* ── Avisos de página ─────────────────────────────────────────────── */
  .page-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px max(var(--pad), calc((100% - var(--shell)) / 2));
    background: var(--edge-soft); color: var(--ink-dim); font-size: 13.5px;
    animation: panel .22s var(--ease);
  }
  .page-banner .icon { width: 17px; height: 17px; flex: none; }
  .page-banner p { flex: 1; min-width: 0; text-wrap: pretty; }
  .page-banner b { font-weight: 600; }
  .page-banner.is-amber { background: var(--amber-wash); color: var(--amber); }
  .page-banner .btn { flex: none; }

  /* ── Layout ─────────────────────────────────────────────────────────── */
  .layout {
    flex: 1; display: flex; flex-direction: column; gap: var(--pad); padding: var(--pad);
    padding-bottom: clamp(48px, 8vw, 104px);
    max-width: var(--shell); width: 100%; margin-inline: auto;
  }

  /* ── O cartão de busca ────────────────────────────────────────────────
     Grudado abaixo da barra superior: a busca precisa continuar alcançável
     enquanto o resultado rola por baixo dela. */
  .searchbar {
    position: sticky; top: var(--topbar-h); z-index: 15;
    background: var(--paper); padding-top: var(--pad); margin-top: calc(var(--pad) * -1);
  }
  .search-card {
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: var(--radius); padding: 16px;
    box-shadow: var(--shadow-raised);
  }

  .form-row-1 { display: flex; gap: 9px; align-items: flex-start; flex-wrap: wrap; }
  /* Os grupos de data são invólucros lógicos, não caixas: display:contents
     deixa os campos deles participarem da mesma linha flex dos outros.
     [hidden] continua vencendo — display:none !important mora no reset. */
  .dates-exact, .dates-flex { display: contents; }

  .field { flex: 1 1 0; min-width: 128px; position: relative; }
  .ac-field { flex: 1.35 1 0; min-width: 150px; }
  .field-pax { flex: 1.05 1 0; }
  .field-nights { flex: 1.2 1 0; }
  /* Os campos de data e o de noites pedem mais chão que os demais. */
  .dates-exact .field, .dates-flex .field { min-width: 154px; }
  /* Mas o controle nativo de data não reflui quando aperta: em vez de
     encolher, o botão do calendário sobe por cima do ano ("14/09/202…").
     Quem sabe a largura necessária é ele mesmo — min-content mede a caixa
     inteira (ícone + data + botão) e acompanha fonte, zoom e locale, coisa
     que nenhum número fixo faz. */
  .field:has(input[type="date"]) { min-width: min-content; }

  .field-label {
    display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-mute);
    margin-bottom: 6px;
  }
  .field-box {
    display: flex; align-items: center; gap: 9px; padding: 10px 12px;
    border-radius: var(--radius-sm); background: var(--sunken);
    border: 1px solid var(--edge);
    transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
  }
  .field-box > .icon { width: 17px; height: 17px; color: var(--ink-mute); }
  .field-box input {
    border: 0; background: none; padding: 0; width: 100%; min-width: 0;
    font-size: 14.5px; font-weight: 600; color: var(--ink); outline: none;
  }
  .field-box input::placeholder { color: var(--ink-mute); font-weight: 400; }
  .field-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(14, 124, 102, .15);
  }
  .field-hint {
    font-size: 12px; color: var(--ink-mute); margin-top: 5px; min-height: 1.35em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Inválido é o campo, não o formulário: a borda, o fundo e a dica trocam
     juntos, e a mensagem mora onde a correção mora. */
  .field.is-invalid .field-box { border-color: var(--red); background: var(--red-wash); }
  .field.is-invalid .field-box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
  .field.is-invalid .field-hint { color: var(--red); white-space: normal; }

  /* "1 adulto" é um rótulo, não um parágrafo: apertado ele encolhe com a
     linha, nunca quebra em duas e engorda a caixa. */
  .field-btn { width: 100%; text-align: left; cursor: pointer; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
  .field-btn .chev { margin-left: auto; width: 14px; height: 14px; }

  input[type="date"] { min-height: 21px; }
  [data-theme="night"] ::-webkit-calendar-picker-indicator { filter: invert(.65); cursor: pointer; }

  .nights-row { gap: 6px; padding: 6px 8px; }
  .nights-row input { text-align: center; font-variant-numeric: tabular-nums; }
  .nights-sep { font-size: 12.5px; color: var(--ink-mute); flex: none; }

  .swap {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    margin-top: 24px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--edge);
    box-shadow: var(--shadow-card); color: var(--accent);
    transition: background var(--dur), transform .22s var(--ease);
  }
  .swap:hover { background: var(--accent-wash); }
  .swap .icon { width: 16px; height: 16px; }

  .btn-go { height: 44px; padding: 0 22px; margin-top: 24px; border-radius: var(--radius-sm); flex: none; font-size: 14.5px; }

  /* ── O popover dos passageiros ────────────────────────────────────── */
  .popover-panel {
    position: absolute; top: calc(100% - 22px); left: 0; z-index: 30;
    min-width: 264px; padding: 14px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--edge);
    box-shadow: var(--shadow-pop);
    animation: pop-in .16s var(--ease) both;
  }
  .stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .stepper-say { flex: 1; min-width: 0; }
  .stepper-say b { display: block; font-size: 13.5px; font-weight: 600; }
  .stepper-say small { font-size: 12px; color: var(--ink-mute); }
  .stepper { display: flex; align-items: center; gap: 10px; }
  .stepper b { font-size: 14.5px; font-weight: 600; min-width: 18px; text-align: center; }
  .step {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none;
    border-radius: 50%; border: 1px solid #D6D3CC; background: var(--surface);
    font-size: 16px; color: var(--ink);
    transition: border-color var(--dur), background var(--dur), opacity var(--dur);
  }
  .step:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); }
  .step:disabled { opacity: .35; pointer-events: none; }
  .popover-note { font-size: 12px; color: var(--ink-mute); margin-top: 10px; text-wrap: pretty; }
  .popover-panel .btn { margin-top: 12px; }
  .btn-ink { background: var(--ink); color: var(--surface); border-radius: 9px; }
  .btn-ink:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 88%, var(--surface)); }

  /* ── O autocomplete ───────────────────────────────────────────────────
     Uma listbox de verdade no lugar do <datalist>: busca por cidade, código
     e nome, navegável por seta, com o trecho casado marcado dentro do nome. */
  .ac-panel {
    position: absolute; top: calc(100% - 22px); left: 0; z-index: 30;
    width: max(100%, 264px); max-height: 320px; overflow-y: auto;
    padding: 6px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--edge);
    box-shadow: var(--shadow-pop);
    animation: pop-in .16s var(--ease) both;
  }
  .ac-label { font-size: 11px; font-weight: 600; color: var(--ink-mute); padding: 6px 8px 4px; }
  .ac-row {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 8px; border-radius: 9px; text-align: left;
    transition: background var(--dur);
  }
  .ac-row:hover { background: var(--row-alt); }
  /* A linha ativa é o indicador de foco do combobox: precisa se ver de
     relance, não ser um sussurro de fundo. */
  .ac-row.is-active {
    background: var(--accent-wash);
    outline: 2px solid var(--accent); outline-offset: -2px;
  }
  .ac-code {
    display: grid; place-items: center; width: 36px; height: 26px; flex: none;
    border-radius: 6px; background: var(--edge-soft);
    font-size: 11.5px; font-weight: 700; color: var(--ink);
  }
  .ac-say { min-width: 0; }
  .ac-say b { display: block; font-size: 13.5px; font-weight: 600; }
  .ac-say small { display: block; font-size: 12px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-say mark { background: #FFEFC2; color: var(--ink); border-radius: 3px; padding: 0 1px; }
  [data-theme="night"] .ac-say mark { background: #4A3416; color: var(--ink); }
  .ac-none { font-size: 12.5px; color: var(--ink-mute); padding: 10px 8px; text-wrap: pretty; }

  /* ── A segunda linha do formulário ────────────────────────────────── */
  .form-row-2 {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge-soft);
  }
  .v-divider { width: 1px; height: 22px; background: var(--edge-soft); flex: none; }
  @media (max-width: 760px) { .v-divider { display: none; } }

  /* O controle segmentado: cama rebaixada, item aceso em branco. */
  .seg { display: flex; gap: 3px; background: var(--edge-soft); padding: 3px; border-radius: 10px; }
  .seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .seg span {
    display: block; padding: 7px 13px; border-radius: 8px; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--ink-mute); white-space: nowrap;
    transition: background var(--dur), color var(--dur), box-shadow var(--dur);
  }
  .seg input:checked + span {
    background: var(--surface); color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 34, 51, .08);
  }
  .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Chips de companhia: identidade no disco, estado na lavagem. */
  .airline-chips { display: flex; gap: 6px; border: 0; padding: 0; margin: 0; }
  .chip-toggle { position: relative; display: inline-flex; }
  .chip-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .chip-toggle span {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
    border-radius: var(--pill); background: var(--surface); border: 1px solid var(--edge);
    font-size: 13px; font-weight: 500; color: var(--ink-mute); cursor: pointer;
    transition: background var(--dur), border-color var(--dur), color var(--dur);
  }
  .chip-toggle input:checked + span {
    background: var(--accent-wash); border-color: var(--accent);
    color: var(--green); font-weight: 600;
  }
  .chip-toggle .tick { display: none; width: 12px; height: 12px; color: var(--accent); }
  .chip-toggle input:checked + span .tick { display: inline; }
  .chip-toggle input:disabled + span { opacity: .45; cursor: not-allowed; }
  .chip-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .id-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .id-dot.is-azul { background: var(--azul); }
  .id-dot.is-gol { background: var(--gol); }

  /* A chave: rótulo de verdade ao lado, nunca só um tooltip. */
  .switch {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer;
  }
  .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .switch-track {
    width: 38px; height: 22px; border-radius: var(--pill); flex: none;
    background: #C6CDD2; position: relative; transition: background .18s var(--ease);
  }
  .switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 34, 51, .2);
    transition: transform .18s var(--ease);
  }
  .switch input:checked ~ .switch-track { background: var(--accent); }
  .switch input:checked ~ .switch-track::after { transform: translateX(16px); }
  .switch input:focus-visible ~ .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* O medidor de requisições: o custo da busca antes de custar. */
  .cost { margin-left: auto; font-size: 12.5px; color: var(--ink-mute); text-align: right; min-width: 0; }
  .cost b { font-weight: 600; color: var(--ink-dim); }
  .cost-detail { display: block; font-size: 12px; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cost.is-over { color: var(--amber); }
  .cost.is-over b, .cost.is-over .cost-detail { color: var(--amber); white-space: normal; }
  @media (max-width: 760px) { .cost { text-align: left; margin-left: 0; flex-basis: 100%; } }

  .filters-btn {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    padding: 8px 14px; border-radius: var(--pill);
    background: var(--surface); border: 1px solid var(--edge);
    font-size: 13px; font-weight: 600; color: var(--ink);
    transition: border-color var(--dur), background var(--dur);
  }
  .filters-btn:hover { border-color: var(--accent-edge); }
  .filters-btn .icon { width: 15px; height: 15px; }
  .filters-count {
    display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: var(--pill); background: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 600;
  }

  /* ── O painel de filtros ──────────────────────────────────────────────
     Tudo que é avançado, atrás de um gesto: os campos continuam sendo os
     que o servidor conhece, só mudaram de casa. */
  .filters-panel {
    margin-top: 14px; padding: 16px; border-radius: var(--radius-sm);
    background: var(--sunken); border: 1px solid var(--edge);
    animation: panel .24s var(--ease);
  }
  @keyframes panel { from { opacity: 0; transform: translateY(-4px); } }
  .filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .filters-head h3 { font-size: 15px; font-weight: 600; }
  .filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .filters-grid .field { min-width: 0; }
  .filters-grid input, .filters-grid select {
    width: 100%; min-width: 0; padding: 10px 12px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--edge); border-radius: 10px; font-size: 13.5px;
    transition: border-color var(--dur), box-shadow var(--dur);
  }
  .filters-grid input:focus, .filters-grid select:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px rgba(14, 124, 102, .15);
  }
  .filters-grid input::placeholder { color: var(--ink-mute); }
  .filters-grid select {
    appearance: none; padding-right: 30px; background-repeat: no-repeat;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
      linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
    background-position: right 15px center, right 10px center;
    background-size: 5px 5px;
  }

  .filter-chips {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 12px; font-size: 12.5px;
  }
  .chips-k { color: var(--ink-mute); }
  .chip-active {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 6px 5px 12px; border-radius: var(--pill);
    background: var(--accent-wash); color: var(--green);
    font-size: 12.5px; font-weight: 600;
    transition: background var(--dur);
  }
  .chip-x {
    display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
    background: color-mix(in srgb, var(--green) 14%, transparent);
  }
  .chip-x .icon { width: 11px; height: 11px; }
  .chip-active:hover .chip-x { background: color-mix(in srgb, var(--green) 26%, transparent); }
  .btn-text { color: var(--accent); font-weight: 600; font-size: 12.5px; }
  .btn-text:hover { text-decoration: underline; }

  .form-error {
    margin-top: 12px; color: var(--red); font-size: 13px; text-wrap: pretty;
    background: var(--red-wash); border-radius: var(--radius-sm); padding: 11px 14px;
  }

  /* ── Botões ───────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    border: 1px solid transparent;
    transition: background var(--dur), border-color var(--dur), opacity var(--dur),
                transform .12s var(--ease), color var(--dur), box-shadow .18s var(--ease);
  }
  .btn:active:not(:disabled) { transform: scale(.97); }
  /* A ação principal é o petróleo cheio com letra branca — acima de 4.5:1 por
     conta própria, sem anel e sem isenção. */
  .btn-primary { background: var(--accent-fill); color: var(--accent-fill-ink); }
  .btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-fill) 88%, var(--ink));
    box-shadow: var(--shadow-action);
  }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn-outline { border-color: #D6D3CC; color: var(--ink); background: var(--surface); }
  .btn-outline:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); }
  .btn-block { width: 100%; }
  .btn-ghost { background: var(--sunken); color: var(--ink-dim); }
  .btn-ghost:hover:not(:disabled) { background: var(--edge); color: var(--ink); }
  .btn-quiet { color: var(--ink-dim); font-weight: 500; }
  .btn-quiet:hover { color: var(--ink); }
  .btn-lg { padding: 14px 20px; font-size: 15px; border-radius: var(--radius-sm); }
  .btn-sm { padding: 8px 14px; font-size: 13px; }

  /* Estado ocupado: o texto já muda; isto soma um giro discreto para quando
     a espera passa de um instante. */
  .btn.is-busy { position: relative; padding-left: 40px; }
  .btn.is-busy::before {
    content: ""; position: absolute; left: 16px; width: 14px; height: 14px;
    border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
    opacity: .55; animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Resultados ─────────────────────────────────────────────────────── */
  .results { display: grid; gap: 12px; min-width: 0; align-content: start; }
  .results > * { min-width: 0; }
  .result-head { display: grid; gap: 10px; }

  .result-head-inner {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px 24px; flex-wrap: wrap; padding-top: 8px;
  }
  .result-route { font-size: 19px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
  .route-code { color: var(--ink-mute); font-weight: 500; }
  .result-meta { font-size: 12.5px; color: var(--ink-mute); }

  /* ── A recomendação ───────────────────────────────────────────────────
     A resposta antes da lista: a frase, a razão em português comum, o selo
     com a economia — e os dois preços, cada número com o seu rótulo. */
  .rec {
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: var(--radius); padding: 24px 26px;
    box-shadow: var(--shadow-raised);
  }
  .rec-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: start; }
  @media (max-width: 800px) { .rec-grid { grid-template-columns: 1fr; gap: 20px; } }

  .rec-eyebrow { font-size: 12.5px; font-weight: 600; color: var(--accent); }
  .rec-title {
    margin-top: 8px; font-size: 25px; font-weight: 600;
    line-height: 1.2; letter-spacing: -.025em; max-width: 22ch; text-wrap: balance;
  }
  .rec-reason { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-mute); max-width: 42ch; text-wrap: pretty; }
  .rec-reason b { color: var(--ink); font-weight: 600; }

  .rec-badge {
    margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 10px;
    background: var(--accent-wash); color: var(--green);
    font-size: 13px; font-weight: 600;
  }
  .rec-badge .icon { width: 15px; height: 15px; color: var(--accent); }
  .rec-badge.is-tie { background: var(--edge-soft); color: var(--ink-dim); }
  .rec-badge.is-tie .icon { color: var(--ink-mute); }

  /* Só depois de o arrasto cruzar o equilíbrio: a resposta mudou por sua conta. */
  .rec-flip {
    margin-top: 10px; padding: 10px 13px; border-radius: 10px;
    background: var(--accent-wash); color: var(--green);
    font-size: 12.5px; text-wrap: pretty;
    animation: panel .2s var(--ease);
  }

  /* display: flex, não inline: o botão ganha a linha inteira para si — ao
     lado do selo ele parecia parte da mesma frase. */
  .rec-explain {
    margin-top: 16px; display: flex; width: fit-content; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600; color: var(--accent);
  }
  .rec-explain .icon { width: 14px; height: 14px; transition: transform .2s var(--ease); }
  .rec-explain.is-open .icon { transform: rotate(180deg); }
  .rec-explain-panel {
    margin-top: 10px; padding: 15px 17px; border-radius: var(--radius-sm);
    background: var(--sunken);
    animation: panel .2s var(--ease);
  }
  .explain-rows { display: grid; gap: 8px; }
  .explain-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; }
  .explain-row dt { color: var(--ink-mute); }
  .explain-row dd { font-weight: 600; white-space: nowrap; }
  .explain-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-mute); text-wrap: pretty; }

  .rec-picks { display: flex; flex-direction: column; gap: 9px; }
  .pick-row {
    padding: 16px 18px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--edge);
    transition: background var(--dur), border-color var(--dur);
  }
  .pick-row.is-won { background: var(--pick); border-color: var(--accent-edge); }
  .pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
  .pick-label { font-size: 12.5px; font-weight: 600; color: var(--ink-mute); }
  .pick-tag { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--pill); white-space: nowrap; }
  .pick-tag.is-win { background: var(--accent); color: var(--accent-ink); }
  .pick-tag.is-tie, .pick-tag.is-lost-cash { background: var(--edge-soft); color: var(--ink-dim); }
  .pick-tag.is-lost-points { background: var(--amber-wash); color: var(--amber); }
  .pick-figure {
    margin-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1;
    white-space: nowrap;
  }
  .pick-figure small {
    font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-mute);
    white-space: normal; line-height: 1.35;
  }
  .pick-figure.is-na { color: var(--ink-mute); font-size: 18px; }
  .pick-bar { display: block; height: 8px; border-radius: var(--pill); background: var(--track); margin-top: 10px; overflow: hidden; }
  /* O trilho da linha de pontos é um passo mais neutro que o da tarifa, como
     no desenho (#F3F1EC); à noite e no papel os dois dividem o --track. */
  .pick-bar.is-points { background: #F3F1EC; }
  [data-theme="night"] .pick-bar.is-points { background: var(--track); }
  .pick-bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--accent); transition: width .3s var(--ease); }
  .pick-bar.is-amber i { background: var(--amber-solid); }
  .pick-note { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--ink-mute); text-wrap: pretty; }
  .pick-note b { color: var(--ink-dim); font-weight: 600; }
  .rec-scale { margin-top: 3px; font-size: 12.5px; color: var(--ink-mute); }

  /* ── A calculadora do valor do ponto ──────────────────────────────────
     O controle que decide a resposta, dentro do mesmo objeto que a resposta.
     O trilho tem duas regiões — âmbar onde os pontos rendem mais, petróleo
     onde o dinheiro é melhor — e o risco do equilíbrio entre elas. O input
     nativo cobre tudo, transparente: o que se vê dele é só o polegar. */
  .pv {
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: var(--radius); padding: 22px 26px;
    box-shadow: var(--shadow-card);
    display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  }
  .pv-left { max-width: 34ch; }
  .pv-title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
  .pv-say { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-mute); text-wrap: pretty; }
  .pv-value { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; }
  .pv-v { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1; }
  .pv-value span { font-size: 13px; color: var(--ink-mute); }
  .pv-shortcuts {
    margin-top: 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--ink-mute);
  }
  .pv-chip {
    padding: 6px 11px; border-radius: var(--pill);
    background: var(--surface); border: 1px solid var(--edge);
    font-size: 12.5px; font-weight: 500; color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    transition: background var(--dur), border-color var(--dur), color var(--dur);
  }
  .pv-chip:hover { border-color: var(--accent-edge); }
  .pv-chip.is-on { background: var(--accent-wash); border-color: var(--accent); color: var(--green); font-weight: 600; }

  .pv-plot { flex: 1; min-width: 290px; padding-top: 38px; position: relative; }
  .pv-tip {
    position: absolute; top: 0; left: var(--x, 0%); transform: translateX(-50%);
    padding: 5px 10px; border-radius: 8px;
    background: var(--ink); color: var(--surface);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
  }
  .pv-track { position: relative; height: 34px; }
  .pv-zone-a, .pv-zone-b { position: absolute; top: 13px; height: 8px; }
  .pv-zone-a { left: 0; width: var(--be); background: var(--amber-track); border-radius: var(--pill) 0 0 var(--pill); }
  .pv-zone-b { left: var(--be); right: 0; background: var(--accent-wash); border-radius: 0 var(--pill) var(--pill) 0; }
  .pv-be-tick {
    position: absolute; top: 6px; left: var(--be); transform: translateX(-50%);
    width: 2px; height: 22px; border-radius: 1px; background: var(--ink);
  }
  /* A margem de meio polegar faz o centro do polegar coincidir com a posição
     do valor nas duas pontas — sem ela, mín. e máx. ficam 12px fora de lugar
     e o risco do equilíbrio deixa de bater com o cabo. */
  .pv-input {
    -webkit-appearance: none; appearance: none;
    position: absolute; top: 0; left: -12px; right: -12px;
    width: calc(100% + 24px); height: 34px;
    padding: 0 12px; margin: 0; background: transparent; border: 0; box-shadow: none;
    cursor: pointer; touch-action: pan-y;
  }
  .pv-input::-webkit-slider-runnable-track { height: 34px; background: none; border: 0; }
  .pv-input::-moz-range-track { height: 34px; background: none; border: 0; }
  .pv-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: 5px;
    border-radius: 50%; background: #fff; border: 2.5px solid var(--accent);
    box-shadow: var(--shadow-thumb); cursor: grab;
  }
  .pv-input::-moz-range-thumb {
    width: 24px; height: 24px; box-sizing: border-box;
    border-radius: 50%; background: #fff; border: 2.5px solid var(--accent);
    box-shadow: var(--shadow-thumb); cursor: grab;
  }
  .pv-input:focus-visible { outline: none; }
  .pv-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(14, 124, 102, .28); }
  .pv-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(14, 124, 102, .28); }
  .pv-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--ink-mute); }
  .pv-legends { display: grid; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--ink-mute); }
  .pv-legends span { display: inline-flex; align-items: center; gap: 7px; }
  .pv-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
  .pv-swatch.is-amber { background: var(--amber-track); border: 1px solid var(--amber-solid); }
  .pv-swatch.is-petrol { background: var(--accent-wash); border: 1px solid var(--accent); }
  .pv-closing { margin-top: 10px; font-size: 12.5px; color: var(--ink-mute); text-wrap: pretty; }
  .pv-closing b { color: var(--ink-dim); font-weight: 600; }

  /* ── Os cartões das companhias ────────────────────────────────────── */
  .airline-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 11px; }
  .airline-card {
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: var(--radius); padding: 20px 22px;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--dur);
  }
  .airline-card:hover { box-shadow: var(--shadow-lift); }
  .airline-card.is-reco { border-color: var(--accent-edge); }
  .airline-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .airline-mono {
    display: grid; place-items: center; width: 29px; height: 29px; flex: none;
    border-radius: 9px; font-size: 13px; font-weight: 700;
  }
  .airline-mono.is-azul { background: color-mix(in srgb, var(--azul) 12%, var(--surface)); color: var(--azul); }
  .airline-mono.is-gol { background: var(--amber-wash); color: var(--gol); }
  .airline-name b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
  .airline-name small { font-size: 11.5px; color: var(--ink-mute); }
  .airline-badge {
    margin-left: auto; padding: 4px 9px; border-radius: var(--pill);
    background: var(--accent-wash); color: var(--green);
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
  }
  .airline-badge.is-muted { background: var(--edge-soft); color: var(--ink-dim); }
  .airline-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge-soft);
  }
  .airline-stats dt { font-size: 11.5px; color: var(--ink-mute); }
  .airline-stats dd { margin-top: 2px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
  .airline-stats dd small { font-size: 13px; font-weight: 500; color: var(--ink-mute); }
  .airline-action {
    display: block; margin-top: 16px; padding: 11px; border-radius: 10px;
    text-align: center; text-decoration: none;
    font-size: 13.5px; font-weight: 600;
    background: var(--surface); border: 1px solid #D6D3CC; color: var(--ink);
    transition: background var(--dur), border-color var(--dur), box-shadow .18s var(--ease);
  }
  .is-reco .airline-action { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
  .is-reco .airline-action:hover { box-shadow: var(--shadow-action); }

  /* ── Seções e cartões genéricos ───────────────────────────────────── */
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 8px;
  }
  .section-note { font-size: 13px; color: var(--ink-mute); text-wrap: pretty; }
  .card-panel {
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-card);
  }
  .panel-lede { font-size: 14px; color: var(--ink-dim); margin: 8px 0 20px; text-wrap: pretty; }

  .view-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
  .view-tab {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    padding: 10px 16px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--edge);
    transition: border-color var(--dur), background var(--dur);
  }
  .view-tab:hover { border-color: var(--accent-edge); }
  .view-tab-label { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; color: var(--ink); }
  .view-tab-note { font-size: 12px; color: var(--ink-mute); }
  .view-tab.is-on { background: var(--accent); border-color: transparent; }
  .view-tab.is-on .view-tab-label { color: var(--accent-ink); }
  .view-tab.is-on .view-tab-note { color: var(--accent-ink-dim); }

  .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .tab {
    padding: 7px 13px; border-radius: var(--pill);
    background: var(--surface); border: 1px solid var(--edge);
    font-size: 12.5px; font-weight: 500; color: var(--ink-mute);
    transition: background var(--dur), color var(--dur), border-color var(--dur);
  }
  .tab:hover { border-color: var(--accent-edge); color: var(--ink); }
  .tab.is-on { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
  .tabs-sunken { padding: 3px; border-radius: 10px; background: var(--edge-soft); gap: 3px; }
  .tabs-sunken .tab { background: none; border: 0; border-radius: 8px; }
  .tabs-sunken .tab:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .tabs-sunken .tab.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 34, 51, .08); }

  /* ── A lista de voos ──────────────────────────────────────────────── */
  .flights-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
  .flights-head h3 { font-size: 17px; font-weight: 600; }
  .flights-count { color: var(--ink-mute); font-weight: 500; font-size: 14px; }

  .sort { margin-left: auto; position: relative; }
  .sort-trigger {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--edge);
    font-size: 13px; color: var(--ink-dim);
    transition: border-color var(--dur);
  }
  .sort-trigger:hover { border-color: var(--accent-edge); }
  .sort-trigger b { font-weight: 600; color: var(--ink); }
  .sort-trigger .icon { width: 14px; height: 14px; }
  .sort-menu {
    position: absolute; right: 0; top: calc(100% + 6px); width: 222px; z-index: 10;
    padding: 6px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-pop);
    animation: pop-in .16s var(--ease) both;
  }
  .sort-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 10px; border-radius: 9px; text-align: left;
    font-size: 13px; color: var(--ink-dim);
    transition: background var(--dur);
  }
  .sort-item:hover { background: var(--row-alt); }
  .sort-item.is-on { font-weight: 600; color: var(--ink); background: var(--row-alt); }
  .sort-item .icon { width: 13px; height: 13px; color: var(--accent); }
  .sort-gap { width: 13px; flex: none; }

  .flight-list {
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
  }
  .flight-row {
    display: grid; grid-template-columns: 116px 1fr 124px 166px 112px auto;
    gap: 14px; align-items: center; width: 100%;
    padding: 15px 20px; text-align: left;
    border-bottom: 1px solid var(--divider);
    transition: background var(--dur);
  }
  .flight-row:last-child { border-bottom: 0; }
  .flight-row:hover, .flight-row.is-open { background: var(--row-alt); }
  .f-airline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
  .f-time b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
  .f-time small { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }
  .f-cash b { font-size: 15px; font-weight: 600; white-space: nowrap; }
  .f-cash.is-none b { color: var(--ink-mute); font-weight: 400; }
  .f-flag { display: block; font-size: 11.5px; font-weight: 600; color: var(--green); }
  .f-pts { font-size: 13.5px; white-space: nowrap; }
  .f-pts.is-none { color: var(--ink-mute); font-size: 12.5px; white-space: normal; }
  .f-fee { color: var(--ink-mute); }
  .f-rate b { font-size: 14px; font-weight: 600; }
  .f-rate.is-none b { color: var(--ink-mute); font-weight: 400; }
  .f-action {
    justify-self: end; padding: 9px 14px; border-radius: 9px;
    border: 1px solid #D6D3CC; background: var(--surface);
    font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
    transition: border-color var(--dur), background var(--dur);
  }
  .flight-row:hover .f-action, .flight-row.is-open .f-action {
    border-color: var(--accent); background: var(--accent-wash);
  }
  .flight-none { display: flex; align-items: center; gap: 10px; padding: 24px; font-size: 13.5px; color: var(--ink-mute); }

  /* ── A escada de pontos ─────────────────────────────────────────────── */
  .flags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
  .ladder { display: grid; gap: 8px; }
  .rung { display: grid; grid-template-columns: 96px minmax(0, 1fr) 112px 88px; gap: 14px; align-items: center; font-size: 14px; }
  @media (max-width: 620px) { .rung { grid-template-columns: 84px minmax(0, 1fr) 96px; } .rung-rate { display: none; } }
  .rung-pts { font-weight: 500; color: var(--ink-dim); }
  .rung-split { display: flex; height: 26px; border-radius: 6px; overflow: hidden; }
  .rung-split i { display: block; background: var(--accent-mid); }
  .rung-split u { display: block; background: var(--sunken); }
  .rung-cash { color: var(--ink-dim); }
  .rung-rate { font-weight: 600; text-align: right; color: var(--ink-dim); }
  .rung.is-chosen .rung-pts, .rung.is-chosen .rung-rate { color: var(--accent); font-weight: 600; }
  .rung.is-chosen .rung-split { box-shadow: inset 0 0 0 2px var(--accent); }
  .rung.is-chosen .rung-split i { background: var(--accent-deep); }
  .rung.is-chosen .rung-split u { background: var(--accent-wash); }

  .fares { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--edge-soft); }
  .fare-family { flex: 1; min-width: 150px; display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sunken); }
  .fare-family-k { font-size: 13px; color: var(--ink-mute); }
  .fare-family-v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .fare-family-s { font-size: 12px; color: var(--ink-mute); }
  .fare-family-s.is-flag { color: var(--green); }

  .explain { font-size: 14px; color: var(--ink-dim); line-height: 1.6; text-wrap: pretty; }

  /* ── Selos ──────────────────────────────────────────────────────────── */
  .badge { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: var(--pill); white-space: nowrap; }
  /* Aviso é âmbar: "algo pede a sua atenção". O vermelho fica para erro. */
  .badge-warn { background: var(--amber-wash); color: var(--amber); }

  .banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: var(--radius-sm);
    background: var(--amber-wash); color: var(--amber); font-size: 13.5px;
    text-wrap: pretty;
    animation: panel .22s var(--ease);
  }
  .banner .icon { width: 17px; height: 17px; flex: none; margin-top: 1px; }
  .banner b { font-weight: 600; }

  /* ── Carregando ───────────────────────────────────────────────────────
     As etapas com nome e a contagem real de consultas — nunca uma barra de
     porcentagem: o tempo de cada consulta não é nosso para prometer. Os
     esqueletos têm a forma dos cartões que vão chegar. */
  .progress { display: grid; gap: 12px; }
  .progress-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: 14px; padding: 15px 18px; box-shadow: var(--shadow-card);
  }
  .spinner {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    border: 2.5px solid var(--track); border-top-color: var(--accent);
    animation: spin .8s linear infinite;
  }
  .progress-say { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .progress-say b { font-size: 14px; font-weight: 600; }
  .progress-say span { font-size: 12.5px; color: var(--ink-mute); text-wrap: pretty; }
  .progress-count { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }
  .stages { display: flex; gap: 6px; flex-wrap: wrap; }
  .stage {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: var(--pill);
    background: var(--edge-soft); color: var(--ink-mute);
    font-size: 12.5px; font-weight: 500;
    transition: background var(--dur), color var(--dur);
  }
  .stage i { width: 6px; height: 6px; border-radius: 50%; background: #C6CDD2; flex: none; }
  .stage.is-done, .stage.is-current { background: var(--accent-wash); color: var(--green); font-weight: 600; }
  .stage.is-done i, .stage.is-current i { background: var(--green-solid); }
  .stage.is-current i { animation: pulse 1s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .3; } }
  .skeletons { display: grid; gap: 12px; }
  .skeleton-card {
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: 14px; padding: 18px 20px;
  }
  .skeleton-card i {
    display: block; border-radius: 7px;
    background: linear-gradient(90deg, var(--edge-soft) 8%, var(--edge) 22%, var(--edge-soft) 36%);
    background-size: 420px 100%;
    animation: shimmer 1.3s linear infinite;
  }
  @keyframes shimmer { from { background-position: -420px 0; } to { background-position: 420px 0; } }

  /* ── Estado inicial ─────────────────────────────────────────────────── */
  .empty {
    display: grid; align-content: center; min-height: min(58vh, 520px);
    text-align: center; padding: clamp(32px, 5vw, 60px) var(--pad);
    border: 1px dashed var(--fill); border-radius: 32px; color: var(--ink-dim);
  }
  .empty h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; margin-bottom: 12px; letter-spacing: -.03em; }
  .empty p { font-size: 16px; line-height: 1.45; max-width: 52ch; margin-inline: auto; text-wrap: pretty; }

  /* A conta, mostrada antes de você pedir: a unidade desta ferramenta é
     reais por ponto, e ninguém chega sabendo lê-la. Então a tela vazia faz
     uma conta de verdade, nas mesmas cores em que a resposta vai chegar. */
  .example {
    margin: 30px auto 0; width: min(580px, 100%); text-align: left;
    padding: 18px 20px 20px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-card);
  }
  .example-k { display: block; font-size: 13px; font-weight: 500; color: var(--ink-mute); margin-bottom: 14px; }
  .example-row { display: flex; align-items: baseline; justify-content: center; gap: 8px 16px; flex-wrap: wrap; }
  .example-part { display: grid; gap: 3px; }
  .example-part b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .example-part small { font-size: 12px; color: var(--ink-mute); }
  .example-part .is-points { color: var(--accent); }
  .example-part .is-cash { color: var(--ink); }
  .example-part .is-answer { font-size: 19px; letter-spacing: -.02em; color: var(--accent); }
  .example-op { font-size: 12px; color: var(--ink-mute); flex: none; }
  @media (max-width: 560px) {
    .example-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .example-part { grid-template-columns: auto auto; align-items: baseline; gap: 10px; }
  }

  /* A falha de página inteira: um pedido de calma, não um beco. */
  .failure {
    display: grid; gap: 12px; justify-items: center; text-align: center;
    padding: clamp(36px, 6vw, 54px) var(--pad);
    background: var(--surface); border: 1px solid var(--edge);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
  }
  .failure h2 { font-size: clamp(19px, 2.2vw, 22px); }
  .failure p { font-size: 14px; color: var(--ink-dim); max-width: 52ch; text-wrap: pretty; }
  .failure-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
  .failure-detail { font-size: 12.5px; color: var(--ink-mute); }
  .failure-detail summary { cursor: pointer; }
  .failure-detail p { font-size: 12.5px; margin-top: 8px; }
  .empty-glyph.is-warn { background: var(--amber-wash); color: var(--amber); width: 50px; height: 50px; }

  /* Usado quando já houve busca e o resultado ficou vazio. */
  .empty-filtered { display: grid; gap: 10px; padding: clamp(28px, 5vw, 44px) var(--pad); text-align: center; justify-items: center; }
  .empty-glyph {
    display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 13px; background: var(--edge-soft); color: var(--ink-dim);
  }
  .empty-glyph .icon { width: 23px; height: 23px; }
  .empty-filtered h2 { font-size: 19px; }
  .empty-filtered p { font-size: 14px; color: var(--ink-dim); max-width: 52ch; text-wrap: pretty; }

  /* ── Histórico ──────────────────────────────────────────────────────── */
  .history-wrap { margin-top: 34px; text-align: left; width: min(580px, 100%); margin-inline: auto; }
  .history-wrap h3 { font-size: 13px; font-weight: 500; color: var(--ink-mute); margin-bottom: 10px; letter-spacing: 0; }
  .history { display: grid; gap: 6px; }
  .history button {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 13px 16px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--edge);
    font-size: 14px; text-align: left; box-shadow: var(--shadow-card);
    transition: box-shadow var(--dur), opacity var(--dur);
  }
  .history button:hover:not(:disabled) { box-shadow: var(--shadow-lift); }
  .history button:hover:not(:disabled) .history-go { color: var(--accent); transform: translateX(3px); }
  .history button:disabled { opacity: .5; }
  .history-route { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .history-route b { font-size: 15px; font-weight: 600; }
  .history-side { display: flex; align-items: center; gap: 12px; }
  .history-meta { font-size: 13px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
  .history-go { color: var(--ink-mute); transition: color var(--dur), transform .2s var(--ease); }

  /* ── O resumo da janela ─────────────────────────────────────────────── */
  .window-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 720px) { .window-hero { grid-template-columns: 1fr; } }
  .window-card {
    display: flex; flex-direction: column; gap: 4px; padding: 20px 24px;
    border-radius: var(--radius); background: var(--surface);
    border: 1px solid var(--edge); box-shadow: var(--shadow-card);
  }
  .window-card-k { font-size: 13px; font-weight: 500; color: var(--ink-mute); }
  .window-card-v { display: flex; align-items: baseline; gap: 10px; }
  .window-card-v b {
    font-weight: 600; font-size: 28px; line-height: 1;
    letter-spacing: -.025em; color: var(--ink);
  }
  .window-card-alt { font-size: 14px; color: var(--ink-dim); }
  .window-card-note { font-size: 13px; color: var(--ink-dim); }
  .window-card.is-best { background: var(--pitch); border-color: transparent; box-shadow: none; }
  .window-card.is-best .window-card-k,
  .window-card.is-best .window-card-note,
  .window-card.is-best .window-card-alt { color: var(--pitch-ink-dim); }
  .window-card.is-best .window-card-v b { color: var(--pitch-ink); }

  /* ── A matriz da janela ───────────────────────────────────────────────
     Datas flexíveis: cada célula é uma viagem inteira, ida e volta somadas.
     Quanto mais escura, mais barata; a sua escolha ganha contorno, não cor,
     porque a cor já está dizendo o preço. */
  .matrix-scroll { overflow-x: auto; }
  .matrix { display: grid; gap: 6px; min-width: 620px; }
  .matrix-col, .matrix-row-k { font-size: 13px; font-weight: 500; color: var(--ink-dim); }
  .matrix-col { text-align: center; padding-bottom: 2px; }
  .matrix-col.is-weekend { color: var(--ink-mute); }
  .matrix-row-k { display: flex; align-items: center; }
  .matrix-cell {
    position: relative; display: grid; place-items: center; height: 54px;
    border-radius: var(--radius-xs); font-size: 15px; font-weight: 600;
    background: var(--surface); color: var(--ink);
    transition: transform var(--dur), box-shadow var(--dur);
  }
  /* A rampa: os dois degraus de cima levam --accent-ink, que troca de lado
     com eles quando o tema troca; os claros ficam com a tinta da página. */
  .matrix-cell[data-heat="1"] { background: var(--accent-deep); color: var(--accent-ink); }
  .matrix-cell[data-heat="2"] { background: var(--accent-mid); color: var(--accent-ink); }
  .matrix-cell[data-heat="3"] { background: var(--accent-wash); color: var(--ink-dim); }
  .matrix-cell[data-heat="4"] { background: var(--sunken); color: var(--ink-dim); }
  .matrix-cell[data-heat="5"] { background: var(--surface); color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--edge); }
  .matrix-cell.is-empty { background: none; box-shadow: none; }
  button.matrix-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
  .matrix-cell.is-yours { box-shadow: inset 0 0 0 2px var(--ink); }
  .matrix-cell.is-open { box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-lift); }
  .matrix-flag {
    position: absolute; top: -9px; right: -4px; padding: 2px 8px; border-radius: var(--pill);
    background: var(--ink); color: var(--surface); font-size: 10px; font-weight: 600;
  }
  .matrix-legend {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--edge-soft);
    font-size: 12px; color: var(--ink-mute);
  }
  .matrix-legend > span { display: inline-flex; align-items: center; gap: 7px; }
  .heat-ramp { display: flex; gap: 2px; }
  .heat-ramp i { width: 22px; height: 10px; border-radius: 2px; }
  .heat-ramp i:nth-child(1) { background: var(--accent-deep); }
  .heat-ramp i:nth-child(2) { background: var(--accent-mid); }
  .heat-ramp i:nth-child(3) { background: var(--accent-wash); }
  .heat-ramp i:nth-child(4) { background: var(--sunken); }
  .heat-ramp i:nth-child(5) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
  .legend-box { width: 14px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--ink); }
  .matrix-hint { margin-left: auto; }

  .cell-open-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 620px) { .cell-open-legs { grid-template-columns: 1fr; } }
  .cell-leg { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--sunken); }
  .cell-leg-k { font-size: 13px; font-weight: 500; color: var(--ink-mute); }
  .cell-leg-time { font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
  .cell-leg-meta { font-size: 14px; color: var(--ink-dim); }
  .cell-say { font-size: 15px; line-height: 1.4; margin-top: 18px; text-wrap: pretty; }
  .cell-say b { font-weight: 600; color: var(--accent); }

  /* ── A régua de valor ─────────────────────────────────────────────────
     Uma faixa por trecho, cada voo pousado onde a taxa dele cai, e a linha
     do seu valor cruzando as faixas. O melhor resgate leva petróleo cheio. */
  .ruler { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
  .ruler-yours { position: relative; height: 22px; }
  .ruler-yours span {
    position: absolute; left: var(--x); transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--pill);
    background: var(--ink); color: var(--surface);
    font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  .ruler-k { font-size: 14px; font-weight: 500; color: var(--ink-dim); }
  .ruler-lane {
    position: relative; border-radius: var(--radius-xs); background-color: var(--sunken);
    background-image: repeating-linear-gradient(to right, var(--edge) 0 1px, transparent 1px 20%);
    min-height: 44px;
  }
  .ruler-mark { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--ink); }
  .ruler-pill {
    position: absolute; top: calc(var(--lane) * 30px + 6px); left: var(--x);
    transform: translateX(-50%);
    padding: 4px 9px; border-radius: var(--pill); white-space: nowrap;
    font-size: 12px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--edge); color: var(--ink-mute);
  }
  .ruler-pill.is-above { background: var(--accent-wash); border-color: var(--accent-edge); color: var(--green); }
  .ruler-pill.is-best { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
  .ruler-pill.is-clamp-start { left: 0; transform: none; }
  .ruler-pill.is-clamp-end { left: auto; right: 0; transform: none; }
  .ruler-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-mute); }
  .ruler-foot {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge-soft);
  }
  .ruler-foot p { font-size: 15px; }
  .ruler-foot p b { font-weight: 600; }
  .ruler-foot .section-note { flex: 1; }
  .chip { padding: 5px 12px; border-radius: var(--pill); background: var(--sunken); font-size: 13px; color: var(--ink-dim); }

  /* ── Faixa de preços ────────────────────────────────────────────────── */
  .range { display: grid; gap: 14px; }
  .range-ends {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 14px; font-weight: 600;
  }
  .range-end.is-cheapest { color: var(--green); }
  .range-end.is-dearest { color: var(--ink-mute); text-align: right; }

  .range-plot { position: relative; height: 28px; }
  .range-track {
    position: absolute; top: 10px; left: 0; right: 0; height: 8px;
    border-radius: var(--pill); background: var(--track);
  }
  .range-lead {
    position: absolute; top: 10px; left: 0; height: 8px;
    border-radius: var(--pill) 0 0 var(--pill); background: var(--green-solid);
  }
  .range-tick {
    position: absolute; top: 4px; left: var(--x); width: 2px; height: 20px;
    background: var(--ink-dim); opacity: .55;
    transform: translateX(-50%);
  }
  .range-tick.is-cheapest { background: var(--green-solid); opacity: 1; width: 3px; }
  .range-tick.is-median { background: var(--ink); opacity: 1; width: 2px; height: 28px; top: 0; }
  .range-tick.is-best { background: var(--accent-deep); opacity: 1; width: 3px; }

  .range-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--edge-soft);
  }
  .range-fact { display: grid; gap: 2px; min-width: 0; }
  .range-fact dt { font-size: 12px; font-weight: 500; color: var(--ink-mute); }
  .range-fact dd {
    margin: 0; font-size: 14px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .range-fact.is-cheapest dd { color: var(--green); }
  .range-fact.is-best dd { color: var(--accent); }
  .range-fact.is-dearest dd { color: var(--ink-dim); }

  /* ── Toast ────────────────────────────────────────────────────────────
     O recibo do que acabou de acontecer, com Desfazer quando dá. Some
     sozinho em 2,8 s. */
  .toast-region {
    position: fixed; bottom: 14px; left: 0; right: 0; z-index: 60;
    display: flex; justify-content: center; pointer-events: none;
    padding-inline: 16px;
  }
  .toast {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 12px;
    max-width: 100%; padding: 11px 15px; border-radius: var(--radius-sm);
    background: var(--pitch); color: var(--pitch-ink);
    font-size: 13px; box-shadow: var(--shadow-toast);
    animation: toast-in .2s var(--ease) both;
  }
  .toast-undo { color: var(--pitch-accent); font-weight: 600; flex: none; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

  /* ── Estreito ─────────────────────────────────────────────────────────
     Campos empilhados, alvos de 44px, nada que dependa de hover. O
     align-items: stretch é explícito de propósito: herdar o flex-start da
     linha larga encolheria cada campo à largura do conteúdo. */
  @media (max-width: 640px) {
    .form-row-1 { flex-direction: column; align-items: stretch; }
    .field, .ac-field, .field-pax, .field-nights { flex: none; min-width: 0; }
    .swap { margin: -4px 0 -4px auto; }
    .btn-go { width: 100%; margin-top: 6px; }
    .rec { padding: 20px 18px; }
    .flight-row { grid-template-columns: 1fr 1fr; row-gap: 10px; padding: 15px 16px; }
    .f-airline { grid-column: 1; }
    .f-time { grid-column: 2; }
    .f-action { grid-column: 2; }
    .step { width: 44px; height: 44px; }
    .ac-row { padding: 12px 8px; }
    .sort { margin-left: 0; }
    .sort-menu { left: 0; right: auto; }
    /* O piso de 44px vale para TODO alvo no estreito, não só para os
       redondos: pílulas, chips, chaves e itens de menu sobem juntos. */
    .seg span { padding: 12px 13px; }
    .chip-toggle span, .filters-btn, .sort-trigger, .sort-item, .pv-chip,
    .chip-active, .tab, .btn-text, .f-action {
      min-height: 44px; display: inline-flex; align-items: center;
    }
    .switch { min-height: 44px; }
    .btn { min-height: 44px; }
    .top-pill, .btn-icon, .menu-trigger { min-height: 44px; }
  }

  /* ── Toque ──────────────────────────────────────────────────────────── */
  @media (pointer: coarse) {
    .btn-icon { width: 44px; height: 44px; }
    .step { width: 44px; height: 44px; }
    .flight-row { padding: 18px 20px; }
    .matrix-cell { height: 60px; }
    .history button { padding: 18px 16px; }
    .ac-row { padding: 12px 8px; }
  }
}

/* ══ Fora das camadas ═══════════════════════════════════════════════════
   Estes dois blocos precisam vencer tudo o que veio acima sem recorrer a
   !important — CSS sem camada tem prioridade sobre CSS em camada. */

/* Alto contraste do sistema: quem liga isso perde as nossas cores, e a cor é
   metade do significado aqui. As bordas passam a existir sempre, e a
   diferença entre as duas linhas da comparação segue legível porque o selo é
   escrito ("Melhor opção", "mais caro"), não só colorido. */
@media (forced-colors: active) {
  .search-card, .card-panel, .rec, .pv, .airline-card, .flight-list,
  .progress-card, .skeleton-card, .window-card, .example, .history button,
  .menu-body, .popover-body, .popover-panel, .ac-panel, .sort-menu,
  .filters-panel, .keycard, .cell-leg, .field-box, .stage, .toast, .banner,
  .page-banner, .rec-explain-panel {
    border: 1px solid CanvasText;
  }
  .badge, .pick-tag, .airline-badge, .rec-badge, .chip-active, .ruler-pill { border: 1px solid CanvasText; }
  /* O lado escolhido da comparação só se distinguia pelo fundo, e o fundo
     some aqui. O selo já diz "Melhor opção" em palavras; o contorno triplo
     devolve a leitura de relance. */
  .pick-row { border: 1px solid CanvasText; }
  .pick-row.is-won { border-width: 3px; }

  /* As duas regiões da calculadora falam por cor; sem cor, viram hachura de
     um lado e nada do outro, e o risco vira aresta cheia. */
  .pv-track { border: 1px solid CanvasText; }
  .pv-zone-a {
    forced-color-adjust: none;
    background: repeating-linear-gradient(135deg, CanvasText 0 1px, Canvas 1px 5px);
  }
  .pv-zone-b { background: Canvas; }
  .pv-be-tick, .ruler-mark, .range-tick { background: CanvasText; forced-color-adjust: none; }
  .quota-bar i, .pick-bar i, .rung-split i, .range-lead {
    background: Highlight; forced-color-adjust: none;
  }
  .pick-bar, .quota-bar { border: 1px solid CanvasText; }
  .matrix-cell { border: 1px solid CanvasText; }
  .matrix-cell[data-heat="1"] { border-width: 3px; }
  .matrix-cell.is-empty { border: 0; }
  .matrix-flag { border: 1px solid CanvasText; }
  .heat-ramp i { border: 1px solid CanvasText; }
  .heat-ramp i:nth-child(1) { border-width: 3px; }
  .matrix-cell.is-yours, .rung.is-chosen .rung-split { outline: 2px dashed CanvasText; }
  .ruler-lane, .range-track { border: 1px solid CanvasText; }
  .ruler-pill.is-best { border-width: 3px; }

  /* Identidade sem cor: o número do voo já nomeia a companhia; o disco só
     precisa continuar existindo como forma. */
  .id-dot { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas; }

  /* O que está ligado se apoia nas cores do sistema, que sobrevivem ao modo. */
  .btn-primary,
  .seg input:checked + span,
  .chip-toggle input:checked + span,
  .tab.is-on,
  .view-tab.is-on,
  .sort-item.is-on,
  .window-card.is-best,
  .is-reco .airline-action,
  .pick-tag.is-win { background: Highlight; color: HighlightText; forced-colors-adjust: none; forced-color-adjust: none; }

  /* As chaves desenhadas à mão perdem o indicador quando as cores somem.
     A caixa nativa sobrevive ao modo, então ela volta. */
  .switch input { position: static; width: 20px; height: 20px; opacity: 1; pointer-events: auto; appearance: auto; }
  .switch-track { display: none; }
}

/* Impressão. Uma comparação de tarifas é levada para outra conversa: o papel
   recebe só o resultado, com todo detalhe aberto e nada partido ao meio pela
   quebra de página. O formulário e a barra não vão — no papel não há o que
   preencher. */
@media print {
  @page { margin: 14mm; }

  /* No papel a página vira branco puro e a tinta vira preto: o contraste da
     folha é o da impressora, não o do monitor, então tudo sobe um degrau. A
     paleta continua a mesma — petróleo recomenda, âmbar avisa — só que sem
     sombra e com fios um pouco mais francos, porque no papel a sombra não
     existe e o fio é o que separa. */
  :root, :root[data-theme="night"] {
    --paper: #ffffff; --surface: #ffffff; --sunken: #f2f2f2; --track: #e4ede9;
    --row-alt: #f0f0f0; --edge: #c4c4c4; --edge-soft: #dedede; --divider: #e8e8e8;
    --ink: #000000; --ink-dim: #333333; --ink-mute: #555555;

    --accent: #0e7c66; --accent-fill: #0e7c66; --accent-fill-ink: #ffffff;
    --accent-deep: #062820; --accent-mid: #0c6654;
    --accent-edge: #cfe5de; --accent-wash: #e7f3ef;
    --accent-ink: #ffffff; --accent-ink-dim: #e4f4ef;
    --fill: #707c85;

    --pitch: #0f2233; --pitch-ink: #ffffff; --pitch-ink-dim: #c3d0da;
    --pitch-edge: transparent;
    --pitch-rule: color-mix(in srgb, var(--pitch-ink) 16%, transparent);
    --pitch-accent: #5fc7ae; --pitch-accent-dim: #9fd9c9;

    --pick: #f7faf9; --pick-ink: #0f2233;
    --pick-alt: #fdf2e3; --pick-alt-ink: #8f4108;

    --green: #0b5245; --green-wash: #e7f3ef; --green-solid: #0e7c66;
    --amber: #8f4108; --amber-wash: #fdf2e3;
    --amber-solid: #b4650a; --amber-track: #fae3c4;
    --red: #b03a20; --red-wash: #fef6f4; --red-track: #f3d8d0;

    --azul: #1a66c4; --gol: #b4650a;

    --shadow-card: none; --shadow-raised: none; --shadow-lift: none;
    --shadow-pop: none; --shadow-toast: none; --shadow-action: none;
    --shadow-thumb: none;
    --shadow-1: none; --shadow-2: none; --shadow-3: none;
    color-scheme: light;
  }

  body { background: #fff; }
  /* O aviso de resultado parcial fica: ele muda como a folha deve ser lida.
     A barra de abas não: no papel só existe a vista que estava na tela. */
  .topbar, .searchbar, .progress, .boot, .empty, .matrix-hint, .history-wrap,
  .view-tabs, .toast-region, .page-banner, .sort, .f-action, .airline-action {
    display: none;
  }
  .layout { display: block; padding: 0; max-width: none; }
  .results { gap: 12px; }

  .card-panel, .rec, .pv, .airline-card, .flight-list, .window-card {
    border: 1px solid var(--edge); break-inside: avoid;
  }
  .flight-row, .pick-row { break-inside: avoid; }
  /* Onde o navegador souber, todo detalhe sai aberto — no papel não há como
     clicar para abrir. */
  details::details-content { content-visibility: visible; }
  .matrix-scroll { overflow: visible; }
  .matrix { min-width: 0; }
}