/* ============================================================
   万物皆可爬 · 页面级样式
   顺序：通用页头 / 岩点卡片 / 岩点详情1-1 / 模拟器 /
        等高线地图 / 社区 / 帖子详情3-1 / 个人 /
        模拟器入口 / 社区索引与分组流
   ============================================================ */

/* —— 通用页头 —— */
.page { display: flex; flex-direction: column; gap: var(--sp-5); }
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-title { font-size: clamp(26px, 4.2vw, 34px); }
.page-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }

/* 次级页面顶栏（返回）*/
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 7px 15px 7px 11px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast) ease;
}
.back-btn:hover { color: var(--ink); border-color: var(--line-strong); }

/* ============================================================
   ① 岩点卡片网格（社区索引 / 真实世界共用）
   ============================================================ */
.hall-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.hall-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.crag-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) { .crag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .crag-grid { grid-template-columns: repeat(3, 1fr); } }

.crag-card { display: flex; flex-direction: column; }
.crag-card .media {
  position: relative;
  aspect-ratio: 3 / 1.85;
  overflow: hidden;
  background: var(--surface-2);
}
.crag-card .media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.crag-card:hover .media img { transform: scale(1.04); }
.crag-card .media .status-pill { position: absolute; top: 10px; right: 10px; }
.crag-card .media .fame-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #fff;
  background: rgba(20, 15, 8, 0.55);
  backdrop-filter: blur(4px);
  padding: 3px 9px;
  border-radius: var(--r-sm);
}
.crag-card .body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.crag-card h3 { font-size: 19px; }
.crag-card .region { font-size: 12.5px; color: var(--ink-2); margin-top: -4px; }
.crag-card .meta {
  display: flex;
  gap: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.crag-card .meta b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; font-size: 13px; }

/* ============================================================
   ② 岩点详情（二级页）
   ------------------------------------------------------------
   标题区与影像档案的样式在文件末尾「⑩」段（.crag-head / .gallery）；
   这里只保留数据块与相关帖子。
   ============================================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.stat-tile .label { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.08em; }
.stat-tile .value { font-family: var(--font-mono); font-size: 19px; font-weight: 600; margin-top: 2px; }
.stat-tile .unit { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 3px; }

.prose p { margin-bottom: var(--sp-3); font-size: 14.5px; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }

.section-block { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }

.season-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* 底部操作条 */
.cta-bar {
  position: sticky;
  bottom: calc(var(--nav-h) + 12px);
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) { .cta-bar { bottom: 20px; } }
@media (min-width: 900px) { .cta-bar { position: static; } }

.cta-bar .hint { font-size: 12px; color: var(--ink-3); padding: 0 6px; flex: 1; min-width: 0; }

/* 相关帖子 */
.related-post {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) ease;
  cursor: pointer;
}
.related-post:hover { background: var(--surface-2); }
.related-post .rp-text { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   ③ 模拟器占位页
   ============================================================ */
.sim-wrap { max-width: 640px; margin: 0 auto; width: 100%; }
.sim-hero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  height: 190px;
}
.sim-hero img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.sim-hero .hero-veil { position: absolute; inset: 0; background: var(--hero-grad); }
.sim-hero .hero-body { position: absolute; left: 20px; bottom: 16px; color: #fff; }

.sim-placeholder {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.sim-placeholder h2 { font-size: 24px; }
.sim-placeholder p { color: var(--ink-2); font-size: 14px; max-width: 420px; }

.roadmap { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 420px; text-align: left; }
.road-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  border-radius: var(--r-md);
}
.road-item .st {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  flex: none;
}
.road-item.done .st { background: var(--green-soft); color: var(--green); }
.road-item.doing .st { background: var(--accent-soft); color: var(--accent); }
.road-item.todo .st { background: var(--gray-soft); color: var(--ink-3); }
.road-item.doing { background: var(--surface-2); }

.sim-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* —— 接入真实模拟器后的嵌入外壳 —— */
.page-sim-embed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: calc(100vh - var(--sp-10));
  padding-bottom: 0;
}
.sim-embed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}
.sim-embed-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sim-embed-title .dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  flex: none;
}
.sim-frame-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.sim-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   ④ 地图 · 等高线地形图（视觉参考苹果地图）
   ------------------------------------------------------------
   图面 = 分层设色 + 等高线 + 材质（岩体/林地/水体）三组图层；
   控件为磨砂玻璃浮层，始终浮在地图之上。
   ============================================================ */
