/* 宝典页 guide.html + node_guide.html — CLIENT_UI_DESIGN_SYSTEM_V1 视觉统一（仅 CSS 覆盖） */

/* §Layout 媒体窗 9:16 · 播放栏与底栏间距 */
body.guide-page {
  --guide-tab-bar-h: var(--gwm-tab-bar-h);
  --guide-player-gap: 6px;
  --guide-content-player-gap: 6px;
  --guide-audio-bar-h: 50px;
  --guide-bottom-stack: calc(
    var(--guide-tab-bar-h) + var(--guide-player-gap) + var(--guide-audio-bar-h) + var(--guide-content-player-gap)
  );
}

body.guide-page .page,
body.guide-page .node-guide-shell {
  display: flex;
  flex-direction: column;
}

body.guide-page .content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 6px var(--guide-bottom-stack) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.guide-page .tab-row {
  flex-shrink: 0;
}

body.guide-page .main-row {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  gap: 4px;
}

body.guide-page .display-panel {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 !important;
}

body.guide-page .scene-image-wrapper {
  position: relative;
  aspect-ratio: 9 / 16;
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-self: center;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(31, 33, 38, 0.62) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

body.guide-page #sceneImage,
body.guide-page #sceneVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 媒体区外小标题（如「徒步鞋、徒步袜」）隐藏，把空间让给 9:16 窗格 */
body.guide-page .scene-caption,
body.guide-page .scene-caption.show {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

body.guide-page .scene-list {
  flex: 0 0 26% !important;
  width: 26% !important;
  max-width: 26% !important;
  min-width: 62px !important;
  align-self: stretch;
  max-height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.guide-page .scene-list .scene-btn:first-child {
  margin-top: 0 !important;
}

body.guide-page .scene-btn {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-height: 20vw;
  font-size: clamp(11px, 3vw, 14px) !important;
  padding: 3px !important;
  margin-bottom: 3px !important;
}

body.guide-page .scene-btn div {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3;
  overflow: hidden !important;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

/* 播放栏：与底栏留缝，整体上移 */
body.guide-page .audio-bar {
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--guide-tab-bar-h) + var(--guide-player-gap)) !important;
  height: var(--guide-audio-bar-h);
  min-height: var(--guide-audio-bar-h);
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-sizing: border-box;
}

/* 伪全屏：媒体底边贴播放栏，9:16 居中，两侧毛玻璃 */
body.guide-page.guide-fullscreen .page,
body.guide-page.guide-fullscreen .node-guide-shell {
  padding-bottom: 0 !important;
}

body.guide-page.guide-fullscreen .content {
  padding-bottom: 0 !important;
}

body.guide-page.guide-fullscreen .scene-list {
  visibility: hidden;
  pointer-events: none;
}

body.guide-page.guide-fullscreen #displayPanel.panel-fullscreen {
  visibility: visible;
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 950;
  padding:
    env(safe-area-inset-top, 0px)
    0
    calc(var(--guide-audio-bar-h) + var(--guide-content-player-gap) + env(safe-area-inset-bottom, 0px))
    0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: #1F2126 !important;
}

body.guide-page.guide-fullscreen #displayPanel.panel-fullscreen .scene-image-wrapper {
  aspect-ratio: 9 / 16;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  flex: 0 0 auto !important;
  border-radius: 0;
  margin: 0 auto;
}

body.guide-page.guide-fullscreen #displayPanel.panel-fullscreen .scene-caption {
  display: none !important;
}

body.guide-page.guide-fullscreen .audio-bar {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--guide-player-gap)) !important;
  z-index: 1001;
}

/* §四 页面底色 */
html:has(body.guide-page),
body.guide-page {
  background: #1F2126 !important;
  color: #FFFFFF;
}

body.guide-page .page,
body.guide-page .node-guide-shell {
  background: transparent;
}

body.guide-page.node-guide-page[data-embed="1"] {
  background: #1F2126 !important;
}

/* §五 顶部 Header */
body.guide-page header {
  background: rgba(31, 33, 38, 0.62) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
  color: #FFFFFF;
}

body.guide-page:not(.node-guide-page) header .titles {
  margin-left: 4px;
}

