:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #183d46; background: #edf5f7; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #247d91; outline-offset: 4px; }
.shell { max-width: 900px; margin: auto; padding: 34px 28px 30px; }
.page-header, .brand, .reading-heading, .current-footer, .history-heading, .trend-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.page-header { margin-bottom: 24px; }
.brand { justify-content: flex-start; gap: 10px; }
.room-symbol { font-size: 32px; color: #1d7180; line-height: 1; }
h1 { font-size: 23px; font-weight: 650; margin: 0; }
.privacy { font-size: 12px; color: #526d76; white-space: nowrap; }
.current { background: #fff; border: 1px solid #d6e5e8; border-radius: 24px; overflow: hidden; }
.comfort-summary { padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #e5f2ec; color: #235e48; }
.comfort-summary.outside { background: #faf0df; color: #81521f; }
.comfort-summary.waiting { background: #eaf0f3; color: #526d76; }
.summary-label { font-size: 13px; margin: 0 0 8px; }
.comfort-summary h2 { font-size: 29px; font-weight: 650; margin: 0; line-height: 1.4; }
.summary-description { font-size: 13px; margin: 8px 0 0; line-height: 1.7; }
.room-drawing { width: 80px; flex-shrink: 0; opacity: .65; }
.room-drawing svg { width: 100%; display: block; }
.reading-pair { display: grid; grid-template-columns: 1fr 1fr; padding: 26px 30px; gap: 60px; }
.reading { min-width: 0; }
.reading h3 { font-size: 15px; font-weight: 500; margin: 0; }
.tag { padding: 3px 9px; border-radius: 6px; font-size: 11px; white-space: nowrap; }
.tag.comfortable { color: #246046; background: #e9f4ed; }
.tag.outside { color: #81521f; background: #faf0df; }
.tag.waiting { color: #526d76; background: #edf1f4; }
.reading-value { margin: 12px 0 12px; font-family: "Bahnschrift", "Arial", sans-serif; font-size: 68px; line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.temperature .reading-value { color: #ad5739; }
.humidity .reading-value { color: #237e9c; }
.reading-value span { font-family: "Microsoft YaHei", sans-serif; font-size: 22px; margin-left: 7px; letter-spacing: 0; }
.reading-value.old-reading { color: #738892; }
.reference-label { font-size: 12px; color: #526d76; margin: 0 0 17px; line-height: 1.6; }
.reference-label b { font-weight: 500; color: #294e58; white-space: nowrap; }
.range-track { height: 8px; position: relative; border-radius: 4px; background: #e5edf0; }
.range-comfort { height: 100%; position: absolute; background: #7db996; }
.range-marker { position: absolute; width: 11px; height: 16px; top: -4px; border: 2px solid white; border-radius: 6px; background: #234e59; transform: translateX(-50%); box-shadow: 0 0 0 1px #234e59; }
.range-marker.old-marker { background: #8a9ba1; box-shadow: 0 0 0 1px #8a9ba1; }
.range-labels { display: flex; justify-content: space-between; font-size: 10px; color: #526d76; margin-top: 9px; }
.range-labels span:nth-child(2) { color: #246046; }
.current-footer { margin: 0 30px; border-top: 1px solid #e2ebee; padding: 17px 0; font-size: 12px; color: #526d76; flex-wrap: wrap; }
.current-footer>span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.connection-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #97aab3; }
.connection-dot.online { background: #2c805b; }
.history { margin-top: 32px; }
.history-heading { margin-bottom: 18px; }
.history-heading h2 { margin: 0; font-size: 19px; font-weight: 600; }
.history-heading p { margin: 7px 0 0; font-size: 12px; color: #526d76; }
.ranges { display: flex; gap: 3px; padding: 4px; border: 1px solid #d6e5e8; border-radius: 11px; }
.ranges button { border: 0; background: transparent; padding: 9px 14px; border-radius: 7px; font-size: 12px; min-height: 38px; white-space: nowrap; }
.ranges button[aria-pressed=true] { background: #246878; color: white; }
.trend { background: white; border: 1px solid #d6e5e8; border-radius: 16px; padding: 22px 22px 12px; margin-bottom: 16px; }
.trend-heading h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 550; }
.legend { width: 18px; height: 3px; border-radius: 2px; }
.legend.temperature { background: #ad5739; }
.legend.humidity { background: #237e9c; }
.band-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #39634c; }
.band-label i { width: 10px; height: 10px; background: #e4f2e9; border: 1px solid #79ae8b; }
.observed-range { font-size: 12px; color: #526d76; margin: 9px 0 0 27px; }
.chart-value { display: flex; justify-content: flex-end; gap: 12px; font-size: 12px; color: #526d76; margin: 12px 0 0; min-height: 20px; }
.chart-value b { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-wrap svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.empty { padding: 52px 12px; text-align: center; font-size: 13px; color: #526d76; line-height: 1.8; }
.history-note { color: #526d76; font-size: 12px; line-height: 1.8; margin: 12px 2px; }
.reference-note { border-left: 3px solid #8fb4ad; padding: 3px 0 3px 16px; margin-top: 28px; }
.reference-note h2 { margin: 0; font-size: 14px; font-weight: 600; }
.reference-note p { font-size: 12px; color: #526d76; line-height: 1.85; margin: 8px 0; max-width: 64em; }
.reference-note details { font-size: 12px; margin-top: 10px; }
.reference-note summary { cursor: pointer; color: #246878; width: fit-content; }
.reference-note a { color: #246878; display: block; margin: 9px 0; line-height: 1.7; text-underline-offset: 3px; }
.page-footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid #d6e5e8; font-size: 11px; color: #526d76; line-height: 1.8; }
.page-footer>span { font-size: 12px; color: #294e58; }
.page-footer p { margin: 6px 0 0; }
.error { padding: 12px 16px; background: #fff0ea; color: #8c452d; border-radius: 10px; font-size: 13px; line-height: 1.7; }
@media (max-width: 560px) {
  .shell { padding: 22px 16px 26px; }
  .page-header { margin-bottom: 18px; }
  h1 { font-size: 20px; }
  .room-symbol { font-size: 28px; }
  .privacy { font-size: 11px; }
  .current { border-radius: 20px; }
  .comfort-summary { padding: 23px 20px; }
  .comfort-summary h2 { font-size: 25px; }
  .summary-label { font-size: 12px; }
  .summary-description { font-size: 12px; max-width: 21em; }
  .room-drawing { width: 56px; }
  .reading-pair { padding: 24px 20px; gap: 26px; }
  .reading h3 { font-size: 13px; }
  .reading-value { font-size: clamp(37px, 12vw, 56px); margin: 13px 0 12px; }
  .reading-value span { font-size: 17px; margin-left: 3px; }
  .tag { padding: 3px 6px; font-size: 10px; }
  .reference-label { font-size: 11px; }
  .current-footer { margin: 0 20px; font-size: 10px; gap: 7px; }
  .history { margin-top: 28px; }
  .history-heading { flex-direction: column; align-items: stretch; gap: 16px; }
  .history-heading h2 { font-size: 18px; }
  .ranges button { flex: 1; min-height: 40px; }
  .trend { padding: 19px 13px 10px; }
  .trend-heading h3 { font-size: 15px; }
  .chart-value { font-size: 11px; }
}
@media (max-width: 350px) {
  .shell { padding-left: 12px; padding-right: 12px; }
  .reading-pair { padding-left: 16px; padding-right: 16px; gap: 20px; }
  .comfort-summary { padding-left: 16px; padding-right: 16px; }
  .comfort-summary h2 { font-size: 23px; }
  .room-drawing { width: 40px; }
  .reading-heading { gap: 5px; }
}