/* ===========================================================================
   Painel de Desempenho — Ipanema (El Misti)
   Fase 3: reestruturado sobre o Design System do Time de TI.
   Tokens copiados de Times/Time de TI/design-system/tokens/tokens.css
   (README pede exatamente isso quando o projeto vive fora da árvore do DS:
   copiar os VALORES pro :root local, não referenciar por caminho relativo
   entre repositórios diferentes).
   =========================================================================== */
:root {
  /* MARCA */
  --color-brand-primary: #1B5E20;
  --color-brand-primary-light: #2E7D32;
  --color-brand-primary-bg: #E8F5E9;
  --color-brand-dark: #0D2818;

  /* SUPERFÍCIES */
  --color-surface: #f5f7f5;
  --color-surface-card: #ffffff;
  --color-border: #d5e0d5;

  /* TEXTO */
  --color-text: #1a2e1a;
  --color-text-muted: #5f7060;
  --color-heading: var(--color-brand-dark);

  /* STATUS (texto) */
  --color-success-text: #2E7D32;
  --color-danger-text: #C62828;
  --color-info-text: #1565C0;
  --color-warning-text: #BF360C;
  --color-accent-text: #00695C;
  --color-purple-text: #6A1B9A;

  /* STATUS (preenchimento) */
  --color-success-fill: #2E7D32;
  --color-danger-fill: #C62828;
  --color-info-fill: #1565C0;
  --color-warning-fill: #F9A825;
  --color-accent-fill: #00897B;
  --color-purple-fill: #6A1B9A;

  /* COMPONENTES QUE MUDAM COM O TEMA */
  --color-table-head-bg: var(--color-brand-primary-bg);
  --color-hover-bg: var(--color-brand-primary-bg);

  /* TIPOGRAFIA */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px;
  --fs-lg: 14px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-base: 1.3; --lh-relaxed: 1.5;

  /* ESPAÇAMENTO — escala 4px */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* RAIO */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;

  /* ELEVAÇÃO */
  --shadow-sm: 0 1px 3px rgba(0,40,0,0.08);

  /* TOQUE (mobile) — recepção usa tablet de balcão */
  --touch-target: 44px;
}
[data-theme="dark"] {
  --color-surface: #10160f;
  --color-surface-card: #1a231a;
  --color-border: #2c3a2c;
  --color-text: #e6ede6;
  --color-text-muted: #8fa08f;
  --color-heading: #eafaea;

  --color-success-text: #81C784;
  --color-danger-text: #EF5350;
  --color-info-text: #64B5F6;
  --color-warning-text: #FFCC80;
  --color-accent-text: #4DB6AC;
  --color-purple-text: #CE93D8;

  --color-table-head-bg: rgba(46,125,50,.22);
  --color-hover-bg: rgba(46,125,50,.14);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);font-size:var(--fs-sm);background:var(--color-surface);color:var(--color-text);line-height:var(--lh-base)}

