/* ============ LOTO 数字孪生 + VLM ============ */
#page-loto .lt-grid { align-items: start; }

/* 零能量状态 */
#page-loto .lt-zero {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: 9px;
}
#page-loto .lt-zero.ok { background: var(--green-tint); color: var(--green); }
#page-loto .lt-zero.bad { background: var(--red-tint); color: var(--red); }

/* 工单信息 */
#page-loto .lt-wo { background: var(--bg); border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; }
#page-loto .lt-wo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#page-loto .lt-wo-k { display: block; font-size: 10px; color: var(--ink-4); font-weight: 600; letter-spacing: .5px; margin-bottom: 2px; }
#page-loto .lt-wo-v { font-size: 12px; font-weight: 700; color: var(--ink); }

/* 孪生画布 */
#page-loto .lt-canvas {
  position: relative; height: 430px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}
#page-loto .lt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#page-loto .lt-bg-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(248,249,251,.10) 0%, rgba(248,249,251,.05) 45%, rgba(248,249,251,.34) 100%);
}
#page-loto .lt-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 118px; padding: 8px 9px 9px; text-align: center;
  background: rgba(255,255,255,.96); border: 1.6px solid var(--line);
  border-radius: 11px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
#page-loto .lt-node:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: var(--shadow); z-index: 5; }
#page-loto .lt-node.st-locked { border-color: var(--green); }
#page-loto .lt-node.st-unlocked { border-color: var(--red); }
#page-loto .lt-node.st-pending { border-color: var(--amber); }
#page-loto .lt-node-dot {
  width: 27px; height: 27px; margin: 0 auto 5px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
#page-loto .st-locked .lt-node-dot { background: var(--green); }
#page-loto .st-unlocked .lt-node-dot { background: var(--red); }
#page-loto .st-pending .lt-node-dot { background: var(--amber); }
#page-loto .lt-node-name { font-size: 11px; font-weight: 800; color: var(--ink); line-height: 1.3; }
#page-loto .lt-node-energy { font-size: 9.5px; color: var(--ink-3); margin-top: 2px; }
#page-loto .lt-node-st { font-size: 9.5px; color: var(--ink-4); margin-top: 3px; font-family: var(--font-num); }
#page-loto .lt-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
#page-loto .lt-lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }

/* 六步清单 */
#page-loto .lt-checklist { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
#page-loto .lt-step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-4);
  background: var(--bg); padding: 5px 10px; border-radius: 14px;
}
#page-loto .lt-step.done { color: var(--green); background: var(--green-tint); }
#page-loto .lt-step-dot {
  width: 17px; height: 17px; border-radius: 50%; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.4px solid var(--line); color: var(--ink-4); font-weight: 800;
}
#page-loto .lt-step.done .lt-step-dot { background: var(--green); border-color: var(--green); color: #fff; }
#page-loto .lt-step-line { width: 12px; height: 1.6px; background: var(--line); }

/* ============ VLM 区 ============ */
#page-loto .vlm-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
#page-loto .vlm-scene {
  border: 1.8px solid var(--line); border-radius: 11px; overflow: hidden; cursor: pointer;
  background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s;
}
#page-loto .vlm-scene:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
#page-loto .vlm-scene.active { border-color: var(--red); box-shadow: 0 0 0 3px rgba(204,0,0,.1); }
#page-loto .vlm-scene-thumb { height: 84px; overflow: hidden; border-bottom: 1px solid var(--line-2); }
#page-loto .vlm-scene-thumb svg, #page-loto .vlm-scene-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
#page-loto .vlm-scene-name { font-size: 11.5px; font-weight: 700; padding: 7px 9px 2px; }
#page-loto .vlm-scene-meta { display: flex; align-items: center; gap: 6px; padding: 0 9px 8px; font-size: 10px; }

#page-loto .vlm-stage {
  position: relative; aspect-ratio: 1024 / 680; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #EEF0F3;
}
#page-loto .vlm-overlay { position: absolute; inset: 0; pointer-events: none; }
#page-loto .vlm-idle {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--ink-4); font-size: 12.5px;
}
#page-loto .vlm-idle-icon { font-size: 30px; opacity: .55; }

#page-loto .vlm-box { position: absolute; border-radius: 6px; }
#page-loto .vlm-box.viol { border: 2.5px solid var(--red); box-shadow: 0 0 0 2000px rgba(204,0,0,0); background: rgba(204,0,0,.06); }
#page-loto .vlm-box.ok { border: 2.5px solid var(--green); background: rgba(11,138,92,.07); }
#page-loto .vlm-box-label {
  position: absolute; top: -22px; left: -2.5px; white-space: nowrap;
  font-size: 10px; font-weight: 700; color: #fff; padding: 2.5px 8px; border-radius: 5px 5px 5px 0;
}
#page-loto .vlm-box.viol .vlm-box-label { background: var(--red); }
#page-loto .vlm-box.ok .vlm-box-label { background: var(--green); }

/* 结果面板 */
#page-loto .vlm-result { margin-top: 14px; }
#page-loto .vlm-result-empty {
  border: 1.5px dashed var(--line); border-radius: 11px; padding: 26px;
  text-align: center; color: var(--ink-4); font-size: 12px;
}
#page-loto .vlr-head { display: flex; gap: 14px; align-items: stretch; }
#page-loto .vlr-score {
  width: 86px; flex-shrink: 0; border-radius: 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px;
}
#page-loto .vlr-score.bad { background: var(--red-tint); color: var(--red); }
#page-loto .vlr-score.good { background: var(--green-tint); color: var(--green); }
#page-loto .vlr-score-num { font-size: 30px; font-weight: 800; line-height: 1; }
#page-loto .vlr-score-k { font-size: 10px; font-weight: 700; margin-top: 4px; opacity: .8; }
#page-loto .vlr-head-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-loto .vlr-place { font-size: 11px; color: var(--ink-3); font-weight: 600; }
#page-loto .vlr-summary { font-size: 12.5px; line-height: 1.8; color: var(--ink-2); margin-top: 7px; }
#page-loto .vlr-engine { margin-top: 6px; }
#page-loto .vlr-sec { font-size: 12px; font-weight: 800; margin: 15px 0 7px; display: flex; align-items: baseline; gap: 6px; }
#page-loto .vlr-list { display: flex; flex-direction: column; gap: 6px; }
#page-loto .vlr-item {
  display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55;
  padding: 8px 12px; border-radius: 9px;
}
#page-loto .vlr-item.viol { background: var(--red-soft); border: 1px solid #F2D9D9; }
#page-loto .vlr-item.ok { background: var(--green-tint); border: 1px solid #CDE9DC; color: #14563C; }
#page-loto .vlr-okdot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 2px;
}
#page-loto .vlr-advice-item {
  display: flex; gap: 8px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  padding: 6px 2px;
}
#page-loto .vlr-advice-item span { color: var(--red); font-weight: 800; }

@media (max-width: 1100px) {
  #page-loto .lt-grid { grid-template-columns: 1fr !important; }
}