.map-layout { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 900px) {
  .map-layout { display: grid; grid-template-columns: 1.78fr 1fr; align-items: start; gap: var(--sp-5); }
}

.map-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.map-canvas {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--m-glass-line);
  background: var(--m-base);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.map-svg { display: block; width: 100%; height: auto; }

/* —— 地形分层设色：由低到高叠加，边界即等高线 —— */
.m-base { fill: var(--m-base); }
.m-band { stroke: none; }
.m-band.t1 { fill: var(--m-band-1); }
.m-band.t2 { fill: var(--m-band-2); }
.m-band.t3 { fill: var(--m-band-3); }
.m-band.t4 { fill: var(--m-band-4); }
.m-band.t5 { fill: var(--m-band-5); }

/* —— 山体阴影 —— */
.m-hill {
  opacity: 0.42;
  mix-blend-mode: multiply;
  pointer-events: none;
}
[data-theme="dark"] .m-hill { mix-blend-mode: soft-light; opacity: 0.5; }

/* —— 材质：边界清晰、纹理克制 —— */
.m-forest { fill: url(#mForest); stroke: var(--m-forest-dot); stroke-width: 1; stroke-opacity: 0.55; }
.m-rock { fill: url(#mRock); stroke: var(--m-rock-line); stroke-width: 1.5; }
.m-water { fill: var(--m-water); stroke: var(--m-water-edge); stroke-width: 1.5; }

/* —— 等高线 —— */
.c-minor path { fill: none; stroke: var(--m-contour); stroke-width: 1.05; stroke-linejoin: round; }
.c-index path { fill: none; stroke: var(--m-contour-index); stroke-width: 1.95; stroke-linejoin: round; }
.clabel {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--m-label);
  paint-order: stroke;
  stroke: var(--m-halo);
  stroke-width: 3.2px;
  stroke-linejoin: round;
  pointer-events: none;
}
.spot-tri { fill: var(--m-spot); }
.spot-txt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--m-spot);
  paint-order: stroke;
  stroke: var(--m-halo);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* —— 仅等高线模式 —— */
.map-svg[data-layer="line"] .lay-bands,
.map-svg[data-layer="line"] .lay-materials,
.map-svg[data-layer="line"] .m-hill { display: none; }
.map-svg[data-layer="line"] .c-minor path { stroke-width: 1; }
.map-svg[data-layer="line"] .c-index path { stroke-width: 1.8; }

/* —— 浮动玻璃控件 —— */
.map-pill {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--m-glass);
  border: 1px solid var(--m-glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  font-size: 12.5px;
  color: var(--ink-2);
  box-shadow: 0 3px 12px -6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.map-pill b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.mp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  flex: none;
}

.map-compass {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  opacity: 0.9;
  pointer-events: none;
}
.cp-ring { fill: var(--m-glass); stroke: var(--m-glass-line); stroke-width: 1; }
.cp-needle { fill: var(--accent); }
.cp-n { font-family: var(--font-mono); font-size: 8px; fill: var(--ink-3); }

.map-layer {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--m-glass);
  border: 1px solid var(--m-glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 3px 12px -6px rgba(0, 0, 0, 0.4);
}
.map-layer button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  white-space: nowrap;
}
.map-layer button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }

.map-legend {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--m-glass);
  border: 1px solid var(--m-glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  font-size: 11.5px;
  color: var(--ink-2);
  box-shadow: 0 3px 12px -6px rgba(0, 0, 0, 0.4);
}
.map-legend .lg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.map-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.map-legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; }
.map-legend .lg-dot.on { background: var(--green); box-shadow: 0 0 0 2.5px var(--green-soft); }
.map-legend .lg-dot.off { background: var(--gray-dot); }
.map-legend .lg-sw {
  width: 11px; height: 9px;
  border-radius: 2px;
  border: 1px solid var(--m-rock-line);
}
.map-legend .lg-sw.rock { background: var(--m-rock); }
.map-legend .lg-sw.forest { background: var(--m-forest); border-color: var(--m-forest-dot); }
.map-legend .lg-sw.water { background: var(--m-water); border-color: var(--m-water-edge); }
.map-legend .lg-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.map-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: 0 4px;
}

/* —— SVG 岩点（白盘 + 彩色描边的苹果地图式点位）—— */
.mk { cursor: pointer; }
.mk .mk-hit { fill: transparent; }
.mk .mk-shadow { fill: rgba(0, 0, 0, 0.22); }
.mk .mk-disc {
  fill: var(--surface);
  stroke-width: 2.4;
  transition: r var(--t-fast) var(--ease-out);
}
.mk .mk-core { transition: r var(--t-fast) var(--ease-out); }
.mk.on .mk-disc { stroke: var(--green); }
.mk.on .mk-core { fill: var(--green); }
.mk.off .mk-disc { stroke: var(--gray-dot); }
.mk.off .mk-core { fill: var(--gray-dot); }
.mk text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--m-halo);
  stroke-width: 4.5px;
  stroke-linejoin: round;
  pointer-events: none;
}
/* 移动端：SVG 视图被压缩，按用户单位放大标注保证可读 */
@media (max-width: 640px) {
  .mk text { font-size: 23px; stroke-width: 7px; }
}
.mk.on .mk-pulse {
  fill: var(--green);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: mkPulse 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes mkPulse {
  0%   { opacity: 0.32; transform: scale(0.7); }
  70%  { opacity: 0;    transform: scale(2.1); }
  100% { opacity: 0;    transform: scale(2.1); }
}
.mk:hover .mk-disc, .mk.hl .mk-disc { r: 11.5; }
.mk:hover .mk-core, .mk.hl .mk-core { r: 5.6; }
.mk.off { cursor: not-allowed; }

/* 地图侧列表（iOS 分组列表） */
.map-list { display: flex; flex-direction: column; gap: 6px; }
.map-group-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  margin: var(--sp-3) 0 var(--sp-1) 4px;
}
.map-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  text-align: left;
}
.map-item:hover, .map-item.hl { border-color: var(--accent); background: var(--accent-soft); }
.map-item .mi-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-item .mi-dot.on { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.map-item .mi-dot.off { background: var(--gray-dot); }
.map-item .mi-body { flex: 1; min-width: 0; }
.map-item .mi-name { display: block; font-size: 14.5px; font-weight: 600; }
.map-item .mi-sub { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
.map-item .mi-elev { font-size: 11px; color: var(--ink-3); flex: none; }
.map-item svg { flex: none; color: var(--ink-3); }


/* ============================================================
   ⑤ 社区
   ============================================================ */
.checkin-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: linear-gradient(120deg, var(--accent-soft), transparent 60%), var(--surface);
}
.checkin-stat { display: flex; flex-direction: column; }
.checkin-stat .num { font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.checkin-stat .lab { font-size: 12px; color: var(--ink-2); }
.checkin-desc { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); }
.checkin-done { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 14px; font-weight: 600; }

.composer { padding: var(--sp-4); display: flex; gap: 12px; }
.composer .composer-main { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.composer-foot { display: flex; gap: 10px; align-items: center; }
.composer-foot .select { max-width: 200px; flex: 1; }

.feed { display: flex; flex-direction: column; gap: var(--sp-4); }

.post { display: flex; flex-direction: column; }
.post .post-head { display: flex; align-items: center; gap: 12px; padding: var(--sp-4) var(--sp-4) 0; }
.post .post-author { flex: 1; min-width: 0; }
.post .post-name { font-size: 14.5px; font-weight: 600; }
.post .post-time { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.post .post-body { padding: var(--sp-3) var(--sp-4) 0; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.post .post-text {
  font-size: 14.5px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.post.in-feed .post-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post .post-img { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/1.85; }
.post .post-img img { width: 100%; height: 100%; object-fit: cover; }
.post .post-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.crag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--t-fast) ease;
  align-self: flex-start;
}
.crag-chip:hover { background: var(--accent); color: var(--accent-contrast); }
.checkin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--green);
  background: var(--green-soft);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.post .post-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px var(--sp-2) 10px;
  margin-top: 6px;
  border-top: 1px dashed var(--line);
}
.post-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all var(--t-fast) ease;
}
.post-act:hover { background: var(--surface-2); color: var(--ink); }
.post-act.liked { color: var(--accent); }
.post-act.liked svg { fill: currentColor; }
.post-act .cnt { font-family: var(--font-mono); font-size: 12.5px; }

