.temperature-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.temperature-header-hint { color: #496782; font-size: 12px; white-space: nowrap; }
.temperature-header-hint[hidden] { display: none; }
.temperature-view { display: grid; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.temperature-view[hidden] { display: none; }
.temperature-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.temperature-toolbar strong { font-size: 18px; color: #173c62; }
.temperature-readonly { margin-left: auto; color: #365b78; font-size: 13px; font-weight: 700; }
.temperature-location-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; }
.temperature-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.temperature-category-tabs button { min-width: 76px; min-height: 44px; border: 1px solid #b9cee0; background: #fff; color: #245782; }
.temperature-category-tabs button.active { background: #245f96; color: #fff; border-color: #245f96; }
.temperature-category-tabs button:disabled { color: #687b8b; background: #f0f4f7; border-color: #d4dfe7; cursor: not-allowed; }
.temperature-category-tabs button:focus-visible, .temperature-location-picker select:focus-visible { outline: 3px solid #217eb9; outline-offset: 3px; }
.temperature-location-picker { display: grid; gap: 5px; min-width: 220px; color: #365b78; font-size: 13px; font-weight: 700; }
.temperature-location-picker select { min-height: 44px; width: 100%; }
.temperature-catalog-message { color: #9a401e; font-size: 13px; line-height: 1.6; }
.temperature-catalog-message:empty { display: none; }
.temperature-device-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.temperature-device-tabs[hidden] { display: none; }
.temperature-device-tabs button { min-width: 96px; background: #fff; color: #245782; border: 1px solid #b9cee0; }
.temperature-device-tabs button.active { background: #245f96; color: #fff; border-color: #245f96; }
.temperature-latest-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid #c7dbea; border-radius: 10px; background: #f8fbff; }
.temperature-eyebrow { color: #496782; font-size: 13px; font-weight: 750; }
.temperature-big-value { margin-top: 5px; color: #184e7c; font-size: clamp(40px, 6vw, 68px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.temperature-latest-side { display: grid; justify-items: end; gap: 10px; color: #365b78; font-size: 13px; }
.temperature-message { min-height: 18px; color: #9a401e; font-weight: 650; }
.temperature-query-controls, .temperature-point-query { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.temperature-query-controls label, .temperature-point-query label, .temperature-custom-fields label { display: grid; gap: 5px; min-width: 150px; color: #365b78; font-size: 13px; font-weight: 700; }
.temperature-query-controls input, .temperature-query-controls select, .temperature-point-query input { min-height: 38px; }
.temperature-custom-fields { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.temperature-custom-fields[hidden] { display: none; }
.temperature-summary { color: #173c62; font-size: 15px; font-weight: 750; }
.temperature-chart { min-height: 210px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: #246da6; background: #fff; overflow-x: auto; }
.temperature-chart svg { display: block; width: 100%; height: auto; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.temperature-chart svg text { fill: #496782; font-size: 12px; font-weight: 650; }
.temperature-crosshair { pointer-events: none; }
.temperature-crosshair line { stroke: #406989; stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.temperature-crosshair-dot { fill: #fff; stroke: #246da6; stroke-width: 3; vector-effect: non-scaling-stroke; }
.temperature-crosshair rect { fill: #173f63; }
.temperature-chart .temperature-crosshair text { fill: #fff; font-size: 14px; font-weight: 700; }
.temperature-chart-readout { position: sticky; left: 0; min-height: 20px; margin: 4px 0 0 5px; color: #173c62; font-size: 13px; font-weight: 700; }
.temperature-mobile-hint { display: none; }
.temperature-point-query > div { flex-basis: 100%; color: #365b78; font-size: 13px; }
.temperature-record-details { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 14px; }
.temperature-record-details summary { cursor: pointer; color: #245782; font-weight: 750; }
.temperature-record-scroll { margin-top: 12px; max-height: 360px; overflow: auto; }
.temperature-record-scroll table { width: 100%; border-collapse: collapse; }
.temperature-record-scroll th, .temperature-record-scroll td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.temperature-record-pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; color: #365b78; font-size: 13px; }
@media (max-width: 760px) {
  .temperature-view { padding: 12px; }
  .temperature-readonly { margin-left: 0; width: 100%; }
  .temperature-location-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .temperature-category-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .temperature-category-tabs button { min-width: 0; padding-inline: 8px; }
  .temperature-location-picker { min-width: 0; }
  .temperature-latest-card { align-items: stretch; padding: 16px; }
  .temperature-latest-side { justify-items: start; }
  .temperature-query-controls, .temperature-point-query, .temperature-custom-fields { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; width: 100%; }
  .temperature-query-controls label, .temperature-point-query label, .temperature-custom-fields label { min-width: 0; }
  .temperature-chart svg { min-width: 600px; height: auto; }
  .temperature-chart svg text { font-size: 13px; }
  .temperature-chart .temperature-crosshair text { font-size: 16px; }
  .temperature-mobile-hint { display: block; margin-top: -10px; color: #496782; font-size: 12px; }
}