@charset "UTF-8"; /* 托管服务器返回的 CSS 不带字符集，声明一下，免得中文和符号被当成别的编码显示成乱码 */
/* ============================================================
   modules.css —— 技术体检的二级标签、画面遮挡检查、封面适配、总报告
   ============================================================ */

/* ---------- 技术体检：二级标签（体检 / 修复 / 对比 / 历史） ---------- */
.subtabs { display: inline-flex; gap: 2px; background: var(--fill); border-radius: 999px; padding: 3px; margin-bottom: 16px; flex-wrap: wrap; }
.subtabs button {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  padding: 4px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.subtabs button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- 画面遮挡检查：遮挡区域预览 ---------- */
.zone-preview { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.phone { position: relative; width: 180px; background: #1d2026; border-radius: 18px; border: 6px solid #2c3038; overflow: hidden; }
.zone { position: absolute; border-radius: 4px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); display: grid; place-items: center; overflow: hidden; }
.zone-area { position: absolute; border: 1.5px dashed rgba(255, 255, 255, .7); border-radius: 4px; }
.zone span { font-size: 10px; line-height: 1.2; color: #fff; text-align: center; padding: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.zone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zone-list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.zone-list li:first-child { border-top: 0; padding-top: 0; }

/* ---------- 画面遮挡检查 ---------- */
.occ-intro { display: none; } /* 页面大标题下的副标题已经说明，不再重复 */
.occ-settings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.occ-th input { width: 150px; accent-color: var(--accent); }
.occ-run { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.occ-preview-toggle { margin: 12px 0 4px; }
.occ-settings.off { opacity: .45; pointer-events: none; }
#occProgress { margin: 12px 0 0; }

.occ-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; margin-top: 14px; align-items: start; }
.occ-stage { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.occ-phone {
  position: relative; width: min(290px, calc(68vh * var(--sa))); aspect-ratio: var(--sa);
  background: #000; border-radius: 22px; border: 6px solid #2c3038; overflow: hidden;
}
.occ-area { position: absolute; overflow: hidden; }
.occ-video { position: absolute; }
.occ-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; cursor: pointer; }
.occ-boxes, .occ-zl { position: absolute; inset: 0; pointer-events: none; }
/* ---------- 画面上的框（画面遮挡、封面适配共用一套样式） ----------
   和玻璃风格保持一致：圆角、细实线、玻璃小胶囊标签；不用彩色虚线和直角色块。
   白色细框 = 系统给出的（识别到的文字、界面区域、裁切范围）；柠檬色 = 自己标的；白色粗框 + 斜纹 = 有问题（被挡住）
   （叠在视频画面上，不能用“不通过”的黑色，深色画面上会看不见） */
:root { --hatch: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 4px, rgba(255, 255, 255, .06) 4px 9px); }
/* 识别到的文字：半透明白底，像荧光笔涂过 */
.ob { position: absolute; border-radius: 4px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.ob span { position: absolute; left: 0; bottom: calc(100% + 3px); font-size: 10px; line-height: 17px; padding: 0 7px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: rgba(18, 18, 20, .58); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ob.bad, .ob.manual.bad, .oz.hit { background: var(--hatch); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0, 0, 0, .45); }
.ob.bad span, .ob.manual.bad span, .oz.hit span { background: #fff; color: #111; border-color: transparent; font-weight: 600; }
/* 平台界面区域：磨砂的浅色块 */
.oz { position: absolute; border-radius: 6px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.oz span { position: absolute; right: 3px; top: 3px; font-size: 9.5px; line-height: 15px; padding: 0 6px; border-radius: 999px; color: rgba(255, 255, 255, .9);
  background: rgba(18, 18, 20, .55); max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-zl.mock .oz { background: rgba(10, 10, 12, .55); border: 0; }    /* 仅预览：像真实界面一样压暗 */
.occ-zl.mock .oz span { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); background: none; font-size: 10.5px; }
.occ-controls { display: flex; align-items: center; gap: 10px; }

.occ-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.occ-frame-msg { font-size: 13px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--fill); }
.occ-frame-msg:empty { display: none; }
.occ-frame-msg.bad { background: var(--fail-bg); color: var(--fail); }
.occ-frame-msg p { margin: 0; }
.occ-frame-msg p + p { margin-top: 4px; }
.occ-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.occ-events li { border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 13px; background: var(--surface); transition: background .2s, box-shadow .2s; }
.occ-events li:hover { background: var(--fill); }
.occ-events li.on { background: var(--glass-strong); border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.occ-events .ev-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--warn)); margin-right: 7px; vertical-align: 2px; }
.occ-events .ev-title { font-weight: 600; }
.occ-events .ev-sug { color: var(--muted); }
.occ-events .ev-sug b { color: var(--text); font-weight: 600; }

.occ-timeline { margin-top: 18px; }
.tl-track { position: relative; height: 26px; border-radius: 6px; background: var(--fill); cursor: pointer; }
.tl-track .m { position: absolute; top: 5px; width: 6px; height: 16px; margin-left: -3px; border-radius: 2px; border: 0; padding: 0; cursor: pointer; }
.m.occ { background: var(--fail); }   /* 时间轴：被挡住 = 实心黑（白） */
.m.crop { background: var(--warn); }
.tl-track .m.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-head { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; pointer-events: none; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.tl-legend .m { display: inline-block; width: 6px; height: 12px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.occ-stats { margin: 12px 0 0; }
.occ-config { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.occ-config summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
.occ-config summary .hint { font-weight: 400; }
.occ-config-body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.occ-config-body > div { align-self: stretch; }

/* ---------- 封面适配 ---------- */
.cover-empty-actions { margin-top: 14px !important; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cover-src { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cover-src-video, .cover-src-image { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; }
.cover-src-video input[type=range] { flex: 1; accent-color: var(--accent); }
.cover-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; margin-top: 14px; align-items: start; }
.cover-editor-wrap { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cover-editor {
  position: relative; --ca: 0.5625;
  width: min(320px, calc(62vh * var(--ca)), 100%); aspect-ratio: var(--ca);
  background: #111113; border-radius: 14px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.cover-editor img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cover-layer { position: absolute; inset: 0; }
.cover-editor-hint { max-width: 320px; margin: 0; }
/* 裁切比例：用明暗区分。每个比例的框外面盖一层半透明暗色（.cv-mask），几层叠起来就有了层次——
   所有比例都保留的地方最亮，只有部分比例保留的地方半暗，所有比例都会裁掉的地方最暗。
   框线本身也按明度分档：第一个比例最亮，后面的依次变淡（data-tone） */
.cv-mask { position: absolute; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .3); }
.cv-crop { position: absolute; border-radius: 8px; pointer-events: none; transition: box-shadow var(--dur-fast) var(--ease); --line: rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 1px var(--line); }
.cv-crop[data-tone="1"] { --line: rgba(255, 255, 255, .55); }
.cv-crop[data-tone="2"], .cv-crop[data-tone="3"] { --line: rgba(255, 255, 255, .35); }
/* 比例标签：明度跟框线一致——最亮的是白底黑字，其余是深色玻璃；按顺序放在不同的角上，重叠时不会叠在一起 */
.cv-crop span { position: absolute; font-size: 10px; font-weight: 600; line-height: 17px; padding: 0 7px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: rgba(18, 18, 20, .58); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur-fast), color var(--dur-fast); }
.cv-crop[data-tone="0"] span { color: #111; background: rgba(255, 255, 255, .92); box-shadow: none; }
.cv-crop[data-corner="0"] span { left: 5px; top: 5px; }
.cv-crop[data-corner="1"] span { right: 5px; top: 5px; }
.cv-crop[data-corner="2"] span { left: 5px; bottom: 5px; }
.cv-crop[data-corner="3"] span { right: 5px; bottom: 5px; }
/* 鼠标移到下方的预览卡片上：对应的裁切框加粗高亮 */
.cv-crop.on { --line: #fff; box-shadow: inset 0 0 0 2px #fff, 0 0 22px rgba(255, 255, 255, .35); }
.cv-crop.on span { background: #fff; color: #111; }
.cv-text { position: absolute; border-radius: 4px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); pointer-events: none; }
/* 主体：相机取景框——四个白色粗角标（就是拖拽手柄）+ 很淡的细边 + 中心十字准星；“主体”标签在框下方居中 */
.cv-subject { position: absolute; cursor: move; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.cv-subject::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; opacity: .9;
  background: linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.cv-subject > span { position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%); font-size: 10.5px; font-weight: 600; line-height: 18px;
  padding: 0 9px; border-radius: 999px; white-space: nowrap; color: #111; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); pointer-events: none; }
.cv-subject .hd { position: absolute; width: 18px; height: 18px; border: 0 solid #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
  transition: border-color var(--dur-fast); }
.cv-subject .hd::before { content: ""; position: absolute; inset: -8px; } /* 角标细，扩大可拖的范围 */
.cv-subject .hd[data-h=nw] { left: -3px; top: -3px; border-width: 3px 0 0 3px; border-top-left-radius: 9px; cursor: nwse-resize; }
.cv-subject .hd[data-h=ne] { right: -3px; top: -3px; border-width: 3px 3px 0 0; border-top-right-radius: 9px; cursor: nesw-resize; }
.cv-subject .hd[data-h=se] { right: -3px; bottom: -3px; border-width: 0 3px 3px 0; border-bottom-right-radius: 9px; cursor: nwse-resize; }
.cv-subject .hd[data-h=sw] { left: -3px; bottom: -3px; border-width: 0 0 3px 3px; border-bottom-left-radius: 9px; cursor: nesw-resize; }
.cv-subject:hover .hd, .cv-subject:active .hd { border-color: var(--brand); } /* 拿起来调整时角标变成荧光绿 */
.cover-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.crops-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 22px 0 10px; }
.crops-head .sec-title { margin: 0; }
.cover-export { display: flex; align-items: center; gap: 8px; }
.cover-export select { width: auto; }
.cover-crops { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.crop-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 6px; width: 220px; background: var(--surface); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.crop-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.crop-card.bad { border-color: var(--line); } /* 有问题时只用下面的状态文字提示，卡片边框保持中性 */
.crop-card-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.crop-card-head b { font-size: 13.5px; }
.crop-view { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: #111113; cursor: grab; touch-action: none; }
.crop-view:active { cursor: grabbing; }
.crop-view img { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.crop-view .cz { position: absolute; display: grid; place-items: center; pointer-events: none; border-radius: 6px;
  background: rgba(18, 18, 20, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.crop-view .cz span { font-size: 9.5px; color: rgba(255, 255, 255, .9); text-align: center; padding: 1px 3px; }
.crop-card .c-status { font-size: 12.5px; }
.crop-card .c-status.ok { color: var(--pass); }
.crop-card .c-status.bad { color: var(--warn); }
.crop-card .actions { display: flex; gap: 6px; }

/* ---------- 手动框选的文字（画面遮挡检查、封面适配共用） ---------- */
.mb { position: absolute; border-radius: 6px; cursor: move; background: rgba(200, 240, 60, .14); box-shadow: inset 0 0 0 1.5px var(--brand); }
.mb.sel { background: rgba(200, 240, 60, .22); box-shadow: inset 0 0 0 2px var(--brand), 0 0 16px var(--brand-glow); z-index: 2; }
.mb > span { position: absolute; left: 0; bottom: calc(100% + 3px); font-size: 10px; font-weight: 600; line-height: 17px; padding: 0 7px; border-radius: 999px;
  color: var(--on-brand); background: var(--brand); white-space: nowrap; pointer-events: none; }
.mb .hd { position: absolute; width: 11px; height: 11px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--brand), 0 1px 4px rgba(0, 0, 0, .4); }
.mb .hd[data-h=nw] { left: 0; top: 0; cursor: nwse-resize; }
.mb .hd[data-h=ne] { left: 100%; top: 0; cursor: nesw-resize; }
.mb .hd[data-h=se] { left: 100%; top: 100%; cursor: nwse-resize; }
.mb .hd[data-h=sw] { left: 0; top: 100%; cursor: nesw-resize; }
.mb-del { position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; color: #fff; font: 600 13px/20px sans-serif; text-align: center; cursor: pointer; z-index: 3;
  background: rgba(18, 18, 20, .75); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mb-del:hover { background: #fff; color: #111; }
.occ-manual { position: absolute; inset: 0; pointer-events: none; }
.cover-manual { position: absolute; inset: 0; pointer-events: none; }
.cover-manual.on { pointer-events: auto; cursor: crosshair; }
.mb.static { pointer-events: none; }
.occ-manual.on { pointer-events: auto; cursor: crosshair; background: rgba(0, 0, 0, .12); }
.ob.manual { background: rgba(200, 240, 60, .14); box-shadow: inset 0 0 0 1.5px var(--brand); }
.ob.manual span { background: var(--brand); color: var(--on-brand); border-color: transparent; }

.man-list:empty { display: none; }
.man-list { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.man-head { display: flex; flex-direction: column; gap: 1px; }
.man-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 6px; border-radius: var(--radius-sm); }
.man-row.on { background: var(--accent-weak); }
.man-name { font-weight: 600; min-width: 46px; }
.man-row input[type=number] { width: 64px; padding: 2px 6px; }

/* ---------- 总报告 ---------- */
.mod-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mod-chip { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.mod-chip.ok { color: var(--pass); border-color: color-mix(in srgb, var(--pass) 40%, transparent); }
.mod-chip.bad { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.mod-chip.todo { border-style: dashed; }
.sum-group .sec-title { margin-top: 18px; }
.sum-item { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: var(--surface); }
.sum-item.s-fail { border-color: color-mix(in srgb, var(--fail) 35%, var(--line)); }
.sum-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sum-title { font-weight: 600; font-size: 13.5px; }
.sum-head .tag { margin-left: auto; }
.sum-reason { font-size: 13px; }
.sum-suggest { font-size: 13px; color: var(--muted); }
.sum-suggest b { color: var(--text); font-weight: 600; }
#summaryPassList { padding-top: 4px; }
.fixed-note { margin-top: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--pass-bg); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 760px) {
  .occ-main, .cover-main { grid-template-columns: minmax(0, 1fr); }
  .crop-card { width: calc(50% - 8px); }
  .occ-run { margin-left: 0; }
}
@media (max-width: 560px) {
  .zone-preview { grid-template-columns: minmax(0, 1fr); }
}