/* ============================================================
   ⑥ 帖子详情（3-1）
   ============================================================ */
.post-detail-wrap { max-width: 720px; margin: 0 auto; width: 100%; }
.comment-list { display: flex; flex-direction: column; }
.comment {
  display: flex;
  gap: 12px;
  padding: var(--sp-4);
  border-bottom: 1px dashed var(--line);
}
.comment:last-child { border-bottom: none; }
.comment .c-body { flex: 1; min-width: 0; }
.comment .c-meta { display: flex; gap: 8px; align-items: baseline; }
.comment .c-name { font-size: 13.5px; font-weight: 600; }
.comment .c-time { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.comment .c-text { font-size: 14px; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.comment-composer { display: flex; gap: 12px; padding: var(--sp-4); align-items: flex-start; }
.comment-composer .composer-main { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   ⑦ 个人
   ============================================================ */
.profile-wrap { max-width: 720px; margin: 0 auto; width: 100%; }
.profile-card { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6); }
.profile-card .p-body { flex: 1; min-width: 0; }
.profile-card .p-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-card .p-motto { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.profile-card .p-meta { font-size: 12px; color: var(--ink-3); margin-top: 6px; font-family: var(--font-mono); }
.name-edit { display: none; gap: 8px; align-items: center; }
.name-edit input { width: 150px; padding: 6px 10px; }
.editing .name-edit { display: inline-flex; }
.editing .p-name .name-text { display: none; }

.stats-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .stats-tiles { grid-template-columns: repeat(5, 1fr); } }

.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .badge-grid { grid-template-columns: repeat(6, 1fr); } }
.badge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: var(--sp-4) 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}
.badge-cell.locked { opacity: 0.45; filter: grayscale(0.9); }
.badge-cell .b-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.badge-cell .b-name { font-size: 11.5px; font-weight: 600; }
.badge-cell .b-cond { font-size: 10.5px; color: var(--ink-3); }

.my-post-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  transition: background var(--t-fast) ease;
}
.my-post-item:last-child { border-bottom: none; }
.my-post-item:hover { background: var(--surface-2); }
.my-post-item .t { font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-post-item .d { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); flex: none; }

.about-rows { font-size: 13px; }
.link-accent { color: var(--accent); text-decoration: none; }
.link-accent:hover { text-decoration: underline; }

/* —— 通用 section 间距 —— */
.stack { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ============================================================
   ⑧ 模拟器入口（首页 #/hall）
   ============================================================ */
.page-entry { gap: var(--sp-5); }

.entry-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 760px) { .entry-options { grid-template-columns: 1fr 1fr; } }

.opt-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) ease,
              box-shadow var(--t-med) ease, background var(--t-med) ease;
}
.opt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-med) ease;
}
.opt-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.opt-card.on {
  border-color: var(--accent);
  box-shadow: 0 10px 30px -16px var(--accent), var(--shadow-sm);
}
.opt-card.on::after { opacity: 1; }

.opt-ic {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink-2);
  transition: all var(--t-med) ease;
}
.opt-card.on .opt-ic { background: var(--accent); color: var(--accent-contrast); }

.opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.opt-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
}
.opt-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}
.opt-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.opt-desc b { color: var(--ink); font-family: var(--font-mono); }
.opt-go { flex: none; color: var(--ink-3); align-self: center; transition: transform var(--t-med) ease; }
.opt-card.on .opt-go { color: var(--accent); transform: translateX(3px); }

/* —— 选项卡内容区 —— */
.entry-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.entry-panel.panel-in { animation: panelIn var(--t-med) var(--ease-out) both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.panel-note {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.6;
}
.panel-note b { color: var(--ink); font-family: var(--font-mono); }
.panel-note .dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  flex: none;
}

.entry-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* —— 上传区 —— */
.upload-card { padding: var(--sp-3); }
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: var(--sp-10) var(--sp-4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, transparent, var(--surface-2));
  cursor: pointer;
  text-align: center;
  transition: all var(--t-fast) ease;
}
.drop:hover, .drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop-ic {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent);
}
.drop b { font-size: 14.5px; }
.drop-hint { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }

/* —— 解析流水线 —— */
.parse-card {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* display:flex 会覆盖 hidden 的默认样式，必须显式关掉 */
.parse-card[hidden] { display: none; }
.parse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.parse-file {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parse-pct { font-family: var(--font-mono); font-size: 12px; color: var(--accent); flex: none; }
.parse-bar { height: 4px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.parse-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width var(--t-med) var(--ease-out);
}
.parse-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.parse-steps li { display: inline-flex; align-items: center; gap: 6px; }
.parse-steps .ps-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: all var(--t-fast) ease;
}
.parse-steps li.on { color: var(--accent); }
.parse-steps li.on .ps-dot { background: var(--accent); animation: blink 1s infinite; }
.parse-steps li.done { color: var(--green); }
.parse-steps li.done .ps-dot { background: var(--green); }

/* —— 解析结果 —— */
.model-result { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.model-result[hidden] { display: none; }
.result-head { display: flex; align-items: center; gap: 12px; }
.result-ic {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  flex: none;
}
.result-title { font-size: 15px; font-weight: 600; }
.result-sub { font-size: 12px; color: var(--ink-2); }
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .result-grid { grid-template-columns: repeat(4, 1fr); } }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* —— 已解析模型列表 —— */
.model-list-block { display: flex; flex-direction: column; gap: 10px; }
.model-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.model-list .empty { padding: var(--sp-8) var(--sp-4); }
.model-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--line);
}
.model-row:last-child { border-bottom: none; }
.mr-thumb {
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.mr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-sub { font-size: 11.5px; color: var(--ink-2); font-family: var(--font-mono); margin-top: 1px; }

/* ============================================================
   ⑨ 社区 · 岩点索引与分组流（承接原分享大厅的交互）
   ============================================================ */
.crag-index { display: flex; flex-direction: column; gap: var(--sp-3); }
.crag-index .crag-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 1100px) { .crag-index .crag-grid { grid-template-columns: repeat(4, 1fr); } }

/* 紧凑卡片：索引区不抢心得流的视觉重心 */
.crag-card.compact .media { aspect-ratio: 16 / 9; }
.crag-index .crag-card.compact .media { aspect-ratio: 16 / 8; }
.crag-card.compact .body { padding: 12px 14px 13px; gap: 5px; }
.crag-card.compact h3 { font-size: 17px; }
.crag-card.compact .region { font-size: 11.5px; }
.crag-card.compact .meta { padding-top: 8px; font-size: 11.5px; gap: 12px; }
.crag-card.compact .fame-tag { font-size: 9.5px; padding: 2px 7px; }
.crag-card.compact .status-pill { font-size: 11px; padding: 3px 9px; }

