:root {
  --air-text: #20363d;
  --air-background: #f2f8f9;
  --air-line: #b4cccf;
  --air-surface: #fff;
  --air-control-line: #77969b;
  --air-hover: #dceff0;
  --air-text-hover: #183137;
  --air-active: #bedbdf;
  --air-text-active: #142c32;
  --air-disabled: #e1e9ea;
  --air-muted: #53656a;
  --air-focus: #167186;
  --air-link: #125a71;
  --air-link-hover: #073b50;
}
:root[data-qr-theme="dark"] {
  --air-text: #e6f1f3;
  --air-background: #14262c;
  --air-line: #557880;
  --air-surface: #1b343c;
  --air-control-line: #779ca5;
  --air-hover: #274853;
  --air-text-hover: #e6f1f3;
  --air-active: #335b67;
  --air-text-active: #ffffff;
  --air-disabled: #2b4148;
  --air-muted: #b4c9cf;
  --air-focus: #8cdbeb;
  --air-link: #a0dfed;
  --air-link-hover: #d1f5fc;
}
.air-quality-card { color: var(--air-text); background: var(--air-background); border: 1px solid var(--air-line); border-radius: 18px; padding: clamp(16px, 4vw, 24px); margin-block: 18px; overflow-wrap: anywhere; }
.air-quality-card h2 { margin: 0 0 8px; font-size: 1.4rem; }
.air-quality-card p { margin: 10px 0; line-height: 1.5; }
.air-readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.air-reading { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--air-line); border-radius: 14px; padding: 16px; background: var(--air-surface); }
.air-reading strong { font-size: clamp(1.35rem, 4vw, 1.8rem); }
.air-status { font-weight: 650; }
.air-reference, .air-source, .air-measured { font-size: 0.95rem; }
.air-source { white-space: pre-line; }
.air-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.air-actions label { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }
.air-quality-card button, .air-quality-card select { color: var(--air-text); background: var(--air-surface); border: 1px solid var(--air-control-line); border-radius: 9px; min-height: 46px; padding: 9px 12px; font: inherit; max-width: 100%; }
.air-quality-card button:hover, .air-quality-card select:hover { background: var(--air-hover); color: var(--air-text-hover); }
.air-quality-card button:active, .air-quality-card select:active { background: var(--air-active); color: var(--air-text-active); }
.air-quality-card button:disabled, .air-quality-card select:disabled { background: var(--air-disabled); color: var(--air-muted); opacity: 1; }
.air-quality-card :is(button, select, a):focus-visible { outline: 3px solid var(--air-focus); outline-offset: 3px; }
.air-links { display: flex; flex-wrap: wrap; gap: 16px; }
.air-quality-card a { color: var(--air-link); min-height: 40px; display: inline-flex; align-items: center; text-decoration: underline; }
.air-quality-card a:hover { color: var(--air-link-hover); }