/* HEADER */
.header{background:var(--color-brand-dark);color:#fff;padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.header-logo-img{height:28px;width:auto}
.header-title{flex:1;text-align:center;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:.5px}
.header-update{font-size:var(--fs-2xs);opacity:.5;text-align:right;min-width:120px}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
.theme-toggle:hover{background:rgba(255,255,255,.15)}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* TABS */
.tabs-bar{display:flex;background:var(--color-surface-card);border-bottom:2px solid var(--color-brand-primary);padding:0 var(--sp-3);overflow-x:auto}
.tab-btn{min-height:var(--touch-target);padding:var(--sp-3) var(--sp-5);border:none;background:none;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--color-text-muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap}
.tab-btn.active{color:var(--color-brand-primary-light);border-bottom-color:var(--color-brand-primary-light)}
.tab-btn:hover:not(.active){color:var(--color-text)}
.tab-content{display:none}
.tab-content.active{display:block}
.tab-content.is-loading{opacity:.5;pointer-events:none;transition:opacity .15s}

/* NOTA DO MÊS (Desempenho) — explica por que "Diárias" já está alto no dia 11 */
.mes-nota{font-size:var(--fs-xs);color:var(--color-text-muted);padding:var(--sp-2) var(--sp-3) 0;line-height:var(--lh-relaxed)}

/* FILTERS — alvo de toque 44px (recepção no balcão/tablet) */
.filters-bar{background:var(--color-surface-card);border-bottom:1px solid var(--color-border);padding:var(--sp-2) var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.filters-bar select,.filters-bar .date-input{min-height:var(--touch-target);padding:var(--sp-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--fs-md);background:var(--color-surface-card);color:var(--color-text);cursor:pointer}
.filters-bar select:disabled,.filters-bar .date-input:disabled{opacity:.55;cursor:not-allowed}
.filters-bar select:focus,.filters-bar input:focus{border-color:var(--color-brand-primary-light);outline:none;box-shadow:0 0 0 2px rgba(46,125,50,.2)}
.filters-bar .date-input{width:130px}
.filter-label{font-size:var(--fs-xs);color:var(--color-text-muted);font-weight:var(--fw-semibold)}
.filter-group{display:inline-flex;align-items:center;gap:var(--sp-1)}
.filter-group.hidden{display:none}

/* MÊS EM PT-BR (Fase 4b) — input[type=month] mostra o texto ("July 2026") no
   idioma do NAVEGADOR, não da página (lang="pt-BR" é ignorado pelo Chromium
   nesse controle -- limitação conhecida, sem fix nativo). Quando o navegador
   suporta o input nativo (detectado via JS em app.js), escondemos o texto e
   sobrepomos um rótulo pt-BR no mesmo formato do título da seção ("Julho/2026").
   O input nativo continua clicável por baixo -- o rótulo é pointer-events:none. */
.month-input-wrap{position:relative;display:inline-flex;align-items:center}
.month-input-wrap.has-native-month .date-input{color:transparent}
.month-input-label-ptbr{display:none;position:absolute;left:var(--sp-2);top:50%;transform:translateY(-50%);font-size:var(--fs-md);color:var(--color-text);pointer-events:none;white-space:nowrap}
.month-input-wrap.has-native-month .month-input-label-ptbr{display:block}

/* KPI CARDS — público e recepção lendo de longe no balcão, número grande e legenda sempre visível */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-2);padding:var(--sp-3)}
/* CLS FIX (Fase 4b) — só na aba Desempenho: os 4 cards de #kpisNucleoRow ficam
   vazios até o fetch de action=painel resolver (achado do QA, FASE4-QA.md
   seção e — CLS 0,8, único layout-shift do Lighthouse). Reservar a altura real
   evita o salto; escopo por id pra não alterar Passeios/Extensões. */
#kpisNucleoRow{min-height:124px}
.kpi-card{background:var(--color-surface-card);border-radius:var(--radius-md);padding:var(--sp-3);box-shadow:var(--shadow-sm);border-left:4px solid var(--color-brand-primary)}
.kpi-label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}
.kpi-value{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--color-heading);display:block;line-height:var(--lh-tight)}
.kpi-delta{font-size:var(--fs-xs);font-weight:var(--fw-semibold);display:block;margin-top:2px}
.kpi-delta.neutral{color:var(--color-text-muted)}
.kpi-sub{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:3px;display:block;line-height:var(--lh-relaxed)}
.kpi-card.accent-red{border-left-color:var(--color-danger-fill)}
.kpi-card.accent-blue{border-left-color:var(--color-info-fill)}
.kpi-card.accent-orange{border-left-color:var(--color-warning-fill)}
.kpi-card.accent-teal{border-left-color:var(--color-accent-fill)}
/* AMOSTRA MÍNIMA (Fase 4b) — "Compradores Únicos"/conversão com poucos
   registros identificados: número esmaecido + nota explicando o porquê, pra
   ninguém confundir "1 comprador" com "o hostel vendeu 1 passeio só". */
