:root {
  color-scheme: light;
  --fundo: #f6f5f2;
  --cartao: #fcfcfb;
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --linha: #e4e2dc;
  --grade: #ecebe6;
  --serie-temp: #eb6834;
  --serie-umid: #2a78d6;
  --aviso: #9a5b00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #111110;
    --cartao: #1a1a19;
    --texto: #f0efec;
    --texto-2: #c3c2b7;
    --linha: #33322f;
    --grade: #282826;
    --serie-temp: #d95926;
    --serie-umid: #3987e5;
    --aviso: #f0b450;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #111110;
  --cartao: #1a1a19;
  --texto: #f0efec;
  --texto-2: #c3c2b7;
  --linha: #33322f;
  --grade: #282826;
  --serie-temp: #d95926;
  --serie-umid: #3987e5;
  --aviso: #f0b450;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }

.agora, .historico {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.agora { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.medida { display: flex; flex-direction: column; }
.rotulo { color: var(--texto-2); font-size: .9rem; }
.valor { font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.quando { grid-column: 1 / -1; margin: 4px 0 0; color: var(--texto-2); font-size: .9rem; }
.quando.velho { color: var(--aviso); }

.grafico { margin: 0 0 20px; position: relative; }
.grafico figcaption { color: var(--texto-2); font-size: .85rem; margin-bottom: 4px; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .eixo { fill: var(--texto-2); font-size: 11px; }
.grafico .serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .ponto { stroke: var(--cartao); stroke-width: 2; }
.grafico .mira { stroke: var(--texto-2); stroke-width: 1; stroke-dasharray: 3 3; }
#g-temp .serie { stroke: var(--serie-temp); } #g-temp .ponto { fill: var(--serie-temp); }
#g-umid .serie { stroke: var(--serie-umid); } #g-umid .ponto { fill: var(--serie-umid); }
.dica {
  position: absolute; pointer-events: none; transform: translate(-50%, -110%);
  background: var(--texto); color: var(--cartao); font-size: .8rem; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px;
}

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
caption { text-align: left; color: var(--texto-2); font-size: .85rem; margin-bottom: 4px; }
th, td { padding: 6px 4px; border-bottom: 1px solid var(--linha); text-align: right; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--texto-2); font-weight: 500; font-size: .85rem; }
.vazio { color: var(--texto-2); }

@media (max-width: 420px) {
  .agora { padding: 16px; }
  th, td { padding: 6px 2px; font-size: .85rem; }
}