:root {
    color-scheme: dark;
    --bg: #0f1317;
    --panel: #151a20;
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .16);
    --ink: #e9edf1;
    --ink2: #a3aeba;
    --ink3: #727e8a;
    --temp: #ff9d57;
    --hum: #55c6e6;
    --abs: #b693ff;
    --ok: #5bd38a;
    --warn: #f2c14e;
    --bad: #ff7b72;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
  }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 56px; }

  /* показания сейчас */
  .now { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 56px; }
  .reading { padding-left: 14px; border-left: 4px solid var(--c); }
  .reading.t { --c: var(--temp); }
  .reading.h { --c: var(--hum); }
  .reading .num { font-size: clamp(3rem, 9vw, 5.6rem); font-weight: 250; line-height: 1; letter-spacing: -.02em; }
  .reading .unit { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 300; color: var(--ink2); margin-left: 4px; }
  .reading .name { display: block; margin-top: 6px; color: var(--ink2); }
  .status { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink2); padding-bottom: 6px; }
  .status i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink3); }
  .status[data-s="ok"] i { background: var(--ok); }
  .status[data-s="stale"] i { background: var(--warn); }
  .status[data-s="bad"] i { background: var(--bad); }

  /* производные показатели */
  .derived { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-top: 26px; }
  .metric { display: flex; align-items: flex-start; gap: 11px; }
  .metric > i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink3); margin-top: 8px; flex: none; }
  .metric .lbl { display: block; color: var(--ink3); font-size: 13px; }
  .metric .val { display: block; font-size: 1.35rem; font-weight: 500; line-height: 1.25; }
  .metric .sub { display: block; color: var(--ink2); font-size: 13.5px; margin-top: 1px; }
  .metric[data-s="ok"] > i { background: var(--ok); }
  .metric[data-s="warn"] > i { background: var(--warn); }
  .metric[data-s="bad"] > i { background: var(--bad); }
  .metric[data-s="ok"] .val { color: var(--ok); }
  .metric[data-s="warn"] .val { color: var(--warn); }
  .metric[data-s="bad"] .val { color: var(--bad); }

  /* управление периодом */
  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 36px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
  .seg button { all: unset; cursor: pointer; padding: 7px 14px; color: var(--ink2); border-right: 1px solid var(--line-strong); }
  .seg button:last-child { border-right: 0; }
  .seg button:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
  .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }
  .custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink2); }
  input[type="datetime-local"] {
    background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong);
    border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 14px;
  }
  .btn {
    all: unset; cursor: pointer; padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--line-strong); color: var(--ink);
  }
  .btn:hover { background: rgba(255, 255, 255, .06); }
  .btn[hidden] { display: none; }
  .spacer { flex: 1; }
  a.btn { display: inline-block; text-decoration: none; }
  button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* графики */
  .charts { position: relative; }
  .chart { margin-bottom: 26px; }
  .chead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 6px; }
  .chead h2 { margin: 0; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 9px; }
  .chead h2 b { width: 18px; height: 3px; border-radius: 2px; background: var(--c); display: inline-block; }
  .chart.t { --c: var(--temp); }
  .chart.h { --c: var(--hum); }
  .chart.a { --c: var(--abs); }
  .stats { color: var(--ink2); font-size: 14px; }
  .stats span { white-space: nowrap; margin-left: 14px; }
  .stats em { font-style: normal; color: var(--ink3); }
  .plot { height: 270px; background: var(--panel); border-radius: 10px; }
  canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; }

  #tip {
    position: absolute; z-index: 5; pointer-events: none; display: none;
    background: #1d242c; border: 1px solid var(--line-strong); border-radius: 8px;
    padding: 9px 12px; font-size: 13.5px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); min-width: 190px;
  }
  #tip .when { color: var(--ink2); margin-bottom: 6px; }
  #tip .row { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
  #tip .row i { width: 10px; height: 3px; border-radius: 2px; flex: none; align-self: center; }
  #tip .row .v { font-weight: 600; margin-left: auto; }
  #tip .row .r { color: var(--ink3); font-size: 12.5px; }
  #tip .foot { color: var(--ink3); font-size: 12px; margin-top: 7px; }

  .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
  .hint { color: var(--ink3); font-size: 13.5px; margin: 0; max-width: 70ch; }

  @media (max-width: 640px) {
    .wrap { padding: 18px max(14px, env(safe-area-inset-right)) 40px max(14px, env(safe-area-inset-left)); }
    .now { gap: 10px 26px; }
    .reading { padding-left: 10px; border-left-width: 3px; }
    .reading .num { font-size: 2.7rem; }
    .reading .unit { font-size: 1.15rem; }
    .reading .name { margin-top: 4px; font-size: 14px; }
    .status { margin-left: 0; width: 100%; padding-bottom: 0; }

    .derived { flex-direction: column; gap: 12px; margin-top: 18px; }

    .controls { margin: 24px 0 16px; padding-bottom: 14px; gap: 10px; }
    .seg { display: flex; width: 100%; }
    .seg button { flex: 1; text-align: center; padding: 11px 2px; font-size: 14px; }
    .custom { width: 100%; }
    .custom label { width: 100%; display: flex; align-items: center; gap: 8px; }
    .custom label input { flex: 1; min-width: 0; }
    input[type="datetime-local"] { font-size: 16px; padding: 9px 8px; }   /* 16px — чтобы iOS не приближал страницу при фокусе */
    .btn { display: block; box-sizing: border-box; width: 100%; text-align: center; padding: 11px 14px; }

    .chart { margin-bottom: 20px; }
    .chead { flex-direction: column; align-items: flex-start; gap: 3px; }
    .stats { font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 14px; max-width: 100%; }
    .stats span { margin: 0; }
    .plot { height: 220px; }

    .foot { gap: 12px; }
    #tip { font-size: 13px; min-width: 170px; }
  }

  @media (max-width: 380px) {
    .reading .num { font-size: 2.35rem; }
    .seg button { font-size: 13px; }
    .plot { height: 200px; }
  }

  @media (pointer: coarse) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    button, .btn { -webkit-tap-highlight-color: transparent; }
  }