.kpi-card.kpi-baixa-amostra{border-left-color:var(--color-warning-fill)}
.kpi-card.kpi-baixa-amostra .kpi-value{opacity:.5}
.kpi-card.kpi-baixa-amostra .kpi-sub{color:var(--color-warning-text)}

/* TERMÔMETRO — o herói do painel (topo). Barra linear de 3 zonas em vez de
   gauge circular: mesma família visual do "funil em barras horizontais" já
   documentado no Design System, mais legível em tela estreita e mais fácil
   de tornar acessível (aria-label textual descreve o mesmo que a cor mostra). */
.gauge-hero{margin-bottom:var(--sp-3);min-height:155px}
.gauge-secondary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3);min-height:143px}
.gauge-card{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);border:1px solid var(--color-border)}
/* --color-brand-primary-bg NAO tem par escuro no Design System (só os tokens-ponte
   --color-table-head-bg/--color-hover-bg têm) — usar aqui direto deixava o card
   herói com fundo claro e texto claro no dark mode (achado no teste visual desta fase). */
.gauge-card.is-anchor{border:2px solid var(--color-brand-primary-light);background:var(--color-table-head-bg)}
.gauge-card.is-superacao .gauge-track{box-shadow:0 0 0 2px var(--color-success-fill)}
.gauge-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:2px}
.gauge-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-heading);text-transform:uppercase;letter-spacing:.3px}
.gauge-value{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);line-height:var(--lh-tight)}
.gauge-card.is-anchor .gauge-value{font-size:var(--fs-3xl)}
.gauge-pct{font-size:var(--fs-sm);color:var(--color-text-muted);font-weight:var(--fw-semibold)}
.gauge-bar{margin:var(--sp-2) 0 4px}
.gauge-track{position:relative;height:22px;border-radius:var(--radius-sm);display:flex;background:var(--color-table-head-bg)}
.gauge-zone{height:100%;flex:1 1 0}
.gauge-zone:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.gauge-zone:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.gauge-zone.z1{background:var(--color-border)}
.gauge-zone.z2{background:var(--color-warning-fill);opacity:.55}
.gauge-zone.z3{background:var(--color-success-fill);opacity:.7}
.gauge-marker{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--color-heading);transform:translateX(-50%)}
.gauge-marker::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--color-heading)}
.gauge-zone-labels{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--color-text-muted);gap:4px;flex-wrap:wrap}
.gauge-status{font-size:var(--fs-xs);color:var(--color-text);margin-top:4px;font-weight:var(--fw-semibold)}
.pill{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.2px}
.pill-anchor{background:rgba(46,125,50,.15);color:var(--color-success-text)}
.pill-partial{background:rgba(249,168,37,.18);color:var(--color-warning-text)}

/* "AGUARDANDO ZIG" — estado neutro (nunca vermelho/alarme), roxo por ser a
   mesma cor que o Design System reserva pra "informação inferida/lateral",
   distinta da paleta de status verde/laranja/vermelho usada em resultado. */
.zig-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3);min-height:76px}
.zig-card,.mix-row.is-zig{background:rgba(106,27,154,.05);border:1px dashed var(--color-purple-fill);border-radius:var(--radius-md);padding:var(--sp-3)}
[data-theme="dark"] .zig-card,[data-theme="dark"] .mix-row.is-zig{background:rgba(206,147,216,.07)}
.zig-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:4px}
.zig-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-heading)}
.zig-meta{font-size:var(--fs-xs);color:var(--color-text-muted);margin-bottom:4px}
.zig-note{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed)}
.badge-pending{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:var(--fw-bold);background:rgba(106,27,154,.15);color:var(--color-purple-text);text-transform:uppercase;letter-spacing:.3px}
.badge-caution{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:var(--fw-bold);background:rgba(249,168,37,.18);color:var(--color-warning-text);text-transform:uppercase;letter-spacing:.3px;margin-left:4px}

