/* ============================================================
   俯卧撑小鸟 —— UI 样式
   目标设备：iPhone Safari / 主屏幕 Web App（也兼容桌面调试）
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #4ec0ca;
  color: #14232b;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", system-ui,
    "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#video {
  position: fixed;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

.is-hidden {
  display: none !important;
}

/* ---------------- 摄像头小窗 ---------------- */
.cam-panel {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  top: calc(10px + env(safe-area-inset-top));
  width: 84px;
  height: 112px;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1b1e;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  z-index: 8;
  pointer-events: none;
  transition: opacity 0.2s;
}

.cam-panel canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cam-badge {
  position: absolute;
  left: 4px;
  bottom: 3px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.cam-fps {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 800;
  color: #ffd43b;
  background: rgba(0, 0, 0, 0.55);
  display: none;
}

.cam-fps.is-on {
  display: block;
}

.cam-panel.lost .cam-badge {
  background: rgba(214, 60, 40, 0.85);
}

/* ---------------- HUD ---------------- */
.hud {
  position: absolute;
  /* 计数/用时在画布上框里，操作放在拇指够得着的右下角 */
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: auto;
  right: calc(12px + env(safe-area-inset-right));
  top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  z-index: 7;
  pointer-events: none;
}

.rec-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #ff6b6b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.rec-dot.is-on {
  display: inline-flex;
  animation: recPulse 1.6s ease-in-out infinite;
}

@keyframes recPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.hud-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(6, 32, 38, 0.4);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.hud-chip b {
  font-size: 17px;
  font-weight: 800;
}

