/* 显微镜的使用特有样式（通用样式见 ../shared/base.css） */

#scope { position: absolute; inset: 0; touch-action: none; }
#scope.grab { cursor: grab; }
#scope.grabbing { cursor: grabbing; }
#scope.point { cursor: pointer; }
[hidden] { display: none !important; }

/* 圆形视野：外圈是目镜镜筒的黑边 */
#fov { position: absolute; z-index: 2; border-radius: 50%; overflow: hidden; background: #000; touch-action: none; cursor: grab;
  box-shadow: 0 0 0 7px #0b0f18, 0 0 0 8px var(--line), 0 12px 40px rgba(0,0,0,.6); }
#fov.grabbing { cursor: grabbing; }
#field { position: absolute; }
#fieldOver { position: absolute; left: 0; top: 0; pointer-events: none; }

.ok { color: #7ee081; }
.bad { color: #ff7a59; }

.readout .big { font-size: 18px; }
.readout .tip { font-size: 12px; color: var(--accent); margin-top: 4px; min-height: 36px; }
.readout dd { font-variant-numeric: tabular-nums; }

#panel h2 .muted { font-weight: normal; margin-left: 6px; }
#panel .row { grid-template-columns: 76px 1fr; margin: 8px 0; }
.seg.wide { display: flex; width: 100%; }
.seg.wide button { flex: 1; font-size: 13px; padding: 5px 0; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.pair { display: flex; gap: 6px; }
.pair button { flex: 1; touch-action: none; user-select: none; -webkit-user-select: none; }

/* 操作步骤：已完成打勾，当前步骤展开说明 */
.steps { margin: 0; padding-left: 22px; font-size: 13px; }
.steps li { margin: 4px 0; color: var(--muted); }
.steps li span { display: none; }
.steps li.cur { color: var(--text); }
.steps li.cur b { color: var(--accent); }
.steps li.cur span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.6; }
.steps li.done { color: #7ee081; }
.steps li.done b::after { content: ' ✓'; }

/* 移动装片的方向键 */
.movebox { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.movebox .note { margin: 0; flex: 1; }
.pad { display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 30px); gap: 3px; flex: none; }
.pad button { padding: 0; font-size: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad .up { grid-column: 2; grid-row: 1; }
.pad .lf { grid-column: 1; grid-row: 2; }
.pad .mid { grid-column: 2; grid-row: 2; font-size: 11px; color: var(--muted); display: grid; place-items: center; }
.pad .rt { grid-column: 3; grid-row: 2; }
.pad .dn { grid-column: 2; grid-row: 3; }

.ans { margin-top: 10px !important; }
.part { margin-top: 10px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.part b { color: var(--accent); font-size: 13px; }
.part .note { margin-top: 2px; }