/*
 * simulation.css — 模拟取证实操组件样式（第四章）
 * 对应 JS：js/simulation.js
 */

.sim-wrap { display: flex; gap: 22px; align-items: flex-start; }
.sim-steps { flex: 1; }

/* ── 步骤列表 ── */
.sim-step { display: flex; gap: 14px; margin-bottom: 10px; opacity: .3; transition: all .3s; }
.sim-step.active { opacity: 1; }
.sim-step.done   { opacity: .65; }

.snum {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: var(--dim);
}
.sim-step.active .snum { border-color: var(--green); color: var(--green); box-shadow: 0 0 8px var(--green); }
.sim-step.done   .snum { background: var(--cyan); border-color: var(--cyan); color: #000; }

.sc h4 { font-size: 14px; color: var(--text); margin-bottom: 3px; }
.sc p  { font-size: 12px; color: var(--dim); line-height: 1.5; }

/* ── 控制台面板 ── */
.sim-panel {
  width: 280px;
  flex-shrink: 0;
  background: #000;
  border: 1px solid var(--border);
  padding: 14px;
}

.sp-t { color: var(--green); font-size: 11px; letter-spacing: 2px; margin-bottom: 11px; text-transform: uppercase; }

/* 操作按钮 */
.sab {
  width: 100%;
  padding: 10px;
  background: rgba(0,255,136,.08);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 7px;
  text-align: left;
  letter-spacing: 1px;
  transition: all .2s;
}
.sab:hover:not(:disabled) { background: rgba(0,255,136,.18); }
.sab:disabled { opacity: .3; cursor: default; }

/* 输出日志 */
.sout {
  background: #050505;
  border: 1px solid #111;
  padding: 11px;
  min-height: 120px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.8;
  margin-top: 7px;
  overflow-y: auto;
  max-height: 200px;
}

/* ── 响应式 ── */
@media (max-width: 768px) {
  .sim-wrap { flex-direction: column; }
  .sim-panel { width: 100%; }
}