.btn-icon {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(6, 32, 38, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(6px);
}

/* ---------------- 屏幕层 ---------------- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  animation: fade 0.22s ease both;
}

.screen.on {
  display: flex;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.screen[data-screen="menu"] {
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(8, 58, 66, 0.46) 0%, rgba(8, 58, 66, 0.06) 42%),
    linear-gradient(0deg, rgba(8, 40, 48, 0.72) 0%, rgba(8, 40, 48, 0) 52%);
}

.menu-top {
  padding-top: 6px;
  color: #fff;
}

/* 标题和说明压在一张半透明卡片上：天空一直在动，纯文字会糊在云里看不清 */
.menu-card {
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(6, 38, 46, 0.62) 0%, rgba(6, 32, 40, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menu-card h1 {
  margin: 0 0 10px;
}

.kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.menu-top h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.16), 0 10px 26px rgba(0, 0, 0, 0.22);
}

.lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.menu-bottom {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.menu-foot {
  padding: 8px 12px;
  border-radius: 14px;
  /* 这行字压在天空上：垫深色底 + 纯白字，浅色天空下也读得清 */
  background: rgba(6, 32, 40, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 6px 0 4px;
}

.hist-cell {
  padding: 9px 8px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.hist-cell b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
}

.hist-cell span {
  font-size: 10.5px;
  color: rgba(226, 244, 240, 0.86);
}

.hist-cell em {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-style: normal;
  color: rgba(214, 236, 232, 0.78);
}

.hist-trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
  margin: 10px 0 4px;
  padding: 0 2px;
}

.hist-trend i {
  flex: 1;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #7be3c4 0%, #2f9e8a 100%);
  opacity: 0.9;
}

.hist-trend i.zero {
  background: rgba(255, 255, 255, 0.2);
}

.hist-h3 {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.hist-top {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: rgba(240, 252, 249, 0.95);
}

.hist-top li {
  margin: 3px 0;
}

.hist-top b {
  color: #ffd76e;
}

.hist-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 14px 0 6px;
}

.mini-select {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  appearance: none;
}

.hist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 34vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hist-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 2px;
  font-size: 12.5px;
  color: rgba(232, 247, 244, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hist-list .h-when {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hist-list .h-reps {
  font-weight: 800;
  color: #fff;
  font-size: 14px;
}

.hist-list .h-meta {
  font-size: 11px;
  color: rgba(210, 233, 229, 0.82);
}

.screen-history {
  background: rgba(4, 22, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
}

.sheet.history {
  /* 深色面板：这一屏里的字全是白/浅色，底也必须深。
     之前 .sheet 是 rgba(255,255,255,.94)，配上白字 = 白底白字，
     用户直接看不见 —— 别再让 .sheet 的默认浅色背景渗进来。 */
  background: rgba(9, 32, 39, 0.94);
  color: #eaf6f4;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hist-head h2 {
  margin: 0;
}

.menu-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.menu-foot b {
  font-weight: 800;
  color: #ffe66b;
}

.menu-foot .dot {
  opacity: 0.5;
}

.link {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.a2hs {
  margin: 6px 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ---------------- 按钮 ---------------- */
.btn {
  appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s;
  cursor: pointer;
}

.btn:active {
  transform: translateY(2px) scale(0.985);
}

.btn-primary {
  color: #2a2200;
  background: linear-gradient(180deg, #ffe875 0%, #f9c81f 100%);
  box-shadow: 0 5px 0 #c79a06, 0 12px 24px rgba(0, 0, 0, 0.22);
}

.btn-primary:active {
  box-shadow: 0 2px 0 #c79a06, 0 6px 14px rgba(0, 0, 0, 0.22);
}

.btn-hero {
  font-size: 17.5px;
  padding: 17px 18px;
}

.btn-hero .emoji {
  font-size: 19px;
  margin-right: 4px;
}

.btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}

.btn-text {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  font-size: 14px;
  padding: 10px;
}

.btn-text.danger {
  color: #ff8a80;
}

.btn-sm {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 12px;
}

/* 卡片里的按钮改用深色文字 */
.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.card .btn-ghost,
.sheet .btn-ghost {
  color: #10333b;
  background: rgba(17, 66, 74, 0.08);
  border: 1.5px solid rgba(17, 66, 74, 0.18);
}

/* 深色面板（训练记录）里的次级文字要亮起来，否则灰字配深底读不出来 */
.sheet.history .muted,
.sheet.history .tiny,
.sheet.history .hint {
  color: rgba(222, 240, 237, 0.82);
}

.sheet.history .btn-ghost {
  color: #eaf6f4;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
}

.sheet.history .btn-text,
.sheet.history .btn-ghost.btn-text {
  color: rgba(180, 236, 224, 0.95);
}

.sheet.history .mini-select {
  color: #eaf6f4;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.sheet.history .link {
  color: #8fe6d2;
}

.sheet.history h2,
.sheet.history .hist-list .h-reps {
  color: #ffffff;
}

.card .btn-text,
.sheet .btn-text {
  /* 62% 只有 3.64，浅卡上"清空最佳成绩"这种字几乎看不见 */
  color: rgba(17, 66, 74, 0.86);
}

/* 页面上直接压在天空里的次要按钮：白字 + 半透明底 = 对比度不够，统一垫深色 */
.menu-bottom .btn-ghost {
  color: #ffffff;
  background: rgba(6, 32, 40, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
}

/* 主菜单上的"开局录像"小开关：要显眼到能被发现，又不能抢主按钮的视线 */
.rec-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: -2px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  /* 白字压在天空上只有 3.6:1，垫一层深色底才够（浅色天空 + 阳光是真实使用场景） */
  background: rgba(6, 32, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(8, 40, 48, 0.55);
  cursor: pointer;
}

.rec-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #ffd43b;
}

/* ---------------- 难度分段 ---------------- */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(9, 46, 53, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.sheet .seg {
  background: rgba(17, 66, 74, 0.08);
  border-color: rgba(17, 66, 74, 0.12);
}

.seg button {
  flex: 1;
  padding: 9px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
}

.sheet .seg button {
  color: rgba(17, 66, 74, 0.7);
}

.seg button.on {
  background: #fff;
  color: #14232b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ---------------- 卡片 ---------------- */
.card,
.sheet {
  margin: auto;
  width: 100%;
  max-width: 420px;
  max-height: calc(100% - 4px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px 22px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.card h2,
.sheet h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.muted {
  color: rgba(20, 35, 43, 0.6);
}

.card p,
.sheet p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.tiny {
  font-size: 11.5px !important;
  line-height: 1.5;
}

/* ---------------- 进度 / 加载 ---------------- */
.progress {
  height: 8px;
  border-radius: 99px;
  background: rgba(17, 66, 74, 0.12);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #f9c81f, #7dc242);
  transition: width 0.18s linear;
}

.spinner {
  width: 34px;
  height: 34px;
  margin: 4px auto 2px;
  border-radius: 50%;
  border: 4px solid rgba(17, 66, 74, 0.15);
  border-top-color: #f9c81f;
  animation: spin 0.85s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------- 校准 ---------------- */
.screen-calib {
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(6, 34, 40, 0.72), rgba(6, 34, 40, 0.9));
  color: #fff;
}

.calib-head {
  text-align: center;
  color: #fff;
}

.calib-head h2 {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 900;
}

.calib-head .muted {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
}

.calib-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #0b2328;
  border: 2px solid rgba(255, 255, 255, 0.22);
}

.calib-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.face-guide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46%, 220px);
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  border: 2.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 46% 46% 44% 44%;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: border-color 0.2s, opacity 0.2s;
}

.face-guide span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 8px;
  border-radius: 8px;
}

.face-guide.ok {
  border-color: #86efac;
  opacity: 0.35;
}

.calib-ring {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 62%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.calib-ring::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: #ffe66b;
  box-shadow: 0 0 14px rgba(255, 230, 107, 0.9);
  top: var(--y, 50%);
  transition: top 0.06s linear;
}

.calib-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.calib-foot .progress {
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
}

.calib-foot .tiny {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------------- 倒数 ---------------- */
.screen-count {
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(6, 34, 40, 0.42);
  color: #fff;
  text-align: center;
}

.count-num {
  font-size: clamp(96px, 30vh, 220px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 8px 0 rgba(0, 0, 0, 0.18), 0 20px 50px rgba(0, 0, 0, 0.35);
  animation: pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes pop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------------- 结算 ---------------- */
.over-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  color: #14232b;
}

.over-score b {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ffd93b, #f0a500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.12));
}

.over-score span {
  font-size: 15px;
  font-weight: 700;
  color: rgba(20, 35, 43, 0.5);
}

.over-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 2px;
}

.over-stats div {
  flex: 1;
  padding: 10px 6px;
  border-radius: 14px;
  background: rgba(17, 66, 74, 0.07);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.over-stats b {
  font-size: 20px;
  font-weight: 900;
}

.over-stats span {
  font-size: 10.5px;
  color: rgba(20, 35, 43, 0.55);
  font-weight: 600;
}

.praise {
  color: #8a5200 !important;
  font-weight: 800;
  font-size: 13.5px !important;
  min-height: 20px;
}

/* ---------------- 设置 ---------------- */
.sheet {
  text-align: left;
  gap: 14px;
}

.sheet h2 {
  text-align: center;
}

.row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.row em {
  font-style: normal;
  /* #b26b00 在浅卡上只有 4.02，压到 #8a5200 才过 4.5（阳光下的可读性） */
  color: #8a5200;
  font-weight: 800;
}

.row-switch em.hint {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  /* 50% 灰只有 3.09 —— 说明文字看不清等于没写 */
  color: rgba(20, 35, 43, 0.74);
}

.row-switch {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(17, 66, 74, 0.06);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(17, 66, 74, 0.18);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #f9c81f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 48px;
  height: 28px;
  border-radius: 99px;
  background: rgba(17, 66, 74, 0.22);
  position: relative;
  transition: background 0.18s;
  flex: none;
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s;
}

input[type="checkbox"]:checked {
  background: #7dc242;
}

input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

/* ---------------- toast ---------------- */
.toast {
  position: absolute;
  /* 底部导航是 fixed + z-index 30，toast 不抬起来会被它整条盖住 */
  z-index: 60;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  max-width: 86%;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(8, 32, 38, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 40;
  backdrop-filter: blur(10px);
}

.toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------- 横屏 ---------------- */
@media (orientation: landscape) and (max-height: 520px) {
  .menu-top h1 {
    font-size: 28px;
  }
  .lead {
    font-size: 12px;
  }
  .screen[data-screen="menu"] {
    justify-content: space-between;
    gap: 8px;
  }
  .btn-hero {
    padding: 12px;
    font-size: 15px;
  }
  .btn {
    padding: 11px 16px;
    font-size: 14px;
  }
  .over-score b {
    font-size: 52px;
  }
  .card,
  .sheet {
    max-width: 560px;
    padding: 18px;
  }
}

/* 录像合成用的离屏画布：挂到 DOM 里但完全不可见、不占位 */
.rec-canvas {
  position: fixed;
  left: -4px;
  top: -4px;
  width: 1px;
  height: 1px;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

/* 设置面板里的分段按钮：底色是白卡片，得单独一套浅色 */
.row-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.seg-light {
  background: rgba(17, 66, 74, 0.08);
  border-color: rgba(17, 66, 74, 0.14);
}

.seg-light button {
  color: rgba(17, 66, 74, 0.72);
}

.seg-light button.on {
  background: #11424a;
  color: #fff;
}

/* ===== 改版：记录模式 ===== */

.hud-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.btn-stop {
  pointer-events: auto;
  margin-left: auto;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-stop:active {
  transform: scale(0.94);
  background: rgba(0, 0, 0, 0.5);
}

.over .reject {
  margin-top: -2px;
  color: #ffd98a;
  line-height: 1.5;
}

/* ===== 登录 / 当前账号 =====
   可读性硬门槛：文字都压在深底上（正文对比度 ≥4.5），别再用白字白底 */
.who-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(6, 32, 40, 0.62);
  flex-wrap: wrap;
}
.who-strip .link {
  color: #ffd978;
  font-weight: 700;
}
.who-strip .tiny {
  color: rgba(232, 247, 244, 0.92);
  font-weight: 600;
}
.who-strip.is-on .tiny {
  color: #9ff0d3;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  text-align: left;
}
.field span {
  font-size: 13px;
  font-weight: 700;
  /* 登录卡片是浅底的（和其他屏一致），标签必须是深字：浅字压浅底只有 1.05 */
  color: rgba(18, 40, 49, 0.82);
}
.field input {
  font: inherit;
  font-size: 16px; /* iOS 上小于 16px 会自动放大页面 */
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(18, 60, 70, 0.28);
  background: #ffffff;
  color: #12232b;
}
.field input::placeholder {
  color: rgba(18, 40, 49, 0.55);
}
.field input:focus {
  outline: 2px solid rgba(24, 128, 108, 0.65);
  outline-offset: 1px;
}
#loginMsg {
  min-height: 18px;
  /* 浅底上要深琥珀：#b26b00 只有 4.0，用 #8a5200 才过 4.5 */
  color: #8a5200;
  font-weight: 700;
}
#loginMsg.bad {
  color: #8f2f24;
}
/* 登录页/设置页里那些 12px 小字，浅底上要压到 4.5 以上（.muted 的 0.6 只有 4.25） */
#loginWhy,
#loginHelp,
#loginModeNote,
#appEnv,
#profWho,
#profMsg,
#clipNote,
#climbHint {
  color: rgba(20, 35, 43, 0.72);
}

/* 区域榜前三名：金/银/铜，其余保持默认（颜色只做锦上添花，信息不靠颜色传达） */
.hist-top li.lb-top1 b { color: #ffd76e; }
.hist-top li.lb-top2 b { color: #d8e6ea; }
.hist-top li.lb-top3 b { color: #e8b57a; }

/* 设置页的资料区：和上面那些开关留出一点呼吸 */
#profWho { margin: 2px 0 8px; }

/* 设置页的小标题：不能用记录页那个 hist-h3（那是深色面板上的白字，压在浅底上只有 1.05） */
.prof-h3 {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #12323a;
}
#profName, #profRegion { min-width: 0; }

/* 主页的爬山进度：压在实色深底上（浅天空底下浅字只有 3.09，过不了 4.5） */
.climb-line {
  display: inline-block;
  margin: 4px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #0e2b31;
  color: #eaf7f2;
  font-variant-numeric: tabular-nums;
}
.climb-line:empty {
  display: none;
}
.climb-line.is-done {
  color: #ffd76e;
  font-weight: 700;
}

/* 本机视频回看：全屏压暗 + 居中一块，视频按最大可用宽度显示 */
.clip-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 18, 22, 0.86);
}
.clip-sheet[hidden] {
  display: none;
}
.clip-box {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  overflow: hidden;
  background: #0d2126;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
#clipVideo {
  display: block;
  width: 100%;
  max-height: 62vh;
  background: #000;
}
.clip-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 14px 14px;
}
.clip-foot .tiny {
  flex: 1 1 100%;
  color: rgba(226, 244, 240, 0.78);
}
/* 明细行里的"有录像"按钮：小三角，别抢数字的位置 */
.h-play {
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #eaf7f2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  margin-right: 8px;
  cursor: pointer;
}
.h-play:active {
  background: rgba(255, 255, 255, 0.24);
}

/* ==================================================================
   v19：底部模块导航 + 成就页 + 我的页 + 登录页交互动效
   动效只碰 transform / opacity（合成层），不在动画里改 width/height/top ——
   iPhone Safari 上改布局属性会掉帧，而且会把滚动位置抖乱。
   全部动画都受 prefers-reduced-motion 约束（系统开了"减弱动态效果"就静音）。
   ================================================================== */

:root {
  --t-fast: 140ms;
  --t-mid: 220ms;
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --tab-h: 58px;
  --ink: #eaf6f4;
  --ink-2: rgba(222, 240, 237, 0.82);
  --ink-3: rgba(200, 226, 222, 0.74);
  --panel-deep: rgba(9, 32, 39, 0.94);
}

/* [hidden] 必须压过 display:flex，否则 tab 栏藏不掉 */
[hidden] {
  display: none !important;
}

/* 有底部导航时，提示条要抬到它上面，否则"记录已保存"这种话直接被挡掉 */
body[data-tabbar='on'] .toast {
  bottom: calc(28px + var(--tab-h) + env(safe-area-inset-bottom));
}

/* ---------- 底部 tab 栏 ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(6, 26, 32, 0.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
  animation: tabIn var(--t-mid) var(--ease) both;
}

@keyframes tabIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

.tab {
  appearance: none;
  border: 0;
  background: none;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 4px;
  color: rgba(196, 224, 220, 0.72);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.tab .tab-ico {
  width: 22px;
  height: 22px;
  transition: transform var(--t-fast) var(--ease);
}

.tab:active {
  transform: scale(0.94);
}

.tab:active .tab-ico {
  transform: scale(0.9);
}

.tab.is-on {
  color: #ffe066;
}

.tab.is-on .tab-ico {
  transform: translateY(-1px) scale(1.06);
}

.tab:focus-visible {
  outline: 2px solid rgba(255, 224, 102, 0.9);
  outline-offset: -4px;
  border-radius: 12px;
}

/* 有 tab 栏的屏要给内容留出底部空间，否则最后一行的按钮被压住 */
body[data-tabbar='on'] .screen.on {
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px);
}

/* ---------- 页面型屏幕（成就 / 我的） ---------- */
.screen-page {
  background: rgba(4, 22, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
}

.sheet.page {
  gap: 12px;
  text-align: left;
}

.sheet.page .hist-head h2 {
  color: #ffffff;
}

/* ---------- 成就页 ---------- */
.ach-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ach-cell {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
}

.ach-cell b {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.ach-cell span {
  font-size: 11px;
  color: var(--ink-2);
}

.peak-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peak-item {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 9px 11px;
}

.peak-item.is-climbing {
  border-color: rgba(255, 224, 102, 0.55);
  background: rgba(255, 224, 102, 0.1);
}

.peak-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.peak-top b {
  font-size: 13px;
  color: #ffffff;
}

.peak-top span {
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.peak-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.peak-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #62d4c4 0%, #ffe066 100%);
  transform-origin: left center;
  animation: barGrow var(--t-mid) var(--ease) both;
}

@keyframes barGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.badge .badge-ico {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.12);
  /* 0.55 的浅色在深底上只有 3.69（e2e 判红）。未解锁的"灰"靠 grayscale 表达，
     颜色本身要够亮 —— 图标也是信息，看不清等于没有。 */
  color: rgba(226, 242, 238, 0.8);
  filter: grayscale(1);
  transition: transform var(--t-mid) var(--ease), filter var(--t-fast) linear;
}

.badge .badge-name {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--ink-2);
}

.badge.is-got {
  background: rgba(255, 224, 102, 0.13);
  border-color: rgba(255, 224, 102, 0.42);
}

.badge.is-got .badge-ico {
  background: linear-gradient(180deg, #ffe875 0%, #f9c81f 100%);
  color: #3a2c00;
  filter: none;
  animation: badgePop 320ms var(--ease) both;
}

.badge.is-got .badge-name {
  color: #ffffff;
  font-weight: 700;
}

@keyframes badgePop {
  0% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.badge .badge-left {
  font-size: 9.5px;
  color: var(--ink-3);
}

/* ---------- 我的页 ---------- */
.me-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.me-id {
  display: flex;
  align-items: center;
  gap: 10px;
}

.me-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
  color: #26340a;
  background: linear-gradient(180deg, #ffe875 0%, #f9c81f 100%);
}

.me-avatar.is-guest {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
}

.me-id-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.me-id-txt b {
  font-size: 14.5px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-id-txt span {
  font-size: 11px;
  color: var(--ink-2);
}

.me-actions {
  display: flex;
  gap: 8px;
}

.me-actions .btn {
  flex: 1 1 0;
}

.me-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.me-row {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear;
  -webkit-tap-highlight-color: transparent;
}

.me-row b {
  flex: 0 0 auto;
  font-weight: 800;
}

.me-row span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-row i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 18px;
  color: var(--ink-3);
  line-height: 1;
}

.me-row:active {
  transform: scale(0.985);
  background: rgba(255, 255, 255, 0.13);
}

/* ---------- 登录页：分段控件 + 字段状态 + 按钮忙碌 ---------- */
.login-card {
  gap: 10px;
}

.seg {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: 13px;
  background: rgba(17, 66, 74, 0.09);
  border: 1px solid rgba(17, 66, 74, 0.14);
}

.seg-btn {
  appearance: none;
  border: 0;
  flex: 1 1 0;
  padding: 9px 4px;
  border-radius: 10px;
  background: none;
  color: rgba(17, 66, 74, 0.66);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.seg-btn:active {
  transform: scale(0.97);
}

.seg-btn.is-on {
  color: #12323a;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(9, 40, 48, 0.14);
}

.seg-btn:focus-visible {
  outline: 2px solid rgba(17, 102, 116, 0.8);
  outline-offset: 2px;
}

.field.is-bad input,
.field.is-bad .mini-select {
  border-color: #d94a3d;
  background: rgba(217, 74, 61, 0.06);
}

.field.is-ok input {
  border-color: #2f9e6f;
}

.field-err {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: #b3261e;
  text-align: left;
  margin-top: 2px;
  animation: errIn var(--t-fast) var(--ease) both;
}

@keyframes errIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 出错时轻轻抖一下：手机上没有声音提示，抖动是最省事的"看这里" */
.shake {
  animation: shake 320ms var(--ease) both;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}

.pass-wrap {
  position: relative;
  display: block;
}

.pass-wrap input {
  width: 100%;
  padding-right: 62px;
}

.pass-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: rgba(17, 66, 74, 0.08);
  border-radius: 9px;
  padding: 6px 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(17, 66, 74, 0.82);
  cursor: pointer;
}

.pass-eye:active {
  transform: translateY(-50%) scale(0.95);
}

.btn-block {
  width: 100%;
  position: relative;
}

/* 按钮里塞了 spinner，文字用 .btn-txt 包着，换文案只改它 */
.btn.is-busy {
  pointer-events: none;
  filter: saturate(0.75);
}

.btn .btn-spin {
  display: none;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 999px;
  border: 2px solid rgba(42, 34, 0, 0.28);
  border-top-color: rgba(42, 34, 0, 0.9);
  animation: spin 700ms linear infinite;
}

.btn.is-busy .btn-spin {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 新用户第一次进来：把"注册"这条路放到最显眼的位置 */
.login-card.is-signup #btnDoSignup {
  order: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tabbar,
  .screen,
  .badge.is-got .badge-ico,
  .peak-bar i,
  .field-err,
  .shake,
  .btn .btn-spin {
    animation: none !important;
  }

  .tab,
  .tab .tab-ico,
  .me-row,
  .seg-btn,
  .btn {
    transition: none !important;
  }
}

/* 屏幕切换：进来时轻微上浮（只在支持的选择器上生效，老浏览器就是直接显示） */
@supports (animation-timing-function: var(--ease)) {
  .screen.on {
    animation: screenIn var(--t-mid) var(--ease) both;
  }
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 蜜罐字段：真人看不见，脚本会填 —— 视觉隐藏但仍在 DOM 里（不能用 display:none，
   有些脚本会跳过不可见元素，那就白设了） */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 登录页：换一套账号（云端 ↔ 局域网）——很多人第一次注册在另一套后端上 */
.mode-switch {
  align-self: flex-start;
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(17, 66, 74, 0.92);
  text-decoration: underline;
  cursor: pointer;
}

.mode-switch:active {
  transform: scale(0.98);
}

/* 人机校验（Turnstile）容器：固定高度占位，避免 widget 加载完把下面的按钮顶走 */
.ts-box { display: flex; justify-content: center; min-height: 65px; margin: 2px 0 4px; }
.ts-box[hidden] { display: none; }