#postureOpen { margin-left:auto; white-space:nowrap; font:inherit; font-weight:600; font-size:13px; color:#2c3e50; background:#fff; border:2px solid #d4e6f6; border-radius:18px; padding:8px 12px; cursor:pointer; }
#posturePanel { color:#2c3e50; background:#f7fbff; border:2px solid #d4e6f6; border-radius:20px; padding:20px; width:min(900px,94vw); max-height:90dvh; overflow-y:auto; }
#posturePanel::backdrop { background:rgba(25,45,65,.45); }
#posturePanel h2 { margin:0; font-size:22px; }
#posturePanel p { font-size:14px; line-height:1.6; margin:10px 0; }
#posturePanel .pt-head, #posturePanel .pt-buttons { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#posturePanel .pt-head { justify-content:space-between; }
#posturePanel .pt-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin-top:15px; }
#posturePanel video { width:100%; aspect-ratio:4/3; object-fit:contain; transform:scaleX(-1); background:#203044; border-radius:12px; }
#posturePanel button { font:inherit; font-size:15px; padding:10px 14px; border:1px solid #b8cedf; border-radius:12px; color:#2c3e50; background:#fff; cursor:pointer; }
#posturePanel button.pt-primary { color:#fff; background:#237557; border-color:#237557; }
#posturePanel button:disabled { opacity:.45; cursor:default; }
#posturePanel label { display:block; margin:12px 0; font-size:14px; }
#posturePanel input { width:75px; padding:8px; font:inherit; border:1px solid #b8cedf; border-radius:8px; }
#postureStatus { font-weight:700; min-height:2.8em; }
#postureStats { white-space:pre-line; font-variant-numeric:tabular-nums; font-size:16px; line-height:1.9; background:#fff; padding:12px; border-radius:12px; }
#postureNotice { position:fixed; top:76px; left:50%; transform:translateX(-50%); z-index:11000; width:max-content; max-width:min(90vw,560px); padding:12px 26px 14px; border-radius:18px; text-align:center; white-space:pre-line; line-height:1.45; background:rgba(255,255,255,.97); color:#7d1a14; border:3px solid #d62828; box-shadow:0 8px 26px rgba(150,20,20,.28); font-size:17px; font-weight:600; pointer-events:none; }
#postureNotice::first-line { font-size:28px; font-weight:800; }
#posturePanel details { margin-top:15px; font-size:14px; }
#posturePanel audio { max-width:100%; margin-top:8px; }
#postureLog { max-height:110px; overflow:auto; font-size:13px; line-height:1.6; }
#postureVideo.pt-offscreen { position:fixed; left:-2px; top:0; width:1px; height:1px; opacity:.01; pointer-events:none; }
@media(max-width:640px) { #posturePanel .pt-grid { grid-template-columns:1fr; } #posturePanel video { max-height:220px; } }

:is(#posturePanel,#postureOpen) .pt-meters { margin:14px 0; padding:14px; background:#fff; border:1px solid #d4e6f6; border-radius:12px; }
:is(#posturePanel,#postureOpen) .pt-meter-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:15px; }
:is(#posturePanel,#postureOpen) .pt-meter-head strong { font-size:26px; font-variant-numeric:tabular-nums; }
:is(#posturePanel,#postureOpen) .pt-scale { position:relative; height:18px; margin:10px 8px 6px; border-radius:9px; }
#postureTiltScale, #postureLiveTiltScale { background:linear-gradient(to right,#55a27b 0%,#55a27b 40%,#e6b744 40%,#e6b744 50%,#dc665c 50%,#dc665c 100%); }
:is(#posturePanel,#postureOpen) .pt-marker { position:absolute; top:-4px; height:26px; width:8px; border:2px solid #fff; background:#203044; border-radius:4px; transform:translateX(-50%); box-shadow:0 0 0 1px #203044; }
:is(#posturePanel,#postureOpen) .pt-threshold { position:absolute; top:0; bottom:0; border-left:2px dashed #fff; }
:is(#posturePanel,#postureOpen) .pt-axis { display:flex; justify-content:space-between; gap:6px; font-size:12px; color:#63768c; }
:is(#posturePanel,#postureOpen) .pt-meters p { min-height:1.6em; font-size:13px; margin:6px 0 14px; }

#postureOpen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:10px; width:240px; flex-shrink:0; padding:5px 9px; border-radius:12px; text-align:left; line-height:1.2; }
#postureCompactStatus { grid-column:1 / -1; white-space:nowrap; display:block; font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
#postureOpen .pt-compact-row { display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0; margin-top:3px; }
#postureOpen .pt-compact-row > :first-child { white-space:nowrap; flex-shrink:0; font-size:10px; font-variant-numeric:tabular-nums; }
#postureOpen .pt-scale { display:block; height:5px; flex:none; min-width:0; margin:0 2px; border-radius:3px; }
#postureOpen .pt-marker { height:9px; width:4px; top:-2px; border-width:1px; }
#postureOpen .pt-threshold { border-left-width:1px; }

#postureOpen #postureLiveMotionValue { font-size:9px; white-space:nowrap; }

#posturePanel .pt-diagnostics { display:none !important; }

/* 坐姿提示 = 四周一圈红色渐变缓缓「呼吸」+ 顶部一条说明是什么问题。题目始终看得见，不再整屏遮罩。
   闪烁只做在红光上，且是缓入缓出的呼吸（透明度 0.3↔1）：此前整条提示用 steps(1) 硬闪、锁题时整屏遮罩一盖一撤，看久了很累。
   提醒分级：warn 慢呼吸；urgent（小动作）更快更红；alarm（找不到人，配连续警报音）最快最浓、红光更宽。 */
#postureNotice[data-level="urgent"] { background:#ffe9e4; }
#postureNotice[data-level="alarm"] { background:#c4211c; color:#fff; border-color:#fff; box-shadow:0 8px 28px rgba(120,10,10,.45); }
#postureGlow { position:fixed; inset:0; z-index:10900; pointer-events:none; opacity:0; transition:opacity .4s ease; }
#postureGlow[data-level] { opacity:1; }
#postureGlow::before { content:''; position:absolute; inset:0; will-change:opacity; --pt-edge:min(15vmin,150px); --pt-a:.62;
  background:
    linear-gradient(to bottom, rgba(214,40,40,var(--pt-a)), rgba(214,40,40,0) var(--pt-edge)),
    linear-gradient(to top, rgba(214,40,40,var(--pt-a)), rgba(214,40,40,0) var(--pt-edge)),
    linear-gradient(to right, rgba(214,40,40,var(--pt-a)), rgba(214,40,40,0) var(--pt-edge)),
    linear-gradient(to left, rgba(214,40,40,var(--pt-a)), rgba(214,40,40,0) var(--pt-edge));
  animation:pt-breathe 1.8s ease-in-out infinite; }
#postureGlow[data-level="urgent"]::before { --pt-a:.74; animation-duration:1.3s; }
#postureGlow[data-level="alarm"]::before { --pt-a:.82; --pt-edge:min(17vmin,170px); animation-duration:.9s; }
@keyframes pt-breathe { 0%,100% { opacity:.3; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { #postureGlow::before { animation:none; opacity:.85; } }

#postureAwayBar { position:fixed; top:12px; right:12px; z-index:10600; }
#postureAwayBar[hidden] { display:none; }
#postureAway { font:inherit; font-size:15px; font-weight:600; padding:10px 16px; border:2px solid #d4a017; border-radius:18px; color:#6e4500; background:#fff6e0; cursor:pointer; }
#postureAwayScreen { position:fixed; inset:0; z-index:10700; display:flex; align-items:center; justify-content:center; background:rgba(234,246,255,.96); padding:24px; }
#postureAwayScreen[hidden] { display:none; }
#postureAwayScreen > div { width:min(440px,90vw); padding:28px; border-radius:22px; background:#fff; text-align:center; color:#2c3e50; }
#postureAwayScreen h2 { margin:0 0 10px; font-size:22px; }
#postureAwayScreen p { font-size:17px; line-height:1.6; }
#postureAwayScreen .pt-away-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0; }
#postureAwayScreen .pt-away-buttons[hidden] { display:none; }
#postureAwayScreen button { font:inherit; font-size:18px; padding:12px 20px; border:2px solid #b8cedf; border-radius:14px; color:#2c3e50; background:#fff; cursor:pointer; }
#postureAwayScreen button.pt-away-primary { color:#fff; background:#237557; border-color:#237557; }
#postureAwayScreen button.pt-away-cancel { font-size:15px; padding:8px 14px; border:0; color:#63768c; background:none; }
#postureAwayScreen button.pt-away-cancel[hidden] { display:none; }

/* 孩子会去点顶上的状态条：长按才进设置，顺手关掉 iOS 的长按选中/放大镜 */
#postureOpen { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
#postureLockScreen { position:fixed; inset:0; z-index:10800; display:flex; align-items:center; justify-content:center; background:rgba(25,45,65,.55); padding:24px; }
#postureLockScreen[hidden] { display:none; }
#postureLockScreen > div { width:min(420px,90vw); padding:26px; border-radius:22px; background:#fff; text-align:center; color:#2c3e50; }
#postureLockScreen h2 { margin:0 0 10px; font-size:21px; }
#postureLockScreen p { font-size:16px; line-height:1.6; }
#postureLockScreen input { width:min(260px,80%); padding:12px; margin:6px 0 4px; font:inherit; font-size:18px; text-align:center; border:2px solid #b8cedf; border-radius:12px; }
#postureLockScreen button { font:inherit; font-size:18px; padding:12px 20px; border:2px solid #b8cedf; border-radius:14px; color:#2c3e50; background:#fff; cursor:pointer; }
#postureLockScreen button.pt-away-primary { color:#fff; background:#237557; border-color:#237557; }