.crag-counts {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.crag-counts span { display: inline-flex; align-items: center; gap: 5px; }

/* —— 分组流 —— */
.feed-groups { display: flex; flex-direction: column; gap: var(--sp-6); }
.crag-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.cg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.cg-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cg-title h3 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cg-dot.on { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.cg-dot.off { background: var(--gray-dot); }
.cg-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.cg-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.cg-link:hover { text-decoration: underline; }

/* —— 帖子类型徽章 —— */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  flex: none;
}
.type-badge.plan { color: var(--accent); background: var(--accent-soft); }
.type-badge.note { color: var(--ink-2); background: var(--surface-2); }

/* —— 路线规划卡（帖内）—— */
.plan-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
@media (min-width: 640px) { .plan-grid { grid-template-columns: repeat(4, 1fr); } }
.plan-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-cell i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.plan-cell b {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-row { display: flex; gap: 10px; align-items: flex-start; }
.plan-key {
  flex: none;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  padding-top: 3px;
  width: 30px;
}
.plan-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-steps {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.plan-steps li::marker { color: var(--accent); font-family: var(--font-mono); }

/* —— 发帖器的类型选择行 —— */
.composer-type { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-label { font-size: 11.5px; color: var(--ink-3); flex: none; }
.composer-type .select { flex: 1; min-width: 140px; max-width: 240px; }
.composer-foot { display: flex; align-items: center; gap: 10px; }
.ct-hint { flex: 1; min-width: 0; font-size: 11px; color: var(--ink-3); }
.plan-fields[hidden] { display: none; }
.plan-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 640px) { .plan-fields { grid-template-columns: 1.6fr 1fr 0.8fr; } }
.plan-fields .input { font-size: 13px; padding: 8px 12px; }


/* ============================================================
   ⑩ 三维岩壁主视图 + 二级页影像档案
   ------------------------------------------------------------
   · .wall-stage / .ws-*   三维主视图（model-viewer）
   · .wall-picker / .wp-*  岩壁切换条（文字，不带图片）
   · .crag-head            二级页标题区（不再用大图 hero）
   · .gallery / .gitem     影像档案
   · .lightbox            影像灯箱
   ============================================================ */

/* —— 主视图整体布局 —— */
.wall-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 1000px) {
  .wall-main { grid-template-columns: minmax(0, 1fr) 296px; gap: var(--sp-5); }
}
.wall-left { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

/* —— 舞台 —— */
.wall-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 88% at 50% -10%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--board-bg) 100%);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t-med) var(--ease-out);
}
@media (min-width: 760px) { .wall-stage { aspect-ratio: 4 / 3; } }
@media (min-width: 1000px) { .wall-stage { aspect-ratio: 4 / 3; } }
.wall-stage.is-ready { box-shadow: var(--shadow-lg); }
.wall-stage.is-over { outline: 2px dashed var(--accent); outline-offset: -8px; }

.ws-view { position: absolute; inset: 0; }
.ws-mv {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
}

/* 载入中 */
.ws-skeleton[hidden] { display: none; }
.ws-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.04em;
  background-image:
    linear-gradient(to right, rgba(120, 100, 70, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 100, 70, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ws-spin {
  width: 22px; height: 22px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ws-spin 900ms linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }

.ws-progress[hidden] { display: none; }
.ws-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(60, 50, 30, 0.08);
  z-index: 3;
}
.ws-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 200ms linear;
}

/* 左上：当前岩壁标识 */
.ws-id {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: calc(100% - 120px);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  background: var(--m-glass);
  border: 1px solid var(--m-glass-line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ws-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.ws-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-2);
}

