/* ============================
   阳宅风水 3D 工具 — 样式
   ============================ */
:root {
  --bg-primary: #0a0a1a;
  --bg-panel: #111128;
  --bg-card: #1a1a3a;
  --bg-hover: #252550;
  --text-primary: #e8e8f0;
  --text-secondary: #8888aa;
  --text-muted: #555577;
  --accent-gold: #d4a853;
  --accent-jade: #4ecdc4;
  --accent-red: #ef4444;
  --accent-green: #22c55e;
  --border: #2a2a4a;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

/* === Layout === */
.app-layout {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  grid-template-rows: auto 1fr;
  height: 100vh;
  gap: 0;
}

/* === Header === */
.app-header {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #111128 0%, #1a1040 100%);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.app-header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.app-header h1 {
  font-family: 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-gold), #f0c060);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
}

.app-header .subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 300;
}

.header-badge {
  margin-left: auto;
  padding: 4px 12px;
  background: var(--accent-jade);
  color: #0a0a1a;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

/* W3: 30 秒首屏引导 — 嵌在 header 内的全宽轻量条，非 modal / 非营销页 */
.onboarding-guide {
  width: 100%;
  margin-top: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  background: transparent;
}

.onboarding-guide[hidden] {
  display: none !important;
}

.onboarding-guide-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.onboarding-guide-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-gold);
}

.onboarding-guide-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.onboarding-guide-steps li {
  margin: 0;
}

.onboarding-guide-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-onboarding-start,
.btn-onboarding-dismiss,
.btn-onboarding-replay {
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
}

.btn-onboarding-start {
  background: linear-gradient(135deg, var(--accent-gold), #c08830);
  border-color: transparent;
  color: #0a0a1a;
  font-weight: 700;
}

.btn-onboarding-start:hover,
.btn-onboarding-dismiss:hover,
.btn-onboarding-replay:hover {
  border-color: var(--accent-jade);
  color: var(--text-primary);
}

.btn-onboarding-start:hover {
  color: #0a0a1a;
}

.onboarding-replay-wrap {
  margin-top: 10px;
}

.btn-onboarding-replay {
  width: 100%;
}

/* === Left Panel (Controls) === */
.panel-left {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
}

/* E1: panel-section 既可能是 <details>（可折叠）也可能是普通 <div>（如重新评估按钮容器） */
.panel-section {
  margin-bottom: 20px;
}

/* 不折叠的 action section（重新评估按钮），保持与 .panel-section 一致的间距 */
.panel-section-actions {
  margin-bottom: 20px;
}

/* Collapsible section title (acts as <summary>) — preserves the visual role
   of the previous <h3> heading while gaining native toggle behavior. */
.panel-section-title {
  list-style: none;
  cursor: pointer;
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: var(--accent-gold);
  margin-bottom: 12px;
  padding-bottom: 6px;
  padding-right: 20px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 1px;
  position: relative;
  user-select: none;
  transition: color 0.2s;
  display: block;
}

/* Hide the default disclosure triangle (we draw our own chevron below) */
.panel-section-title::-webkit-details-marker { display: none; }
.panel-section-title::marker { content: ''; }

/* Chevron — rotates based on <details open> state */
.panel-section-title::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--text-secondary);
  font-size: 11px;
  transition: transform 0.2s;
  display: inline-block;
}

details.panel-section:not([open]) > .panel-section-title::after {
  transform: rotate(-90deg);
}

/* When closed, drop the bottom border so the title reads as a flat collapsed row */
details.panel-section:not([open]) > .panel-section-title {
  margin-bottom: 0;
  border-bottom-color: transparent;
}

.panel-section-title:hover { color: #f0c060; }

/* Body wrapper inside <details> — provides spacing between title and content */
.panel-section-body > .control-group:first-child,
.panel-section-body > .star-table-section:first-child,
.panel-section-body > .coverage-list:first-child,
.panel-section-body > .case-list:first-child {
  margin-top: 0;
}

.control-group {
  margin-bottom: 14px;
}

.control-group label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  font-weight: 600;
}

.control-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.control-select:hover { border-color: var(--accent-gold); }
.control-select:focus { outline: none; border-color: var(--accent-jade); box-shadow: 0 0 0 2px rgba(78,205,196,0.2); }