body.guide-page header .back {
  background: rgba(31, 33, 38, 0.58) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

body.guide-page header .titles .main {
  color: #FFFFFF !important;
}

body.guide-page header .titles .sub {
  color: #E6E7EA !important;
}

body.guide-page header .lock-btn {
  background: rgba(31, 33, 38, 0.58) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: background 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out, color 220ms ease-out;
}

body.guide-page header .lock-btn.is-locked {
  background: linear-gradient(135deg, rgba(166, 77, 121, 0.92), rgba(216, 108, 160, 0.58)) !important;
  border-color: rgba(216, 108, 160, 0.82) !important;
  color: #F0A8C8 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 6px 18px rgba(166, 77, 121, 0.38) !important;
}

body.guide-page header .lock-btn .lock-btn-svg {
  width: 18px;
  height: 18px;
  display: block;
  transition: stroke 220ms ease-out;
}

/* §六 分类栏 */
body.guide-page .cat-tab-btn {
  background: rgba(31, 33, 38, 0.52) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  transition: all 220ms ease-out;
}

body.guide-page .cat-tab-btn.active {
  background: linear-gradient(
    135deg,
    rgba(166, 77, 121, 0.82),
    rgba(216, 108, 160, 0.48)
  ) !important;
  border-color: rgba(216, 108, 160, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 8px 22px rgba(166, 77, 121, 0.24),
    0 0 24px rgba(216, 108, 160, 0.16) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

/* §七 显示区 */
body.guide-page .display-panel {
  background: rgba(31, 33, 38, 0.36) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

/* §八 图片浮动按钮 */
body.guide-page .img-nav,
body.guide-page .fullscreen-btn {
  background: rgba(31, 33, 38, 0.58) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* §九 meta-bottom-bar — 压缩注脚占高，贴底显示 */
body.guide-page .meta-bottom-bar {
  background: rgba(31, 33, 38, 0.58) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: #D6D7DA !important;
  padding: 1px 5px 2px !important;
  gap: 6px !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

body.guide-page .meta-bottom-bar span {
  color: #D6D7DA !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

body.guide-page .meta-item {
  gap: 2px !important;
}

body.guide-page .meta-extra {
  gap: 6px !important;
}

body.guide-page .meta-icon {
  width: 8px !important;
  height: 8px !important;
  font-size: 7px !important;
  border-radius: 2px !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* §十 右侧场景卡片 */
body.guide-page .scene-btn {
  background: rgba(31, 33, 38, 0.50) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: all 220ms ease-out;
}

body.guide-page .scene-btn div {
  color: #FFFFFF !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3;
}

body.guide-page .scene-btn.active {
  background: linear-gradient(
    135deg,
    rgba(166, 77, 121, 0.82),
    rgba(216, 108, 160, 0.48)
  ) !important;
  border-color: rgba(216, 108, 160, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 8px 22px rgba(166, 77, 121, 0.24),
    0 0 24px rgba(216, 108, 160, 0.16) !important;
}

body.guide-page .scene-btn.active * {
  color: #FFFFFF !important;
}

body.guide-page .scene-btn.active div {
  font-weight: 700 !important;
}

/* §十一 tag-badge */
body.guide-page .tag-badge {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #D6D7DA !important;
  border-radius: 999px;
}

body.guide-page .tag-main {
  background: rgba(166, 77, 121, 0.22) !important;
  border-color: rgba(166, 77, 121, 0.45) !important;
  color: #FFFFFF !important;
}

body.guide-page .tag-sub {
  background: rgba(42, 80, 110, 0.38) !important;
  border-color: rgba(155, 205, 235, 0.22) !important;
  color: #C9DCE8 !important;
}

/* §十二 播放器 */
body.guide-page .audio-bar {
  background: rgba(31, 33, 38, 0.72) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.26) !important;
  border-radius: 18px 18px 0 0 !important;
}

body.guide-page .audio-bar .audio-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  transition: all 180ms ease-out !important;
}

body.guide-page .audio-bar .audio-btn:active:not(:disabled):not(.locked) {
  transform: scale(0.96);
  background: rgba(166, 77, 121, 0.28) !important;
  border-color: rgba(216, 108, 160, 0.65) !important;
  color: #FFFFFF !important;
}

body.guide-page .audio-bar .audio-btn:active:not(:disabled):not(.locked) svg,
body.guide-page .audio-bar .audio-btn:active:not(:disabled):not(.locked) svg text,
body.guide-page .audio-bar .audio-btn:active:not(:disabled):not(.locked) svg path {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

body.guide-page .audio-bar .progress {
  background: rgba(255, 255, 255, 0.14) !important;
}

body.guide-page .audio-bar .progress-inner {
  background: linear-gradient(90deg, #A64D79, #D86CA0) !important;
}

body.guide-page .audio-bar .speed-btn {
  background: rgba(31, 33, 38, 0.48) !important;
  border: 1px solid rgba(166, 77, 121, 0.75) !important;
  color: #FFFFFF !important;
}

body.guide-page .audio-bar .speed-btn:active:not(:disabled):not(.locked) {
  transform: scale(0.96);
  background: rgba(166, 77, 121, 0.28) !important;
  color: #FFFFFF !important;
  border-color: rgba(216, 108, 160, 0.65) !important;
}

body.guide-page .audio-bar .time-label {
  color: #D6D7DA;
}

/* scene-caption 已隐藏，见 §Layout */

/* §十四 node-guide 文字体系 */
body.guide-page.node-guide-page .scene-route-name {
  color: #AEB1B8;
}

body.guide-page.node-guide-page .card-detail-title {
  color: #FFFFFF;
}

body.guide-page.node-guide-page .card-detail-summary {
  color: #D6D7DA;
}

body.guide-page.node-guide-page .card-detail-body {
  color: #D6D7DA;
}

body.guide-page.node-guide-page .card-detail-empty {
  color: #AEB1B8;
}

body.guide-page.node-guide-page .audio-hint {
  color: #AEB1B8;
}