/* 右上：状态徽章 */
.ws-badges {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.ws-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  border: 1px solid var(--m-glass-line);
  background: var(--m-glass);
  color: var(--ink-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ws-badge.ok { color: var(--green); border-color: rgba(43, 138, 62, 0.34); }
.ws-badge.off { color: var(--ink-2); }
.ws-badge.ghost { color: var(--ink-3); }

/* 底部：提示与工具 */
.ws-hud {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 10.5px;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  background: var(--m-glass);
  border: 1px solid var(--m-glass-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ws-tools { margin-left: auto; display: flex; gap: 6px; }
.ws-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-pill);
  background: var(--m-glass);
  border: 1px solid var(--m-glass-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.ws-tool:hover { transform: translateY(-1px); background: var(--surface); }

/* 空态 / 出错态 */
.ws-fallback {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--sp-6);
  text-align: center;
  background: var(--m-glass);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ws-fallback[hidden] { display: none; }
.ws-fb-ic { color: var(--ink-3); }
.ws-fb-note { font-size: 12px; color: var(--ink-2); max-width: 34ch; line-height: 1.6; }
.ws-fb-actions { margin-top: 6px; }

/* —— 岩壁切换条（纯文字，不带图片）—— */
.wall-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wall-picker::-webkit-scrollbar { display: none; }
.wp-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 12px 8px 11px;
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.wp-chip b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.wp-chip i {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  color: var(--ink-3);
  white-space: nowrap;
}
.wp-chip .wp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.wp-chip.is-off .wp-dot { background: var(--gray-dot); }
.wp-chip.is-off b { color: var(--ink-2); }
.wp-chip:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.wp-chip.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.16);
}
.wp-chip.on b { color: var(--accent); }

/* —— 右侧信息栏 —— */
.wall-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.wall-side-name {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.wall-side-region {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.wall-side-season {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-3);
}
.wall-side-actions { display: flex; flex-direction: column; gap: 8px; }
.wall-side-actions .btn { width: 100%; justify-content: center; }
.wall-tip {
  display: flex;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3);
}
.wall-tip svg { flex: none; margin-top: 2px; }

/* —— 舞台上的四项数据 —— */
.ws-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.wsm-item { display: flex; flex-direction: column; gap: 1px; }
.wsm-item b {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.wsm-item i { font-size: 10.5px; font-style: normal; color: var(--ink-3); }
.wsm-sep { display: none; }

/* —— 二级页标题区（替代原大图 hero）—— */
.crag-head { margin-bottom: var(--sp-4); }
.crag-head-title {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink);
}
.crag-head-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

/* —— 影像档案 —— */
.media-block { padding: var(--sp-4); }
.media-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.media-head > div { flex: 1; min-width: 0; }
.media-note { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); }
.media-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 17px;
  text-align: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gitem {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.gitem.feature {
  grid-column: 1 / -1;
  aspect-ratio: auto;          /* 用固定高度而不是比例，否则宽度会被 max-height 反算缩小 */
  height: 360px;
}
@media (max-width: 639px) { .gitem.feature { height: 220px; } }
.gitem img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-out);
}
.gitem:hover img { transform: scale(1.035); }
.gitem-veil {
  position: absolute;
  inset: 0;
  background: var(--hero-grad);
  opacity: 0.9;
  pointer-events: none;
}
.gitem-label {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.gitem-zoom {
  position: absolute;
  top: 9px; right: 9px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: #fff;
  background: rgba(20, 16, 10, 0.34);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* —— 影像灯箱 —— */
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: rgba(14, 12, 9, 0.93);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.lightbox.on { opacity: 1; }
.lb-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-6) 56px;
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: background var(--t-fast);
}
.lb-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lb-nav[hidden] { display: none; }
.lb-nav.prev { left: 10px; }
.lb-nav.prev svg { transform: rotate(180deg); }
.lb-nav.next { right: 10px; }
.lb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #f4efe5;
  font-size: 12.5px;
}
.lb-cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-num { font-family: var(--font-mono); font-size: 11px; opacity: 0.68; }
.lb-dots { display: flex; align-items: center; gap: 6px; }
.lb-dot {
  width: 6px; height: 6px;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.34);
  border: 0;
  border-radius: var(--r-pill);
  transition: width var(--t-fast), background var(--t-fast);
}
.lb-dot.on { width: 18px; background: #fff; }
.lb-close {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

/* ============================================================
   ⑪ 双上传窗口（模型 / 照片）
   ------------------------------------------------------------
   两个窗口等宽并排：左边是「我手里已经有文件」，右边是「我只有照片」。
   左右不是同级功能，而是同一条流水线的两个入口，所以视觉上并排、
   语义上并列，用 01 / 02 编号而不是主次按钮。
   ============================================================ */
.up-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 880px) {
  .up-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

.up-win {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.up-win-ai {
  border-color: rgba(194, 65, 12, 0.22);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(194, 65, 12, 0.05), transparent 60%),
    var(--surface);
}

.up-head { display: flex; align-items: flex-start; gap: 10px; }
.up-no {
  flex: none;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 5px;
}
.up-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.up-titles b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.up-titles span { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

.up-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  white-space: nowrap;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.up-tag.on {
  color: var(--accent);
  border-color: rgba(194, 65, 12, 0.3);
  background: var(--accent-soft);
}

/* 窗口内的落区比整页版更矮，避免两个窗口把页面撑太长 */
.up-win .drop { flex: 1; padding: var(--sp-7) var(--sp-4); gap: 6px; }
.up-win .drop b { font-size: 13.5px; }
.up-win .drop-hint { font-size: 11px; }
.drop[hidden] { display: none; }

.up-foot {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-3);
}
.up-foot svg { flex: none; margin-top: 1px; }

/* —— 已选照片回显 —— */
.photo-picked {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.photo-picked[hidden] { display: none; }
.pp-thumb {
  width: 78px;
  height: 78px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--board-bg);
}
.pp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-body b {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.pp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }

/* —— 照片 → 岩墙的四步链路（照片 · Lux3D · GLB · 整墙攀爬）—— */
.up-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.up-chain li { display: inline-flex; align-items: center; gap: 6px; }
.up-chain li:not(:last-child)::after {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--line-strong);
}
.up-chain li:last-child { color: var(--accent-ink, var(--accent)); }

/* —— 生成服务设置（折叠；Key 不在前端）—— */
.up-setup { border-top: 1px dashed var(--line); padding-top: 9px; }
.up-setup summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--ink-3);
  list-style: none;
}
.up-setup summary::-webkit-details-marker { display: none; }
.up-setup summary::before {
  content: "▸ ";
  font-size: 9px;
  color: var(--ink-3);
}
.up-setup[open] summary::before { content: "▾ "; }
.us-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .us-grid { grid-template-columns: 1fr 1fr; }
}
.us-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  color: var(--ink-3);
}
.us-grid input {
  width: 100%;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.us-grid input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.us-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.us-hint { font-size: 10.5px; color: var(--ink-3); }

/* —— 流水线里被跳过的步骤（例如 Lux3D 不可用时的「提交 / 排队」）—— */
.parse-steps li.skip { color: var(--ink-3); }
.parse-steps li.skip .ps-dot {
  background: transparent;
  border: 1px solid var(--line-strong);
}
.parse-steps li.skip::after {
  content: "已跳过";
  padding: 0 5px;
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--ink-3);
  background: var(--surface-2);
  border-radius: var(--r-pill);
}