.control-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* W1: 2D 九宫拖拽输入 — 轻量 CSS grid，无 Canvas / 无外部依赖 */
.plan-editor-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.plan-editor-2d {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-role-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.plan-role-pick {
  padding: 6px 4px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.plan-role-pick:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.plan-role-pick-active {
  border-color: var(--accent-jade);
  color: var(--accent-jade);
  box-shadow: 0 0 0 1px rgba(78, 205, 196, 0.25);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(52px, auto));
  grid-template-areas:
    "NW N NE"
    "W C E"
    "SW S SE";
  gap: 4px;
  user-select: none;
}

.plan-cell {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 4px;
  background: rgba(20, 24, 40, 0.72);
  border: 1px solid rgba(110, 130, 160, 0.28);
  border-radius: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.plan-cell[data-droppable="true"]:hover {
  border-color: rgba(110, 130, 160, 0.5);
  background-color: rgba(30, 35, 60, 0.75);
}

.plan-editor-2d[data-has-selected-role="true"] .plan-cell[data-droppable="true"]:hover {
  border-color: var(--accent-gold);
  background-color: rgba(212, 168, 83, 0.15);
  cursor: pointer;
}

.plan-cell-center {
  background: rgba(40, 36, 28, 0.55);
  border-style: dashed;
  opacity: 0.85;
  transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.plan-cell-center:hover {
  background-color: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  cursor: not-allowed;
}

.plan-cell-dragover {
  border-color: var(--accent-jade);
  box-shadow: inset 0 0 0 1px rgba(78, 205, 196, 0.35);
}

.plan-cell-dragover-forbidden {
  border-color: var(--accent-red) !important;
  background-color: rgba(239, 68, 68, 0.18) !important;
  box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, 0.45) !important;
}

.plan-cell-label {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 9px;
  color: var(--text-muted);
  pointer-events: none;
}

.plan-marker {
  z-index: 1;
  min-width: 28px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: grab;
  color: #0a0a1a;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.plan-marker:active {
  cursor: grabbing;
}

.plan-marker-door {
  background: #00ff88;
}

.plan-marker-master {
  background: #4488ff;
}

.plan-marker-kitchen {
  background: #ff8844;
}

.plan-marker-selected,
.plan-marker:focus-visible {
  transform: scale(1.12);
  outline: none;
  box-shadow: 0 0 12px var(--glow-color, rgba(255, 255, 255, 0.65)), inset 0 0 0 1.5px #fff;
  border-color: #fff;
  z-index: 10;
}

.plan-marker-door.plan-marker-selected {
  --glow-color: rgba(0, 255, 136, 0.85);
}

.plan-marker-master.plan-marker-selected {
  --glow-color: rgba(68, 136, 255, 0.85);
}

.plan-marker-kitchen.plan-marker-selected {
  --glow-color: rgba(255, 136, 68, 0.85);
}

.plan-marker-dragging {
  opacity: 0.55;
}

/* W5: 当前布局摘要 — 紧邻九宫格下方，只读预览 */
.plan-editor-summary {
  margin-top: 10px;
  padding: 10px 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(17, 17, 40, 0.55);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.plan-summary-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold);
}

.plan-summary-roles {
  margin: 0 0 6px;
  padding-left: 16px;
}

.plan-summary-role {
  margin: 0 0 2px;
}

.plan-summary-house,
.plan-summary-score {
  margin: 0 0 4px;
  color: var(--text-primary);
}

.plan-summary-risk-ok {
  margin: 4px 0 0;
  color: var(--accent-jade);
}

/* Y1: Blueprint-style 户型编辑工作台（实验） */
.floorplan-workbench {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.floorplan-workbench-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.floorplan-workbench-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.floorplan-workbench-pick {
  padding: 6px 4px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.floorplan-workbench-pick:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.floorplan-workbench-pick-active {
  border-color: var(--accent-jade);
  color: var(--accent-jade);
  box-shadow: 0 0 0 1px rgba(78, 205, 196, 0.25);
}

.floorplan-workbench-svg-wrap {
  width: 100%;
  border: 1px solid rgba(110, 130, 160, 0.28);
  border-radius: 8px;
  background: rgba(12, 16, 28, 0.85);
  overflow: hidden;
}

.floorplan-workbench-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 280px;
}

.fw-room-rect {
  fill: rgba(30, 38, 58, 0.72);
  stroke: rgba(110, 130, 160, 0.35);
  stroke-width: 0.04;
}

.fw-room-center .fw-room-rect,
.fw-room-forbidden {
  fill: rgba(60, 28, 36, 0.55);
  stroke: rgba(220, 90, 90, 0.45);
}

.fw-room-dragover {
  fill: rgba(212, 168, 83, 0.22) !important;
  stroke: rgba(240, 192, 96, 0.8) !important;
}

.fw-room-label {
  fill: rgba(160, 175, 200, 0.85);
  font-size: 0.42px;
  font-family: inherit;
  pointer-events: none;
}

.fw-wall-exterior {
  stroke: rgba(180, 200, 230, 0.85);
  stroke-width: 0.12;
  stroke-linecap: square;
}

.fw-wall-interior {
  stroke: rgba(110, 140, 170, 0.55);
  stroke-width: 0.07;
  stroke-linecap: square;
}

.fw-opening {
  fill: rgba(78, 205, 196, 0.85);
  stroke: rgba(20, 40, 40, 0.6);
  stroke-width: 0.04;
  pointer-events: none;
}

.fw-marker-text {
  fill: #111827;
  font-size: 0.38px;
  font-weight: 700;
  font-family: inherit;
}

.floorplan-workbench-meta {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Y2: 本地户型图底图控件 */
.floorplan-workbench-underlay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(110, 130, 160, 0.28);
  border-radius: 8px;
  background: rgba(14, 18, 32, 0.65);
}

.fw-underlay-file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}

.fw-underlay-file {
  max-width: 100%;
  font-size: 11px;
  color: var(--text-primary);
}

.fw-underlay-filename {
  font-size: 10px;
  color: var(--text-muted);
  word-break: break-all;
}

.fw-underlay-ranges {
  display: grid;
  gap: 6px;
}

.fw-underlay-range {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  color: var(--text-muted);
}

.fw-underlay-range input[type="range"] {
  width: 100%;
}

.fw-underlay-actions {
  display: flex;
  gap: 6px;
}

.fw-underlay-btn {
  flex: 1;
  padding: 5px 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.fw-underlay-btn:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.fw-underlay-btn-clear {
  color: #e07a5f;
}

.fw-underlay-demo {
  border-color: rgba(78, 205, 196, 0.45);
}

.fw-underlay-demo-active {
  border-color: #4ecdc4;
  color: #4ecdc4;
}

.fw-underlay-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

.fw-underlay-image {
  pointer-events: none;
}

/* Y3: 手动描墙参考层 */
.floorplan-workbench-trace {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(110, 130, 160, 0.28);
  border-radius: 8px;
  background: rgba(14, 18, 32, 0.65);
}

.fw-trace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fw-trace-btn {
  flex: 1;
  min-width: 4.5em;
  padding: 5px 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.fw-trace-btn:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.fw-trace-mode-active {
  border-color: #4ecdc4;
  color: #4ecdc4;
}

.fw-trace-btn-clear {
  color: #e07a5f;
}

.fw-trace-delete:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fw-trace-meta {
  margin: 0;
  font-size: 10px;
  color: var(--text-muted);
}

.fw-trace-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

.fw-trace-snap {
  fill: rgba(78, 205, 196, 0.55);
  stroke: rgba(78, 205, 196, 0.9);
  stroke-width: 0.04;
  pointer-events: none;
}

.fw-trace-segment {
  stroke: #4ecdc4;
  stroke-width: 0.18;
  stroke-linecap: round;
  fill: none;
  opacity: 0.85;
}

.fw-trace-segment-selected {
  stroke: #f0c060;
  stroke-width: 0.32;
  opacity: 1;
}

.fw-trace-endpoint-selected {
  fill: #f0c060;
  stroke: #e07a5f;
  stroke-width: 0.05;
}

.fw-trace-pending {
  fill: #f0c060;
  stroke: #f0c060;
  stroke-width: 0.04;
  opacity: 0.9;
}

.floorplan-workbench-svg.fw-svg-tracing {
  cursor: crosshair;
}

/* Y4: 描墙草稿预览 */
.floorplan-workbench-draft {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(110, 130, 160, 0.28);
  border-radius: 8px;
  background: rgba(14, 18, 32, 0.65);
}

.fw-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fw-draft-btn {
  flex: 1;
  min-width: 5em;
  padding: 5px 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.fw-draft-btn:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.fw-draft-generate {
  border-color: rgba(240, 192, 96, 0.55);
}

.fw-draft-btn-clear {
  color: #e07a5f;
}

.fw-draft-meta {
  margin: 0;
  font-size: 10px;
  color: var(--text-muted);
}

.fw-draft-hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: #f0c060;
}

.fw-draft-quality {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(110, 130, 160, 0.22);
  border-radius: 6px;
  background: rgba(10, 14, 28, 0.45);
}

.fw-draft-quality-title {
  margin: 0;
  font-size: 10px;
  color: var(--text-secondary);
}

.fw-draft-quality-status {
  margin: 0;
  font-size: 11px;
  color: var(--text-primary);
}

.fw-draft-quality-status[data-status="empty"] {
  color: var(--text-muted);
}

.fw-draft-quality-status[data-status="draft"] {
  color: #f0c060;
}

.fw-draft-quality-status[data-status="needs_review"] {
  color: #e07a5f;
}

.fw-draft-quality-status[data-status="usable_preview"] {
  color: #4ecdc4;
}

.fw-draft-quality-list {
  margin: 0;
  padding-left: 16px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-muted);
}

.fw-draft-quality-item {
  margin: 0 0 2px;
}

.fw-draft-quality-warn {
  color: #e07a5f;
}

.fw-draft-quality-ok {
  color: #4ecdc4;
}

.fw-draft-quality-info {
  color: var(--text-muted);
}

.fw-draft-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

.fw-draft-wall {
  stroke: #f0c060;
  stroke-width: 0.28;
  stroke-linecap: round;
  stroke-dasharray: 0.35 0.18;
  fill: none;
  opacity: 0.95;
}

.fw-draft-open-end {
  fill: #e07a5f;
  stroke: #f0c060;
  stroke-width: 0.05;
}

.fw-draft-pending {
  fill: none;
  stroke: #f0c060;
  stroke-width: 0.08;
  stroke-dasharray: 0.12 0.08;
}

#trace-draft-3d-toggle-label[hidden] {
  display: none !important;
}

.plan-summary-risks {
  margin: 4px 0 0;
  padding-left: 16px;
  color: #ef4444;
}

.plan-summary-risk-item {
  margin: 0 0 2px;
}

.plan-summary-empty {
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .onboarding-guide {
    padding: 8px 12px;
  }
  .onboarding-guide-inner {
    gap: 8px;
  }
  .onboarding-guide-title {
    font-size: 13px;
  }
  .onboarding-guide-steps {
    font-size: 11px;
  }
  .btn-onboarding-start,
  .btn-onboarding-dismiss {
    padding: 6px 10px;
    font-size: 11px;
  }
  .plan-grid {
    grid-template-rows: repeat(3, minmax(44px, auto));
  }
  .plan-cell {
    min-height: 44px;
  }
  .plan-marker {
    min-width: 24px;
    padding: 3px 6px;
    font-size: 11px;
  }
  .plan-editor-summary {
    font-size: 11px;
    padding: 8px;
  }
  .plan-summary-title {
    font-size: 11px;
  }
}

/* 文本/数字输入控件，与 .control-select 视觉一致 */
.control-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}
.control-input::placeholder { color: var(--text-muted); }
.control-input:hover { border-color: var(--accent-gold); }
.control-input:focus { outline: none; border-color: var(--accent-jade); box-shadow: 0 0 0 2px rgba(78,205,196,0.2); }