/* MIX DE RECEITA — lista de barras realizado × meta */
/* CLS FIX (Fase 4b): min-height = altura real medida (Playwright, dado de
   produção real, Ipanema) das 7 linhas fixas do mix antes do fetch resolver. */
.mix-list{display:flex;flex-direction:column;gap:var(--sp-3);min-height:508px}
.mix-row{border-bottom:1px solid var(--color-border);padding-bottom:var(--sp-2)}
.mix-list>.mix-row:last-child{border-bottom:none;padding-bottom:0}
.mix-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:3px}
.mix-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text)}
.mix-value{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.mix-meta{font-weight:var(--fw-regular);color:var(--color-text-muted)}
.mix-bar-track{background:var(--color-table-head-bg);border-radius:var(--radius-sm);height:14px;overflow:hidden}
.mix-bar-fill{height:100%;border-radius:var(--radius-sm);background:var(--color-brand-primary-light);transition:width .3s ease;min-width:2px}
.mix-row-foot{font-size:var(--fs-2xs);color:var(--color-text-muted);margin-top:2px}
.mix-pct{font-weight:var(--fw-semibold)}

/* DESTAQUES — cards acionáveis (Passeios/Extensões) */
.highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-2)}
.highlight-card{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--sp-3);border-left:4px solid var(--color-brand-primary);display:flex;flex-direction:column;gap:2px}
.highlight-card.attention{border-left-color:var(--color-warning-fill)}
.highlight-label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}
.highlight-value{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-heading);line-height:1.25}
.highlight-detail{font-size:var(--fs-sm);color:var(--color-text-muted)}
.badge-attention{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:700;background:rgba(249,168,37,.18);color:var(--color-warning-text);text-transform:uppercase;letter-spacing:.3px}
@media(max-width:768px){.highlight-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.highlight-grid{grid-template-columns:1fr}}

/* SECTIONS & CHARTS */
.section-card{background:var(--color-surface-card);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);margin:0 var(--sp-3) var(--sp-3);box-shadow:var(--shadow-sm)}
.section-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--sp-2)}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.section-title-row .section-title{margin-bottom:0}
.chart-wrap{position:relative;height:220px}

/* COBERTURA DE AMOSTRA (nacionalidade em Passeios) */
.cobertura-note{font-size:var(--fs-xs);color:var(--color-text-muted);margin-bottom:var(--sp-2)}

/* NOTAS TÉCNICAS (avisos da API — "não confiar cego") */
.avisos-wrap{margin:0 var(--sp-3) var(--sp-3);display:none}
.avisos-details{background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);color:var(--color-text-muted)}
.avisos-details summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--color-text)}
.avisos-details ul{margin:var(--sp-2) 0 0 var(--sp-4)}
.avisos-details li{margin-bottom:4px;line-height:var(--lh-relaxed)}

/* CSV EXPORT */
.csv-btn{min-height:var(--touch-target);padding:var(--sp-2) var(--sp-3);border:1px solid var(--color-brand-primary);border-radius:var(--radius-sm);background:var(--color-surface-card);color:var(--color-brand-primary-light);font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer}
.csv-btn:hover{background:var(--color-hover-bg)}

