body { font-family: system-ui, sans-serif; margin: 0; background: #111; color: #eee; }
header { padding: 12px 16px; background: #1b1b1b; }
header h1 { margin: 0; font-size: 1.3em; }
.sub { margin: 4px 0 0; color: #aaa; font-size: 0.9em; }
main { max-width: 900px; margin: 0 auto; padding: 12px; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px; }
.controls label { display: flex; flex-direction: column; font-size: 0.85em; gap: 4px; }
.controls label.check { flex-direction: row; align-items: center; gap: 6px; }
select, button { font-size: 1em; padding: 6px; }
button { cursor: pointer; }
.viewerWrap { background: #000; }
#gl { width: 100%; height: 520px; display: block; }
#sliceImg { width: 100%; max-height: 520px; object-fit: contain; display: block; background: #000; }
.planeBar { display: flex; gap: 6px; padding: 8px; }
.planeBtn { background: #222; color: #eee; border: 1px solid #444; padding: 6px 10px; }
.planeBtn.on { background: #0a5; border-color: #0a5; }
.sliceBar { display: flex; gap: 8px; align-items: center; padding: 8px; }
.sliceBar input { flex: 1; }
.meta { margin-top: 10px; }
#caseData dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 0.9em; }
#caseData dt { color: #aaa; }
#caseData dd { margin: 0; }
.report { white-space: pre-wrap; font-size: 0.85em; background: #1b1b1b; padding: 8px; }
.note { color: #888; font-size: 0.85em; }
.tip { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 50%; background: #0a5; color: #fff; font-size: 12px; cursor: pointer; }
#tipPop { position: absolute; max-width: 240px; background: #fff; color: #111;
  padding: 8px 10px; border-radius: 6px; font-size: 0.85em; z-index: 10; }