.btn-evaluate {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent-gold), #c08830);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Noto Serif SC', serif;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.3s;
  box-shadow: 0 2px 12px rgba(212,168,83,0.3);
}

.btn-evaluate:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(212,168,83,0.5);
}

/* A6 + T4: 视角控制按钮 — 复用现有 token，与 .control-select / .btn-evaluate 同区 */
.view-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.btn-view {
  flex: 1;
  padding: 8px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-view-demo {
  border-color: rgba(78, 205, 196, 0.45);
  color: var(--accent-jade);
}

.btn-view:hover {
  border-color: var(--accent-jade);
  color: var(--accent-jade);
  background: var(--bg-hover);
}

.btn-view:focus {
  outline: none;
  border-color: var(--accent-jade);
  box-shadow: 0 0 0 2px rgba(78,205,196,0.2);
}

/* P3: 家具层 toggle — 紧凑 checkbox + label，与视角按钮同区 */
.furniture-toggle-wrap {
  margin-top: 8px;
}

.furniture-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  user-select: none;
}

.furniture-toggle:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.furniture-toggle input[type="checkbox"] {
  accent-color: var(--accent-jade);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.furniture-toggle-text {
  flex: 1;
}

/* T1: 评估洞察列表 — 视角控制区内，点击聚焦 3D */
.insight-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}

.insight-list-empty {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 6px 8px;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.insight-item:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.insight-sev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  background: #f59e0b;
}

