* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: #0d1016;
  color: #e8edf4;
  overflow: hidden;
}

.lab-shell { display: flex; flex-direction: column; height: 100vh; }

.toolbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 16px; background: #141925; border-bottom: 1px solid #232c3d;
}
.toolbar .title { display: flex; flex-direction: column; line-height: 1.3; }
.toolbar .title strong { font-size: 15px; }
.toolbar .title span { font-size: 11px; color: #8b97a8; }

.layout-switch { display: flex; gap: 6px; }
.layout-switch button {
  background: #1d2536; color: #c4cee0; border: 1px solid #2c3850;
  padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.layout-switch button:hover { background: #26314a; }
.layout-switch button.active { background: #3b6ef0; border-color: #3b6ef0; color: #fff; }

.filters { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.filters select {
  background: #1d2536; color: #c4cee0; border: 1px solid #2c3850;
  padding: 6px 8px; border-radius: 7px; font-size: 13px;
}
.filters .ghost {
  background: transparent; color: #8b97a8; border: 1px solid #2c3850;
  padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}

.toolbar.second { gap: 10px; padding: 8px 14px; background: #11151f; align-items: flex-start; }
/* 每组是一块带标签的小药丸，组间清晰、整体不乱 */
.toolbar.second .group {
  display: flex; align-items: center; gap: 7px;
  background: #161c28; border: 1px solid #232c3d; border-radius: 10px; padding: 5px 9px;
}
.toolbar.second .group-label { font-size: 11px; color: #7f8ca0; margin-right: 1px; white-space: nowrap; }
#tileGroup, #shapeGroup { display: none; } /* 上下文组：默认隐藏，由 JS 在对应布局显示 */
.toolbar.second .divider { width: 1px; height: 20px; background: #2c3850; margin: 0 1px; }
.toolbar.second button {
  background: #1d2536; color: #c4cee0; border: 1px solid #2c3850;
  padding: 5px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.toolbar.second button:hover { background: #26314a; }
.toolbar.second button.active { background: #3b6ef0; border-color: #3b6ef0; color: #fff; }
.toolbar.second select {
  background: #1d2536; color: #c4cee0; border: 1px solid #2c3850;
  padding: 5px 7px; border-radius: 7px; font-size: 12.5px; max-width: 110px;
}
.toolbar.second .mini-slider { width: 64px; vertical-align: middle; }
.toolbar.second .check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #c4cee0; cursor: pointer; }
.toolbar.second .shape-text { width: 48px; background: #1d2536; color: #c4cee0; border: 1px solid #2c3850; padding: 5px 7px; border-radius: 7px; font-size: 12.5px; }
.toolbar.second .num-input { width: 92px; background: #1d2536; color: #c4cee0; border: 1px solid #2c3850; padding: 5px 7px; border-radius: 7px; font-size: 12.5px; }
.filebtn {
  background: #1d2536; color: #c4cee0; border: 1px solid #2c3850;
  padding: 5px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.filebtn input { display: none; }
.muted { font-size: 11.5px; color: #6b7686; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 沉浸模式：巡航/平移时隐藏控制栏让画面最大化；鼠标移到屏幕顶端再唤出 */
.lab-shell.immersive .toolbar,
.lab-shell.immersive .hint { display: none; }
.lab-shell.immersive.peek .toolbar { display: flex; }

/* 顶栏一键快捷按钮 */
.quick { display: flex; gap: 6px; margin-left: auto; }
.quick button {
  background: #1d2536; color: #c4cee0; border: 1px solid #2c3850;
  padding: 6px 11px; border-radius: 7px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.quick button:hover { background: #26314a; }
#fullscreenBtn { border-color: #3b6ef0; color: #cdddff; }

.stage { position: relative; flex: 1; min-height: 0; }
/* 背景层在画布之下；deck 画布透明处透出 */
.bg-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0d1016; }
.bg-layer img, .bg-layer video { width: 100%; height: 100%; object-fit: cover; display: block; }
#deck-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: transparent; }

.status {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #141925; border: 1px solid #2c3850; padding: 14px 20px;
  border-radius: 10px; font-size: 14px; color: #c4cee0; z-index: 5;
}
.status.hidden { display: none; }

.legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 10px; max-width: 320px;
  background: rgba(20, 25, 37, 0.82); padding: 8px 12px; border-radius: 9px;
  border: 1px solid #232c3d; font-size: 12px; color: #c4cee0;
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* 悬停前景放大：跟随光标、浮在画面之上 */
.hover-zoom {
  position: absolute; z-index: 7; width: 240px; pointer-events: none;
  background: rgba(17, 21, 28, 0.92); border: 1px solid #2c3850; border-radius: 10px;
  padding: 8px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  transform-origin: top left; transition: opacity 0.12s ease;
}
.hover-zoom.hidden { display: none; }
.hover-zoom img { width: 100%; display: block; border-radius: 6px; background: #0d1016; }
.hover-zoom span#hoverCap { display: block; margin-top: 6px; font-size: 12px; color: #c4cee0; }
.hover-zoom #hoverCap strong { display: block; font-size: 13px; color: #fff; margin-bottom: 4px; }
.hover-zoom #hoverCap .meta-row { display: flex; gap: 6px; line-height: 1.5; }
.hover-zoom #hoverCap .meta-row i { color: #8b97a8; font-style: normal; min-width: 56px; }

/* 点击详情：居中前景大图卡（覆盖画面，非边栏） */
.detail {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 8; width: 340px; max-width: 86%;
  background: #141925; border: 1px solid #2c3850; border-radius: 14px;
  padding: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.detail.hidden { display: none; }
.detail img { width: 100%; border-radius: 10px; display: block; background: #0d1016; max-height: 60vh; object-fit: contain; }
.detail h3 { margin: 10px 0 8px; font-size: 15px; }
.detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; }
.detail dt { color: #8b97a8; }
.detail dd { margin: 0; color: #e8edf4; }
.detail-close {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  border: none; border-radius: 6px; background: #1d2536; color: #c4cee0;
  cursor: pointer; font-size: 16px; line-height: 1;
}

.hint {
  padding: 7px 16px; background: #141925; border-top: 1px solid #232c3d;
  font-size: 11.5px; color: #8b97a8;
}