/* ============================================
   v36-APP · 启动层 / HUD / 案例按钮 / 操作区
   与 v36-report.css、v36-ext.css 配合使用
   ============================================ */

.v36-demo {
  max-width: 980px;
  margin: 32px auto;
  padding: 28px 32px 40px 32px;
  background: #ffffff;
  border: 1px solid #1a1a1a;
  box-shadow: 6px 6px 0 0 #1a1a1a;
  font-family: var(--mono, "SF Mono", "Consolas", monospace);
  color: #1a1a1a;
  position: relative;
}
.v36-demo[data-v36-stage="off"] { display: none; }
.v36-demo[data-v36-stage="on"]  { display: block; }

.v36-demo-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px 0;
  padding-bottom: 14px;
  border-bottom: 2px solid #1a1a1a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.v36-demo-title-prefix { color: #dc2626; font-size: 20px; }
.v36-demo-title-text { color: #1a1a1a; }
.v36-demo-title-sub {
  flex: 1 1 100%;
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
  letter-spacing: 0;
  font-style: italic;
  line-height: 1.5;
  padding-left: 18px;
}

/* ----- HUD ----- */
.v36-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  margin-bottom: 14px;
  font-size: 11px;
}
.v36-hud-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.v36-hud-label { color: #6b7280; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.v36-hud-value { color: #1a1a1a; font-size: 16px; font-weight: 700; font-family: var(--mono, monospace); }
.v36-hud-hint  { color: #9ca3af; font-size: 9px; }

.v36-hud-phase {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #1a1a1a;
  color: #fafafa;
  font-size: 11px;
}
.v36-hud-phase-label { color: #f59e0b; font-weight: 700; letter-spacing: 1px; }
.v36-hud-phase-name  { color: #fafafa; font-weight: 700; }
.v36-hud-phase-count { color: #9ca3af; font-size: 10px; margin-left: auto; }

.v36-hud-ai-hidden {
  grid-column: 1 / -1;
  padding: 4px 8px;
  background: #f3f4f6;
  border: 1px dashed #9ca3af;
  color: #6b7280;
  font-size: 10px;
  font-style: italic;
  text-align: right;
}
.v36-hud-ai-hint { color: #6b7280; }

/* ----- 案例按钮 ----- */
.v36-cases { margin: 14px 0; }
.v36-cases-label {
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.v36-cases-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.v36-case-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #1a1a1a;
  font-family: var(--mono, monospace);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
  color: #1a1a1a;
}
.v36-case-btn:hover {
  background: #1a1a1a;
  color: #fafafa;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 0 #1a1a1a;
}
.v36-case-btn:hover .v36-case-btn-num,
.v36-case-btn:hover .v36-case-btn-ctx { color: #f59e0b; }
.v36-case-btn-num   { color: #dc2626; font-weight: 700; font-size: 10px; letter-spacing: 1px; }
.v36-case-btn-label { font-weight: 700; font-size: 12px; }
.v36-case-btn-ctx   { color: #6b7280; font-size: 10px; }

/* ----- 操作区 ----- */
.v36-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 20px 0;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px dashed #9ca3af;
}
.v36-op-btn {
  padding: 6px 12px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  transition: all 0.15s;
}
.v36-op-btn:hover { background: #1a1a1a; color: #fafafa; }
.v36-op-seed  { border-color: #059669; color: #059669; }
.v36-op-seed:hover  { background: #059669; color: #fff; }
.v36-op-clear { border-color: #dc2626; color: #dc2626; }
.v36-op-clear:hover { background: #dc2626; color: #fff; }
.v36-op-test  { border-color: #f59e0b; color: #92400e; }
.v36-op-test:hover  { background: #f59e0b; color: #fff; }

/* ----- warn ----- */
.v36-warn {
  padding: 10px 12px;
  background: #fee2e2;
  border: 1px solid #dc2626;
  border-left: 4px solid #dc2626;
  color: #991b1b;
  font-size: 12px;
  font-weight: 700;
  margin-top: 14px;
}

/* ----- 报告来源 tag ----- */
.v36-report-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  background: #1a1a1a;
  color: #fafafa;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.v36-report-tag-prefix { color: #f59e0b; font-weight: 700; }
.v36-report-tag-source { color: #fafafa; font-weight: 700; }
.v36-report-tag-meta   { color: #9ca3af; font-weight: 400; }

/* ----- return button ----- */
.v36-return-btn {
  margin-left: auto !important;
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  padding: 4px 10px !important;
  font-family: var(--mono, monospace) !important;
  font-size: 10px !important;
  cursor: pointer !important;
  letter-spacing: 0.5px;
}
.v36-return-btn:hover { background: #1a1a1a !important; color: #fff !important; }

/* ----- 挂载点 ----- */
.v36-sidebar-mount, .v36-phase3-mount, .v36-phase3-init { display: contents; }