/* ============================================================
   AI 视觉安全检测 — inserted into sop-inspection.html
   namespace: .sd-*  (self-contained, no collisions)
   ============================================================ */

.sd-section { padding: clamp(72px, 8vw, 116px) 0; background: #F4F7FB; }
.sd-inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; }
.sd-ind { background: #fff; border: 1px solid #dde6f2; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(20,45,90,.06); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.sd-ind:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(20,45,90,.12); border-color: #c3d3e8; }
.sd-ind-photo { aspect-ratio: 4 / 3; background: #eef2f8; }
.sd-ind-info { padding: 22px 24px 26px; }
.sd-ind-name { font-size: 19px; font-weight: 700; color: #14233d; }
.sd-ind-en { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; color: #64748b; margin-top: 2px; }
.sd-ind-desc { font-size: 14px; line-height: 1.6; color: #4a5d7a; margin-top: 10px; }
@media (max-width: 980px) { .sd-inds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sd-inds { grid-template-columns: 1fr; } }

.sd-ext { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid #dde6f2; padding-top: clamp(32px, 4vw, 48px); }
.sd-ext-head { max-width: 720px; }
.sd-ext-title { font-size: 20px; font-weight: 700; color: #14233d; padding-left: 14px; border-left: 3px solid #1EA097; }
.sd-ext-desc { font-size: 14.5px; line-height: 1.7; color: #4a5d7a; margin: 12px 0 0; padding-left: 14px; }
.sd-ext-bar { display: flex; align-items: stretch; margin-top: 22px; background: #fff; border: 1px solid #dde6f2; border-radius: 14px; box-shadow: 0 6px 18px rgba(20,45,90,.05); overflow: hidden; }
.sd-bar-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 24px; }
.sd-bar-item + .sd-bar-item { border-left: 1px solid #e3eaf4; }
.sd-bar-name { font-size: 15px; font-weight: 600; color: #14233d; }
.sd-thumb-ic { width: 42px; height: 42px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.sd-thumb-ic.ppe { background: #e3f0e6; color: #2bb25f; }
.sd-thumb-ic.duty { background: #e4ecf9; color: #2f6fe0; }
.sd-thumb-ic.zone { background: #f7e9d8; color: #d9834f; }
@media (max-width: 640px) { .sd-ext-bar { flex-direction: column; } .sd-bar-item + .sd-bar-item { border-left: none; border-top: 1px solid #e3eaf4; } .sd-bar-item { justify-content: flex-start; } }

.sd-scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.sd-scene {
  background: #ffffff;
  border: 1px solid #dde6f2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 45, 90, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.sd-scene:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(20, 45, 90, 0.12);
  border-color: rgba(22, 80, 168, 0.28);
}

/* ---- detection screen ---- */
.sd-screen {
  --s-green: #15a35f;
  --s-blue: #2f7fe0;
  --s-orange: #d98307;
  --s-red: #e0473f;
  --s-dim: #6a7d99;
  --screen-panel: #ffffff;
  --screen-border: #dbe5f2;
  background: linear-gradient(160deg, #eef3fb, #e3ebf6);
  padding: 16px;
  position: relative;
  border-bottom: 1px solid #e1e9f4;
}
.sd-screen-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
  z-index: 3;
}
.sd-ldot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--s-green);
  box-shadow: 0 0 8px var(--s-green);
  animation: sd-blink 1.6s ease-in-out infinite;
}
@keyframes sd-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sd-ltext { font-size: 11px; color: var(--s-dim); letter-spacing: 0.5px; font-weight: 600; }

.sd-feed {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #dde5f0, #cbd6e6);
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(90, 120, 160, 0.22);
}
.sd-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(47, 127, 224, 0.14), transparent);
  animation: sd-sc 3.6s linear infinite;
  z-index: 1;
}
@keyframes sd-sc { 0% { transform: translateY(-60px); } 100% { transform: translateY(300px); } }
.sd-ftime {
  position: absolute; top: 8px; left: 10px; color: var(--s-red);
  font-family: "SF Mono", Consolas, monospace; font-size: 10px; z-index: 5;
}

/* recognition boxes */
.sd-box { position: absolute; z-index: 3; border-radius: 3px; }
.sd-box.ok { border: 2px solid var(--s-green); box-shadow: 0 0 11px rgba(21, 163, 95, 0.28); }
.sd-box.warn {
  border: 2px solid var(--s-red); box-shadow: 0 0 12px rgba(224, 71, 63, 0.34);
  animation: sd-warnpulse 1.2s ease-in-out infinite;
}
@keyframes sd-warnpulse {
  0%, 100% { box-shadow: 0 0 10px rgba(224, 71, 63, 0.3); }
  50% { box-shadow: 0 0 20px rgba(224, 71, 63, 0.6); }
}
.sd-box .sd-tag {
  position: absolute; top: -19px; left: -2px; font-size: 10px; font-weight: 700;
  font-family: "SF Mono", Consolas, monospace; padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.sd-box.ok .sd-tag { background: var(--s-green); color: #fff; }
.sd-box.warn .sd-tag { background: var(--s-red); color: #fff; }

/* scene1 · PPE */
.sd-person { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); }
.sd-p-head { width: 42px; height: 42px; border-radius: 50%; background: #c9a88a; margin: 0 auto; position: relative; }
.sd-helmet {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 26px; background: linear-gradient(180deg, #f5b13d, #e89312);
  border-radius: 25px 25px 4px 4px;
}
.sd-helmet::after {
  content: ""; position: absolute; bottom: -3px; left: -4px; right: -4px; height: 5px;
  background: #e89312; border-radius: 3px;
}
.sd-p-body {
  width: 74px; height: 80px; background: linear-gradient(180deg, #3a7fd0, #2f6bc0);
  border-radius: 16px 16px 8px 8px; margin: 6px auto 0; position: relative;
}
.sd-p-body::before {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 50px; background: rgba(255, 255, 255, 0.25);
}

/* scene2 · on/off duty */
.sd-station { position: absolute; border-radius: 6px; }
.sd-desk {
  left: 24%; top: 46%; width: 52%; height: 32%;
  background: rgba(70, 95, 135, 0.18); border: 1px dashed rgba(80, 110, 150, 0.45);
}
.sd-seat-zone {
  position: absolute; left: 38%; top: 30%; width: 24%; height: 30%;
  border: 2px solid var(--s-blue); border-radius: 6px; z-index: 3;
  box-shadow: 0 0 11px rgba(47, 127, 224, 0.28);
}
.sd-seat-zone .sd-tag {
  position: absolute; top: -19px; left: -2px;
  background: var(--s-blue); color: #fff; font-size: 10px; font-weight: 700;
  font-family: "SF Mono", Consolas, monospace; padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.sd-person-sm { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2; }
.sd-ps-head { width: 24px; height: 24px; border-radius: 50%; background: #c9a88a; margin: 0 auto; }
.sd-ps-body { width: 40px; height: 38px; background: #3a7fd0; border-radius: 10px 10px 4px 4px; margin: 3px auto 0; }

/* scene3 · intrusion */
.sd-danger-zone {
  position: absolute; left: 14%; top: 24%; width: 46%; height: 60%;
  border: 2px solid var(--s-orange);
  background: repeating-linear-gradient(45deg, rgba(217, 131, 7, 0.13), rgba(217, 131, 7, 0.13) 8px, transparent 8px, transparent 16px);
  border-radius: 4px; z-index: 2;
}
.sd-zone-label {
  position: absolute; top: 6px; left: 8px; font-size: 10px; font-weight: 700;
  color: var(--s-orange); font-family: "SF Mono", Consolas, monospace;
}
.sd-intruder { position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); z-index: 4; }
.sd-in-head { width: 22px; height: 22px; border-radius: 50%; background: #c9a88a; margin: 0 auto; }
.sd-in-body { width: 36px; height: 34px; background: #cc5555; border-radius: 9px 9px 4px 4px; margin: 3px auto 0; }

/* verdict bar */
.sd-verdict {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; margin-top: 12px;
  background: var(--screen-panel); border: 1px solid var(--screen-border);
  border-radius: 8px; position: relative; z-index: 3;
}
.sd-verdict .sd-v-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sd-verdict.pass { background: #eef8f1; border-color: #cde9d7; }
.sd-verdict.alert { background: #fdeeec; border-color: #f6d2cd; }
.sd-verdict.pass .sd-v-dot { background: var(--s-green); box-shadow: 0 0 7px rgba(21, 163, 95, 0.5); }
.sd-verdict.alert .sd-v-dot { background: var(--s-red); box-shadow: 0 0 7px rgba(224, 71, 63, 0.5); animation: sd-blink 1s infinite; }
.sd-verdict .sd-v-text { font-size: 12.5px; font-weight: 600; }
.sd-verdict.pass .sd-v-text { color: var(--s-green); }
.sd-verdict.alert .sd-v-text { color: var(--s-red); }
.sd-verdict .sd-v-conf {
  margin-left: auto; font-size: 10.5px; color: var(--s-dim);
  font-family: "SF Mono", Consolas, monospace;
}

/* info area */
.sd-scene-info { padding: 22px 24px 26px; }
.sd-scene-name { font-size: 19px; font-weight: 700; margin-bottom: 9px; color: #14233d; }
.sd-scene-desc { font-size: 13.5px; line-height: 1.7; color: #4a5d7a; }

@media (max-width: 1000px) {
  .sd-scenes { grid-template-columns: 1fr; max-width: 420px; margin: 44px auto 0; }
}