.insight-sev-good .insight-sev-dot { background: #4ecdc4; }
.insight-sev-warning .insight-sev-dot { background: #f59e0b; }
.insight-sev-high .insight-sev-dot { background: #ef4444; }
.insight-sev-fuyuan .insight-sev-dot { background: #a78bfa; }

.insight-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.insight-item-label {
  color: var(--text-primary);
  word-break: break-word;
}

.insight-item-meta {
  font-size: 10px;
  opacity: 0.75;
}

.insight-item-active {
  border-color: var(--accent-jade);
  background: rgba(78, 205, 196, 0.12);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px rgba(78, 205, 196, 0.35);
}

/* T2: 洞察讲解播放控件 */
.insight-playback-controls {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.insight-playback-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.btn-insight-play,
.btn-insight-nav {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-insight-play {
  background: rgba(78, 205, 196, 0.12);
  border-color: var(--accent-jade);
  color: var(--accent-jade);
  font-weight: 600;
}

.btn-insight-play:hover:not(:disabled),
.btn-insight-nav:hover:not(:disabled) {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

.btn-insight-play:disabled,
.btn-insight-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.insight-playback-step {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.insight-narration {
  margin: 8px 0 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  min-height: 2.6em;
}

.viewport-legend-dot-insight {
  background: linear-gradient(135deg, #ef4444 0%, #4ecdc4 100%);
}

.viewport-legend-dot-space {
  background: linear-gradient(135deg, #c4a574 0%, #5c4a3a 100%);
}

.viewport-legend-dot-shell {
  background: linear-gradient(135deg, #8888aa 0%, #4ecdc4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* K1 + P1: 演示预设按钮 grid — 2 列布局，与 .view-controls 视觉同级。
   P1 增强：每张卡片含标题、演示重点、人宅匹配标签、active 高亮状态。 */
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.btn-preset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
  text-align: left;
  line-height: 1.3;
}

.btn-preset:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.btn-preset:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(212,168,83,0.2);
}

/* P1: active 预设状态 — 金框 + 微光，让演示者知道当前在哪个预设上 */
.btn-preset-active {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(212,168,83,0.08);
  box-shadow: 0 0 12px rgba(212,168,83,0.15);
}

.btn-preset-active:hover {
  border-color: #f0c060;
  color: #f0c060;
}

/* P1: 预设卡片上的标题行 — 主 label + 小标签（吉/凶）同行 */
.preset-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.preset-card-label {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* P1: 人宅匹配小标签 — 吉（jade）/ 凶（red） */
.preset-card-tag {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  line-height: 1.6;
}

.preset-card-tag-ji {
  background: rgba(78,205,196,0.15);
  color: var(--accent-jade);
  border: 1px solid rgba(78,205,196,0.3);
}

.preset-card-tag-xiong {
  background: rgba(239,68,68,0.15);
  color: var(--accent-red);
  border: 1px solid rgba(239,68,68,0.3);
}

/* P1: 演示重点说明 — 小字号灰色，单行截断 */
.preset-card-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* P2: 分步演示模式 / Guided Demo — 进度条、讲解词、观察点、导航按钮 */
.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-demo:hover:not(:disabled) {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: var(--bg-hover);
}

.btn-demo:focus:not(:disabled) {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(212,168,83,0.2);
}

.btn-demo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-demo-start {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, rgba(78,205,196,0.15), rgba(78,205,196,0.06));
  border-color: rgba(78,205,196,0.35);
  color: var(--accent-jade);
  font-size: 13px;
  font-weight: 600;
}

.btn-demo-start:hover {
  border-color: var(--accent-jade);
  color: var(--accent-jade);
  background: rgba(78,205,196,0.12);
}

.demo-guide-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-guide-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-guide-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
}

.demo-guide-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent-jade);
  border-radius: 2px;
  transition: width 0.35s ease-out;
}

.demo-guide-progress-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.demo-guide-step-label {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-gold);
}

.demo-guide-narration {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 8px 10px;
  background: var(--bg-card);
  border-left: 3px solid var(--accent-jade);
  border-radius: 6px;
}

.demo-guide-observations {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-guide-observe {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 6px 8px;
  background: rgba(17,17,40,0.6);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.demo-guide-observe-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-jade);
  margin-right: 6px;
  padding: 1px 5px;
  background: rgba(78,205,196,0.1);
  border-radius: 4px;
  letter-spacing: 0.4px;
}

.demo-guide-nav {
  display: flex;
  gap: 6px;
}

.btn-demo-nav {
  flex: 1;
  padding: 8px 6px;
  font-size: 11px;
}

.btn-demo-reset {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-muted);
  border-color: var(--border);
  flex-shrink: 0;
}

.btn-demo-reset:hover:not(:disabled) {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

/* === Center (3D Viewport) === */
.panel-center {
  position: relative;
  background: var(--bg-primary);
}

#viewport {
  width: 100%;
  height: 100%;
}

.viewport-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(10,10,26,0.8);
  padding: 4px 14px;
  border-radius: 20px;
  pointer-events: none;
}

/* P1 + V3: 3D 图例 — 轻量 overlay；略提对比，不与暗背景糊在一起。
   不遮盖 canvas、不操作 Three.js，纯 CSS 定位在 viewport 左下角。 */
.viewport-legend {
  position: absolute;
  bottom: 40px;
  left: 12px;
  background: rgba(10, 12, 22, 0.82);
  border: 1px solid rgba(110, 130, 160, 0.28);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  pointer-events: none;
  backdrop-filter: blur(6px);
  max-width: 200px;
}

.viewport-legend-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.viewport-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.viewport-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.viewport-legend-dot-door  { background: #00ff88; }
.viewport-legend-dot-master { background: #4488ff; }
.viewport-legend-dot-kitchen { background: #ff8844; }
.viewport-legend-dot-center { background: #ccaa44; }
/* Q1: marker dot — 白色小方块，区别于家具颜色 */
.viewport-legend-dot-marker { background: #ffffff; width: 6px; height: 6px; }
.viewport-legend-dot-gua { background: transparent; border: 2px solid var(--accent-jade); width: 6px; height: 6px; }

/* Q1: legend 分组标签 — 轻量灰色小标题 */
.viewport-legend-group-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 6px;
  margin-bottom: 2px;
}
.viewport-legend-group-label:first-of-type { margin-top: 0; }

/* === Right Panel (Report) === */
.panel-right {
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
}

.panel-right h2 {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  color: var(--accent-gold);
  margin-bottom: 16px;
  letter-spacing: 1px;
}

/* F1: Right-panel report header bar — 标题 + 导出按钮一行排列 */
.report-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.report-header-bar h2 {
  margin-bottom: 0;
}

.report-export-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* F1: 导出按钮 — 沿用现有 token，与 .btn-view 视觉同区（轻量、不引入新色板） */
.btn-export {
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-export:hover:not(:disabled) {
  border-color: var(--accent-jade);
  color: var(--accent-jade);
  background: var(--bg-hover);
}

.btn-export:focus:not(:disabled) {
  outline: none;
  border-color: var(--accent-jade);
  box-shadow: 0 0 0 2px rgba(78,205,196,0.2);
}

.btn-export:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* I2: 复制配置链接按钮 — 轻量修饰，沿用现有 --accent-jade token 强调"分享"动作。
   不引入新色板，仅边框颜色微调；hover/focus 行为继承 .btn-export。 */
.btn-export-share {
  border-color: var(--accent-jade);
  color: var(--accent-jade);
}

.btn-export-share:hover:not(:disabled) {
  background: var(--accent-jade);
  color: var(--bg-card);
}

/* J1: 非阻塞状态提示容器 — 评估 / 复制 / 下载失败时显示可读消息。
   默认隐藏（display:none），由 .app-status-visible 切换显示。
   不使用 modal / overlay / alert — 完全 inline 在右面板报告区上方。
   沿用现有 token（--accent-red / --accent-jade / --accent-green），不引入新色板。 */
.app-status {
  display: none;
  margin: 0 0 12px 0;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.app-status.app-status-visible {
  display: block;
}

.app-status.app-status-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.app-status.app-status-info {
  background: rgba(78, 205, 196, 0.10);
  border-color: var(--accent-jade);
  color: var(--accent-jade);
}

.app-status.app-status-success {
  background: rgba(34, 197, 94, 0.10);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

/* P1: 报告顶部摘要卡片 — 总分 + 宅卦 + 命卦状态 + 风险计数，一眼可见 */
.report-summary-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.report-summary-card .score-circle {
  width: 62px; height: 62px;
}

.report-summary-meta {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-summary-meta h3 {
  font-size: 15px;
  font-family: 'Noto Serif SC', serif;
  color: var(--text-primary);
}

.report-summary-meta .house-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.report-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.report-summary-tag {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.report-summary-tag-ji {
  background: rgba(78,205,196,0.12);
  color: var(--accent-jade);
  border: 1px solid rgba(78,205,196,0.25);
}

.report-summary-tag-xiong {
  background: rgba(239,68,68,0.12);
  color: var(--accent-red);
  border: 1px solid rgba(239,68,68,0.25);
}

.report-summary-tag-risk {
  background: rgba(239,68,68,0.12);
  color: var(--accent-red);
  border: 1px solid rgba(239,68,68,0.25);
}

.report-summary-tag-muted {
  background: var(--bg-hover);
  color: var(--text-muted);
}

/* Report styles */
.report-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.score-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid;
}

.score-circle .score-num { font-size: 22px; font-weight: 700; line-height: 1; }
.score-circle .score-label { font-size: 11px; margin-top: 2px; font-family: 'Noto Serif SC', serif; }

.grade-great { border-color: var(--accent-green); color: var(--accent-green); background: rgba(34,197,94,0.1); }
.grade-good { border-color: #eab308; color: #eab308; background: rgba(234,179,8,0.1); }
.grade-neutral { border-color: #e07a5f; color: #e07a5f; background: rgba(249,115,22,0.1); }
.grade-bad { border-color: var(--accent-red); color: var(--accent-red); background: rgba(239,68,68,0.1); }

.house-info h3 { font-size: 16px; font-family: 'Noto Serif SC', serif; }
.house-info .house-group { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.report-summary {
  margin-bottom: 16px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

.tag {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 6px;
  text-align: center;
  line-height: 28px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.tag-door { background: rgba(0,255,136,0.15); color: #00ff88; }
.tag-master { background: rgba(68,136,255,0.15); color: #4488ff; }
.tag-kitchen { background: rgba(255,136,68,0.15); color: #ff8844; }

.star-badge {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.report-relations {
  padding: 12px;
  background: var(--bg-card);
  border-radius: 8px;
  margin-bottom: 16px;
}

.report-relations h4 { font-size: 13px; color: var(--accent-jade); margin-bottom: 6px; }
.report-relations p { font-size: 13px; color: var(--text-secondary); }

.report-issues { margin-bottom: 16px; }
.report-issues h4 { font-size: 13px; color: var(--accent-jade); margin-bottom: 10px; }

.issue {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.issue-good { background: rgba(34,197,94,0.08); border-left: 3px solid var(--accent-green); }
.issue-high { background: rgba(239,68,68,0.08); border-left: 3px solid var(--accent-red); }
.issue-medium { background: rgba(249,115,22,0.08); border-left: 3px solid #e07a5f; }

.issue-icon { font-size: 16px; flex-shrink: 0; }
.issue-ref { color: var(--text-muted); font-style: italic; }

.report-suggestions {
  padding: 12px;
  background: rgba(78,205,196,0.06);
  border: 1px solid rgba(78,205,196,0.2);
  border-radius: 8px;
}

.report-suggestions h4 { font-size: 13px; color: var(--accent-jade); margin-bottom: 8px; }
.suggestion { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }

/* E1: Right-panel collapsible subsections (<details>/<summary>) — replaces the
   previous <h4> headings with a <summary> that doubles as the toggle. */
details.report-details {
  margin-bottom: 16px;
}

.report-section-title {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--accent-jade);
  margin-bottom: 10px;
  padding: 6px 18px 6px 0;
  letter-spacing: 0.5px;
  position: relative;
  user-select: none;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: block;
  transition: color 0.2s;
}

.report-section-title::-webkit-details-marker { display: none; }
.report-section-title::marker { content: ''; }

.report-section-title::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  transition: transform 0.2s;
  display: inline-block;
}

details.report-details:not([open]) > .report-section-title::after {
  transform: rotate(-90deg);
}

details.report-details:not([open]) > .report-section-title {
  margin-bottom: 0;
  border-bottom-color: transparent;
}

.report-section-title:hover { color: var(--accent-gold); }

/* Remove top margin on first child of an open section so content sits flush
   beneath the summary border */
details.report-details[open] > .report-summary,
details.report-details[open] > .report-relations,
details.report-details[open] > .report-issues,
details.report-details[open] > .report-suggestions,
details.report-details[open] > .report-fuyuan {
  margin-top: 0;
}

/* E1: When 福元 section is wrapped by <details class="report-fuyuan-wrap">,
   the inner <h4> (output by renderFuyuanSection, frozen) becomes a duplicate
   of the <summary> title. Hide it via CSS to avoid double-title visual. */
.report-fuyuan-wrap > .report-fuyuan > h4 {
  display: none;
}
.report-fuyuan-wrap > .report-fuyuan {
  margin-top: 0;
}

/* 福元人宅 P1 section — C3 增强：命卦 / 宅卦 / 关系 摘要 + 颜色区分 */
.report-fuyuan {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.report-fuyuan h4 { font-size: 13px; color: var(--accent-gold); margin-bottom: 10px; }

/* 匹配状态：jade 边框 + 轻翡翠底色（与 scene3d A4 ring 0x4ecdc4 一致）*/
.report-fuyuan.fuyuan-match {
  border-color: rgba(78,205,196,0.4);
  background: rgba(78,205,196,0.05);
}
/* 不匹配状态：red 边框 + 轻警示底色（与 scene3d A4 ring 0xef4444 一致）*/
.report-fuyuan.fuyuan-mismatch {
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.05);
}

.fuyuan-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fuyuan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.fuyuan-label {
  width: 36px;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.fuyuan-value {
  flex: 1;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
}
.fuyuan-tag {
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.fuyuan-tag-match {
  background: rgba(78,205,196,0.15);
  color: var(--accent-jade);
  border: 1px solid rgba(78,205,196,0.3);
}
.fuyuan-tag-mismatch {
  background: rgba(239,68,68,0.15);
  color: var(--accent-red);
  border: 1px solid rgba(239,68,68,0.3);
}
.fuyuan-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.fuyuan-issues { margin-top: 10px; }
.fuyuan-issues .issue { margin-bottom: 6px; }
.fuyuan-issues .issue:last-child { margin-bottom: 0; }

/* Star Table */
.star-table-section { margin-top: 20px; }
.star-table-section h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: var(--accent-gold);
  margin-bottom: 10px;
}

.star-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.star-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.star-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(42,42,74,0.5);
}

/* Rule Coverage */
.coverage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.coverage-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-card);
  border-radius: 8px;
  border-left: 3px solid var(--border);
  font-size: 13px;
}

.coverage-item.coverage-implemented { border-left-color: var(--accent-green); }
.coverage-item.coverage-planned { border-left-color: #e07a5f; }

.coverage-label {
  flex: 1;
  color: var(--text-primary);
}

.coverage-status {
  font-size: 11px;
  color: var(--text-secondary);
}

.coverage-priority {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-hover);
  letter-spacing: 0.5px;
}

.coverage-item.coverage-p0 .coverage-priority { color: var(--accent-gold); }
.coverage-item.coverage-p1 .coverage-priority { color: var(--text-muted); }

/* B3: 规则覆盖面板 — 状态文案与色调（复用现有 token，不引入新色板） */
.coverage-state {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.coverage-detail {
  font-size: 11px;
  color: var(--text-muted);
}
.coverage-breakdown {
  font-size: 10px;
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--bg-hover);
}
.coverage-tone-good .coverage-state { color: var(--accent-green); }
.coverage-tone-good .coverage-detail { color: var(--accent-green); }
.coverage-tone-risk .coverage-state { color: var(--accent-red); }
.coverage-tone-risk .coverage-detail { color: var(--accent-red); }
.coverage-tone-risk { border-left-color: var(--accent-red); }
.coverage-tone-muted .coverage-state { color: var(--text-muted); }
.coverage-tone-muted .coverage-detail { color: var(--text-muted); }

/* Similar Cases / Cultural Explanation — 玄空案例只读展示 */
.case-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.case-source,
.case-school {
  padding: 2px 8px;
  background: var(--bg-card);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.case-disclaimer {
  font-size: 11px;
  color: var(--accent-jade);
  margin-bottom: 8px;
  padding: 4px 8px;
  background: rgba(78,205,196,0.06);
  border-left: 2px solid var(--accent-jade);
  border-radius: 4px;
  line-height: 1.4;
}

.case-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: 8px;
  overflow: hidden;
}

.case-card-header {
  padding: 0;
}

.case-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  transition: background 0.2s;
}

.case-card-toggle:hover { background: var(--bg-hover); }

.case-card-title {
  flex: 1;
  font-family: 'Noto Serif SC', serif;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-primary);
}

.case-card-id {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Inter', monospace;
  flex-shrink: 0;
}

.case-card-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 12px;
}

.case-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 6px 10px;
  flex-wrap: wrap;
}

.case-tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(212,168,83,0.15);
  color: var(--accent-gold);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.case-disclaimer-inline {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

/* Agent D1 — 推荐案例的 matchReason 标签 */
.case-reason-tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(78,205,196,0.12);
  color: var(--accent-jade);
  border: 1px solid rgba(78,205,196,0.25);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.5;
}

.case-card-body {
  padding: 8px 10px 10px 10px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  line-height: 1.5;
}

.case-card-body[hidden] { display: none; }

.case-field {
  margin-bottom: 8px;
}

.case-field:last-child { margin-bottom: 0; }

.case-field h5 {
  font-size: 10px;
  color: var(--accent-jade);
  margin-bottom: 3px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.case-field p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  word-break: break-word;
}

.case-field-notes p {
  color: var(--text-muted);
  font-style: italic;
}

.case-field-source p {
  color: var(--text-muted);
  font-size: 11px;
}

.case-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  font-size: 11px;
}

.case-fact dt {
  color: var(--text-muted);
  font-weight: 600;
}

.case-fact dd {
  color: var(--text-secondary);
  margin: 0;
  word-break: break-word;
}

.case-toggle {
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  transition: all 0.2s;
}

.case-toggle:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a5a; }

/* Responsive — E1 收拢与优化
 *
 * 断点策略：
 *   - 1024px (tablet / narrow desktop)：保留 3 列 → 1 列切换；修正原布局
 *     grid-template-rows: auto 50vh auto auto 的 row 顺序问题（DOM 顺序为
 *     header / left / center / right，原 50vh 落在 left 上，导致 center 3D
 *     viewport 高度退化为 0）。新顺序 auto auto 50vh auto 让 3D 拿到固定高度。
 *     左右面板 max-height: 40vh 内部滚动，保持可访问。
 *   - 768px (phone portrait)：切换为"页面滚动"模式 — body 可滚动，面板展开
 *     到自然高度，3D viewport 占 55vh。密度微调（padding / font-size 缩小）。
 *   - 480px (极窄)：视角按钮改为 2×2 grid 避免文字溢出；header 子元素换行。
 */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: 1fr;
    /* DOM: header / left / center / right（引导嵌在 header 内，不占独立行） */
    grid-template-rows: auto auto 50vh auto;
  }
  .panel-left, .panel-right {
    max-height: 40vh;
    overflow-y: auto;
  }
  .panel-left { border-right: none; border-bottom: 1px solid var(--border); }
  .panel-right { border-left: none; border-top: 1px solid var(--border); }
  .panel-center { min-height: 320px; }
}

@media (max-width: 768px) {
  /* 页面整体可滚动，避免面板内部小滚动区在手机上手感不佳 */
  body {
    overflow: auto;
    height: auto;
  }
  .app-layout {
    height: auto;
    min-height: 100vh;
    grid-template-rows: auto auto 55vh auto;
  }
  .panel-left, .panel-right {
    max-height: none;
    overflow-y: visible;
    padding: 14px 12px;
  }
  .panel-left, .panel-right {
    border-bottom: 1px solid var(--border);
  }
  .panel-right { border-bottom: none; }

  /* Header 紧凑化，subtitle 在极窄屏会被 480px 断点隐藏 */
  .app-header {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .app-header h1 { font-size: 18px; }
  .app-header .subtitle { font-size: 11px; }
  .header-badge { font-size: 10px; padding: 3px 10px; }

  /* 3D viewport 最小高度兜底，避免极窄机型挤压 */
  .panel-center { min-height: 280px; }

  /* Report header 紧凑化（score + house info） */
  .report-header { gap: 12px; padding: 12px; }
  .score-circle { width: 56px; height: 56px; border-width: 2px; }
  .score-circle .score-num { font-size: 18px; }
  .house-info h3 { font-size: 14px; }

  /* Summary / tag 紧凑化 */
  .summary-item { font-size: 13px; gap: 8px; padding: 6px 10px; }
  .tag { width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
  .star-badge { padding: 2px 8px; font-size: 11px; }

  /* Star-table 行高更紧凑 */
  .star-table th, .star-table td { padding: 4px 6px; }

  /* Case-card padding 微调 */
  .case-card-body { padding: 8px 10px; }
}

@media (max-width: 480px) {
  .app-header { padding: 8px 12px; gap: 8px; }
  .app-header h1 { font-size: 16px; letter-spacing: 1px; }
  .app-header .subtitle { display: none; }

  /* 视角控制按钮：2×2 grid（演示/俯视/侧视/命卦）避免文字换行溢出 */
  .view-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .btn-view {
    flex: initial;
    padding: 8px 4px;
    font-size: 11px;
  }

  /* btn-evaluate 字号略减避免在 320px 宽度溢出 */
  .btn-evaluate { font-size: 14px; padding: 10px; letter-spacing: 1px; }

  /* F1: 报告 header bar 在极窄屏下让按钮换行到标题下方，按钮占满宽度 */
  .report-header-bar { flex-direction: column; align-items: stretch; }
  .report-export-actions { width: 100%; }
  .btn-export { flex: 1; padding: 8px 6px; }

  /* P1: 3D legend 在极窄屏缩小字号、减少 padding */
  .viewport-legend {
    bottom: 32px;
    left: 6px;
    max-width: 170px;
    padding: 6px 10px;
    font-size: 10px;
  }

  /* P1: 报告摘要卡片在极窄屏堆叠 */
  .report-summary-card { gap: 8px; padding: 10px 12px; }
  .report-summary-card .score-circle { width: 48px; height: 48px; }
  .report-summary-card .score-circle .score-num { font-size: 16px; }

  /* P2: 演示导航按钮在极窄屏缩小 */
  .btn-demo-nav { padding: 6px 4px; font-size: 10px; }
  .btn-demo-reset { padding: 6px 8px; font-size: 10px; }
  .demo-guide-step-label { font-size: 13px; }
  .demo-guide-narration { font-size: 11px; }

  /* P3: 家具 toggle 在极窄屏紧凑 */
  .furniture-toggle { padding: 4px 8px; font-size: 11px; }
  .furniture-toggle input[type="checkbox"] { width: 12px; height: 12px; }

  /* Q1: 3D legend 增加 marker 项与分组标签后在极窄屏保持可读 */
  .viewport-legend { max-width: 170px; }
  .viewport-legend-group-label { font-size: 8px; }
}

/* === Z4: BP3D Experimental Mainline Entry === */
.bp3d-exp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.bp3d-exp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #f0c060;
  border: 1px solid rgba(240, 192, 96, 0.35);
  background: rgba(240, 192, 96, 0.08);
}

.bp3d-exp-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.bp3d-exp-status {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.bp3d-exp-status strong {
  color: #4ecdc4;
}

.bp3d-exp-defaults {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.bp3d-exp-defaults code {
  color: #4ecdc4;
  font-size: 12px;
}

.bp3d-exp-link {
  display: inline-block;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #0a0a1a;
  background: #4ecdc4;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(78, 205, 196, 0.5);
}

.bp3d-exp-link:hover {
  filter: brightness(1.06);
  color: #111128;
}

.bp3d-exp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.bp3d-exp-btn {
  display: inline-block;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: #0a0a1a;
  background: #f0c060;
  border-radius: 8px;
  border: 1px solid rgba(240, 192, 96, 0.55);
}

.bp3d-exp-btn:hover {
  filter: brightness(1.05);
}

.bp3d-exp-link-secondary {
  background: transparent;
  color: #4ecdc4;
  border: 1px solid rgba(78, 205, 196, 0.45);
}

.bp3d-exp-link-secondary:hover {
  color: #4ecdc4;
  filter: none;
}

/* === Z15: Mainline Default-Off Embed Dialog === */
.bp3d-mainline-embed-dialog {
  width: min(96vw, 1280px);
  height: min(92vh, 900px);
  max-width: 96vw;
  max-height: 92vh;
  padding: 0;
  border: 1px solid rgba(78, 205, 196, 0.35);
  border-radius: 12px;
  background: #0a0a1a;
  color: var(--text-primary, #e8e8f0);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.bp3d-mainline-embed-dialog::backdrop {
  background: rgba(4, 6, 16, 0.72);
}

.bp3d-mainline-embed-shell {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  grid-template-columns: 1fr min(280px, 32vw);
  height: 100%;
  gap: 0;
  position: relative;
}

.bp3d-mainline-embed-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bp3d-mainline-embed-header h2 {
  margin: 0;
  font-size: 18px;
  grid-column: 1;
}

.bp3d-mainline-embed-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #8888aa);
  grid-column: 1;
}

.bp3d-mainline-embed-close {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: start;
  padding: 8px 14px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

.bp3d-mainline-embed-status {
  grid-column: 1 / -1;
  padding: 8px 16px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bp3d-mainline-embed-status[data-kind="ok"] { color: #4ecdc4; }
.bp3d-mainline-embed-status[data-kind="warn"] { color: #f0c060; }
.bp3d-mainline-embed-status[data-kind="error"] { color: #ef4444; }
.bp3d-mainline-embed-status[data-kind="loading"] { color: #4488ff; }

.bp3d-mainline-close-confirm {
  position: absolute;
  z-index: 20;
  top: 82px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 192, 96, 0.55);
  border-radius: 6px;
  background: rgba(19, 22, 36, 0.97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.bp3d-mainline-close-confirm[hidden] {
  display: none;
}

.bp3d-mainline-close-confirm-msg {
  margin: 0;
  color: #f0c060;
  font-size: 13px;
  line-height: 1.4;
}

.bp3d-mainline-close-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.bp3d-mainline-close-btn {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary, #e8e8f0);
  cursor: pointer;
}

.bp3d-mainline-close-btn:hover,
.bp3d-mainline-close-btn:focus-visible {
  border-color: rgba(78, 205, 196, 0.72);
  outline: none;
}

.bp3d-mainline-close-btn-retry {
  border-color: rgba(78, 205, 196, 0.52);
  color: #4ecdc4;
}

.bp3d-mainline-close-btn-abandon {
  border-color: rgba(239, 68, 68, 0.5);
  color: #f28b8b;
}

.bp3d-mainline-embed-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bp3d-mainline-embed-url-label {
  font-size: 11px;
  color: var(--text-muted, #8888aa);
}

.bp3d-mainline-embed-url {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: ui-monospace, Consolas, monospace;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}

.bp3d-mainline-embed-btn {
  padding: 7px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

.bp3d-mainline-embed-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bp3d-mainline-embed-btn-primary {
  background: #4ecdc4;
  color: #0a0a1a;
  border-color: rgba(78, 205, 196, 0.5);
}

.bp3d-mainline-embed-mobile-fallback {
  grid-column: 1 / -1;
  padding: 20px 16px;
  font-size: 13px;
  line-height: 1.5;
}

.bp3d-mainline-embed-frame-panel {
  grid-column: 1;
  min-height: 0;
  padding: 8px 8px 12px 12px;
}

.bp3d-mainline-embed-frame {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #000;
}

.bp3d-mainline-embed-side {
  grid-column: 2;
  min-height: 0;
  padding: 8px 12px 12px 4px;
  overflow: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.bp3d-mainline-embed-sublabel {
  font-size: 11px;
  color: var(--text-muted, #8888aa);
  margin: 8px 0 4px;
}

.bp3d-mainline-embed-preview,
.bp3d-mainline-embed-warnings {
  margin: 0;
  padding: 8px;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 480px) {
  .bp3d-mainline-embed-dialog {
    width: 96vw;
    height: auto;
    max-height: 90vh;
  }
  .bp3d-mainline-embed-shell {
    grid-template-columns: 1fr;
  }
  .bp3d-mainline-embed-side {
    grid-column: 1;
    border-left: none;
  }
  .bp3d-mainline-close-confirm {
    position: static;
    grid-column: 1;
    margin: 8px;
    align-items: stretch;
    flex-direction: column;
  }
  .bp3d-mainline-close-confirm-actions {
    justify-content: stretch;
  }
  .bp3d-mainline-close-btn {
    flex: 1 1 auto;
  }
}

/* === Z5: Role Snapshot Import Dry Run === */
/* === Z8: Role Snapshot Import UX Polish === */
.bp3d-role-snapshot-import {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(78, 205, 196, 0.2);
}

.bp3d-role-snapshot-import-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4ecdc4;
}

.bp3d-role-snapshot-import-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.bp3d-role-snapshot-label,
.bp3d-role-snapshot-sublabel {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.bp3d-role-snapshot-json {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-primary);
  background: #0a0a1a;
  border: 1px solid rgba(78, 205, 196, 0.25);
  border-radius: 8px;
  resize: vertical;
  min-height: 110px;
}

.bp3d-role-snapshot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.bp3d-role-snapshot-btn {
  padding: 7px 12px;
  font-size: 12px;
  font-family: inherit;
  color: #0a0a1a;
  background: #4ecdc4;
  border: 1px solid rgba(78, 205, 196, 0.5);
  border-radius: 8px;
  cursor: pointer;
}

.bp3d-role-snapshot-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.bp3d-role-snapshot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bp3d-role-snapshot-btn-apply {
  background: #f0c060;
  border-color: rgba(240, 192, 96, 0.5);
}

.bp3d-role-snapshot-btn-sample {
  background: transparent;
  color: #4ecdc4;
  border-color: rgba(78, 205, 196, 0.45);
}

.bp3d-role-snapshot-btn-sample:hover:not(:disabled) {
  background: rgba(78, 205, 196, 0.12);
  filter: none;
}

.bp3d-role-snapshot-confirm {
  margin: 0 0 10px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #0a0a1a;
  background: rgba(240, 192, 96, 0.85);
  border-radius: 6px;
}

.bp3d-role-snapshot-preview-block,
.bp3d-role-snapshot-warnings-block {
  margin-bottom: 8px;
}

.bp3d-role-snapshot-preview,
.bp3d-role-snapshot-warnings {
  margin: 0;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
  background: #111128;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  min-height: 3.2em;
}

.bp3d-role-snapshot-warnings {
  color: #f0c060;
}

.bp3d-role-snapshot-status {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  min-height: 1.2em;
}

/* === U12: North America Experimental Preview Panel === */
.na-exp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.na-exp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.35);
}

.na-exp-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.na-exp-note code {
  font-size: 10px;
  color: #a78bfa;
}

.btn-na-exp-run {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.18);
  color: #e8e8f0;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-na-exp-run:hover {
  background: rgba(167, 139, 250, 0.28);
  border-color: rgba(167, 139, 250, 0.7);
}

.na-exp-export-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.btn-na-exp-export {
  flex: 1;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-na-exp-export:hover:not(:disabled) {
  border-color: #a78bfa;
  color: #e8e8f0;
  background: rgba(167, 139, 250, 0.12);
}

.btn-na-exp-export:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.na-exp-preview-output {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.na-exp-idle {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
}

.na-exp-result-head {
  margin-bottom: 10px;
}

.na-exp-result-title {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
}

.na-exp-result-meta {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.na-exp-sev-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.na-exp-sev {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid var(--border);
}

.na-exp-sev-high {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}

.na-exp-sev-warning {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}

.na-exp-sev-info {
  color: #4ecdc4;
  border-color: rgba(78, 205, 196, 0.35);
  background: rgba(78, 205, 196, 0.1);
}

.na-exp-check {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.na-exp-check-title {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--accent-gold);
}

.na-exp-check-body {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.na-exp-findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.na-exp-finding {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.na-exp-finding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  background: #4ecdc4;
}

.na-exp-finding-high .na-exp-finding-dot { background: #ef4444; }
.na-exp-finding-warning .na-exp-finding-dot { background: #f59e0b; }
.na-exp-finding-info .na-exp-finding-dot { background: #4ecdc4; }

/* U13/U12: needs-footprint = 待确认，禁止红色高危 */
.na-exp-finding-review {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.08);
}

.na-exp-finding-review .na-exp-finding-dot {
  background: #a78bfa;
}

.na-exp-finding-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.25);
}

.na-exp-finding-msg {
  margin: 0;
  font-size: 11px;
  color: var(--text-primary);
}

.na-exp-finding-id {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .btn-na-exp-run { font-size: 12px; padding: 7px 10px; }
  .na-exp-badge { font-size: 9px; }
}