/* —— 结果卡的说明行 —— */
.result-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 9px 11px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.result-note svg { flex: none; margin-top: 2px; color: var(--ink-3); }

/* —— 列表缩略图用照片时 —— */
.mr-thumb.has-img { padding: 0; overflow: hidden; background: var(--board-bg); }
.mr-thumb.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* —— 模拟器页里的三维舞台 —— */
.sim-stage { width: 100%; }
.sim-stage .ws-mv { --poster-color: transparent; }
/* 模拟器主标签占满导航栏以外的空间，内部由真实模拟器自行布局。 */
.view.simulator-home-view { max-width:none; margin:0; padding:0; height:calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)); flex:none; }
.page-simulator-home { display:flex; flex-direction:column; height:100%; min-height:0; background:#101c21; }
.simulator-home-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; flex-shrink:0; border-bottom:1px solid var(--line); background:var(--surface); }
.simulator-home-toolbar strong { color:var(--ink); font-size:14px; }
.simulator-home-toolbar>div { display:flex; align-items:center; gap:8px; }
.simulator-home-frame { display:block; width:100%; flex:1; min-height:0; border:0; background:#101c21; }
@media(min-width:900px) { .view.simulator-home-view { height:100dvh; } }
@media(max-width:520px) { .simulator-home-toolbar { padding:6px 8px; gap:6px; } .simulator-home-toolbar .btn { padding:6px 8px; font-size:11px; } }