* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow: hidden;
  --chart-empty: #ececec; --chart-ring: rgba(255,255,255,.55); --chart-text: #8a8a8a; --chart-grid: #d8d8d8; --chart-axis: #9a9a9a;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ticon { display: inline-block; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; }
.ticon.mask { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.timer sup { font-size: .5em; vertical-align: .75em; margin-left: 1px; font-weight: inherit; }
svg text { font-family: inherit; }
svg .ylab { font-size: 9px; fill: var(--chart-text); text-anchor: end; }
svg .xlab { font-size: 9px; fill: var(--chart-text); text-anchor: middle; }
svg .grid { stroke: var(--chart-grid); stroke-width: .6; }
svg .axis { stroke: var(--chart-axis); stroke-width: .6; }
svg .goal-line { stroke: #6aa84f; stroke-width: 1.2; }
svg .cur-line { fill: none; stroke: #4a90d9; stroke-width: 1.6; }
svg .prev-line { fill: none; stroke: #c9c9c9; stroke-width: 1.4; stroke-dasharray: 4 3; }
svg.donut .dn-title { font-size: 14px; fill: var(--dn-title, #444); text-anchor: middle; }
svg.donut .dn-value { font-size: 18px; fill: var(--dn-value, #333); text-anchor: middle; }
svg.donut .pct { font-size: 11px; fill: #fff; text-anchor: middle; font-weight: 500; }
.boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: #8e8e93; font-size: 15px; background: #fff; text-align: center; padding: 24px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(40,40,40,.92); color: #fff; padding: 9px 16px;
  border-radius: 10px; font-size: 14px; z-index: 9999; max-width: 86vw; text-align: center; pointer-events: none; }
.pairing { position: fixed; inset: 0; background: #f2f2f7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.pairing img { width: 76px; height: 76px; border-radius: 18px; }
.pairing p { color: #6d6d72; font-size: 15px; text-align: center; }
.pairing input { width: 200px; font-size: 28px; letter-spacing: 6px; text-align: center; padding: 10px; border: 1px solid #d1d1d6; border-radius: 12px; background: #fff; }
.pairing button { background: #2f7de1; color: #fff; padding: 11px 42px; border-radius: 12px; font-size: 17px; font-weight: 600; }