/* assets/css/hazard.css — 危险感知视频（危险感知 / 案例分析）专用样式
   与 app.css 共用设计变量；播放器为独立组件，不覆盖通用卡片样式 */

.hv-tabs { display: inline-flex; margin-bottom:16px; }

/* ---------- 播放器 ---------- */
.hv-card { overflow: hidden; }

.hv-stage {
  position: relative;
  background: #05080F;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: crosshair;
  touch-action: manipulation;
  user-select: none;
}
.hv-stage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #05080F;
  pointer-events: none;
}
.hv-stage--case { cursor: default; background: #05080F; aspect-ratio: 16 / 9; }
.hv-stage--case video { pointer-events: auto; }

/* 点击层：铺满画面，捕获点击（含移动端 tap） */
.hv-click { position: absolute; inset: 0; z-index: 3; cursor: crosshair; }

/* 全屏闪光：以点击位置为圆心，命中偏金、连点偏红 */
.hv-flash {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 240px at var(--fx, 50%) var(--fy, 50%),
    rgba(245, 180, 0, .26), rgba(245, 180, 0, 0) 70%);
}
.hv-flash.is-on { animation: hv-flash .38s ease-out; }
.hv-flash.is-bad {
  background: radial-gradient(circle 240px at var(--fx, 50%) var(--fy, 50%),
    rgba(224, 72, 63, .3), rgba(224, 72, 63, 0) 70%);
}
/* 冷却中再点：很淡的白光，几乎不干扰观看 */
.hv-flash.is-fast {
  background: radial-gradient(circle 200px at var(--fx, 50%) var(--fy, 50%),
    rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
}
/* 次数用完：画面四周暗红提示 */
.hv-flash.is-over {
  background: radial-gradient(circle 240px at var(--fx, 50%) var(--fy, 50%),
    rgba(224, 72, 63, .34), rgba(224, 72, 63, 0) 70%);
  box-shadow: inset 0 0 0 3px rgba(224, 72, 63, .55);
}
@keyframes hv-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* 点击波纹：外环扩散 + 内点收缩 */
.hv-marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hv-mark { position: absolute; width: 0; height: 0; }
.hv-mark .hv-ring {
  position: absolute; left: -32px; top: -32px;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid #FFD24A;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85),
              0 0 22px rgba(255, 200, 60, .65),
              inset 0 0 16px rgba(255, 220, 120, .55);
  animation: hv-ring .78s cubic-bezier(.2, .7, .3, 1) forwards;
}
.hv-mark .hv-core {
  position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 200, 60, .7), 0 0 18px rgba(255, 255, 255, .8);
  animation: hv-core .6s ease-out forwards;
}
.hv-mark--bad .hv-ring { border-color: #FF6B5E; box-shadow: 0 0 14px rgba(224, 72, 63, .55); animation-duration: .5s; }
.hv-mark--bad .hv-core { background: #FF6B5E; box-shadow: 0 0 0 3px rgba(224, 72, 63, .45); }
/* 点太快：灰色短促波纹（不消耗次数） */
.hv-mark--fast .hv-ring {
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 0 10px rgba(255, 255, 255, .28);
  animation-duration: .42s;
}
.hv-mark--fast .hv-core { background: rgba(255, 255, 255, .7); box-shadow: none; }
/* 次数用完：暗红波纹，提示已经没有配额 */
.hv-mark--over .hv-ring {
  border-color: rgba(224, 72, 63, .85);
  border-style: dashed;
  box-shadow: 0 0 10px rgba(224, 72, 63, .4);
  animation-duration: .5s;
}
.hv-mark--over .hv-core { background: #E0483F; box-shadow: 0 0 0 3px rgba(224, 72, 63, .35); }
@keyframes hv-ring {
  0%   { transform: scale(.3); opacity: 0; }
  14%  { opacity: 1; }
  55%  { opacity: .85; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes hv-core {
  0%   { transform: scale(.55); opacity: 1; }
  55%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(.15); opacity: 0; }
}

/* 系统开启「减少动态效果」时 app.css 会把所有动画压到 0.01ms，
   波纹会瞬间停在结束帧（不可见）。这里改成静态高亮，点击反馈依然在。 */
@media (prefers-reduced-motion: reduce) {
  .hv-mark .hv-ring {
    animation: none !important;
    opacity: 1;
    transform: scale(.92);
    border-color: #FFD24A;
  }
  .hv-mark .hv-core { animation: none !important; opacity: 1; transform: scale(1); }
  .hv-mark--bad .hv-ring { border-color: #FF6B5E; }
  .hv-mark--fast .hv-ring { border-color: rgba(255, 255, 255, .7); }
  .hv-mark--over .hv-ring { border-color: rgba(224, 72, 63, .9); border-style: dashed; }
  .hv-flash { display: none; }
  .hv-tp { animation: none !important; }
  /* 冷却条动画会被压到 0.01ms（看不见），干脆隐藏；冷却期间仍禁止点击，靠文字提示 */
  .hv-cooling { display: none; }
}

/* 开始遮罩 */
.hv-cover {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(11, 27, 51, .72), rgba(5, 8, 15, .94));
  text-align: center;
  padding: 20px;
}
.hv-cover[hidden] { display: none; }
.hv-cover-inner { max-width: 420px; }
.hv-cover-icon {
  width: 66px; height: 66px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.hv-cover-title { color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.hv-cover-sub { color: rgba(255, 255, 255, .62); font-size: 13px; line-height: 1.7; margin: 0 0 18px; }

/* HUD */
.hv-hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  font-size: 12px; color: rgba(255, 255, 255, .78);
  background: linear-gradient(180deg, rgba(5, 8, 15, .6), rgba(5, 8, 15, 0));
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hv-hud-right { display: inline-flex; align-items: center; gap: 8px; }
.hv-hud-clicks {
  display: inline-block;
  color: var(--gold); font-weight: 650;
}
.hv-hud-clicks.is-pop { animation: hv-count-pop .3s cubic-bezier(.2, .8, .3, 1.4); }
.hv-hud-clicks.is-out { color: #FF8F84; }
@keyframes hv-count-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* 剩余次数徽章：正常 / 剩 1 次 / 已用完 */
.hv-quota {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 650;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  letter-spacing: .2px;
}
.hv-quota[hidden] { display: none; }
.hv-quota.is-low { background: rgba(245, 180, 0, .9); color: #23180A; }
.hv-quota.is-out { background: rgba(224, 72, 63, .92); color: #fff; }

/* 点击冷却：底部细条，按最小间隔走完才允许下一次点击 */
.hv-cooling {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 6;
  background: rgba(255, 255, 255, .14);
  pointer-events: none;
  overflow: hidden;
}
.hv-cooling[hidden] { display: none; }
.hv-cooling i { display: block; height: 100%; width: 100%; transform-origin: left center; background: var(--gold); }
.hv-cooling.is-run i { animation: hv-cool linear forwards; }
@keyframes hv-cool { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* 冷却中禁止再点：交给 JS 判定，这里只改光标 */
.hv-click.is-cd { cursor: not-allowed; }
.hv-sound {
  pointer-events: auto;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hv-sound:not(.is-on) { opacity: .45; }

.hv-toast {
  position: absolute; left: 50%; bottom: 16%; z-index: 7;
  transform: translateX(-50%);
  background: rgba(224, 72, 63, .94);
  color: #fff; font-size: 13px; font-weight: 650;
  padding: 8px 16px; border-radius: var(--r-pill);
  pointer-events: none;
  animation: hv-toast-in .2s ease-out;
}
@keyframes hv-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* 控制条（自建：禁止拖动，保证计分公平）；
   上面的落点是「本次已点击的时刻」，只标位置不给分，避免提前泄露答案 */
.hv-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.hv-play {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hv-play:hover { border-color: var(--blue); color: var(--blue); }
.hv-track {
  position: relative;
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--line);
}
.hv-track > i { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.hv-track-marks { position: absolute; inset: 0; pointer-events: none; }
.hv-tp {
  position: absolute; top: -4px; bottom: -4px;
  width: 3px; margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgba(11, 27, 51, .45);
  animation: hv-tp-in .24s cubic-bezier(.2, .8, .3, 1.5);
}
.hv-tp--bad { background: #E0483F; box-shadow: 0 0 0 1.5px #fff; }
@keyframes hv-tp-in { from { transform: scaleY(.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.hv-time { font-size: 12px; color: var(--text-3); flex: none; }

/* ---------- 成绩 ---------- */
.hv-score-big { font-size: 30px; font-weight: 750; color: var(--blue); line-height: 1; }
.hv-score-max { font-size: 16px; color: var(--text-3); font-weight: 600; }

.hv-label { font-size: 12px; color: var(--text-3); margin: 0 0 8px; }
.hv-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }

/* 回放条：得分窗口 + 带编号的点击标记 + 播放头 */
.hv-replay {
  position: relative;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
}
.hv-replay-wins { position: absolute; inset: 0; }
.hv-win {
  position: absolute; top: 14px; bottom: 14px;
  border-radius: 3px;
  opacity: .85;
}
.hv-seg-5 { background: #0E9F6E; }
.hv-seg-4 { background: #4FB286; }
.hv-seg-3 { background: #F5B400; }
.hv-seg-2 { background: #F08C3A; }
.hv-seg-1 { background: #E0483F; }
.hv-replay-head {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--ink);
  opacity: .5;
  transform: translateX(-1px);
  pointer-events: none;
}
.hv-replay-ticks { position: absolute; inset: 0; pointer-events: none; }
.hv-rt { position: absolute; top: 50%; width: 0; height: 0; }
.hv-rt b {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 10px; font-weight: 700;
  font-style: normal;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(11, 27, 51, .22);
}
.hv-rt.is-miss b { border-color: #E0483F; color: #C8382F; }
.hv-rt.is-rapid b { border-style: dashed; border-color: var(--text-3); color: var(--text-3); }
.hv-rt.is-over b { border-style: dotted; border-color: var(--text-3); color: var(--text-3); background: #F1F3F6; }
/* 相邻标记错位显示 */
.hv-rt.is-up b { transform: translate(-50%, calc(-50% - 12px)); }
.hv-rt.is-down b { transform: translate(-50%, calc(-50% + 12px)); }
.hv-scale {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.hv-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 10px;
  font-size: 11.5px; color: var(--text-3);
}
.hv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.hv-legend .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dot-5 { background: #0E9F6E; } .dot-4 { background: #4FB286; } .dot-3 { background: #F5B400; }
.dot-2 { background: #F08C3A; } .dot-1 { background: #E0483F; }
.dot-hit { background: var(--ink); width: 11px !important; height: 11px !important; border-radius: 50%; }

/* 点击记录卡：截图 + 时刻 + 得分档 + 时间窗 */
.hv-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 10px;
}
.hv-shot {
  display: flex; gap: 10px; align-items: stretch;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.hv-shot:hover { border-color: var(--blue-line); background: var(--blue-soft); }
.hv-shot.is-active { border-color: var(--blue); background: var(--blue-soft); }
.hv-shot-thumb {
  position: relative; flex: none;
  width: 92px; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden;
  background: #0B1B33;
}
.hv-shot-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .2s ease;
}
.hv-shot:hover .hv-shot-thumb img { transform: scale(1.07); }
.hv-shot-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .38);
  font-size: 10px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px);
}
.hv-shot-idx {
  position: absolute; left: 4px; top: 4px; z-index: 2;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: rgba(11, 27, 51, .8);
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hv-shot-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.hv-shot-time { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hv-shot-sub { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.hv-shot-tag {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  margin: 2px 0;
}
.hv-shot-tag.s5 { background: rgba(14, 159, 110, .14); color: #0B7A54; }
.hv-shot-tag.s4 { background: rgba(79, 178, 134, .16); color: #2C7A57; }
.hv-shot-tag.s3 { background: rgba(245, 180, 0, .18); color: #8A5A00; }
.hv-shot-tag.s2 { background: rgba(240, 140, 58, .16); color: #95531A; }
.hv-shot-tag.s1 { background: rgba(224, 72, 63, .13); color: #B03830; }
.hv-shot-tag.s0 { background: var(--surface-2); color: var(--text-3); }

.hv-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.hv-ex { margin-top: 16px; }
.hv-ex video { width: 100%; border-radius: var(--r-sm); background: #05080F; display: block; }

/* ---------- 片段列表 ---------- */
.hv-list {
  max-height: 460px;
  overflow: auto;
  padding: 4px 6px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.hv-item {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 8px 6px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  position: relative;
  transition: border-color .15s, background .15s;
}
.hv-item:hover { border-color: var(--blue-line); background: var(--blue-soft); }
.hv-item.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-weight: 650; }
.hv-item.is-done::after {
  content: "";
  position: absolute; right: 5px; top: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}
.hv-item-num { display: block; font-weight: 700; font-size: 13px; }
.hv-item-score { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.hv-item.is-locked { opacity: .55; cursor: not-allowed; }
.hv-item.is-locked:hover { border-color: var(--line); background: var(--surface); }

/* ---------- 案例 ---------- */
.case-q { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; background: var(--surface); }
.case-q-head { display: flex; gap: 8px; align-items: flex-start; }
.case-q-index {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue-dark);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.case-q-stem { font-size: 14.5px; line-height: 1.65; font-weight: 600; margin: 0; }
.case-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.case-opt {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  cursor: pointer;
  font-size: 13px; line-height: 1.5;
  background: var(--surface);
  text-align: left;
  color: var(--text);
  transition: border-color .14s, background .14s, transform .1s;
}
.case-opt:hover { border-color: var(--blue-line); background: var(--surface-2); }
.case-opt:active { transform: scale(.985); }
.case-opt.is-picked { border-color: var(--blue); background: var(--blue-soft); }
.case-opt.is-correct { border-color: #BFE8D7; background: var(--success-soft); }
.case-opt.is-wrong { border-color: #F5C6C2; background: var(--danger-soft); }
.case-opt b { flex: none; color: var(--text-3); font-weight: 700; }
.case-opt.is-picked b, .case-opt.is-correct b { color: inherit; }
.case-explain {
  margin-top: 12px; padding: 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.75; color: var(--text-2);
  white-space: pre-wrap;
}
.case-result {
  margin-top: 16px; padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  font-size: 13.5px; color: var(--blue-dark);
}
.case-result b { font-size: 17px; }

/* ---------- 移动端 ---------- */
@media (max-width: 760px) {
  /* 底部固定导航会盖住最后一行片段，留出安全区 */
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .hv-hud { font-size: 11px; padding: 8px 10px; }
  .hv-bar { padding: 8px 10px; gap: 8px; }
  .hv-score-big { font-size: 24px; }
  .case-opts { grid-template-columns: 1fr; }
  .hv-list { max-height: 260px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .hv-cover-title { font-size: 15px; }
  .hv-cover-sub { font-size: 12px; }
  .hv-actions-row .btn { flex: 1; }
  .hv-replay { height: 48px; }
  .hv-rt b { width: 17px; height: 17px; font-size: 9px; }
  /* 点击记录在手机上单列，缩略图放大一点更好辨认 */
  .hv-shots { grid-template-columns: 1fr; }
  .hv-shot-thumb { width: 104px; }
  /* HUD 挤了三个元素（剩余次数 / 计数 / 音效），小屏再收一档 */
  .hv-hud-right { gap: 6px; }
  .hv-quota { padding: 1px 7px; font-size: 10px; }
  .hv-hud-clicks { font-size: 11px; }
}

/* ---------- 控制条工具组：音量 / 网页全屏 / 全屏 ---------- */
.hv-tools { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.hv-ico {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-2);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.hv-ico:hover { background: var(--blue-soft); color: var(--blue-dark); }
.hv-ico.is-on { color: var(--blue-dark); background: var(--blue-soft); }
.hv-ico.is-muted { color: var(--text-3); }
.hv-ico svg { width: 16px; height: 16px; }

.hv-vol { position: relative; display: inline-flex; align-items: center; }

/* 竖版音量弹层由 media-ui.js 生成，样式在 app.css 的 25.3 节，这里不再重复 */

/* ---------- 网页全屏：整张播放卡铺满窗口，控制条固定在底下 ---------- */
.hv-card.is-webfs {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  flex-direction: column;
  background: #05080F;
  border-radius: 0;
}
.hv-card.is-webfs .hv-stage {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
}
.hv-card.is-webfs > .card-body { display: none !important; }
.hv-card.is-webfs .hv-bar {
  flex: none;
  background: rgba(8, 14, 26, .96);
  border-bottom: 0;
}
.hv-card.is-webfs .hv-play { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.hv-card.is-webfs .hv-track { background: rgba(255, 255, 255, .22); }
.hv-card.is-webfs .hv-time { color: rgba(255, 255, 255, .8); }
.hv-card.is-webfs .hv-ico { color: rgba(255, 255, 255, .8); }
.hv-card.is-webfs .hv-ico:hover { background: rgba(255, 255, 255, .14); color: #fff; }

body.is-webfs-lock, html.is-webfs-lock { overflow: hidden !important; }

/* 案例 / 解析视频：自定义控制条需要定位容器 */
.hv-ex { position: relative; }
.hv-stage--case { overflow: hidden; }

@media (max-width: 760px) {
  .hv-ico { width: 26px; height: 26px; }
  #hv-webfs { display: none; }
  .hv-tools { gap: 0; }
}

/* 案例 / 解析视频的网页全屏：容器铺满窗口，视频按比例居中 */
.hv-stage.is-webfs {
  position: fixed;
  inset: 0;
  z-index: 9400;
  aspect-ratio: auto;
  border-radius: 0;
  background: #05080F;
}
.hv-stage.is-webfs video { object-fit: contain; }

.hv-ex.is-webfs {
  position: fixed;
  inset: 0;
  z-index: 9400;
  margin: 0;
  background: #05080F;
  display: flex;
  align-items: center;
}
.hv-ex.is-webfs video {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}

/* 系统全屏同理，别让视频被裁切 */
.hv-stage:fullscreen video,
.hv-ex video:fullscreen { object-fit: contain; }