/* TABLE */
.table-scroll{overflow-x:auto;max-height:340px;overflow-y:auto}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th{background:var(--color-table-head-bg);padding:var(--sp-2);text-align:left;font-weight:var(--fw-bold);color:var(--color-heading);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--color-brand-primary);white-space:nowrap;position:sticky;top:0;z-index:1}
.data-table td{padding:5px var(--sp-2);border-bottom:1px solid var(--color-border);white-space:nowrap}
.data-table tr:hover td{background:var(--color-hover-bg)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table .total-row td{font-weight:700;border-top:2px solid var(--color-brand-primary);background:var(--color-table-head-bg)}
.data-table.matrix-table td:first-child,.data-table.matrix-table th:first-child{position:sticky;left:0;background:var(--color-surface-card);z-index:2}
.data-table.matrix-table .total-row td:first-child{background:var(--color-table-head-bg)}
.data-table .total-col{border-left:2px solid var(--color-brand-primary);font-weight:700}

/* TOGGLE */
.toggle-bar{display:flex;gap:4px;margin-bottom:var(--sp-2);flex-wrap:wrap}
.toggle-btn{min-height:var(--touch-target);padding:var(--sp-2) var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-card);color:var(--color-text-muted);font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer}
.toggle-btn.active{background:var(--color-brand-primary);color:#fff;border-color:var(--color-brand-primary)}

/* SEÇÕES COLAPSÁVEIS — não empurram o que a recepção usa todo dia pra baixo da dobra */
.details-section{padding:0}
.details-section summary{list-style:none;cursor:pointer;padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:6px}
.details-section summary::-webkit-details-marker{display:none}
.details-section summary::before{content:'▸';font-size:10px;color:var(--color-text-muted);transition:transform .15s}
.details-section[open] summary::before{transform:rotate(90deg)}
.details-section > .table-scroll,.details-section > .empty-msg,.details-section > .details-actions{padding:0 var(--sp-4) var(--sp-3)}
.details-actions{justify-content:flex-end}

/* EMPTY / ERROR / LOADING STATES */
.empty-msg{display:none;text-align:center;padding:var(--sp-5);color:var(--color-text-muted);font-size:var(--fs-sm)}
.section-card.is-empty > *:not(.section-title):not(.empty-msg){display:none}
.section-card.is-empty .empty-msg{display:block}
.loading{text-align:center;padding:var(--sp-4);color:var(--color-text-muted);font-size:var(--fs-sm)}
.error-box{display:none;align-items:center;justify-content:center;gap:var(--sp-2);flex-direction:column;color:var(--color-danger-text);text-align:center;padding:var(--sp-4);margin:0 var(--sp-3) var(--sp-3);background:var(--color-surface-card);border-radius:var(--radius-md);font-size:var(--fs-sm)}
.error-box button{padding:6px 16px;border:1px solid var(--color-danger-text);border-radius:var(--radius-sm);background:none;color:var(--color-danger-text);cursor:pointer;font-size:var(--fs-xs)}
.error-box button:hover{background:var(--color-danger-text);color:#fff}

/* RESPONSIVE — recepção abre no celular ou monitor de balcão: números maiores, nunca menores.
   768px = tablet/celular deitado; 480px = celular em pé (filtros empilhados, sem scroll horizontal) */
@media(max-width:768px){
  .kpi-row{grid-template-columns:repeat(2,1fr);padding:var(--sp-2)}
  .kpi-value{font-size:26px}
  .section-card{margin:0 var(--sp-2) var(--sp-2);padding:var(--sp-2) var(--sp-3)}
  .tab-btn{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base)}
  .header-update{display:none}
  .theme-toggle{width:var(--touch-target);height:var(--touch-target)}
  .gauge-card.is-anchor .gauge-value{font-size:26px}
  /* CLS FIX (Fase 4b) — em tela estreita os grids colapsam pra 1-2 colunas
     (cards empilham) e os rótulos de zona do termômetro podem quebrar linha,
     então a altura real é bem maior que no desktop. Valores = pior caso medido
     (mês com as 3 faixas de meta cadastradas, dado real de produção). */
  #gaugeHero{min-height:152px}
  #gaugeSecondary{min-height:299px}
  #zigKpiRow{min-height:195px}
  #kpisNucleoRow{min-height:430px}
  .mix-list{min-height:583px}
}
@media(max-width:480px){
  .kpi-row{grid-template-columns:1fr}
  .kpi-value{font-size:28px}
  .filters-bar{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .filters-bar select,.filters-bar .date-input{width:100%}
  .filter-group{width:100%;justify-content:space-between}
  .filter-group select{flex:1}
  .header-title{font-size:var(--fs-base)}
  .gauge-card.is-anchor .gauge-value{font-size:26px}
}