/* =====================================================================
   Rijksmuseum-Style Collection Gallery
   Theme Accent: #80cc28
   Engineering Design: Zero-Emoji, High-Precision SVG, WebP Canvas Tiles
   ==================================================================== */

:root,
:root[data-theme="dark"] {
  --bg-main: #0b0d10;
  --bg-surface: #13171e;
  --bg-surface-elevated: #1a1f29;
  --bg-subbar: #0e1116;
  --bg-overlay: rgba(11, 13, 16, 0.94);
  --header-bg: rgba(11, 13, 16, 0.92);
  --stage-bg: #07080b;
  --card-media-bg: #07090b;
  --card-shadow: none;
  
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-focus: #80cc28;
  
  --text-primary: #f4f5f7;
  --text-secondary: #9ea5b3;
  --text-muted: #5e6676;
  
  --accent: #80cc28;
  --accent-rgb: 128, 204, 40;
  --accent-subtle: rgba(128, 204, 40, 0.14);
  --accent-hover: #91db38;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Monaco, Consolas, monospace;
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --theme-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

:root[data-theme="light"] {
  --bg-main: #f8f9fb;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f0f2f5;
  --bg-subbar: #f4f6f9;
  --bg-overlay: rgba(248, 249, 251, 0.96);
  --header-bg: #ffffff;
  --stage-bg: #e5e8ed;
  --card-media-bg: #eaedf2;
  --card-shadow: none;
  
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.16);
  --border-focus: #6aa820;
  
  --text-primary: #0f141c;
  --text-secondary: #3d4654;
  --text-muted: #687588;
  
  --accent: #6aa820;
  --accent-rgb: 106, 168, 32;
  --accent-subtle: rgba(106, 168, 32, 0.12);
  --accent-hover: #7bc225;
}

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

html {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}

/* =====================================================================
   Ghost Floating Rail (现代空气悬浮微晶滚动条 · 告别原厂粗白槽)
   ==================================================================== */
/* 现代 WebKit 浏览器 (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #80cc28);
  box-shadow: 0 0 10px rgba(var(--accent-rgb, 128, 204, 40), 0.6);
}
::-webkit-scrollbar-thumb:active {
  background: var(--accent-hover, #91db38);
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #6aa820);
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 106, 168, 32), 0.4);
}

/* W3C 标准滚动条支持 (Firefox 等) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
:root[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* 首屏全景视口（Hero View）：彻底隐去操作系统原生滚动条，2K名画全屏无界铺满物理边缘 */
body:not(.in-gallery):not(.in-subview)::-webkit-scrollbar,
html:not(.has-entered-gallery)::-webkit-scrollbar,
html:not(.has-entered-gallery) body:not(.in-gallery):not(.in-subview)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
html:not(.has-entered-gallery),
body:not(.in-gallery):not(.in-subview) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
}

/* Icons */
.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon.mini {
  width: 12px;
  height: 12px;
}

/* Header · 苹果级高透 原生液态微晶折射置顶工具条 (Apple Liquid Glass - 方案 A 增强折射与斜向入射光) */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  background: rgba(13, 17, 24, 0.44) !important;
  backdrop-filter: blur(28px) saturate(280%) brightness(1.22) contrast(105%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(280%) brightness(1.22) contrast(105%) !important;
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.22),
    0 4px 16px -2px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

:root[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(28px) saturate(220%) brightness(1.06) contrast(100%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(1.06) contrast(100%) !important;
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.75),
    0 4px 16px -2px rgba(0, 0, 0, 0.05);
}

/* 苹果级原生发丝晶芒切线：完全浑然一体，绝不添加多余假带 */
.site-header::after {
  display: none !important;
}

.site-header.is-sticky {
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
    0 6px 20px -2px rgba(0, 0, 0, 0.32);
}

:root[data-theme="light"] .site-header.is-sticky {
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.85),
    0 6px 18px -2px rgba(0, 0, 0, 0.08);
}

/* 当进入深览弹窗模式 (viewer-open / viewer-preopen) 时，彻底隐藏顶栏，绝不在画卷上方意外残留 */
html.viewer-open .site-header,
body.viewer-open .site-header,
html.viewer-preopen .site-header,
body.viewer-preopen .site-header {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* 当语言下拉弹窗开启时，提升顶栏与内部图层上下文至最高层级，杜绝任何穿透与遮挡 */
.site-header.has-dropdown-open,
.site-header:has(.lang-dropdown-menu.open) {
  z-index: 500 !important;
}

.header-inner {
  position: relative;
  z-index: 10;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.brand-badge {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #a3e635 0%, #65a30d 50%, #4d7c0f 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 10px rgba(var(--accent-rgb, 128, 204, 40), 0.50);
  border-radius: 2px;
  flex-shrink: 0;
}

:root[data-theme="light"] .brand-badge {
  background: linear-gradient(135deg, #84cc16 0%, #4d7c0f 60%, #365314 100%);
  border: 1px solid rgba(255, 255, 255, 0.50);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 8px rgba(var(--accent-rgb, 106, 168, 32), 0.35);
}
.brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  transition: color 0.25s ease;
  white-space: nowrap;
}
.brand-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  display: block;
  text-transform: uppercase;
}
.header-meta {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* =====================================================================
   Header Actions Capsule · 顶栏一体化液态水滴微晶操作胶囊 (Apple Liquid Glass)
   ==================================================================== */
.header-actions-capsule {
  position: relative;
  z-index: 20;
  overflow: visible !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4px;
  background: rgba(16, 22, 32, 0.52);
  backdrop-filter: blur(18px) saturate(260%) contrast(104%);
  -webkit-backdrop-filter: blur(18px) saturate(260%) contrast(104%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9999px;
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.28),
    inset -1px -1px 2px 0 rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(56, 189, 248, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.25);
  user-select: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.header-actions-capsule.has-open,
.header-actions-capsule:has(.lang-dropdown-menu.open) {
  z-index: 1000 !important;
}

:root[data-theme="light"] .header-actions-capsule {
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.90),
    inset -1px -1px 1.5px 0 rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(56, 189, 248, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.06);
}

.header-actions-capsule:hover {
  border-color: rgba(255, 255, 255, 0.24);
  border-top-color: rgba(255, 255, 255, 0.40);
  box-shadow: 
    inset 1.2px 1.5px 2.5px 0 rgba(255, 255, 255, 0.35),
    inset -1px -1px 2px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(56, 189, 248, 0.18),
    0 6px 20px -2px rgba(0, 0, 0, 0.32);
}

:root[data-theme="light"] .header-actions-capsule:hover {
  border-color: rgba(255, 255, 255, 0.85);
  border-top-color: #ffffff;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 
    inset 1.2px 1.5px 2.5px 0 rgba(255, 255, 255, 0.98),
    inset -1px -1px 1.5px 0 rgba(0, 0, 0, 0.08),
    0 0 0 1.5px rgba(56, 189, 248, 0.20),
    0 6px 20px -2px rgba(0, 0, 0, 0.10);
}

/* 胶囊内按键基类：液态微透镜水滴按键 (Dewdrop Glass Buttons) */
.header-actions-capsule .capsule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  outline: none;
}

/* 1. 多语言下拉切换按键 */
.header-actions-capsule .lang-dropdown-btn {
  height: 30px;
  padding: 0 8px;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
}

.header-actions-capsule .lang-dropdown-btn:hover,
.header-actions-capsule .lang-dropdown-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.50), 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-0.5px);
}

:root[data-theme="light"] .header-actions-capsule .lang-dropdown-btn:hover,
:root[data-theme="light"] .header-actions-capsule .lang-dropdown-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.75);
  color: #0f141c;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.5px);
}

.header-actions-capsule .lang-dropdown-btn .icon.mini {
  width: 14px;
  height: 14px;
}

.header-actions-capsule .lang-dropdown-btn .lang-current-label {
  font-size: 0.74rem;
  min-width: 16px;
}

/* 2. 主题切换按键 */
.header-actions-capsule .theme-toggle-btn {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
}

.header-actions-capsule .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.50), 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-0.5px);
}

:root[data-theme="light"] .header-actions-capsule .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #0f141c;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.5px);
}

.header-actions-capsule .theme-toggle-btn .icon {
  width: 15px;
  height: 15px;
}

/* 3. 返回顶部按键 */
.header-actions-capsule .home-return-btn {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
}

.header-actions-capsule .home-return-btn:hover {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.50), 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-0.5px);
}

:root[data-theme="light"] .header-actions-capsule .home-return-btn:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #0f141c;
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 3. 垂直微细刻度线 */
.header-actions-capsule .capsule-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 3px;
  flex-shrink: 0;
}

:root[data-theme="light"] .header-actions-capsule .capsule-divider {
  background: rgba(0, 0, 0, 0.10);
}

/* 4. 返回首屏画卷（Home）翡翠微晶独立圆键 */
.header-actions-capsule .home-return-btn {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: rgba(var(--accent-rgb, 128, 204, 40), 0.12);
  border: 1px solid rgba(var(--accent-rgb, 128, 204, 40), 0.28);
  color: var(--accent, #80cc28);
  flex-shrink: 0;
}

.header-actions-capsule .home-return-btn:hover {
  background: rgba(var(--accent-rgb, 128, 204, 40), 0.24);
  border-color: rgba(var(--accent-rgb, 128, 204, 40), 0.48);
  box-shadow: 0 0 10px rgba(var(--accent-rgb, 128, 204, 40), 0.35);
  color: var(--accent, #80cc28);
  transform: translateY(-0.5px);
}

.header-actions-capsule .home-return-btn:active {
  transform: scale(0.95);
}

:root[data-theme="light"] .header-actions-capsule .home-return-btn {
  background: rgba(var(--accent-rgb, 106, 168, 32), 0.10);
  border-color: rgba(var(--accent-rgb, 106, 168, 32), 0.24);
  color: var(--accent, #6aa820);
}

:root[data-theme="light"] .header-actions-capsule .home-return-btn:hover {
  background: rgba(var(--accent-rgb, 106, 168, 32), 0.20);
  border-color: rgba(var(--accent-rgb, 106, 168, 32), 0.38);
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 106, 168, 32), 0.25);
  color: var(--accent, #6aa820);
}

.header-actions-capsule .home-return-btn .icon {
  width: 15px;
  height: 15px;
}

.header-actions-capsule .home-return-btn .tb-icon-layer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-actions-capsule .home-return-btn.mode-scroll-top:hover .tb-icon-layer {
  transform: translateY(-2px);
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.stat-pill.icon-pill {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  cursor: pointer;
}

.stat-pill.icon-pill:hover,
.stat-pill.about-btn:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--border-medium);
  color: var(--accent);
}

:root[data-theme="light"] .stat-pill.icon-pill:hover,
:root[data-theme="light"] .stat-pill.about-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--accent);
}

.stat-pill.icon-pill .icon {
  width: 17px;
  height: 17px;
}
.stat-pill.accent {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  background: var(--accent-subtle);
}
.view-controls {
  display: flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.view-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  align-items: center;
  transition: all var(--transition-fast);
}
.view-btn:hover {
  color: var(--text-primary);
}
.view-btn.active {
  background: var(--bg-surface-elevated);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Subbar */
.gallery-subbar {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subbar);
  transition: var(--theme-transition);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-subbar::-webkit-scrollbar {
  display: none;
}
.subbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.filter-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 4px;
  white-space: nowrap;
}
.filter-chip {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.76rem;
  padding: 4px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-chip:hover {
  border-color: var(--border-medium);
  color: var(--text-primary);
}
.filter-chip.active {
  background: var(--accent-subtle);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
  font-weight: 500;
}
.environment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
}

/* =====================================================================
   Portal Hero Entrance & Fullpage Section Snap (首页三段顶点吸附翻页)
   ==================================================================== */
/* 首页完全隐藏浏览器原生右侧滚动条，保留丝滑的滚轮/滑动手势顶点吸附翻页 */
html.portal-html,
html:has(body[data-page="portal"]),
body[data-page="portal"] {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE / Edge */
}

html.portal-html::-webkit-scrollbar,
html:has(body[data-page="portal"])::-webkit-scrollbar,
body[data-page="portal"]::-webkit-scrollbar {
  display: none !important; /* Chrome / Safari / Opera */
  width: 0 !important;
  height: 0 !important;
}

body[data-page="portal"] {
  scroll-snap-type: y mandatory;
}

.portal-hero-container {
  width: 100%;
  max-width: 100%;
  height: calc(100vh - 56px);
  min-height: 520px;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 56px;
}

.portal-wrapper {
  display: flex;
  gap: 0 !important;
  width: 100%;
  flex: 1;
  height: 100%;
  min-height: 0;
}

.portal-scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 23, 30, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  font: inherit;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}

.portal-scroll-hint:hover {
  transform: translateX(-50%) translateY(3px);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(19, 23, 30, 0.90);
}

.portal-scroll-hint svg {
  animation: bounceDown 1.8s infinite ease-in-out;
  width: 18px;
  height: 18px;
}

/* Explicit Light Mode for Portal Scroll Hint */
:root[data-theme="light"] .portal-scroll-hint {
  background: rgba(255, 255, 255, 0.85);
  color: #0f141c;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .portal-scroll-hint svg {
  color: var(--accent);
}

:root[data-theme="light"] .portal-scroll-hint:hover {
  background: #ffffff;
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.22);
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Floating Side Dot Pagination (页面右侧三段顶点浮动导航) */
.portal-page-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 35;
  padding: 12px 6px;
  background: rgba(19, 23, 30, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  transition: opacity 0.3s ease, border-color var(--theme-transition), background var(--theme-transition);
}

:root[data-theme="light"] .portal-page-nav {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.page-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--text-muted);
  opacity: 0.42;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-nav-dot:hover {
  opacity: 0.95;
  background: var(--text-primary);
  transform: scale(1.25);
}

.page-nav-dot.active {
  height: 24px;
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}

.page-nav-dot .dot-tooltip {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(19, 23, 30, 0.88);
  color: #ffffff;
  border: 1px solid var(--border-subtle);
  pointer-events: none;
  opacity: 0;
  transition: all 0.22s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] .page-nav-dot .dot-tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #0f141c;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.page-nav-dot:hover .dot-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
  .portal-page-nav {
    display: none;
  }
}

/* Portal Content Below Fold */
.portal-section {
  max-width: 1800px;
  margin: 0 auto;
  padding: 56px 28px 64px;
  border-top: 1px solid var(--border-subtle);
}

#exploreSection {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 56px;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 36px 28px 48px;
}

#randomSection {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 56px;
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  box-sizing: border-box;
  padding: 22px 28px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.section-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-tagline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.section-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* Taxonomy Explorer Layout */
.taxonomy-clusters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 960px) {
  .taxonomy-clusters {
    grid-template-columns: 1fr;
  }
}

.taxonomy-cluster {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--theme-transition);
}

.cluster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.cluster-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cluster-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cluster-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.cluster-link {
  font-size: 0.76rem;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  outline: none;
  transition: color var(--transition-fast);
}

.cluster-link:hover {
  color: var(--accent);
}

.taxonomy-chip-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 580px) {
  .taxonomy-chip-list {
    grid-template-columns: 1fr;
  }
}

.taxonomy-card-chip {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  min-width: 0;
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.taxonomy-card-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: var(--bg-surface);
  transform: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] .taxonomy-card-chip {
  background: #f1f3f7;
  border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .taxonomy-card-chip:hover {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.taxonomy-card-chip.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

:root[data-theme="light"] .taxonomy-card-chip.active {
  background: rgba(128, 204, 40, 0.12);
  border-color: var(--accent);
}

/* Category Representative Thumbnail */
.chip-thumb-wrap {
  width: 54px;
  height: 42px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: #090c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: zoom-in;
}

:root[data-theme="light"] .chip-thumb-wrap {
  background: #e2e6ee;
  border-color: rgba(0, 0, 0, 0.1);
}

.chip-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  display: block;
}

.chip-thumb-wrap:hover .chip-thumb-img {
  transform: scale(1.12);
  filter: brightness(1.1);
}

/* Info Column */
.chip-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.chip-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.taxonomy-card-chip .chip-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.taxonomy-card-chip .chip-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

:root[data-theme="light"] .taxonomy-card-chip .chip-count {
  color: #436d14;
}

.chip-desc {
  font-size: 0.70rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

/* Feature Dimension Chips */
.dim-tag-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.dim-tag-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 6px;
}

/* Random Discovery Toolbar */
.discovery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  background: var(--bg-surface);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.discovery-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-shuffle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-subtle);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-shuffle:hover {
  background: var(--accent);
  color: #000000;
}

.btn-shuffle svg {
  transition: transform 0.45s ease;
}

.btn-shuffle:active svg {
  transform: rotate(180deg);
}

/* =====================================================================
   Section 3: Framed Showcase Window & Fullscreen Stream (单屏视窗展台与全屏瀑布流)
   ==================================================================== */
.random-section-header {
  margin-bottom: 14px;
  flex-shrink: 0;
}

.random-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.random-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

:root[data-theme="light"] .random-badge {
  color: #436d14;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-open-stream {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #000000;
  border: 1px solid var(--accent);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-open-stream:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

.btn-open-stream svg {
  width: 15px;
  height: 15px;
}

/* Framed Showcase Window Container */
.random-window-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  display: flex;
}

.random-window-stage:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

:root[data-theme="light"] .random-window-stage {
  background: #eef1f5;
  border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .random-window-stage:hover {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(var(--accent-rgb), 0.4);
}

.random-preview-track {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
  background: #0b0e14;
}

:root[data-theme="light"] .random-preview-track {
  background: #dce1eb;
}

.random-preview-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .random-preview-card {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.random-preview-card:last-child {
  border-right: none;
}

.random-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.75) contrast(1.05);
}

.random-window-stage:hover .random-preview-img {
  filter: brightness(0.92) contrast(1.08);
  transform: scale(1.03);
}

/* Glassmorphic Overlay Scrim */
.random-window-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(11, 14, 20, 0.52) 0%, rgba(11, 14, 20, 0.84) 100%);
  pointer-events: none;
  transition: background 0.35s ease;
}

:root[data-theme="light"] .random-window-scrim {
  background: radial-gradient(circle at center, rgba(240, 243, 248, 0.62) 0%, rgba(220, 226, 236, 0.88) 100%);
}

.random-window-stage:hover .random-window-scrim {
  background: radial-gradient(circle at center, rgba(11, 14, 20, 0.40) 0%, rgba(11, 14, 20, 0.76) 100%);
}

:root[data-theme="light"] .random-window-stage:hover .random-window-scrim {
  background: radial-gradient(circle at center, rgba(240, 243, 248, 0.45) 0%, rgba(220, 226, 236, 0.78) 100%);
}

.random-window-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 36px;
  background: rgba(19, 23, 30, 0.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.5);
  max-width: 480px;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

:root[data-theme="light"] .random-window-cta {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}

.random-window-stage:hover .random-window-cta {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--accent-rgb), 0.18);
}

:root[data-theme="light"] .random-window-stage:hover .random-window-cta {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 20px rgba(var(--accent-rgb), 0.18);
}

.random-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}

:root[data-theme="light"] .random-cta-badge {
  color: #436d14;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
}

.random-cta-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.random-cta-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 18px;
}

.btn-enter-stream-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #000000;
  border: none;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 9px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
  transition: all var(--transition-fast);
}

.random-window-stage:hover .btn-enter-stream-banner {
  filter: brightness(1.08);
  box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.52);
  transform: translateY(-1px);
}

.btn-enter-stream-banner svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.random-window-stage:hover .btn-enter-stream-banner svg {
  transform: translateX(3px);
}

/* =====================================================================
   Fullscreen Random Masonry Stream Modal (全屏随机瀑布流模态窗口)
   ==================================================================== */
.stream-modal {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--bg-main);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  overflow: hidden;
}

.stream-modal.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.stream-header {
  height: 56px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  z-index: 10;
}

.stream-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stream-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0;
  box-sizing: border-box;
  outline: none;
  transition: all var(--transition-fast);
}

.stream-exit-btn .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.stream-exit-text {
  white-space: nowrap !important;
  display: inline-block;
  line-height: 1;
}

.stream-exit-btn:hover {
  background: var(--bg-main);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

:root[data-theme="light"] .stream-exit-btn {
  background: #f0f2f6;
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f141c;
}

.stream-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stream-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
}

.stream-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
}

:root[data-theme="light"] .stream-badge {
  color: #436d14;
}

.stream-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.stream-filter-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stream-filter-chip {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.stream-filter-chip:hover {
  color: var(--text-primary);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.stream-filter-chip.active {
  background: var(--accent-subtle);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent);
  font-weight: 600;
}

:root[data-theme="light"] .stream-filter-chip.active {
  color: #436d14;
}

.stream-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stream-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 28px 64px;
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Fullscreen stream cards adhere strictly to 0 gap & 0 border-radius */
#streamGalleryGrid.masonry-grid {
  gap: 0 !important;
  border-radius: 0 !important;
}

#streamGalleryGrid .gallery-card {
  border-radius: 0 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .stream-header-center {
    display: none;
  }
  .random-preview-track {
    grid-template-columns: repeat(2, 1fr);
  }
}

.portal-card {
  flex: 1;
  position: relative;
  border-radius: 0 !important;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 44px 48px;
  cursor: pointer;
  background: var(--bg-surface);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 艺术馆射灯光影聚焦：画幅完全静止，未悬停侧幽暗微退，悬停侧明晰通透 */
.portal-wrapper:hover .portal-card:not(:hover) {
  opacity: 0.72;
  filter: brightness(0.82) saturate(0.85);
}

.portal-card:hover {
  opacity: 1;
  filter: brightness(1.05) contrast(1.02);
  box-shadow: none;
}

.portal-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  transform: none;
}

/* 彻底取消背景缩放 scale，保持画幅 100% 稳定，告别晕动感 */
.portal-card:hover .portal-bg {
  transform: none;
}

/* Minimalist bottom scrim so 80%+ of the picture is completely clear */
.portal-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 8, 11, 0.72) 0%,
    rgba(6, 8, 11, 0.18) 26%,
    transparent 50%
  );
  transition: background 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="light"] .portal-scrim {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.22) 26%,
    transparent 50%
  );
}

.portal-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(2px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-card:hover .portal-content {
  transform: translateY(0);
}

.portal-title {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  transition: color 0.25s ease;
}

:root[data-theme="light"] .portal-title {
  color: #0f141c;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.9);
}

.portal-card:hover .portal-title {
  color: var(--accent);
}

.portal-action-row {
  display: flex;
  align-items: center;
  margin-top: 14px;
}

.portal-enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: rgba(19, 23, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 18px;
  border-radius: 100px;
  transition: all 0.25s ease;
}

:root[data-theme="light"] .portal-enter-btn {
  color: #0f141c;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.portal-enter-btn svg {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-card:hover .portal-enter-btn {
  background: var(--accent);
  color: #000000;
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
  transform: none;
}

.portal-card:hover .portal-enter-btn svg {
  transform: translateX(4px);
}

/* Breadcrumb & Navigation on subpages */
.nav-back-link,
.nav-switch-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.nav-back-link:hover,
.nav-switch-link:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
  background: var(--bg-surface-elevated);
}

.nav-switch-link.highlight {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
  background: var(--accent-subtle);
}

/* Mobile Portal Stacking */
@media (max-width: 960px) {
  .portal-wrapper {
    flex-direction: column;
    height: auto;
    min-height: unset;
    max-height: unset;
  }
  .portal-card {
    min-height: 380px;
    padding: 32px 24px;
  }
  .portal-card:hover {
    flex: 1;
    transform: none;
  }
  .portal-title {
    font-size: 1.75rem;
  }
}

/* Gallery Main - Full-Width Justified Flow */
.gallery-main {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 28px;
}

.dual-gallery-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: start;
}

.gallery-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.25s ease;
}

.gallery-column.hidden {
  display: none !important;
}

.dual-gallery-layout.single-column {
  grid-template-columns: 1fr;
}

.dual-gallery-layout.single-column .column-divider {
  display: none;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: var(--theme-transition);
}

.column-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.column-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.column-icon svg {
  width: 18px;
  height: 18px;
}

.column-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.column-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin: 0;
}

.column-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.column-count-badge {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  padding: 4px 12px;
  border-radius: 100px;
}

/* Vertical Column Divider */
.column-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, var(--border-medium) 10%, var(--border-medium) 90%, transparent);
}

/* Masonry Grid (Equal-Height Justified Flow · 典藏画廊画框式) */
.masonry-grid {
  --target-row-height: 320px;
  --grid-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  width: 100%;
  align-content: flex-start;
}
.masonry-grid.comfort {
  --target-row-height: 420px;
  --grid-gap: 16px;
  gap: var(--grid-gap);
}

@media (min-width: 1920px) {
  .masonry-grid { --target-row-height: 280px; --grid-gap: 16px; gap: var(--grid-gap); }
  .masonry-grid.comfort { --target-row-height: 380px; --grid-gap: 16px; gap: var(--grid-gap); }
}

@media (min-width: 2560px) {
  .masonry-grid { --target-row-height: 250px; --grid-gap: 16px; gap: var(--grid-gap); }
  .masonry-grid.comfort { --target-row-height: 330px; --grid-gap: 16px; gap: var(--grid-gap); }
}

@media (max-width: 1200px) {
  .dual-gallery-layout {
    gap: 16px;
  }
  .masonry-grid { --target-row-height: 240px; --grid-gap: 14px; gap: var(--grid-gap); }
  .masonry-grid.comfort { --target-row-height: 320px; --grid-gap: 14px; gap: var(--grid-gap); }
}

@media (max-width: 980px) {
  .dual-gallery-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .column-divider {
    display: none;
  }
  .masonry-grid { --target-row-height: 260px; --grid-gap: 14px; gap: var(--grid-gap); }
  .masonry-grid.comfort { --target-row-height: 340px; --grid-gap: 14px; gap: var(--grid-gap); }
}

@media (max-width: 640px) {
  .gallery-main { padding: 12px; }
  .column-header { padding: 10px 14px; }
  .column-subtitle { display: none; }

  /* 移动端画卷比例智能编排：双列网格基底 + dense 致密配平 */
  .masonry-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: dense !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .masonry-grid::after {
    display: none !important;
  }
  .gallery-card {
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    margin: 0 !important;
    border-radius: var(--radius-md, 8px) !important;
  }
  /* 竖幅/近方幅画卷（宽高比 < 1.2）：占 1 列（单行两张，左右平分） */
  .gallery-card.is-portrait {
    grid-column: span 1 !important;
    height: 240px !important;
  }
  /* 横幅画卷与全景长卷（宽高比 >= 1.2）：占满 2 列（单行一张独占整屏） */
  .gallery-card.is-landscape,
  .gallery-card.is-ultrawide {
    grid-column: span 2 !important;
    height: 220px !important;
  }
  /* 尾部孤立竖卡保护：当某分类末行恰好落单一个竖卡时，优雅居中拉满 2 列，防止右侧死白 */
  .gallery-card.is-portrait:last-child:nth-child(odd),
  .gallery-card.mobile-span-full {
    grid-column: span 2 !important;
    height: 230px !important;
  }
  /* 首页总览各分类在移动端高度自适应，流式自然展示 */
  .gallery-overview-section .masonry-grid {
    max-height: none !important;
    overflow: visible !important;
  }
  /* 移动端分类锚点防遮挡边距 */
  .gallery-category-section {
    scroll-margin-top: calc(var(--header-height, 64px) + 24px) !important;
  }
}

/* 首页瀑布流各分类默认展示饱满的两整行拼贴效果，严丝合缝截断，杜绝第3行露出 */
.gallery-overview-section .masonry-grid {
  max-height: calc(2 * var(--target-row-height, 320px) + 1 * var(--grid-gap, 16px));
  overflow: hidden;
  position: relative;
}

/* 首页瀑布流分类底部的“查看该分类全部画卷”操作栏 */
.category-section-bottom-action {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 0 0;
  width: 100%;
}

.category-section-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.category-section-more-btn:hover {
  background: var(--accent);
  color: #0b0e14;
  border-color: var(--accent);
  transform: none;
  box-shadow: 0 8px 24px rgba(128, 204, 40, 0.25);
}

:root[data-theme="light"] .category-section-more-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .category-section-more-btn:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(106, 168, 32, 0.25);
}

.category-section-more-btn:hover .category-enter-arrow {
  transform: translateX(3px);
}

.category-section-more-text {
  display: inline-block;
  text-align: center;
  line-height: 1.35;
}

.more-btn-lead {
  font-weight: 400;
  opacity: 0.88;
}

.more-btn-sub {
  display: inline-block;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* 首页瀑布流末尾合集终点卡片（More Card / 专席探索卡片） */
.gallery-card.gallery-more-card {
  --aspect-ratio: 0.92;
  height: var(--target-row-height, 320px);
  flex-grow: 180;
  flex-basis: min(calc(var(--target-row-height, 320px) * 0.92), 100%);
  max-width: min(calc(var(--target-row-height, 320px) * 2.2), 100%) !important;
  background: var(--bg-surface, #141a24);
  border: 1px dashed rgba(var(--accent-rgb, 128, 204, 40), 0.38);
  border-radius: var(--radius-md, 8px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: border-color 0.25s ease, box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
  text-decoration: none;
  user-select: none;
}

:root[data-theme="light"] .gallery-card.gallery-more-card {
  background: #f8fafc;
  border: 1px dashed rgba(106, 168, 32, 0.36);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.gallery-card.gallery-more-card:hover,
.gallery-card.gallery-more-card:focus-visible {
  border-style: solid;
  border-color: var(--accent, #80cc28);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), 0 0 24px rgba(var(--accent-rgb, 128, 204, 40), 0.2);
  transform: none;
}

:root[data-theme="light"] .gallery-card.gallery-more-card:hover,
:root[data-theme="light"] .gallery-card.gallery-more-card:focus-visible {
  border-color: var(--accent, #61a319);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 20px rgba(107, 179, 30, 0.18);
}

.gallery-card.gallery-more-card:active {
  transform: scale(0.992);
}

.more-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 22px 20px 22px;
  box-sizing: border-box;
  z-index: 1;
}

/* 合集终点卡片底层阶梯式微缩画卷预览层 (1宫格 / 4宫格 / 9宫格) */
.more-card-mosaic-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.more-card-mosaic-grid {
  position: absolute;
  inset: 0;
  opacity: 0.65;
  filter: saturate(1.16) contrast(1.05);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, filter 0.35s ease;
  will-change: transform;
}

:root[data-theme="light"] .more-card-mosaic-grid {
  opacity: 0.54;
  filter: saturate(1.12) contrast(1.04);
}

/* 1宫格：单图全景画卷特写模式 (1幅未展出时铺满整卡，清晰透亮) */
.more-card-mosaic-grid.mosaic-mode-1 {
  display: block;
}

.more-card-mosaic-grid.mosaic-mode-1 .more-mosaic-cell {
  width: 100%;
  height: 100%;
}

/* 4宫格：田字格 2x2 矩阵模式 (2~4幅未展出时，大视窗辨识度高) */
.more-card-mosaic-grid.mosaic-mode-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3.5px;
  padding: 3.5px;
  box-sizing: border-box;
}

.more-card-mosaic-grid.mosaic-mode-4 .more-mosaic-cell {
  border-radius: 4px;
}

/* 9宫格：3x3 馆藏矩阵拼贴模式 (5+幅海量藏品，琳琅满目) */
.more-card-mosaic-grid.mosaic-mode-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2.5px;
  padding: 2.5px;
  box-sizing: border-box;
}

.more-card-mosaic-grid.mosaic-mode-9 .more-mosaic-cell {
  border-radius: 3px;
}

.more-mosaic-cell {
  position: relative;
  overflow: hidden;
  background: var(--card-media-bg, #0b0e14);
}

.more-mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 高级透光不透乱遮罩：中心聚光保护文字可读性，四角透光露出色彩与地图纹理，彻底去除12px暴力模糊 */
.more-card-mosaic-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 78% at 50% 50%,
    rgba(14, 18, 25, 0.82) 0%,
    rgba(14, 18, 25, 0.72) 48%,
    rgba(14, 18, 25, 0.38) 100%
  );
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  transition: background 0.35s ease;
}

:root[data-theme="light"] .more-card-mosaic-scrim {
  background: radial-gradient(
    ellipse 85% 78% at 50% 50%,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(248, 250, 252, 0.76) 48%,
    rgba(248, 250, 252, 0.36) 100%
  );
}

/* 悬停互动动效：微幅放大，透光度增加，色彩更加饱满醒目 */
.gallery-card.gallery-more-card:hover .more-card-mosaic-grid {
  transform: scale(1.045);
  opacity: 0.82;
  filter: saturate(1.28) contrast(1.10);
}

:root[data-theme="light"] .gallery-card.gallery-more-card:hover .more-card-mosaic-grid {
  opacity: 0.72;
  filter: saturate(1.22) contrast(1.08);
}

.gallery-card.gallery-more-card:hover .more-card-mosaic-scrim {
  background: radial-gradient(
    ellipse 85% 78% at 50% 50%,
    rgba(14, 18, 25, 0.72) 0%,
    rgba(14, 18, 25, 0.60) 48%,
    rgba(14, 18, 25, 0.26) 100%
  );
}

:root[data-theme="light"] .gallery-card.gallery-more-card:hover .more-card-mosaic-scrim {
  background: radial-gradient(
    ellipse 85% 78% at 50% 50%,
    rgba(255, 255, 255, 0.80) 0%,
    rgba(248, 250, 252, 0.64) 48%,
    rgba(248, 250, 252, 0.22) 100%
  );
}

.more-card-grid-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.7;
  mask-image: radial-gradient(circle at center, black 35%, transparent 95%);
  -webkit-mask-image: radial-gradient(circle at center, black 35%, transparent 95%);
  z-index: 1;
}

:root[data-theme="light"] .more-card-grid-bg {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

.more-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.more-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.more-card-pill {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent, #80cc28);
  background: rgba(14, 18, 25, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--accent-rgb, 128, 204, 40), 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] .more-card-pill {
  color: #437a0e;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(85, 150, 19, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.more-card-count-badge {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 0.72rem;
  color: var(--text-muted, #8b949e);
  letter-spacing: 0.02em;
  background: rgba(14, 18, 25, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .more-card-count-badge {
  color: #4b5563;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(0, 0, 0, 0.08);
}

.more-card-center-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 6px;
  gap: 8px;
}

.more-card-compass-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #80cc28);
  background: rgba(14, 18, 25, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--accent-rgb, 128, 204, 40), 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(var(--accent-rgb, 128, 204, 40), 0.15);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

:root[data-theme="light"] .more-card-compass-icon {
  color: #437a0e;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(85, 150, 19, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 0 10px rgba(107, 179, 30, 0.15);
}

.gallery-card.gallery-more-card:hover .more-card-compass-icon {
  transform: translateY(-2px) scale(1.08);
  background: rgba(var(--accent-rgb, 128, 204, 40), 0.22);
  border-color: rgba(var(--accent-rgb, 128, 204, 40), 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(var(--accent-rgb, 128, 204, 40), 0.3);
}

:root[data-theme="light"] .gallery-card.gallery-more-card:hover .more-card-compass-icon {
  background: rgba(107, 179, 30, 0.18);
  border-color: rgba(85, 150, 19, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 0 16px rgba(107, 179, 30, 0.25);
}

.more-card-heading {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] .more-card-heading {
  color: #0f141c;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.85);
}

.more-card-desc {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(240, 246, 252, 0.85);
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

:root[data-theme="light"] .more-card-desc {
  color: #374151;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.more-card-action-bar {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.more-card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary, #f0f6fc);
  background: rgba(14, 18, 25, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .more-card-action-btn {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.15);
  color: #111827;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gallery-card.gallery-more-card:hover .more-card-action-btn {
  background: var(--accent, #80cc28);
  color: #0b0e14;
  border-color: var(--accent, #80cc28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 12px rgba(var(--accent-rgb, 128, 204, 40), 0.35);
}

:root[data-theme="light"] .gallery-card.gallery-more-card:hover .more-card-action-btn {
  background: var(--accent, #61a319);
  color: #ffffff;
  border-color: var(--accent, #61a319);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 0 12px rgba(97, 163, 25, 0.3);
}

.gallery-card.gallery-more-card:hover .more-card-action-btn svg {
  transform: translateX(2.5px);
}

.more-card-action-btn svg {
  transition: transform 0.2s ease;
}

/* 响应式断点控制：桌面端展示网格内嵌【合集终点卡片】，隐藏下方独立操作条；移动端隐藏内嵌卡片，呈现底部独立胶囊条 */
@media (min-width: 900px) {
  .gallery-card.gallery-more-card {
    display: flex !important;
  }
  .category-section-bottom-action {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .gallery-card.gallery-more-card {
    display: none !important;
  }
  .category-section-bottom-action {
    display: flex !important;
  }
}

.gallery-card {
  height: var(--target-row-height, 320px);
  flex-grow: calc(var(--aspect-ratio) * 100);
  flex-basis: min(calc(var(--target-row-height, 320px) * var(--aspect-ratio)), 100%);
  min-width: 0;
  max-width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  outline: none;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

/* 保护非超长图在成行时不被过度拉伸撑满整屏 */
.gallery-card:not(.is-ultrawide) {
  max-width: min(calc(var(--target-row-height, 320px) * var(--aspect-ratio) * 1.45), 100%);
}

/* 首页总览双行装箱展区：赋予常规画卷 1.65x 弹性拉伸容差，与 MoreCard 协同吸附整行边界，杜绝右侧留白空隙 */
.gallery-overview-section .gallery-card:not(.is-ultrawide) {
  max-width: min(calc(var(--target-row-height, 320px) * var(--aspect-ratio) * 1.65), 100%);
}

/* 超长图（如平陆运河等全景长卷，宽高比 >= 2.5）默认规则 */
.gallery-card.is-ultrawide {
  flex-basis: min(calc(var(--target-row-height, 320px) * var(--aspect-ratio)), 100%);
  max-width: 100%;
}

/* 首页总览宽屏模式下：超长全景图与伴随方图同排并列（约 75% + 25%），左右拉满不留白 */
@media (min-width: 900px) {
  .gallery-overview-section .gallery-card.is-ultrawide {
    flex-basis: min(calc(var(--target-row-height, 320px) * var(--aspect-ratio) * 0.72), calc(100% - 280px));
    max-width: calc(100% - 220px);
    flex-grow: 360;
  }
}

/* 首页总览在两行装箱完毕后，移除多余 flex 占位伪元素，杜绝右侧死白 */
.gallery-overview-section .masonry-grid::after {
  display: none !important;
}

/* 分类全景页或单视图网格尾部兜底伪元素 */
.subview-unified-section .masonry-grid::after {
  content: '';
  flex-grow: 999999;
  min-width: 60px;
  height: 0;
  pointer-events: none;
}
/* 彻底清除 translateY(-5px) 物理位移，100% 根绝边界 Hover 抖动与频闪死循环 */
.gallery-card:hover,
.gallery-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(var(--accent-rgb, 128, 204, 40), 0.16);
  transform: none;
}
:root[data-theme="light"] .gallery-card:hover,
:root[data-theme="light"] .gallery-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(106, 168, 32, 0.22);
}
.gallery-card:active {
  transform: scale(0.992);
}
.card-media {
  width: 100%;
  height: 100%;
  background: var(--card-media-bg);
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-md, 8px) - 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease;
}
.card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: calc(var(--radius-md, 8px) - 1px);
  transform: scale(1.0);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  will-change: transform;
  backface-visibility: hidden;
  opacity: 0;
}
.card-img.loaded {
  opacity: 1;
}
.gallery-card:hover .card-img {
  transform: scale(1.06);
}

/* Micro-Tile Canvas (高分屏 2K/4K 瓦片点对点高精图层) */
.card-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-md, 8px) - 1px);
  transform: scale(1.0);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
  will-change: transform;
  backface-visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.card-canvas.loaded {
  opacity: 1;
}

.gallery-card:hover .card-canvas {
  transform: scale(1.06);
}

/* NEW 胶囊徽标 (近 3 个月新作标识) */
.card-new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 9999px;
  background: rgba(11, 13, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(128, 204, 40, 0.45);
  color: var(--accent, #80cc28);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(128, 204, 40, 0.2);
  pointer-events: none;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.gallery-card:hover .card-new-badge {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(128, 204, 40, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(128, 204, 40, 0.35);
}

.card-new-badge .badge-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  fill: currentColor;
  filter: drop-shadow(0 0 2px rgba(128, 204, 40, 0.5));
}

:root[data-theme="light"] .card-new-badge {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(106, 168, 32, 0.48);
  color: #4f8016;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 8px rgba(106, 168, 32, 0.18);
}

:root[data-theme="light"] .gallery-card:hover .card-new-badge {
  border-color: rgba(106, 168, 32, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 12px rgba(106, 168, 32, 0.28);
}

:root[data-theme="light"] .card-new-badge .badge-icon {
  filter: drop-shadow(0 0 2px rgba(106, 168, 32, 0.4));
}

@media (max-width: 640px) {
  .card-new-badge {
    top: 8px;
    right: 8px;
    padding: 2.5px 7px 2.5px 5.5px;
    font-size: 0.62rem;
  }
  .card-new-badge .badge-icon {
    width: 9px;
    height: 9px;
  }
}


/* 首页无缝拼贴专属卡片：纯净最大化展示图片，无任何文字和阴影遮挡 */
.portal-seamless-card {
  border-radius: 0 !important;
  overflow: hidden !important;
}
.portal-seamless-card .card-media {
  border-radius: 0 !important;
}
.portal-seamless-card .card-img {
  border-radius: 0 !important;
  transform: none !important;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.portal-seamless-card:hover .card-img {
  transform: none !important;
  filter: brightness(1.07) contrast(1.03);
}
/* Gradient Scrim Mask on Image (图片上的平滑渐变蒙版与标题排版) */
.card-scrim-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 32%;
  padding: 48px 16px 20px 16px;
  background: linear-gradient(
    to top,
    rgba(8, 10, 14, 0.45) 0%,
    rgba(8, 10, 14, 0.22) 40%,
    rgba(8, 10, 14, 0.05) 75%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  transition: background 0.38s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

:root[data-theme="light"] .card-scrim-mask {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.25) 40%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 100%
  );
}

.gallery-card:hover .card-scrim-mask {
  min-height: 38%;
  background: linear-gradient(
    to top,
    rgba(6, 8, 11, 0.78) 0%,
    rgba(6, 8, 11, 0.52) 42%,
    rgba(6, 8, 11, 0.18) 78%,
    transparent 100%
  );
}

:root[data-theme="light"] .gallery-card:hover .card-scrim-mask {
  min-height: 38%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.58) 42%,
    rgba(255, 255, 255, 0.18) 78%,
    transparent 100%
  );
}

.card-scrim-content {
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.gallery-card:hover .card-scrim-content {
  transform: translateY(-3px);
}

.card-title {
  font-family: var(--font-sans);
  font-size: 1.0rem;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.015em;
  transition: color 0.25s ease;
}

.gallery-card:hover .card-title {
  transform: none;
}

:root[data-theme="light"] .card-title {
  color: #0f141c;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.9);
}

.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  position: relative;
  min-height: 24px;
  opacity: 0.88;
  transform: none;
  transition: opacity 0.25s ease;
}

.gallery-card:hover .card-meta-row {
  opacity: 1;
  transform: none;
}

:root[data-theme="light"] .card-meta-row {
  color: #3d4654;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  height: 22px;
  max-height: 22px;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1;
}

/* 卡片正中央【点击查看详图】高质感微晶毛玻璃胶囊（去 AI 廉价感，居中醒目呈现） */
.card-center-action {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-center-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px 8px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: rgba(14, 18, 25, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(var(--accent-rgb, 198, 160, 82), 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}

.card-center-icon {
  width: 14px;
  height: 14px;
  stroke: var(--accent, #e5c07b);
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

:root[data-theme="light"] .card-center-btn {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: #111827;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 14px rgba(80, 140, 20, 0.18);
}

:root[data-theme="light"] .card-center-icon {
  stroke: var(--accent, #3b6b13);
}

/* 仅在具备精准指针与悬停支持的设备触发，规避移动端触屏双击 Bug */
@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover .card-center-action,
  .gallery-card:focus-visible .card-center-action {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }

  .gallery-card:hover .card-center-icon {
    transform: scale(1.1);
  }
}

/* 键盘 Tab 聚焦 */
.gallery-card:focus-visible .card-center-action {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* 触控与点击反馈：纯中心微缩放，杜绝边缘跳位 */
.gallery-card:active {
  transform: scale(0.992);
}

.tag-pill {
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 6px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.70rem;
  line-height: 1.2;
  flex-shrink: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.tag-pill-secondary {
  display: inline-block;
  opacity: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover .tag-pill-secondary {
  opacity: 1;
  max-width: 160px;
  padding: 2px 6px;
  border-width: 1px;
}

:root[data-theme="light"] .tag-pill {
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: #0f141c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Mobile Responsive Overlays for Gallery Cards (移动端专属字号与紧凑贴底排版) */
@media (max-width: 768px) {
  .card-scrim-mask {
    padding: 28px 12px 10px 12px;
    min-height: 34%;
  }
  .card-title {
    font-size: 0.82rem;
    line-height: 1.25;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
  }
  .card-meta-row {
    min-height: 20px;
  }
  .card-tags {
    height: 20px;
    max-height: 20px;
  }
  .tag-pill {
    padding: 1.5px 5px;
    font-size: 0.60rem;
    line-height: 1.2;
  }
  .card-action-hint {
    padding: 2px 7px;
    font-size: 0.58rem;
  }
  .card-new-badge {
    font-size: 0.60rem;
    padding: 2px 6px;
  }
  .gallery-card:hover .card-scrim-mask {
    min-height: 36%;
  }
  .gallery-card:hover .card-scrim-content {
    transform: none;
  }
  .gallery-card:hover .card-title {
    transform: none;
  }
}

@media (max-width: 540px) {
  .card-scrim-mask {
    padding: 22px 10px 8px 10px;
    min-height: 38%;
  }
  .card-title {
    font-size: 0.74rem;
    line-height: 1.2;
    margin-bottom: 3px;
  }
  .card-meta-row {
    min-height: 18px;
  }
  .card-tags {
    height: 17px;
    max-height: 17px;
    gap: 3.5px;
  }
  .tag-pill {
    padding: 1px 4px;
    font-size: 0.55rem;
    border-radius: 3px;
  }
  .card-action-hint {
    padding: 1.5px 5px;
    font-size: 0.54rem;
  }
  .card-new-badge {
    font-size: 0.54rem;
    padding: 1.5px 5px;
  }
}

/* Deep Zoom Modal */
html.viewer-open,
body.viewer-open,
html.viewer-preopen,
body.viewer-preopen,
html:has(.viewer-modal.open),
body:has(.viewer-modal.open),
html:has(.about-modal.open),
body:has(.about-modal.open) {
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}

.viewer-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  background-color: #07080b;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s;
}
:root[data-theme="light"] .viewer-modal {
  background-color: #f0f2f6;
}
.viewer-modal.open,
html.viewer-preopen .viewer-modal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}
html.viewer-preopen .viewer-modal {
  transition: none !important;
}
html.viewer-preopen .gallery-main,
html.viewer-preopen .page-anchor-spine,
html.viewer-preopen .gallery-subbar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.viewer-modal:not(.open):not(:where(html.viewer-preopen *)) * {
  pointer-events: none !important;
}
.viewer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(16px);
}
.viewer-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  z-index: 1;
}

/* -------------------------------------------------------------
   Top-Left Floating Artwork & Brand Badge (方案3：去除底板 · 极简通透烙印风)
   ------------------------------------------------------------- */
.viewer-artwork-badge {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: flex-start;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  user-select: none;
  pointer-events: auto;
  transition: opacity 0.25s ease;
  max-width: calc(100vw - 165px);
}

.viewer-artwork-badge:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none;
}

/* 纯粹双行元数据容器 (图名 + 铭牌) */
.viewer-artwork-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(6px, 0.5vw, 8px);
  min-width: 0;
}

/* 第一行：地图名高穿透亚像素微米贴骨方案 (Subpixel Hairline Precision)
   - 纯白字芯 + 0.35px 极薄深炭微描边，彻底解决白底高反光地形下文字吞没
   - 1.5px 紧致微贴骨阴影，坚决杜绝大半径模糊导致的上下矩形生硬黑带
   - 响应式流体字号 clamp(1.05rem, 0.92rem + 0.6vw, 1.45rem)，4K/2K屏幕饱满自适应
   - 右侧边缘渐变自然消融蒙版，超长图名优雅淡出，防撞右上角操作栏 */
.viewer-artwork-title {
  position: relative;
  z-index: 2;
  font-size: clamp(1.05rem, 0.92rem + 0.6vw, 1.45rem);
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  max-width: min(clamp(280px, 26vw, 520px), calc(100vw - 220px));
  line-height: 1.25;
  -webkit-text-stroke: 0.35px rgba(15, 23, 42, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  mask-image: linear-gradient(to right, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 86%, transparent 100%);
  transition: opacity 0.25s ease;
  user-select: none;
}

/* 第二行：QMapFlow 机械沉池角标系列 (赛车珐琅分级点缀铭牌) */
.viewer-artwork-qmapflow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(32px, 2.2vw, 36px);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  /* 严格锚定左上角：放大时严格向右、向下延展，物理杜绝向上遮挡图名 */
  transform-origin: left top;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), filter 0.22s ease;
  user-select: none;
  align-self: flex-start;
}

.viewer-artwork-qmapflow:hover {
  background: transparent;
  /* 向下微沉 1px 展开 1.08 倍：上边缘保持在图名安全线下方，绝不发生叠压 */
  transform: translateY(1px) scale(1.08);
  filter: brightness(1.08) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.42));
}

.viewer-artwork-qmapflow:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

.viewer-artwork-qmapflow svg,
.viewer-qmapflow-img {
  height: clamp(32px, 2.2vw, 36px);
  width: auto;
  display: block;
  filter: drop-shadow(0 2.5px 6px rgba(0, 0, 0, 0.24));
  transition: filter 0.2s ease;
}

:root[data-theme="light"] .viewer-artwork-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .viewer-artwork-badge:hover {
  background: transparent !important;
  border-color: transparent !important;
}

/* 移动端竖屏 (Portrait) */
@media (max-width: 768px) and (orientation: portrait) {
  .viewer-artwork-badge {
    top: 14px;
    left: 14px;
    padding: 0 !important;
    max-width: calc(100vw - 160px);
  }
  .viewer-artwork-title {
    font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem);
    max-width: calc(100vw - 160px);
    /* 彻底杜绝 iOS/iPhone 苹方矢量字体内置笔画组件被 -webkit-text-stroke 拆碎的 Bug */
    -webkit-text-stroke: 0 !important;
    text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 0 1px rgba(15, 23, 42, 0.90) !important;
  }
  .viewer-artwork-qmapflow {
    height: 24px;
    padding: 0;
  }
  .viewer-artwork-qmapflow svg,
  .viewer-qmapflow-img {
    height: 24px;
    filter: drop-shadow(0 1.5px 4px rgba(0, 0, 0, 0.22));
  }
}

/* 手机横屏 (Landscape · 垂直高度受限 <= 480px) */
@media (max-height: 480px) and (orientation: landscape) {
  .viewer-artwork-badge {
    top: 10px;
    left: 14px;
    padding: 0 !important;
    max-width: calc(100vw - 180px);
  }
  .viewer-artwork-meta {
    flex-direction: row; /* 水平并列，释放垂直视窗给地图 */
    align-items: center;
    gap: 10px;
  }
  .viewer-artwork-title {
    font-size: 0.88rem;
    max-width: 280px;
    line-height: 1;
    -webkit-text-stroke: 0 !important;
    text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 0 1px rgba(15, 23, 42, 0.90) !important;
  }
  .viewer-artwork-qmapflow {
    height: 26px;
    padding: 0;
  }
  .viewer-artwork-qmapflow svg,
  .viewer-qmapflow-img {
    height: 26px;
    filter: drop-shadow(0 1.5px 4px rgba(0, 0, 0, 0.22));
  }
}

.viewer-topbar,
.viewer-header {
  height: 56px;
  padding: 0 20px;
  background: rgba(19, 23, 30, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: var(--theme-transition);
  z-index: 20;
}

:root[data-theme="light"] .viewer-topbar,
:root[data-theme="light"] .viewer-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.viewer-header-left,
.viewer-header-right,
.viewer-title-box,
.viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.viewer-title {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1;
  transition: color 0.25s ease;
}

.nav-btn,
.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-btn:hover,
.icon-btn:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

:root[data-theme="light"] .nav-btn:hover,
:root[data-theme="light"] .icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.09);
  color: #0f141c;
}

.nav-btn.active,
.icon-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: var(--accent-subtle);
}

.divider {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
  margin: 0 4px;
}

:root[data-theme="light"] .divider {
  background: rgba(0, 0, 0, 0.09);
}
.viewer-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
}

/* 分享菜单激活时的视口聚光灯暗化与微模糊蒙版 */
.viewer-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.viewer-modal.share-focus-active .viewer-body::after {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* =====================================================================
   Immersive Ambient Backdrop · 视口画板高斯模糊渐变背景 (自适应画作本体调性)
   ==================================================================== */
.viewer-ambient-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: var(--viewer-ambient-gradient, linear-gradient(135deg, #12141a 0%, #0c0d12 50%, #07080b 100%));
  transition: background 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .viewer-ambient-backdrop {
  background: var(--viewer-ambient-gradient-light, linear-gradient(135deg, #fafbfc 0%, #f0f2f5 50%, #e4e7eb 100%));
}

.viewer-ambient-backdrop.artwork-light {
  background: var(--viewer-ambient-gradient, linear-gradient(135deg, #fafbfc 0%, #f0f2f5 50%, #e4e7eb 100%));
}

:root[data-theme="light"] .viewer-ambient-backdrop.artwork-light {
  background: var(--viewer-ambient-gradient-light, linear-gradient(135deg, #ffffff 0%, #f4f6f9 50%, #e9ecf2 100%));
}

.ambient-glow-layer {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(65px) saturate(140%) brightness(0.82);
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s ease-out;
  will-change: opacity, transform;
}

.ambient-glow-layer.active {
  opacity: 0.52;
  transform: scale(1);
}

/* 浅色底画作 (如宣纸米色) 适配微调 */
.viewer-ambient-backdrop.artwork-light .ambient-glow-layer {
  filter: blur(65px) saturate(118%) brightness(1.02);
}

.viewer-ambient-backdrop.artwork-light .ambient-glow-layer.active {
  opacity: 0.45;
}

.ambient-mesh-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.85s ease;
  pointer-events: none;
}

.ambient-mesh-layer.active {
  opacity: 0.65;
}

/* Subtle ambient scrim for depth and toolbar contrast */
.ambient-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02) 40%, rgba(0, 0, 0, 0.38) 100%);
  pointer-events: none;
  transition: background 0.6s ease;
}

:root[data-theme="light"] .ambient-scrim {
  background: 
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.20) 30%, rgba(220, 228, 238, 0.65) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.30) 0%, rgba(235, 240, 248, 0.55) 100%);
}

.viewer-ambient-backdrop.artwork-light .ambient-scrim {
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.01) 40%, rgba(0, 0, 0, 0.12) 100%);
}

:root[data-theme="light"] .viewer-ambient-backdrop.artwork-light .ambient-scrim {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 40%, rgba(230, 236, 245, 0.45) 100%);
}

.osd-stage {
  flex: 1;
  width: 100%;
  height: 100%;
  background: transparent !important;
  position: relative;
  z-index: 1;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.osd-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--stage-thumb, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--stage-thumb-opacity, 0);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}
.osd-stage:active {
  cursor: grabbing;
}

/* 4K Ultra-HD Tile Loading Center HUD (Lottie Driven, 5x Size, Transparent) */
.viewer-hd-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s;
}

.viewer-hd-loader.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.viewer-hd-loader-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.viewer-hd-loader-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ==========================================================================
   Liquid Glass Torus HUD (方案一：旋转液态玻璃环 HUD)
   基于 Snell's Law 光学折射、色散、多层 3D 浮雕与液态流光水波
   ========================================================================== */
.liquid-glass-torus-container {
  width: 88px;
  height: 88px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: liquidGlassBreathe 2.8s ease-in-out infinite;
}

.liquid-glass-torus {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  transform: translateZ(0);
  will-change: transform;
}

/* 1. 真实物理光学折射底衬 (Snell's Law + 斯涅尔色散) */
.liquid-glass-torus-refract {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px, #000 41px, transparent 42px);
  mask: radial-gradient(circle, transparent 23px, #000 24px, #000 41px, transparent 42px);
  backdrop-filter: url(#liquid-glass-refract-filter) blur(0.5px) saturate(190%) contrast(108%);
  -webkit-backdrop-filter: blur(0.5px) saturate(190%) contrast(108%);
  opacity: 0.96;
}

/* 2. 液态次表面散射与微晶磨砂本体 */
.liquid-glass-torus-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24.5px, #000 40.5px, transparent 42px);
  mask: radial-gradient(circle, transparent 23px, #000 24.5px, #000 40.5px, transparent 42px);
  backdrop-filter: blur(6px) saturate(220%) brightness(1.10);
  -webkit-backdrop-filter: blur(6px) saturate(220%) brightness(1.10);
  background: radial-gradient(circle, transparent 22px, rgba(128, 204, 40, 0.08) 32px, rgba(255, 255, 255, 0.08) 38px, transparent 42px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* 3. 顺时针旋转流光水波扫掠 (Spinning Caustic Arc) */
.liquid-glass-torus-caustic {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px, #000 41px, transparent 42px);
  mask: radial-gradient(circle, transparent 23px, #000 24px, #000 41px, transparent 42px);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 140deg,
    rgba(255, 255, 255, 0.05) 180deg,
    rgba(255, 255, 255, 0.28) 270deg,
    rgba(255, 255, 255, 0.95) 345deg,
    var(--accent, #80cc28) 358deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(128, 204, 40, 0.55));
  animation: liquidGlassCausticSpin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 4. 双层高精微雕 3D 浮雕高光 (Inner & Outer Bevel Rims) */
.liquid-glass-torus-rims {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  border: 1.2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 
    inset 0 1.5px 3px rgba(255, 255, 255, 0.75),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(128, 204, 40, 0.25);
}

.liquid-glass-torus-rims::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, 0.40);
  box-shadow: 
    0 1px 2px rgba(255, 255, 255, 0.60),
    inset 0 1px 2px rgba(0, 0, 0, 0.40);
}

/* 5. 晶亮水滴高光核 (Droplet Nucleus / Leading Edge Sparkle) */
.liquid-glass-torus-nucleus {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: liquidGlassCausticSpin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.liquid-glass-torus-nucleus::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 32%, var(--accent, #80cc28) 72%, transparent 100%);
  box-shadow: 
    0 0 12px #ffffff,
    0 0 20px var(--accent, #80cc28),
    0 0 30px rgba(128, 204, 40, 0.85);
  filter: brightness(1.25);
}

/* 6. 中央光学通透孔径 (Core Viewport) */
.liquid-glass-torus-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  pointer-events: none;
  background: transparent;
}

@keyframes liquidGlassCausticSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes liquidGlassBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

.viewer-hd-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.viewer-hd-loader-title {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 0.90rem;
  font-weight: 500;
  color: #f8fafc;
  letter-spacing: 0.08em;
  white-space: nowrap;
  line-height: 1.3;
  margin-top: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.6);
}

.viewer-hd-loader-subtitle {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 0.74rem;
  color: #cbd5e1;
  margin-top: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .viewer-hd-loader-icon {
    width: 74px;
    height: 74px;
  }
  .liquid-glass-torus-container {
    width: 74px;
    height: 74px;
  }
  .liquid-glass-torus {
    width: 72px;
    height: 72px;
  }
  .liquid-glass-torus-refract,
  .liquid-glass-torus-body,
  .liquid-glass-torus-caustic {
    -webkit-mask: radial-gradient(circle, transparent 19px, #000 20px, #000 35px, transparent 36px);
    mask: radial-gradient(circle, transparent 19px, #000 20px, #000 35px, transparent 36px);
  }
  .liquid-glass-torus-rims::after,
  .liquid-glass-torus-core {
    width: 38px;
    height: 38px;
  }
  .liquid-glass-torus-nucleus::after {
    top: 1px;
    width: 15px;
    height: 15px;
  }
  .viewer-hd-loader-title {
    font-size: 0.82rem;
    margin-top: 6px;
  }
  .viewer-hd-loader-subtitle {
    font-size: 0.68rem;
  }
}

/* Top Slim Shimmer Progress Bar for 4K Tile Loading */
.viewer-tile-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, #ecbc5e 0%, #80cc28 45%, #ffffff 75%, #ecbc5e 100%);
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.35s ease;
}
.viewer-tile-progress.active {
  opacity: 0.95;
  animation: tileProgressShimmer 1.1s infinite linear;
}
@keyframes tileProgressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.viewer-float-toolbar,
.viewer-floating-toolbar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16, 22, 32, 0.50);
  backdrop-filter: blur(28px) saturate(280%) brightness(1.22) contrast(105%);
  -webkit-backdrop-filter: blur(28px) saturate(280%) brightness(1.22) contrast(105%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.30);
  padding: 5px 8px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.28),
    inset -1px -1px 2px 0 rgba(0, 0, 0, 0.40),
    0 4px 18px -2px rgba(0, 0, 0, 0.30);
  z-index: 20;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  will-change: transform;
}

/* 移除多余伪元素，与 03 胶囊保持纯净单层一致 */
.viewer-float-toolbar::before,
.viewer-floating-toolbar::before {
  display: none !important;
}

/* 当缩放比例或分享弹出层打开时，将浮动底栏的层叠上下文提权至 35 */
.viewer-float-toolbar:has(#zoomPopover.open),
.viewer-float-toolbar:has(#sharePopover.open),
.viewer-float-toolbar.popover-open,
.viewer-floating-toolbar:has(#zoomPopover.open),
.viewer-floating-toolbar:has(#sharePopover.open),
.viewer-floating-toolbar.popover-open {
  z-index: 35 !important;
}

/* 桌面端专属增强：液态流光悬浮、高透张力微反射 */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .viewer-float-toolbar:hover,
  .viewer-floating-toolbar:hover {
    transform: translateX(-50%);
    border-color: rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.42);
    box-shadow: 
      inset 1.2px 1.5px 2.5px 0 rgba(255, 255, 255, 0.35),
      inset -1px -1px 2px 0 rgba(0, 0, 0, 0.45),
      0 8px 24px -3px rgba(0, 0, 0, 0.36);
  }
}

:root[data-theme="light"] .viewer-float-toolbar,
:root[data-theme="light"] .viewer-floating-toolbar {
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(28px) saturate(220%) brightness(1.06) contrast(100%);
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(1.06) contrast(100%);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.90),
    inset -1px -1px 1.5px 0 rgba(0, 0, 0, 0.05),
    0 4px 18px -2px rgba(0, 0, 0, 0.07);
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  :root[data-theme="light"] .viewer-float-toolbar:hover,
  :root[data-theme="light"] .viewer-floating-toolbar:hover {
    transform: translateX(-50%);
    border-color: rgba(255, 255, 255, 0.88);
    border-top-color: #ffffff;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 
      inset 1.2px 1.5px 2.5px 0 rgba(255, 255, 255, 1),
      inset -1px -1px 1.5px 0 rgba(0, 0, 0, 0.08),
      0 8px 22px -3px rgba(0, 0, 0, 0.10);
  }
}

.tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  will-change: transform;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool-btn .icon,
.tool-btn .tool-btn-text,
.tool-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              stroke-width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              stroke 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tool-btn:hover {
    background: var(--bg-surface-elevated);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.3);
  }

  :root[data-theme="light"] .tool-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #0f141c;
    border-color: rgba(0, 0, 0, 0.08);
  }
}

:root[data-theme="light"] .tool-btn {
  color: #3d4654;
}

/* -------------------------------------------------------------
   底部悬浮工具栏专属图标进化（方案 B · 纯净极简实体）：
   - 彻底去除任何 blur 光晕（0 光晕、0 模糊，彻底杜绝散光与幻视感）；
   - 基础尺寸由 16px 升级放大至 21px（彻底消除鼠标指针遮挡问题）；
   - 悬停跃变纯净高对比绿色（深色模式 #80cc28，浅色模式 #529c14）；
   - 矢量描边由 1.9px 饱满加粗至 2.5px；
   - 激活状态常驻高反差绿；
   - 配合 3D 空间立体磁吸大倾角与放大。
   ------------------------------------------------------------- */
.viewer-floating-toolbar .tool-btn,
.viewer-float-toolbar .tool-btn {
  width: 38px;
  height: 38px;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform-style: preserve-3d;
  color: #f8fafc !important;
}

.viewer-floating-toolbar .tool-btn .icon,
.viewer-float-toolbar .tool-btn .icon {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 2.15px !important;
  stroke: currentColor;
  filter: none !important; /* 纯粹极简实体流：全面消除 drop-shadow，确保矢量线条极清锐利 */
  transition: stroke-width 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              stroke 0.2s ease,
              color 0.2s ease;
}

/* 底栏嵌入式上/下一卷切换按钮：全端开启（桌面端与移动端统一作为核心导航中枢） */
.viewer-floating-toolbar .nav-artwork-btn {
  display: inline-flex;
}

/* 鼠标设备悬停动效：仅在具备真实鼠标指针的桌面端生效 */
@media (hover: hover) and (pointer: fine) {
  .viewer-floating-toolbar .tool-btn:hover,
  .viewer-float-toolbar .tool-btn:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #80cc28 !important;
    filter: none !important; /* 彻底去除 drop-shadow 模糊光晕，杜绝散光与幻视 */
  }

  .viewer-floating-toolbar .tool-btn:hover .icon,
  .viewer-float-toolbar .tool-btn:hover .icon {
    stroke: #80cc28 !important;
    stroke-width: 2.5px !important;
    filter: none !important;
  }

  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:hover,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #529c14 !important; /* 浅色模式下采用对比度更高的翡翠绿，绝不发飘 */
    filter: none !important;
  }

  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:hover .icon,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:hover .icon {
    stroke: #529c14 !important;
    stroke-width: 2.5px !important;
    filter: none !important;
  }
}

:root[data-theme="light"] .viewer-floating-toolbar .tool-btn,
:root[data-theme="light"] .viewer-float-toolbar .tool-btn {
  color: #1e293b !important;
}

:root[data-theme="light"] .viewer-floating-toolbar .tool-btn .icon,
:root[data-theme="light"] .viewer-float-toolbar .tool-btn .icon {
  filter: none !important;
}

/* 触屏与移动设备：彻底消除 Sticky Hover 与持久 Focus 导致的图标常亮绿色与边框白底残留 */
@media (hover: none), (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
  .viewer-floating-toolbar .tool-btn,
  .viewer-float-toolbar .tool-btn,
  .viewer-floating-toolbar .nav-artwork-btn,
  .viewer-float-toolbar .nav-artwork-btn,
  .viewer-floating-toolbar .tool-btn:not(.active):hover,
  .viewer-float-toolbar .tool-btn:not(.active):hover,
  .viewer-floating-toolbar .tool-btn:not(.active):focus,
  .viewer-float-toolbar .tool-btn:not(.active):focus,
  .viewer-floating-toolbar .tool-btn:not(.active):focus-visible,
  .viewer-float-toolbar .tool-btn:not(.active):focus-visible,
  .viewer-floating-toolbar .nav-artwork-btn:hover,
  .viewer-float-toolbar .nav-artwork-btn:hover,
  .viewer-floating-toolbar .nav-artwork-btn:focus,
  .viewer-float-toolbar .nav-artwork-btn:focus,
  .viewer-floating-toolbar .nav-artwork-btn:focus-visible,
  .viewer-float-toolbar .nav-artwork-btn:focus-visible {
    color: #f8fafc !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .viewer-floating-toolbar .tool-btn:not(.active):hover .icon,
  .viewer-float-toolbar .tool-btn:not(.active):hover .icon,
  .viewer-floating-toolbar .tool-btn:not(.active):focus .icon,
  .viewer-float-toolbar .tool-btn:not(.active):focus .icon,
  .viewer-floating-toolbar .tool-btn:not(.active):focus-visible .icon,
  .viewer-float-toolbar .tool-btn:not(.active):focus-visible .icon,
  .viewer-floating-toolbar .nav-artwork-btn:hover .icon,
  .viewer-float-toolbar .nav-artwork-btn:hover .icon,
  .viewer-floating-toolbar .nav-artwork-btn:focus .icon,
  .viewer-float-toolbar .nav-artwork-btn:focus .icon,
  .viewer-floating-toolbar .nav-artwork-btn:focus-visible .icon,
  .viewer-float-toolbar .nav-artwork-btn:focus-visible .icon {
    stroke: currentColor !important;
    stroke-width: 2.15px !important;
    filter: none !important;
  }

  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn,
  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:not(.active):hover,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:not(.active):hover,
  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:not(.active):focus,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:not(.active):focus,
  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:not(.active):focus-visible,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:not(.active):focus-visible,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:hover,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:hover,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:focus,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:focus,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:focus-visible,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:focus-visible {
    color: #1e293b !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:not(.active):hover .icon,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:not(.active):hover .icon,
  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:not(.active):focus .icon,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:not(.active):focus .icon,
  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:not(.active):focus-visible .icon,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:not(.active):focus-visible .icon,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:hover .icon,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:hover .icon,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:focus .icon,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:focus .icon,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:focus-visible .icon,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:focus-visible .icon {
    stroke: currentColor !important;
    stroke-width: 1.9px !important;
  }

  /* 触控按下 (:active) 瞬时给予灵动的高亮与微缩反馈，手指离开即刻恢复，绝不常亮 */
  .viewer-floating-toolbar .tool-btn:active,
  .viewer-float-toolbar .tool-btn:active,
  .viewer-floating-toolbar .nav-artwork-btn:active,
  .viewer-float-toolbar .nav-artwork-btn:active {
    color: #80cc28 !important;
    transform: scale(0.88) !important;
  }

  .viewer-floating-toolbar .tool-btn:active .icon,
  .viewer-float-toolbar .tool-btn:active .icon,
  .viewer-floating-toolbar .nav-artwork-btn:active .icon,
  .viewer-float-toolbar .nav-artwork-btn:active .icon {
    stroke: #80cc28 !important;
    stroke-width: 2.4px !important;
  }

  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:active,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:active,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:active,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:active {
    color: #529c14 !important;
  }

  :root[data-theme="light"] .viewer-floating-toolbar .tool-btn:active .icon,
  :root[data-theme="light"] .viewer-float-toolbar .tool-btn:active .icon,
  :root[data-theme="light"] .viewer-floating-toolbar .nav-artwork-btn:active .icon,
  :root[data-theme="light"] .viewer-float-toolbar .nav-artwork-btn:active .icon {
    stroke: #529c14 !important;
  }
}

/* 激活状态（如打开信息悬浮窗、打开分享二级菜单）：纯净高反差绿，无模糊 */
.viewer-floating-toolbar .tool-btn.active,
.viewer-float-toolbar .tool-btn.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #80cc28 !important;
  filter: none !important;
}

.viewer-floating-toolbar .tool-btn.active .icon,
.viewer-float-toolbar .tool-btn.active .icon {
  stroke: #80cc28 !important;
  stroke-width: 2.3px !important;
  filter: none !important;
}

:root[data-theme="light"] .viewer-floating-toolbar .tool-btn.active,
:root[data-theme="light"] .viewer-float-toolbar .tool-btn.active {
  color: #529c14 !important;
  filter: none !important;
}

:root[data-theme="light"] .viewer-floating-toolbar .tool-btn.active .icon,
:root[data-theme="light"] .viewer-float-toolbar .tool-btn.active .icon {
  stroke: #529c14 !important;
  stroke-width: 2.3px !important;
  filter: none !important;
}

/* -------------------------------------------------------------
   高质感毛玻璃微胶囊浮动气泡提示 (Custom Frosted-Glass Tooltip)
   ------------------------------------------------------------- */
.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  background: rgba(14, 18, 25, 0.94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  color: #f8fafc;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.16s ease;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.dock-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 底部三角形定位锚点（指向工具栏触发按钮中轴线） */
.dock-tooltip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(14, 18, 25, 0.94);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateX(-50%) rotate(45deg);
  border-bottom-right-radius: 1px;
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="light"] .dock-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f141c;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .dock-tooltip::after {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: rgba(0, 0, 0, 0.12);
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.dock-tooltip-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  color: #80cc28;
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-width: 14px;
}

:root[data-theme="light"] .dock-tooltip-kbd {
  background: rgba(0, 0, 0, 0.06);
  color: #55931c;
  border-color: rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------------------
   右上角全局操作高质感毛玻璃微胶囊提示 (Top-Right Actions Tooltip)
   ------------------------------------------------------------- */
.top-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 4px 10px;
  background: rgba(14, 18, 25, 0.94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  color: #f8fafc;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.16s ease;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.top-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 顶部朝上的三角形定位锚点（精准指向右上角触发按钮中轴线） */
.top-tooltip::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(14, 18, 25, 0.94);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateX(-50%) rotate(45deg);
  border-top-left-radius: 1px;
  pointer-events: none;
  z-index: 1;
}

:root[data-theme="light"] .top-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f141c;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .top-tooltip::after {
  background: rgba(255, 255, 255, 0.96);
  border-left-color: rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.12);
}

.top-tooltip-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  color: #80cc28;
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-width: 14px;
}

:root[data-theme="light"] .top-tooltip-kbd {
  background: rgba(0, 0, 0, 0.06);
  color: #55931c;
  border-color: rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------------------
   两侧边缘翻卷按钮高质感毛玻璃微胶囊提示 (Edge Nav Tooltips)
   ------------------------------------------------------------- */
.edge-tooltip {
  position: fixed;
  padding: 4px 10px;
  background: rgba(14, 18, 25, 0.94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  color: #f8fafc;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.96);
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.16s ease;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.edge-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

/* 左侧按钮提示：朝左定位锚点（精准指向左侧上一卷圆钮） */
.edge-tooltip-prev::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: rgba(14, 18, 25, 0.94);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(-50%) rotate(45deg);
  border-bottom-left-radius: 1px;
  pointer-events: none;
}

/* 右侧按钮提示：朝右定位锚点（精准指向右侧下一卷圆钮） */
.edge-tooltip-next::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: rgba(14, 18, 25, 0.94);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(-50%) rotate(45deg);
  border-top-right-radius: 1px;
  pointer-events: none;
}

.edge-tooltip-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  color: #80cc28;
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-width: 14px;
}

:root[data-theme="light"] .edge-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f141c;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .edge-tooltip-prev::after {
  background: rgba(255, 255, 255, 0.96);
  border-left-color: rgba(0, 0, 0, 0.12);
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .edge-tooltip-next::after {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .edge-tooltip-kbd {
  background: rgba(0, 0, 0, 0.06);
  color: #55931c;
  border-color: rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------------------
   左上角 QMapFlow 精度徽章毛玻璃微胶囊提示 (QMapFlow Tooltip)
   ------------------------------------------------------------- */
.qmapflow-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  padding: 4px 10px;
  background: rgba(14, 18, 25, 0.94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  color: #f8fafc;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.16s ease;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.qmapflow-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 顶部朝上的三角形定位锚点（指向 QMapFlow 徽标） */
.qmapflow-tooltip::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 18px;
  width: 6px;
  height: 6px;
  background: rgba(14, 18, 25, 0.94);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: rotate(45deg);
  border-top-left-radius: 1px;
  pointer-events: none;
}

:root[data-theme="light"] .qmapflow-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f141c;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .qmapflow-tooltip::after {
  background: rgba(255, 255, 255, 0.96);
  border-left-color: rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .edge-tooltip {
    display: none !important;
  }
}

.tool-btn:active {
  transform: scale(0.90) !important;
  transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool-btn.active {
  background: var(--accent);
  color: #07080b;
}

:root[data-theme="light"] .tool-btn.active {
  background: var(--accent);
  color: #ffffff;
}

.tool-btn.copied {
  color: var(--accent);
}

/* =====================================================================
   Physical Scale Controller & Presets Popover
   ==================================================================== */
.zoom-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tool-zoom-pill {
  position: relative;
  z-index: 2;
  height: 38px;
  display: inline-flex;
  align-items: center;
  background: rgba(10, 14, 20, 0.55);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 9999px;
  padding: 0 4px 0 10px;
  gap: 2px;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.tool-zoom-pill:hover,
.tool-zoom-pill:focus-within {
  background: rgba(10, 14, 20, 0.75);
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.zoom-inline-input {
  width: 38px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
  padding: 0 1px 0 0;
  outline: none;
  margin: 0;
  -moz-appearance: textfield;
  text-shadow: none !important;
}

.zoom-inline-input::-webkit-outer-spin-button,
.zoom-inline-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.zoom-unit {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
  margin-right: 2px;
  pointer-events: none;
  text-shadow: none !important;
}

.zoom-chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  border-radius: 4px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.zoom-chevron-btn .chevron-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoom-popover.open ~ .tool-zoom-pill .chevron-icon,
.tool-zoom-pill.active .chevron-icon {
  transform: rotate(180deg);
}

:root[data-theme="light"] .tool-zoom-pill {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow: none !important;
}

:root[data-theme="light"] .tool-zoom-pill:hover,
:root[data-theme="light"] .tool-zoom-pill:focus-within {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.50);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.20) !important;
}

:root[data-theme="light"] .zoom-inline-input,
:root[data-theme="light"] .zoom-unit,
:root[data-theme="light"] .zoom-chevron-btn {
  color: #244904 !important;
  text-shadow: none !important; /* 彻底清除黑色文字阴影，还原极清锐利字形 */
}

.zoom-popover {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  min-width: 96px;
  background: var(--bg-surface-elevated, #10141d);
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 5px 4px;
  display: none;
  flex-direction: column;
  z-index: 100;
}

/* 底部居中朝下的小锚点尖角（指示器），精准指向缩放胶囊中轴线 */
.zoom-popover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--bg-surface-elevated, #10141d);
  border-right: 1px solid var(--border-medium, rgba(255, 255, 255, 0.14));
  border-bottom: 1px solid var(--border-medium, rgba(255, 255, 255, 0.14));
  transform: translateX(-50%) rotate(45deg);
  border-bottom-right-radius: 1.5px;
  pointer-events: none;
  z-index: 1;
}

.zoom-popover.open {
  display: flex;
  animation: zoomPopoverFade 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomPopoverFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.zoom-presets-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.zoom-preset-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

.zoom-preset-num {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.zoom-preset-item:hover {
  background: var(--bg-surface, rgba(255, 255, 255, 0.08));
}

.zoom-preset-item:hover .zoom-preset-num {
  color: var(--text-primary, #ffffff);
}

.zoom-preset-item.active {
  background: var(--accent-subtle);
}

.zoom-preset-item.active .zoom-preset-num {
  color: var(--accent);
  font-weight: 700;
}

:root[data-theme="light"] .zoom-popover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .zoom-popover::after {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: rgba(0, 0, 0, 0.12);
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .zoom-preset-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .zoom-preset-item:hover .zoom-preset-num {
  color: #0f141c;
}

:root[data-theme="light"] .zoom-preset-item.active .zoom-preset-num {
  color: #436d14;
}

.tool-btn-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: auto;
  border-radius: 9999px;
  padding: 0 12px;
  color: var(--text-primary);
}

.tool-btn-text:hover {
  color: var(--accent);
}

.tool-divider {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
  margin: 0 2px;
}


/* =====================================================================
   Deep Zoom Metadata Drawer → 浮动信息面板 (磨砂玻璃 · 可拖拽 · 可 resize)
   ==================================================================== */
.viewer-drawer,
.viewer-meta-drawer {
  position: absolute;
  top: 80px;
  right: 20px;
  width: 320px;
  height: min(490px, calc(100vh - 180px));
  min-width: 240px;
  min-height: 200px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
  background: rgba(15, 18, 24, 0.82);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94) translateY(-8px);
  transform-origin: top right;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.viewer-drawer.open,
.viewer-meta-drawer.open {
  opacity: 0.8;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

/* 鼠标在悬浮窗悬停，不透明度设置为 90% */
.viewer-drawer.open:hover,
.viewer-meta-drawer.open:hover {
  opacity: 0.9;
}

/* 拖拽/resize 时禁用过渡并保持适度清晰 */
.viewer-drawer.dragging,
.viewer-meta-drawer.dragging {
  opacity: 0.9 !important;
  transition: none !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.70), 0 0 0 2px rgba(var(--accent-rgb), 0.35) !important;
}

/* 浅色模式 */
:root[data-theme="light"] .viewer-drawer,
:root[data-theme="light"] .viewer-meta-drawer {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.drawer-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(19, 23, 30, 0.35);
  cursor: grab;
  flex-shrink: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  gap: 8px;
}

.drawer-header:active {
  cursor: grabbing;
}

:root[data-theme="light"] .drawer-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.45);
}

/* 拖拽手柄三横线 */
.drawer-drag-grip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0.35;
  flex-shrink: 0;
  padding: 2px 0;
  transition: opacity var(--transition-fast);
}
.drawer-header:hover .drawer-drag-grip { opacity: 0.65; }
.drawer-drag-grip span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

.drawer-header h3,
.drawer-header .drawer-title {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-close-btn,
#btnCloseDrawer,
#btnDrawerClose {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50% !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .drawer-close-btn,
:root[data-theme="light"] #btnCloseDrawer,
:root[data-theme="light"] #btnDrawerClose {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.drawer-close-btn:hover,
#btnCloseDrawer:hover,
#btnDrawerClose:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  transform: scale(1.05);
}

.drawer-close-btn:active,
#btnCloseDrawer:active,
#btnDrawerClose:active {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(0.93) !important;
}

:root[data-theme="light"] .drawer-close-btn:hover,
:root[data-theme="light"] #btnCloseDrawer:hover,
:root[data-theme="light"] #btnDrawerClose:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.05);
}

:root[data-theme="light"] .drawer-close-btn:active,
:root[data-theme="light"] #btnCloseDrawer:active,
:root[data-theme="light"] #btnDrawerClose:active {
  background: rgba(0, 0, 0, 0.14) !important;
  transform: scale(0.93) !important;
}

.drawer-content {
  padding: 20px 28px 24px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE / Edge */
}

.drawer-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.drawer-content::-webkit-scrollbar-button,
.drawer-content::-webkit-scrollbar-track,
.drawer-content::-webkit-scrollbar-thumb {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* =====================================================================
   Anchor Navigation Spine · 右侧微型锚点导轨与磁吸流光进度线
   ==================================================================== */
.drawer-anchor-spine {
  position: absolute;
  right: 5px;
  top: 56px;
  bottom: 18px;
  width: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: auto;
  user-select: none;
}

.spine-track {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
}

:root[data-theme="light"] .spine-track {
  background: rgba(0, 0, 0, 0.10);
}

.spine-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  transition: height 0.12s ease-out;
}

.spine-node {
  position: relative;
  background: none;
  border: none;
  padding: 6px 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  z-index: 2;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.spine-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg-surface, #1e2430);
  border: 1.5px solid var(--text-muted);
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .spine-dot {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.32);
}

.spine-node:hover .spine-dot {
  transform: scale(1.35);
  border-color: var(--accent);
  background: var(--accent);
}

.spine-node.active .spine-dot {
  transform: scale(1.4);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Tooltip floating to the left on hover */
.spine-tooltip {
  position: absolute;
  right: calc(100% + 7px);
  padding: 3px 8px;
  font-size: 0.70rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-sm, 4px);
  background: rgba(14, 18, 24, 0.94);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-family: var(--font-sans);
  font-weight: 500;
}

:root[data-theme="light"] .spine-tooltip {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.spine-node:hover .spine-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-item label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.meta-item .value {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  word-break: break-word;
}

.meta-item .value.strong {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.98rem;
}

.meta-item .value.font-mono {
  font-family: var(--font-mono);
  font-size: 0.84rem;
}

.meta-item .value.highlight {
  color: var(--accent);
  font-weight: 600;
}

.meta-desc-text {
  font-size: 0.84rem !important;
  line-height: 1.65 !important;
  color: var(--text-primary) !important;
  background: rgba(128, 204, 40, 0.06);
  border: 1px solid rgba(128, 204, 40, 0.22);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

:root[data-theme="light"] .meta-desc-text {
  background: rgba(106, 168, 32, 0.07);
  border: 1px solid rgba(106, 168, 32, 0.22);
  border-left: 3px solid var(--accent);
  color: var(--text-primary) !important;
}

/* Color Swatches Palette */
.meta-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.meta-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  position: relative;
  outline: none;
}

.meta-swatch:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.meta-swatch.copied {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.meta-swatch-dot {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

:root[data-theme="light"] .meta-swatch-dot {
  border-color: rgba(0, 0, 0, 0.15);
}

/* Metadata Structure & Key-Value Lists */
.meta-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

:root[data-theme="light"] .meta-section-title {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

.meta-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.84rem;
  gap: 12px;
}

.meta-row dt {
  color: var(--text-muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.meta-row dd {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

.meta-desc {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text-primary);
  background: rgba(128, 204, 40, 0.05);
  border: 1px solid rgba(128, 204, 40, 0.2);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

:root[data-theme="light"] .meta-desc {
  background: rgba(106, 168, 32, 0.06);
  border: 1px solid rgba(106, 168, 32, 0.2);
  border-left: 3px solid var(--accent);
  color: var(--text-primary);
}

.meta-desc .meta-desc-h3 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-subtle);
  letter-spacing: 0.02em;
}

.meta-desc .meta-desc-h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  margin: 12px 0 6px 0;
  letter-spacing: 0.02em;
}

.meta-desc .meta-desc-p {
  margin: 0 0 8px 0;
  line-height: 1.7;
  color: var(--text-secondary);
}

.meta-desc .meta-desc-p:last-child {
  margin-bottom: 0;
}

.meta-desc .meta-desc-list {
  padding-left: 18px;
  margin: 0 0 8px 0;
}

.meta-desc .meta-desc-list li {
  margin-bottom: 4px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.meta-desc .meta-desc-list li:last-child {
  margin-bottom: 0;
}

.meta-desc strong {
  color: var(--text-primary);
  font-weight: 600;
}

.meta-desc code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: var(--accent);
}

.meta-desc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


.palette-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* =====================================================================
   Overview Navigator (Refined Human-Crafted) · 左下角高精微晶鹰眼图体系
   ==================================================================== */
.navigator-wrapper {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  /* 纯阴影悬浮体系 (完全去除 1px 边框线，纯粹依靠多层漫反射阴影立体悬浮) */
  box-shadow: var(--nav-wrapper-shadow, 
    0 1px 3px 0 rgba(0, 0, 0, 0.35),
    0 8px 20px -2px rgba(0, 0, 0, 0.50),
    0 20px 44px -4px rgba(0, 0, 0, 0.60));
  border: none !important;
  background: rgba(14, 18, 26, 0.45);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  overflow: visible;
  user-select: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.24s,
              box-shadow 0.28s ease,
              bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom left;
}

.navigator-wrapper:hover {
  box-shadow: var(--nav-wrapper-shadow-hover, 
    0 2px 6px 0 rgba(0, 0, 0, 0.40),
    0 12px 28px -2px rgba(0, 0, 0, 0.55),
    0 28px 56px -4px rgba(0, 0, 0, 0.70));
}

:root[data-theme="light"] .navigator-wrapper {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none !important;
  box-shadow: var(--nav-wrapper-shadow, 
    0 1px 4px 0 rgba(0, 0, 0, 0.12),
    0 8px 22px -2px rgba(0, 0, 0, 0.15),
    0 20px 44px -4px rgba(0, 0, 0, 0.14));
}

:root[data-theme="light"] .navigator-wrapper:hover {
  box-shadow: var(--nav-wrapper-shadow-hover, 
    0 2px 6px 0 rgba(0, 0, 0, 0.14),
    0 12px 28px -2px rgba(0, 0, 0, 0.18),
    0 26px 52px -4px rgba(0, 0, 0, 0.18));
}

/* 鹰眼图折叠隐藏状态 */
.navigator-wrapper.is-collapsed {
  transform: scale(0.9) translateY(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 鼠标在鹰眼图上悬停时显示的提示卡片 (Tooltip: 悬停指引) */
.nav-hover-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  padding: 8px 14px;
  background: rgba(14, 18, 24, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  z-index: 100;
}

.nav-hover-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 22px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(14, 18, 24, 0.92) transparent transparent transparent;
}

:root[data-theme="light"] .nav-hover-tooltip {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .nav-hover-tooltip::after {
  border-color: rgba(255, 255, 255, 0.94) transparent transparent transparent;
}

/* 仅在鼠标悬停或内部元素获得焦点时显示提示卡片 */
.navigator-wrapper:hover .nav-hover-tooltip,
.navigator-wrapper:focus-within .nav-hover-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.nav-tip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}

.nav-tip-title svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.nav-tip-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
}

:root[data-theme="light"] .nav-tip-divider {
  background: rgba(0, 0, 0, 0.15);
}

.nav-tip-action {
  font-size: 11px;
  color: var(--text-secondary);
}

.nav-tip-action strong {
  color: var(--text);
  font-weight: 600;
}

/* 悬停右上角轻量关闭按钮 (悬停时显现) */
.nav-floating-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #d1d7e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  outline: none;
}

.navigator-wrapper:hover .nav-floating-close {
  opacity: 1;
  transform: scale(1);
}

.nav-floating-close:hover {
  background: rgba(220, 38, 38, 0.85);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}

.nav-floating-close svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

/* 触控与平板设备 (iPad 无鼠标悬停)：常驻优雅呈现，扩大触控热区 */
@media (hover: none), (pointer: coarse) {
  .nav-floating-close {
    opacity: 0.92 !important;
    transform: scale(1) !important;
    width: 32px !important;
    height: 32px !important;
    top: 4px !important;
    right: 4px !important;
  }
  .nav-floating-close svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* OpenSeadragon 原生容器 · 纯净悬浮无边框体系 (由外层 .navigator-wrapper 统一承载多层漫反射立体阴影) */
.viewer-navigator,
.navigator {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  cursor: crosshair !important;
}

/* 无论 OSD 注入何种匿名 wrapper，强制绝对定位与满幅贴合，物理杜绝向下方换行挤压 */
.navigator-stage > div:not(.nav-draw-overlay) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

:root[data-theme="light"] .viewer-navigator,
:root[data-theme="light"] .navigator {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
}

.viewer-navigator .openseadragon-container,
.viewer-navigator .openseadragon-canvas {
  background-color: transparent !important;
}

.viewer-navigator canvas,
.navigator canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

/* 显示范围指示框：站点同款主题色 + 纯净精密取景框 (去除一切多余玻璃内影与模糊) */
.displayregion {
  border: 1.5px solid var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.24) !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: move !important;
}

/* 全图显示时自动隐藏显示范围框，还鹰眼底图以纯粹视野 */
.displayregion.is-full-view {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 鹰眼舞台容器 (isolation: isolate 确保反色框局限于容器内，不穿透污染页面) */
.navigator-stage {
  position: relative;
  cursor: crosshair;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
  isolation: isolate;
}

/* 鼠标画框交互透明蒙层 */
.nav-draw-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  cursor: crosshair;
  touch-action: none;
}

/* 绘制过程中的虚线框：高对比度 + 针对地图底图实时光学反色 (mix-blend-mode: difference) */
.nav-draw-box {
  position: absolute;
  display: none;
  box-sizing: border-box;
  mix-blend-mode: difference;
  border: 2px dashed #ffffff;
  background: rgba(255, 255, 255, 0.16);
  filter: drop-shadow(0 0 1px #000000);
  pointer-events: none;
  z-index: 1001;
}

/* 关闭鹰眼图后浮现的液态玻璃胶囊 */
.nav-launcher-wrapper {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 24;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.9) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.28s,
              bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-launcher-wrapper.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

/* 底部液态玻璃胶囊按钮 (高度对齐底栏液态玻璃高透工艺) */
.nav-launcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 9999px;
  background: rgba(16, 22, 32, 0.50);
  backdrop-filter: blur(28px) saturate(280%) brightness(1.22);
  -webkit-backdrop-filter: blur(28px) saturate(280%) brightness(1.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.30);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.28),
    inset -1px -1px 2px 0 rgba(0, 0, 0, 0.40),
    0 4px 18px -2px rgba(0, 0, 0, 0.30);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

:root[data-theme="light"] .nav-launcher-btn {
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(28px) saturate(220%) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  color: var(--text);
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.90),
    inset -1px -1px 1.5px 0 rgba(0, 0, 0, 0.05),
    0 4px 18px -2px rgba(0, 0, 0, 0.07);
}

.nav-launcher-btn svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.nav-launcher-btn:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--text);
  box-shadow: 
    0px 0.8px 1px -1px rgba(0, 0, 0, 0.10),
    0px 3px 4px -2px rgba(0, 0, 0, 0.08),
    0px 12px 16px -3px rgba(0, 0, 0, 0.08),
    0px 22px 42px -5px rgba(0, 0, 0, 0.18),
    0 0 16px rgba(var(--accent-rgb), 0.15);
}

/* 键盘按键标识徽章 */
.kbd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  min-width: 16px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 4px;
  user-select: none;
  letter-spacing: 0.5px;
}

/* 悬停提示气泡 (左对齐液态玻璃风格) */
.launcher-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(14, 18, 24, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  box-shadow: 
    0px 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.28),
    0px 2.3px 2.3px -2.5px rgba(0, 0, 0, 0.25),
    0px 10px 10px -3.75px rgba(0, 0, 0, 0.2),
    0px 16px 32px -4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.launcher-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 22px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(14, 18, 24, 0.88) transparent transparent transparent;
}

:root[data-theme="light"] .launcher-tooltip {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 
    0px 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.08),
    0px 2.3px 2.3px -2.5px rgba(0, 0, 0, 0.06),
    0px 10px 10px -3.75px rgba(0, 0, 0, 0.05),
    0px 16px 32px -4px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .launcher-tooltip::after {
  border-color: rgba(255, 255, 255, 0.92) transparent transparent transparent;
}

/* 仅在鼠标悬停或聚焦在胶囊上时才显示提示框 */
.nav-launcher-wrapper:hover .launcher-tooltip,
.nav-launcher-wrapper:focus-within .launcher-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* 当分享菜单打开时，彻底隐藏鹰眼，避免移动端与窄屏干涉重叠 */
.viewer-modal.share-focus-active .navigator-wrapper,
.viewer-modal.share-focus-active .nav-launcher-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0.92) translateY(6px);
}

/* 当缩放比例弹出层打开时，鹰眼导航窗智能虚化淡出并禁用点击，防止物理与视觉重叠遮挡 */
.viewer-modal:has(#zoomPopover.open) .navigator-wrapper,
.viewer-modal:has(.zoom-popover.open) .navigator-wrapper,
.viewer-modal.zoom-focus-active .navigator-wrapper {
  opacity: 0.12 !important;
  pointer-events: none !important;
  transform: scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ============================================================
   防重叠避让核心规则 (Toolbar Collision Avoidance Strategy)
   1. 宽屏 (> 1080px): 底栏居中，鹰眼图在左下角，水平安全间隙 > 200px，从容共存
   2. 中屏 / 平板 (<= 1080px): 鹰眼图与启动胶囊自动上浮至底栏上方 (bottom: 84px)
   3. 动态守卫类 (.dodge-toolbar): 当 JS 几何碰撞探测判定间隙 < 20px 时强制上浮
   4. 移动端 (<= 768px): 底栏精简宽度，鹰眼图默认折叠为胶囊；展开时优雅浮于底栏上方
   ============================================================ */
@media (max-width: 1080px) {
  .navigator-wrapper,
  .nav-launcher-wrapper {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.navigator-wrapper.dodge-toolbar,
.nav-launcher-wrapper.dodge-toolbar {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 全屏纯沉浸模式隐退 */
.viewer-modal.fullscreen-mode .navigator-wrapper,
.viewer-modal.fullscreen-mode .nav-launcher-wrapper {
  transform: translateY(140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

.viewer-modal.fullscreen-mode.controls-visible .navigator-wrapper:not(.is-collapsed) {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.viewer-modal.fullscreen-mode.controls-visible .nav-launcher-wrapper.is-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ============================================================
   移动端窄屏自适应规范 (UI/UX Pro Max 移动端适配)
   针对手机等 <= 768px 窄屏进行手势、安全区、触控尺寸与视野保护优化
   ============================================================ */
@media (max-width: 768px) {
  /* 移动端安全区偏移与底部避让 (Safe Area Awareness) */
  .navigator-wrapper {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* 移动端微型关闭浮标：右上角轻巧收起 */
  .nav-floating-close {
    display: flex !important;
    opacity: 0.92 !important;
    transform: scale(1) !important;
    width: 22px !important;
    height: 22px !important;
    top: 3px !important;
    right: 3px !important;
  }
  .nav-floating-close svg {
    width: 11px !important;
    height: 11px !important;
  }

  /* 移动端禁用在鹰眼图上的复杂手势画框干扰 */
  .nav-draw-overlay {
    display: none !important;
    pointer-events: none !important;
  }

  /* 移动端隐藏悬停 Tooltip */
  .nav-hover-tooltip {
    display: none !important;
  }

  /* 移动端原生视口框与边框无框微晶化 */
  .viewer-navigator,
  .navigator {
    border: none !important;
    border-radius: inherit !important;
    box-shadow: none !important;
  }

  #viewerNavigator .displayregion,
  .viewer-navigator .displayregion {
    border-width: 1.5px !important;
  }

  /* 移动端测试方式 1：左侧边框吸附折叠微晶耳标 (Edge-Docked Tab · 0px 贴边零遮挡) */
  .nav-launcher-wrapper {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    transform: translateX(0);
  }

  .nav-launcher-btn {
    width: auto !important;
    height: 38px;
    min-height: 38px;
    padding: 0 10px 0 8px !important;
    border-radius: 0 9999px 9999px 0 !important;
    background: rgba(16, 22, 32, 0.50) !important;
    backdrop-filter: blur(24px) saturate(240%) brightness(1.15) !important;
    -webkit-backdrop-filter: blur(24px) saturate(240%) brightness(1.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 
      inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.12),
      2px 4px 14px -1px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease !important;
  }

  :root[data-theme="light"] .nav-launcher-btn {
    background: rgba(255, 255, 255, 0.50) !important;
    backdrop-filter: blur(24px) saturate(200%) brightness(1.06) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    border-left: none !important;
    box-shadow: 
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 0 rgba(0, 0, 0, 0.05),
      2px 4px 12px -1px rgba(0, 0, 0, 0.08) !important;
  }

  .nav-launcher-btn:active {
    transform: scale(0.96) translateX(2px);
  }

  .nav-launcher-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  /* 移动端隐藏文字标签与键盘键标识，杜绝遮挡地图底图信息 */
  .nav-launcher-btn span,
  .nav-launcher-btn .kbd-badge {
    display: none !important;
  }

  /* 提示框在移动端紧凑化 */
  .launcher-tooltip {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* =====================================================================
   Fullscreen Mode (全屏看图模式 · 严密贴合视口 · 稳定工具栏与清晰指标)
   ==================================================================== */
.viewer-modal.fullscreen-mode {
  width: 100% !important;
  height: 100% !important;
  cursor: default !important;
}

.viewer-modal.fullscreen-mode .viewer-container {
  width: 100% !important;
  height: 100% !important;
}

.viewer-modal.fullscreen-mode .viewer-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  z-index: 40 !important;
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  background: rgba(15, 18, 24, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

:root[data-theme="light"] .viewer-modal.fullscreen-mode .viewer-header {
  background: rgba(255, 255, 255, 0.90) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* 鼠标悬停在顶部或靠近顶部时优雅滑出，移开后自动隐去 */
.viewer-modal.fullscreen-mode .viewer-header:hover,
.viewer-modal.fullscreen-mode .viewer-header.peek {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.viewer-modal.fullscreen-mode .viewer-body {
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.viewer-modal.fullscreen-mode .osd-stage {
  width: 100% !important;
  height: 100% !important;
  cursor: grab !important;
}

.viewer-modal.fullscreen-mode .osd-stage:active {
  cursor: grabbing !important;
}

.viewer-modal.fullscreen-mode .viewer-floating-toolbar,
.viewer-modal.fullscreen-mode .viewer-float-toolbar {
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* =====================================================================
   Viewer Edge Navigation (视口左右边缘切换画作按钮)
   ==================================================================== */
.viewer-edge-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(14, 17, 22, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-medium);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.25s ease;
  opacity: 0;
  pointer-events: none;
  outline: none;
}

.viewer-edge-nav.edge-prev {
  left: 20px;
}

.viewer-edge-nav.edge-next {
  right: 20px;
}

/* 方案 A: 信息面板展开时，下一张按钮平滑向左避让推开，保持完全可见且绝不重叠 */
.viewer-modal.drawer-open .viewer-edge-nav.edge-next,
.viewer-container:has(.viewer-meta-drawer.open) .viewer-edge-nav.edge-next {
  right: var(--drawer-offset, 364px);
}

/* 边缘微隐唤出 (Hover-to-Reveal): 鼠标移入屏幕边缘或按键本身时柔和淡入，平时零遮挡画面 */
.viewer-edge-nav.edge-revealed,
.viewer-edge-nav:hover,
.viewer-edge-nav:focus-visible {
  opacity: 0.65;
  pointer-events: auto;
}

.viewer-edge-nav:hover,
.viewer-edge-nav:focus-visible {
  opacity: 1 !important;
  background: rgba(14, 17, 22, 0.94);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

.viewer-edge-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.viewer-edge-nav .icon {
  width: 22px;
  height: 22px;
}

/* Light Theme for Edge Navigation */
:root[data-theme="light"] .viewer-edge-nav {
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: #1e2633;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  opacity: 0;
  pointer-events: none;
}

:root[data-theme="light"] .viewer-edge-nav.edge-revealed,
:root[data-theme="light"] .viewer-edge-nav:hover,
:root[data-theme="light"] .viewer-edge-nav:focus-visible {
  opacity: 0.75;
  pointer-events: auto;
}

:root[data-theme="light"] .viewer-edge-nav:hover,
:root[data-theme="light"] .viewer-edge-nav:focus-visible {
  background: #ffffff;
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1 !important;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.25);
}

/* In Fullscreen Mode: edge nav remains stealth until cursor moves to the edge */
.viewer-modal.fullscreen-mode .viewer-edge-nav {
  opacity: 0;
  pointer-events: none;
}

.viewer-modal.fullscreen-mode .viewer-edge-nav.edge-revealed,
.viewer-modal.fullscreen-mode .viewer-edge-nav:hover,
.viewer-modal.fullscreen-mode .viewer-edge-nav:focus-visible {
  opacity: 0.7;
  pointer-events: auto;
}

.viewer-modal.fullscreen-mode .viewer-edge-nav:hover {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.12) !important;
}

/* -------------------------------------------------------------
   Stealth Digital Watermark & Anti-Theft Security Layer
   ------------------------------------------------------------- */
.stealth-watermark-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 15;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: background-color 0.25s ease;
}

.stealth-watermark-overlay.revealed {
  background: rgba(0, 0, 0, 0.42);
}

.forensic-hud {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: rgba(13, 17, 23, 0.94);
  border: 1px solid rgba(245, 197, 24, 0.55);
  color: #f5c518;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  padding: 6px 18px;
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(245, 197, 24, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  letter-spacing: 0.05em;
  animation: forensicHudGlow 2.2s infinite ease-in-out;
}

@keyframes forensicHudGlow {
  0%, 100% { opacity: 0.96; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.75; transform: translateX(-50%) scale(0.98); }
}

/* Universal Anti-Theft & Gesture Protection: Prevent image drag, touch-callout and unwanted text selection */
img, canvas, .osd-stage, .gallery-card-thumb, .card-media,
.viewer-modal, .viewer-container, .viewer-top-actions, .viewer-header,
.viewer-artwork-badge, .viewer-floating-toolbar, .viewer-edge-nav,
.lang-dropdown-wrapper, .lang-dropdown-btn, .lang-current-label,
.tool-btn, .navigator-body, .viewer-navigator {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* 核心画板手势全权托管：彻底消除移动端浏览器双击选词与系统手势干涉 */
.osd-stage,
.osd-stage canvas,
.openseadragon-container,
.openseadragon-canvas {
  touch-action: none !important;
}

/* 显式保留合法可复制/输入区域 */
.meta-share-url {
  -webkit-user-select: all !important;
  user-select: all !important;
  -webkit-touch-callout: default !important;
}
.zoom-inline-input {
  -webkit-user-select: auto !important;
  user-select: auto !important;
}

/* Anti-Print Protection */
@media print {
  body * {
    visibility: hidden !important;
  }
  body::before {
    content: "《藏锋录 · 空间工造与视觉成果典藏》受数字盲水印与版权保护，严禁翻印或打印商用。";
    visibility: visible !important;
    display: block !important;
    position: fixed;
    top: 45%;
    left: 10%;
    right: 10%;
    text-align: center;
    font-size: 22pt;
    color: #000;
    font-weight: bold;
    font-family: sans-serif;
  }
}

/* =====================================================================
   浮动信息面板 · 8向 Resize 手柄系统
   ==================================================================== */
.drawer-resize-handle {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
}

/* 四角 */
.drawer-resize-handle.nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nw-resize; }
.drawer-resize-handle.ne { top: -4px; right: -6px; width: 12px; height: 12px; cursor: ne-resize; }
.drawer-resize-handle.sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: sw-resize; }
.drawer-resize-handle.se { bottom: -4px; right: -6px; width: 12px; height: 12px; cursor: se-resize; }

/* 四边 */
.drawer-resize-handle.n  { top: -4px; left: 14px; right: 14px; height: 8px; cursor: n-resize; }
.drawer-resize-handle.s  { bottom: -4px; left: 14px; right: 14px; height: 8px; cursor: s-resize; }
.drawer-resize-handle.w  { left: -4px; top: 14px; bottom: 14px; width: 8px; cursor: w-resize; }
.drawer-resize-handle.e  { right: -6px; top: 14px; bottom: 14px; width: 6px; cursor: e-resize; }

/* 右下角 resize 视觉斜纹提示 */
.drawer-resize-corner-hint {
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0.25;
  transition: opacity var(--transition-fast);
}
.viewer-drawer:hover .drawer-resize-corner-hint,
.viewer-meta-drawer:hover .drawer-resize-corner-hint { opacity: 0.5; }
.drawer-resize-corner-hint::before,
.drawer-resize-corner-hint::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  border-radius: 1px;
}
.drawer-resize-corner-hint::before {
  width: 7px; height: 1.5px;
  bottom: 4px; right: 0;
  transform: rotate(-45deg);
  transform-origin: right center;
}
.drawer-resize-corner-hint::after {
  width: 10px; height: 1.5px;
  bottom: 1px; right: 0;
  transform: rotate(-45deg);
  transform-origin: right center;
}


/* =====================================================================
   Top-Right Floating Actions · 视口右上角全局操作胶囊 (弹性手风琴悬停展开 + 沉浸自折叠)
   ==================================================================== */
.viewer-top-actions {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: rgba(14, 18, 24, 0.80);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  box-shadow: 
    0px 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.28),
    0px 2.3px 2.3px -2.5px rgba(0, 0, 0, 0.24),
    0px 10px 10px -3.75px rgba(0, 0, 0, 0.20),
    0px 16px 32px -4px rgba(0, 0, 0, 0.50);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  user-select: none;
  pointer-events: auto;
}

/* 沉浸式自动隐退态（Auto-dim）：看图漫游无鼠标操作后自动淡化 */
.viewer-top-actions.idle-dimmed {
  opacity: 0.22;
  transform: translateY(-2px) scale(0.96);
}

.viewer-top-actions.idle-dimmed:hover,
.viewer-top-actions:hover,
.viewer-top-actions.expanded,
.viewer-top-actions:has(.open) {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  background: rgba(20, 25, 34, 0.94);
  border-color: rgba(255, 255, 255, 0.22);
}

:root[data-theme="light"] .viewer-top-actions {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 
    0px 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.08),
    0px 2.3px 2.3px -2.5px rgba(0, 0, 0, 0.06),
    0px 10px 10px -3.75px rgba(0, 0, 0, 0.05),
    0px 16px 32px -4px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .viewer-top-actions.idle-dimmed:hover,
:root[data-theme="light"] .viewer-top-actions:hover,
:root[data-theme="light"] .viewer-top-actions.expanded,
:root[data-theme="light"] .viewer-top-actions:has(.open) {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.16);
}

/* 辅助选项手风琴折叠区 (语言切换 + 主题配色 + 分割线) */
.viewer-top-actions-aux {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(8px);
  transition: max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

/* 鼠标悬停、展开、或语言下拉弹窗处于打开状态时，向左自然滑出并解除溢出裁剪 */
.viewer-top-actions:hover .viewer-top-actions-aux,
.viewer-top-actions.expanded .viewer-top-actions-aux,
.viewer-top-actions.has-open .viewer-top-actions-aux,
.viewer-top-actions:has(.open) .viewer-top-actions-aux {
  max-width: 150px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  margin-right: 2px;
  overflow: visible;
}

.viewer-top-actions .tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.viewer-top-actions .tool-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 3px;
  flex-shrink: 0;
}

:root[data-theme="light"] .viewer-top-actions .tool-divider {
  background: rgba(0, 0, 0, 0.10);
}

.viewer-top-actions .close-btn,
#btnCloseViewer {
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--text-secondary);
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .viewer-top-actions .close-btn,
:root[data-theme="light"] #btnCloseViewer {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary);
  box-shadow: none !important;
}

.viewer-top-actions .close-btn:hover,
#btnCloseViewer:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.30) !important;
  transform: scale(1.05);
}

.viewer-top-actions .close-btn:active,
#btnCloseViewer:active {
  background: rgba(239, 68, 68, 0.28) !important;
  transform: scale(0.93) !important;
}

:root[data-theme="light"] .viewer-top-actions .close-btn:hover,
:root[data-theme="light"] #btnCloseViewer:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.20) !important;
  transform: scale(1.05);
}

:root[data-theme="light"] .viewer-top-actions .close-btn:active,
:root[data-theme="light"] #btnCloseViewer:active {
  background: rgba(239, 68, 68, 0.22) !important;
  transform: scale(0.93) !important;
}

/* 详图窗口语言切换下拉菜单 */
.viewer-lang-dropdown {
  position: relative;
  display: inline-flex;
}

.viewer-lang-dropdown .lang-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto !important;
  min-width: auto;
  padding: 0 8px;
  height: 36px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.viewer-lang-dropdown .lang-dropdown-btn:hover,
.viewer-lang-dropdown .lang-dropdown-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}

:root[data-theme="light"] .viewer-lang-dropdown .lang-dropdown-btn:hover,
:root[data-theme="light"] .viewer-lang-dropdown .lang-dropdown-btn[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.06);
  color: #0f141c;
}

.viewer-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 145px;
  background: rgba(18, 22, 30, 0.95);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  animation: langDropdownFade 0.16s ease-out;
}

.viewer-lang-menu.open {
  display: flex;
}

:root[data-theme="light"] .viewer-lang-menu {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.viewer-modal.fullscreen-mode .viewer-top-actions {
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.viewer-modal.fullscreen-mode .viewer-top-actions:hover {
  opacity: 1;
}

/* =====================================================================
   Mobile Responsive Optimizations (针对手机移动端视口与手势优化，含横屏与竖屏)
   ==================================================================== */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
  .viewer-container {
    height: 100vh;
    height: 100dvh;
  }

  /* 顶栏优化：紧凑排列，突出作品标题 */
  .viewer-header {
    height: 50px;
    padding: 0 12px;
    gap: 8px;
  }

  .viewer-header-left {
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .viewer-title {
    font-size: 0.88rem;
    max-width: calc(100vw - 190px);
  }

  .viewer-header-right {
    gap: 4px;
  }

  .viewer-header-right .nav-btn {
    width: 32px;
    height: 32px;
  }

  .viewer-header-right .divider {
    height: 16px;
    margin: 0 2px;
  }

  /* 手机端隐藏左右侧边大翻页箭头，避免双指缩放拖拽误触与遮挡画幅 */
  .viewer-edge-nav {
    display: none !important;
  }

  /* 底部浮动工具栏移动端紧凑化与液态水滴优化 (高透光 · 单条水光顶弧 · 果冻触控弹性) */
  .viewer-float-toolbar,
  .viewer-floating-toolbar {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(12px) saturate(210%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(210%) brightness(1.04) !important;
  }

  /* 移动端底栏保持基座沉稳静止（避免子按键触发冒泡导致整个工具栏收缩晃动），触控反馈收敛于单个按键 */
  .viewer-float-toolbar:active,
  .viewer-floating-toolbar:active {
    transform: translateX(-50%) !important;
  }

  :root[data-theme="light"] .viewer-float-toolbar,
  :root[data-theme="light"] .viewer-floating-toolbar {
    border-top: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  }

  .viewer-floating-toolbar .tool-btn,
  .viewer-floating-toolbar .nav-artwork-btn {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* 移动端/触屏设备自然支持双指捏合与物理屏幕旋转，隐藏冗余项：放大、缩小、旋转、全屏与多余分割线 */
  #toolZoomIn,
  #toolZoomOut,
  #toolRotate,
  #toolFullscreen,
  .viewer-floating-toolbar .tool-divider {
    display: none !important;
  }

  /* 移动端底部工具栏两端开启上一卷/下一卷翻页微按键 */
  .viewer-floating-toolbar .nav-artwork-btn {
    display: inline-flex !important;
  }

  /* 比例控制器胶囊在移动端尺寸对齐，文字清晰，并禁用点击弹出软键盘 */
  .tool-zoom-pill {
    height: 34px !important;
    padding: 0 4px 0 8px !important;
  }
  .zoom-inline-input {
    width: 28px !important;
    font-size: 0.76rem !important;
    pointer-events: none !important; /* 关键：移动端禁止点击聚焦输入框弹出虚拟键盘，点击整个胶囊直接展开预设比例列表 */
  }
  .zoom-chevron-btn {
    width: 18px !important;
    height: 24px !important;
  }

  /* 比例控制器弹出层在移动端居中对齐展开，小锚点精准指向底栏胶囊 */
  .zoom-popover {
    width: 104px !important;
    min-width: 96px !important;
    left: 50% !important;
    bottom: calc(100% + 11px) !important;
    transform: translateX(-50%) translateY(6px) !important;
    transform-origin: bottom center !important;
  }
  .zoom-popover.open {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* 移动端右上角紧凑化，常驻展示语言和主题（免去触控屏无法 hover 的手风琴），并限制左上角图名徽章最大宽度避免重叠 */
  .viewer-top-actions {
    top: 14px;
    right: 14px;
    padding: 3px;
  }

  .viewer-top-actions-aux {
    max-width: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin-right: 2px !important;
    overflow: visible !important;
  }

  .viewer-lang-menu {
    right: 0 !important;
    top: calc(100% + 8px) !important;
    min-width: 135px !important;
  }

  .viewer-top-actions .tool-btn {
    width: 32px;
    height: 32px;
  }

  .viewer-top-actions .viewer-lang-dropdown .lang-dropdown-btn {
    width: auto !important;
    min-width: auto !important;
    height: 32px;
    padding: 0 6px;
    font-size: 0.72rem;
  }

  .viewer-artwork-badge {
    max-width: calc(100vw - 160px) !important;
  }

  .tool-btn .icon {
    width: 14px;
    height: 14px;
  }

  .tool-btn-text {
    font-size: 0.72rem;
    padding: 0 5px;
  }

  /* 移动端浮动信息面板转为半屏矮底抽屉 (48vh) */
  .viewer-drawer,
  .viewer-meta-drawer {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 48vh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    transform: translateY(100%);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
  }

  .viewer-drawer.open,
  .viewer-meta-drawer.open {
    transform: translateY(0) !important;
    opacity: 0.95 !important;
  }

  /* 抽屉在手机端不响应桌面端自由缩放手柄 */
  .drawer-resize-handle,
  .drawer-resize-corner-hint {
    display: none !important;
  }

  /* 移动端信息面板展开时，底部悬浮工具栏平滑下沉隐退，彻底杜绝遮挡与透底 */
  .viewer-modal.drawer-open .viewer-floating-toolbar,
  .viewer-modal.drawer-open .viewer-float-toolbar,
  .viewer-modal:has(.viewer-drawer.open) .viewer-floating-toolbar,
  .viewer-modal:has(.viewer-drawer.open) .viewer-float-toolbar {
    transform: translateX(-50%) translateY(80px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }

  .viewer-modal.drawer-open .viewer-navigator-panel,
  .viewer-modal:has(.viewer-drawer.open) .viewer-navigator-panel,
  .viewer-modal.drawer-open .navigator-wrapper,
  .viewer-modal:has(.viewer-drawer.open) .navigator-wrapper,
  .viewer-modal.drawer-open .nav-launcher-wrapper,
  .viewer-modal:has(.viewer-drawer.open) .nav-launcher-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.92) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  }

  /* 手机横屏模式下：重构为右侧滑入精致悬浮卡片 (全高视野 · 左图右文 · 双手握持分工) */
  @media (orientation: landscape) and (max-height: 500px) {
    .viewer-modal.drawer-open .viewer-top-actions,
    .viewer-modal:has(.viewer-drawer.open) .viewer-top-actions {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateY(-8px) !important;
      transition: opacity 0.22s ease, transform 0.22s ease !important;
    }

    .viewer-drawer,
    .viewer-meta-drawer {
      top: 10px !important;
      bottom: 10px !important;
      right: calc(10px + env(safe-area-inset-right, 0px)) !important;
      left: auto !important;
      width: min(320px, 44vw) !important;
      max-width: 330px !important;
      max-height: none !important;
      height: auto !important;
      border-radius: var(--radius-lg) !important;
      transform: translateX(calc(100% + 20px)) !important;
      box-shadow: -12px 0 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease !important;
      z-index: 35 !important;
    }

    .viewer-drawer.open,
    .viewer-meta-drawer.open {
      transform: translateX(0) !important;
      opacity: 0.95 !important;
    }
  }
}

/* =============================================================================
   About Modal (关于地图录 弹窗体系)
   ============================================================================= */
.about-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
}

.about-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.about-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.about-dialog {
  position: relative;
  z-index: 1;
  max-width: 600px;
  width: 100%;
  background: var(--bg-surface-elevated, var(--bg-surface));
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-modal.open .about-dialog {
  transform: scale(1) translateY(0);
}

.about-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
}

.about-dialog-body {
  padding: 24px;
}

.stat-pill.about-btn {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.stat-pill.about-btn:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--border-medium);
  color: var(--accent);
}

/* =====================================================================
   Fullscreen Hero Opening Screen (开屏全景与Slogan)
   ==================================================================== */
.hero-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #0b0d10;
  user-select: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(0.68) contrast(1.08) saturate(1.1);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 12s ease;
  z-index: 1;
  pointer-events: none;
}

.hero-bg.active {
  opacity: 1;
  transform: scale(1.04);
}

.hero-bg.is-fading-out {
  opacity: 0 !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1) !important;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at center, rgba(11, 13, 16, 0.4) 0%, rgba(11, 13, 16, 0.88) 100%),
    linear-gradient(to bottom, rgba(11, 13, 16, 0.5) 0%, transparent 35%, rgba(11, 13, 16, 0.8) 100%);
  pointer-events: none;
  z-index: 2;
}

/* 首屏平滑主题过渡 */
.hero-screen,
.hero-scrim,
.hero-slogan-svg,
.hero-slogan-sep-svg,
.hero-subtitle,
.hero-desc {
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 浅色模式首屏保持沉浸夜境质感（昼夜双生 Day/Night Contrast · 严禁修改底图透明度） */
:root[data-theme="light"] .hero-screen {
  background-color: #0b0d10;
}

:root[data-theme="light"] .hero-scrim {
  background: 
    radial-gradient(ellipse at center, rgba(230, 238, 248, 0.15) 0%, rgba(20, 28, 40, 0.75) 100%),
    linear-gradient(to bottom, rgba(240, 244, 250, 0.20) 0%, transparent 40%, rgba(20, 28, 40, 0.85) 100%);
}

:root[data-theme="light"] .hero-slogan-svg,
:root[data-theme="light"] .hero-slogan-sep-svg {
  color: #ffffff;
  filter: drop-shadow(0 4px 20px rgba(10, 16, 26, 0.9)) drop-shadow(0 0 35px rgba(230, 195, 125, 0.4));
}

/* =====================================================================
   方案 1（业界成熟标准）：纯 DOM 物理双层毛玻璃遮罩推移 (Pure DOM Frosted Lens Wave)
   - 彻底脱离 View Transition 封闭沙箱
   - 层级：z-index 99990（高于卡片与画卷 1~100，低于置顶工具栏 99999）
   - 真实 backdrop-filter 模糊下方所有 DOM 元素（卡片、图片、文本、大图）
   ==================================================================== */

#glassWaveLayer {
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  overflow: hidden;
}

.frost-iris-outer {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* 双层毛玻璃物理推移：真实模糊 + 晶莹菲涅尔微白雾高光 */
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0.25) 75%,
    rgba(255, 255, 255, 0.65) 88%,
    rgba(255, 255, 255, 0.98) 96%,
    transparent 100%
  );
  backdrop-filter: blur(28px) saturate(180%) brightness(1.22);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.22);
  box-shadow: 
    0 0 45px rgba(255, 255, 255, 0.75),
    0 0 95px rgba(128, 204, 40, 0.5),
    inset 0 0 35px rgba(255, 255, 255, 0.5);
  border: 2.5px solid rgba(255, 255, 255, 0.95);
}

:root[data-theme="light"] .frost-iris-outer {
  background: radial-gradient(
    circle,
    rgba(85, 153, 27, 0.06) 55%,
    rgba(85, 153, 27, 0.22) 75%,
    rgba(85, 153, 27, 0.68) 88%,
    rgba(85, 153, 27, 0.95) 96%,
    transparent 100%
  );
  box-shadow: 
    0 0 45px rgba(85, 153, 27, 0.6),
    0 0 85px rgba(85, 153, 27, 0.35),
    inset 0 0 30px rgba(85, 153, 27, 0.4);
  border-color: rgba(85, 153, 27, 0.95);
}

.animate-frost-iris {
  animation: frostIrisExpand 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes frostIrisExpand {
  0% { width: 0; height: 0; opacity: 1; }
  80% { opacity: 0.95; }
  100% { width: 280vmax; height: 280vmax; opacity: 0; }
}

/* 原生 View Transition 根伪元素规则：新主题跟随点击位置由内向外圆形剪裁扩展 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}

/* View Transition 驱动的圆形推进扩展动画（0.55s 轻快利落，与 Demo 完全一致） */
:root.vt-ripple-active::view-transition-new(root) {
  animation: baseRippleExpand 0.58s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@keyframes baseRippleExpand {
  from {
    -webkit-clip-path: circle(0px at var(--ripple-x) var(--ripple-y));
    clip-path: circle(0px at var(--ripple-x) var(--ripple-y));
  }
  to {
    -webkit-clip-path: circle(180vmax at var(--ripple-x) var(--ripple-y));
    clip-path: circle(180vmax at var(--ripple-x) var(--ripple-y));
  }
}

/* =====================================================================
   不支持 View Transition 移动端/浏览器的全局平滑过渡 (Fallback Smooth Theme Transition)
   ==================================================================== */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning .hero-screen,
html.theme-transitioning .hero-scrim,
html.theme-transitioning .app-header,
html.theme-transitioning .header-capsule,
html.theme-transitioning .gallery-stream,
html.theme-transitioning .gallery-card,
html.theme-transitioning .viewer-modal,
html.theme-transitioning .viewer-bottom-bar,
html.theme-transitioning .viewer-floating-toolbar,
html.theme-transitioning .viewer-drawer,
html.theme-transitioning .app-footer {
  transition: background-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 移动端与桌面端主题切换按键轻触弹性反馈 (Active Spring Feedback) */
.theme-toggle-btn {
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle-btn:active {
  transform: scale(0.86) !important;
  transition: transform 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}



/* ==========================================================================
   Hero Top Actions · 首屏右上角多段式微晶胶囊 (03 Actions Capsule · 135°天光倾角)
   ========================================================================== */
.hero-top-actions {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.hero-actions-capsule {
  position: relative;
  z-index: 20;
  overflow: visible !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 9999px;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: 
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 72%),
    linear-gradient(135deg, rgba(25, 34, 48, 0.65) 0%, rgba(14, 18, 26, 0.52) 55%, rgba(18, 24, 34, 0.65) 100%) !important;
  backdrop-filter: blur(20px) saturate(260%) contrast(104%);
  -webkit-backdrop-filter: blur(20px) saturate(260%) contrast(104%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-left-color: rgba(255, 255, 255, 0.68);
  border-right-color: rgba(255, 255, 255, 0.20);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 
    inset 1.8px 1.5px 2.4px 0 rgba(255, 255, 255, 0.58),
    inset -1.4px -1.2px 1.8px 0 rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(56, 189, 248, 0.15),
    0px 8px 24px -2px rgba(0, 0, 0, 0.45) !important;
}

:root[data-theme="light"] .hero-actions-capsule {
  background: 
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.20) 45%, transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(245, 248, 252, 0.55) 55%, rgba(255, 255, 255, 0.70) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-top-color: #ffffff;
  border-left-color: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  box-shadow: 
    inset 1.8px 1.5px 2.2px 0 rgba(255, 255, 255, 1),
    inset -1.4px -1.2px 1.5px 0 rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(56, 189, 248, 0.15),
    0px 6px 18px -3px rgba(0, 0, 0, 0.12) !important;
}

.hero-actions-capsule:hover {
  border-top-color: #ffffff;
  border-left-color: rgba(255, 255, 255, 0.95);
  box-shadow: 
    inset 2.0px 1.7px 2.8px 0 rgba(255, 255, 255, 0.75),
    inset -1.4px -1.2px 1.8px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(56, 189, 248, 0.25),
    0 10px 28px -3px rgba(0, 0, 0, 0.55) !important;
}

.hero-actions-capsule .capsule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .hero-actions-capsule .capsule-btn {
  color: #1a2230;
}

.hero-actions-capsule .capsule-btn:hover,
.hero-actions-capsule .lang-dropdown-btn[aria-expanded="true"] {
  background: radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 55%, transparent 80%) !important;
  box-shadow: inset 1px 1px 1.5px rgba(255, 255, 255, 0.35);
  color: #fff !important;
}

:root[data-theme="light"] .hero-actions-capsule .capsule-btn:hover,
:root[data-theme="light"] .hero-actions-capsule .lang-dropdown-btn[aria-expanded="true"] {
  background: radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.85) 0%, rgba(0, 0, 0, 0.03) 60%, transparent 80%) !important;
  box-shadow: inset 1px 1px 1.5px rgba(255, 255, 255, 0.95);
  color: #0b0d10 !important;
}

.hero-actions-capsule .hero-theme-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}

.hero-actions-capsule .capsule-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 2px;
}

:root[data-theme="light"] .hero-actions-capsule .capsule-divider {
  background: rgba(0, 0, 0, 0.12);
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 960px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 28px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(128, 204, 40, 0.12);
  border: 1px solid rgba(128, 204, 40, 0.35);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* 首屏主标上方居中品牌胶囊 (暖金典藏 / 青铜蚀刻 - 优化底缘反光与下半部通透度) */
.hero-brand-capsule {
  position: relative;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  margin-bottom: 22px;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    #725b33 0%,
    #4c3a1d 25%,
    #886e3f 50%,
    #3e2f16 58%,
    #614d27 82%,
    #463519 100%
  );
  border: 1px solid rgba(255, 225, 150, 0.6);
  border-bottom: 1.5px solid rgba(255, 235, 175, 0.75); /* 底沿高光金线托底，消除下沿死黑 */
  box-shadow:
    inset 0 1.5px 2px rgba(255, 240, 195, 0.75),
    inset 0 -1.5px 2px rgba(255, 220, 130, 0.4), /* 替换原有的纯黑阴影为暖金底缘回光 */
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(230, 185, 95, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fae7ba; /* 香槟暖金字标，黑夜中清晰夺目 */
  user-select: none;
  cursor: pointer;
  outline: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-brand-capsule .hero-brand-svg {
  height: clamp(15px, 1.35vw, 18px);
  width: auto;
  display: block;
  /* 物理激光深槽阴刻：底切面暖金高光 + 顶切面下沉暗影 */
  filter:
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 1px rgba(255, 240, 190, 0.6));
  transition: filter 0.25s ease, color 0.25s ease;
}

.hero-brand-capsule:hover,
.hero-brand-capsule:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 235, 160, 0.8);
  border-bottom-color: rgba(255, 245, 190, 0.9);
  box-shadow:
    inset 0 1px 2px rgba(255, 245, 200, 0.85),
    inset 0 -1px 2px rgba(255, 225, 140, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(230, 185, 95, 0.4);
}

.hero-brand-capsule:hover .hero-brand-svg,
.hero-brand-capsule:focus-visible .hero-brand-svg {
  color: #fff2cc;
  filter:
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 3px rgba(255, 240, 190, 0.85));
}

.hero-brand-capsule:active {
  transform: translateY(0) scale(0.98);
}

/* 浅色模式典藏黄铜 (温润拉丝纯铜质感 + 阴刻深墨铜字标) */
:root[data-theme="light"] .hero-brand-capsule {
  background: linear-gradient(
    135deg,
    #f5ecd5 0%,
    #d8c292 25%,
    #fcf6e8 50%,
    #c9ae78 65%,
    #eddcb5 85%,
    #d4bc88 100%
  );
  border: 1px solid rgba(180, 145, 80, 0.55);
  box-shadow:
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.9),
    inset 0 -1.5px 2px rgba(100, 75, 30, 0.3),
    0 6px 18px rgba(60, 45, 20, 0.12);
  color: #2b1f0c;
}

:root[data-theme="light"] .hero-brand-capsule .hero-brand-svg {
  filter:
    drop-shadow(0 1.2px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 -1px 0.5px rgba(60, 45, 20, 0.5));
}

:root[data-theme="light"] .hero-brand-capsule:hover,
:root[data-theme="light"] .hero-brand-capsule:focus-visible {
  border-color: rgba(160, 125, 60, 0.75);
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(100, 75, 30, 0.35),
    0 8px 20px rgba(60, 45, 20, 0.18),
    0 0 14px rgba(210, 175, 110, 0.3);
}

:root[data-theme="light"] .hero-brand-capsule:hover .hero-brand-svg,
:root[data-theme="light"] .hero-brand-capsule:focus-visible .hero-brand-svg {
  color: #1a1205;
  filter:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 -0.8px 0.5px rgba(60, 45, 20, 0.6));
}

/* 方案 A：暗黑毛玻璃悬停提示气泡 (置于胶囊上方，高图层避免遮挡下方标题) */
.hero-brand-tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  top: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(14, 18, 25, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(230, 195, 125, 0.35);
  border-radius: 9999px;
  padding: 4px 12px;
  white-space: nowrap;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #dec288;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 12px rgba(230, 195, 125, 0.15);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 100;
}

/* 向下指向铭牌胶囊的微晶倒三角箭头 */
.hero-brand-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(14, 18, 25, 0.94) transparent transparent transparent;
}

.hero-brand-capsule:hover .hero-brand-tooltip,
.hero-brand-capsule:focus-visible .hero-brand-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

:root[data-theme="light"] .hero-brand-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(180, 145, 80, 0.4);
  color: #5a441e;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 10px rgba(200, 165, 100, 0.2);
}

:root[data-theme="light"] .hero-brand-tooltip::before {
  border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;
}

.hero-title {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.9);
  line-height: 1.25;
  margin-bottom: 16px;
  word-break: keep-all;
}

/* 首屏主标纯矢量字标 (Source Han Serif CN Heavy Outlined SVG) */
.hero-title-svg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 8px;
}

.hero-slogan-chunk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-slogan-svg {
  height: clamp(2.3rem, 5.4vw, 4.3rem);
  width: auto;
  display: block;
  color: #ffffff;
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.95));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.hero-slogan-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 clamp(8px, 1.4vw, 22px);
}

.hero-slogan-sep-svg {
  height: clamp(0.65rem, 1.5vw, 1.15rem);
  width: auto;
  display: block;
  color: #ffffff;
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.95));
}

.hero-title-chunk {
  display: inline-block;
  white-space: nowrap;
}

.hero-title-sep {
  display: inline-block;
}

.hero-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 4px;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  margin-bottom: 16px;
  word-break: keep-all;
}

.hero-sub-chunk {
  display: inline-block;
  white-space: nowrap;
}

.hero-sub-sep {
  display: inline-block;
}

/* 智能断行：当多语言或窄屏发生换行时，消除行末悬挂的分隔点，优雅纵向居中堆叠 */
.hero-title.is-wrapped .hero-title-sep,
.hero-title.is-wrapped .hero-slogan-sep,
.hero-subtitle.is-wrapped .hero-sub-sep {
  display: none !important;
}

.hero-title.is-wrapped,
.hero-subtitle.is-wrapped {
  flex-direction: column !important;
  align-items: center !important;
  row-gap: 4px !important;
}

.hero-desc {
  font-family: var(--font-mono);
  font-size: clamp(0.76rem, 1.3vw, 0.88rem);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Featured Artwork Credit Badge */
/* Featured Artwork Credit Badge · 左下角背景画卷图名 (微晶磨砂画签 · 联动 Actions 质感) */
.hero-artwork-tag {
  position: absolute;
  left: 28px;
  bottom: 24px;
  right: auto;
  top: auto;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-family: var(--font-sans);
  pointer-events: auto;
  cursor: default;
  user-select: none;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: rgba(16, 22, 32, 0.52);
  backdrop-filter: blur(20px) saturate(240%) contrast(104%);
  -webkit-backdrop-filter: blur(20px) saturate(240%) contrast(104%);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  border-top: 2.0px solid rgba(255, 255, 255, 0.72);
  box-shadow: 
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1.2px 1.5px 0 rgba(255, 255, 255, 0.10),
    0 8px 24px -2px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-artwork-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-artwork-prefix {
  display: none;
}

.hero-artwork-name {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f7e0aa; /* 典雅香槟暖金，告别生硬荧光绿 */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.hero-artwork-refresh {
  background: transparent;
  border: none;
  padding: 2px 4px;
  margin-left: 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 999px 999px 0;
  transition: color 0.2s ease, transform 0.35s ease;
  line-height: 1;
}

.hero-artwork-refresh:hover {
  color: #f7e0aa;
  transform: rotate(60deg);
}

.hero-artwork-refresh:active {
  transform: rotate(180deg) scale(0.88);
}

.hero-artwork-refresh.is-spinning {
  animation: heroRefreshSpin 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes heroRefreshSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hero-artwork-tag:hover {
  border-color: rgba(255, 255, 255, 0.40);
  border-top-color: rgba(255, 255, 255, 0.90);
  box-shadow: 
    inset 0 1.8px 2.4px 0 rgba(255, 255, 255, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] .hero-artwork-tag {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-top: 2.0px solid rgba(255, 255, 255, 1);
  box-shadow: 
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 1),
    inset 0 -1.2px 1.5px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px -2px rgba(0, 0, 0, 0.12);
  color: #1e293b;
}

:root[data-theme="light"] .hero-artwork-tag .hero-artwork-name {
  color: #1e293b;
  text-shadow: none;
}

/* Scroll Down Prompt Button */
.hero-scroll-btn {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: all var(--transition-normal);
  padding: 10px;
}

.hero-scroll-btn:hover {
  color: var(--accent);
  transform: translateX(-50%) translateY(4px);
}

.hero-scroll-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.scroll-mouse-anim {
  width: 20px;
  height: 32px;
  border: 2px solid currentColor;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.scroll-mouse-dot {
  width: 3px;
  height: 6px;
  background: currentColor;
  border-radius: 2px;
  animation: heroMouseWheel 1.6s ease-in-out infinite;
}

@keyframes heroMouseWheel {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0.1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 手机与平板专属触控上滑探索箭头 (Touch Swipe Indicator · 纯粹 Lucide arrow-up 优雅向上悬浮微动效) */
.scroll-touch-anim {
  display: none;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.touch-swipe-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
  overflow: visible;
  animation: heroTouchArrowMotion 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes heroTouchArrowMotion {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.scroll-chevron {
  width: 14px;
  height: 14px;
  animation: heroChevronBounce 1.6s ease-in-out infinite;
}

@keyframes heroChevronBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* 触控设备专属切换：在触控屏幕 (Touch Screen / Pad / Phone) 下自动启用手势上滑动效，隐藏鼠标与下方多余的双重箭头 */
@media (pointer: coarse), (hover: none) {
  .scroll-mouse-anim {
    display: none !important;
  }
  .scroll-touch-anim {
    display: flex !important;
  }
  .scroll-chevron {
    display: none !important;
  }
}

/* =====================================================================
   Language Dropdown (中/EN 切换与未来多语言下拉接口)
   ==================================================================== */
.lang-dropdown-wrapper {
  position: relative;
  z-index: 25;
  display: inline-flex;
  overflow: visible !important;
}

.lang-dropdown-wrapper.has-open,
.lang-dropdown-wrapper:has(.lang-dropdown-menu.open) {
  z-index: 1000 !important;
}

.lang-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.lang-dropdown-btn:hover,
.lang-dropdown-btn[aria-expanded="true"] {
  background: var(--bg-surface-elevated);
  border-color: var(--border-medium);
  color: var(--accent);
}

.lang-current-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 9999 !important;
  animation: langDropdownFade 0.16s ease-out;
}

.lang-dropdown-menu.open {
  display: flex;
}

@keyframes langDropdownFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}

.lang-dropdown-item:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.lang-dropdown-item.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-subtle);
}

.lang-item-badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  opacity: 0.75;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 2px;
}

/* =====================================================================
   Mobile Responsive Adjustments for Hero & Header
   ==================================================================== */
/* =====================================================================
   Mobile Responsive Adjustments for Hero & Header (<= 768px)
   覆盖移动端竖版及横版（<= 768px），杜绝任何顶栏撑破、文字竖排与断字错位
   ==================================================================== */
@media (max-width: 768px) {
  .hero-content {
    padding: 0 16px;
    margin-bottom: 24px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-title {
    font-size: clamp(2.15rem, 9.4vw, 3.25rem);
    letter-spacing: 0.05em;
    line-height: 1.3;
    max-width: 100%;
    transition: font-size 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hero-brand-capsule {
    padding: 3px 8px;
    margin-bottom: 10px;
  }

  .hero-brand-capsule .hero-brand-svg {
    height: 8.4px;
    filter:
      drop-shadow(0 0.8px 1px rgba(0, 0, 0, 0.95))
      drop-shadow(0 0 0.8px rgba(255, 240, 190, 0.6));
  }

  :root[data-theme="light"] .hero-brand-capsule .hero-brand-svg {
    filter:
      drop-shadow(0 0.6px 0 rgba(255, 255, 255, 0.85))
      drop-shadow(0 -0.5px 0.3px rgba(60, 45, 20, 0.5));
  }

  .hero-brand-tooltip {
    display: none !important;
  }

  .hero-title-svg-wrap {
    flex-direction: column;
    row-gap: 10px;
  }

  .hero-slogan-chunk {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .hero-slogan-svg {
    height: clamp(2.4rem, 11vw, 3.7rem);
  }

  .hero-slogan-sep {
    display: none !important;
  }

  .hero-title-chunk {
    display: block;
    white-space: nowrap;
  }
  .hero-title-sep {
    display: none;
  }

  .hero-subtitle {
    font-size: clamp(0.76rem, 3.0vw, 0.98rem);
    letter-spacing: 0.03em;
    line-height: 1.45;
    max-width: 100%;
    transition: font-size 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hero-sub-chunk {
    display: block;
    white-space: nowrap;
  }
  .hero-sub-sep {
    display: none;
  }

  .hero-desc {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    max-width: 100%;
  }

  /* 移动端将画卷标记置于左下角，避免与右上角全局操作冲突，同时右侧留出滚动按钮空间 */
  .hero-artwork-tag {
    top: auto !important;
    right: auto !important;
    bottom: 16px !important;
    left: 14px !important;
    padding: 4px 10px;
    font-size: 0.68rem;
    max-width: calc(50vw - 20px) !important;
  }

  .hero-scroll-btn {
    bottom: 42px;
  }

  .header-inner {
    padding: 10px 14px;
    gap: 8px;
  }

  .brand-subtitle,
  .brand-title-sub {
    display: none;
  }

  .header-meta {
    gap: 6px;
  }

  .stat-pill.icon-pill,
  .about-btn {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .subbar-inner {
    padding: 8px 14px;
  }

  .filter-chip {
    padding: 4px 10px;
    font-size: 0.72rem;
  }
}

/* 横版 / 短屏视口适配 (高度 <= 600px，如手机横屏 667x375, 800x400, 538x540 等) */
@media (max-height: 600px) {
  .hero-screen {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }
  .hero-content {
    margin-bottom: 8px;
    padding: 0 16px;
  }
  .hero-badge {
    margin-bottom: 8px;
    padding: 3px 10px;
    font-size: 0.65rem;
  }
  .hero-title {
    font-size: clamp(1.3rem, 5.2vh, 1.8rem);
    margin-bottom: 6px;
    line-height: 1.2;
    transition: font-size 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-subtitle {
    font-size: clamp(0.74rem, 3.0vh, 0.92rem);
    margin-bottom: 6px;
    line-height: 1.3;
    transition: font-size 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-desc {
    font-size: 0.66rem;
    display: none; /* 短屏横向模式下隐藏次要描述，保证居中与按钮呼吸空间 */
  }
  .hero-scroll-btn {
    bottom: 8px;
    padding: 4px;
    gap: 2px;
  }
  .hero-scroll-text {
    font-size: 0.65rem;
  }
  .scroll-mouse-anim,
  .scroll-touch-anim {
    display: none !important; /* 短屏下隐藏动效图标，节省垂直空间 */
  }
  .hero-artwork-tag {
    top: auto !important;
    right: auto !important;
    bottom: 8px !important;
    left: 10px !important;
    padding: 3px 8px;
    font-size: 0.62rem;
  }
}

/* 极窄屏设备极致适配 (<= 360px，如三星折叠屏外屏 282px) */
@media (max-width: 360px) {
  .header-inner {
    padding: 8px 10px;
    gap: 4px;
  }

  .brand {
    gap: 6px;
  }

  .brand-title {
    font-size: 0.88rem;
    letter-spacing: 0.04em;
  }

  .header-meta {
    gap: 4px;
  }

  .header-actions-capsule {
    padding: 2px 3px;
    gap: 2px;
  }

  .header-actions-capsule .capsule-btn {
    height: 28px;
  }

  .header-actions-capsule .lang-dropdown-btn {
    height: 28px;
    padding: 0 6px;
    font-size: 0.68rem;
  }

  .header-actions-capsule .theme-toggle-btn {
    width: 28px;
    height: 28px;
  }

  .header-actions-capsule .home-return-btn {
    width: 28px;
    height: 28px;
  }

  .header-actions-capsule .capsule-divider {
    height: 14px;
    margin: 0 2px;
  }

  .stat-pill.icon-pill,
  .about-btn {
    width: 28px;
    height: 28px;
    padding: 0;
  }

  .lang-dropdown-btn {
    padding: 4px 6px;
    font-size: 0.68rem;
    height: 28px;
  }

  .theme-toggle-btn {
    width: 28px;
    height: 28px;
    padding: 5px;
  }

  .divider {
    margin: 0 1px;
    height: 14px;
  }

  .hero-artwork-tag {
    top: auto !important;
    right: auto !important;
    bottom: 12px !important;
    left: 10px !important;
    padding: 3px 8px;
    font-size: 0.62rem;
    max-width: calc(50vw - 16px) !important;
  }

  .hero-title {
    font-size: clamp(1.2rem, 5.8vw, 1.5rem);
  }

  .hero-subtitle {
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  }

  .subbar-inner {
    padding: 6px 10px;
  }

  .filter-group {
    gap: 4px;
  }

  .filter-chip {
    padding: 3px 8px;
    font-size: 0.68rem;
  }

  .gallery-main {
    padding: 8px;
  }

  .masonry-grid {
    --target-row-height: 140px;
    gap: 8px;
  }

  /* 详图查看窗口极窄屏适配 */
  .viewer-top-actions {
    top: 10px;
    right: 10px;
    padding: 2px;
  }
  .viewer-top-actions .tool-btn {
    width: 28px;
    height: 28px;
  }
  .viewer-top-actions .viewer-lang-dropdown .lang-dropdown-btn {
    width: auto !important;
    min-width: auto !important;
    height: 28px;
    padding: 0 4px;
    font-size: 0.68rem;
  }
  .viewer-artwork-badge {
    top: 10px !important;
    left: 10px !important;
    max-width: calc(100vw - 125px) !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .viewer-artwork-title {
    font-size: 0.92rem !important;
    max-width: calc(100vw - 135px) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 0 1px rgba(15, 23, 42, 0.90) !important;
  }
}

/* =====================================================================
   Site Footer · OpenQGIS 空间体系定位大厅 (Mega Directory Portal Footer)
   Antigravity 雕塑级空间美学 · 高信息密度 · 三列体系化矩阵
   ===================================================================== */
.site-footer {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: 44px 28px 28px;
  margin-top: 48px;
  box-sizing: border-box;
  overflow: hidden;
  contain: content;
  transition: var(--theme-transition);
}

:root[data-theme="light"] .site-footer {
  background: #f1f3f7;
  border-top-color: rgba(0, 0, 0, 0.08);
}

.footer-portal-inner {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Top Row: Brand Statement (Left) + Multi-column Matrix (Right) */
.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 28px;
}

.footer-brand-column {
  flex: 0 0 360px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  line-height: 1.2;
}

.footer-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
}

.footer-brand-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.2;
}

.footer-brand-main {
  font-weight: 700;
}

.footer-brand-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 500;
  font-family: var(--font-mono);
}

.footer-brand-slogan {
  font-size: 0.90rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.footer-brand-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 16px;
  text-align: left;
}

.footer-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1.3;
}

.footer-pill-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

:root[data-theme="light"] .footer-pill-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .footer-pill-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

/* Nav Columns Matrix */
.footer-nav-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  max-width: 680px;
  min-width: 0;
}

.footer-nav-group {
  display: flex;
  flex-direction: column;
}

.footer-group-header {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 14px;
  width: 100%;
  text-align: left;
  pointer-events: none;
  cursor: default;
}

.footer-chevron {
  display: none;
}

.footer-group-collapse {
  display: block;
  max-height: none;
  opacity: 1;
  overflow: visible;
}

.footer-group-title {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.3;
}

.footer-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-group-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
  line-height: 1.3;
}

.footer-nav-link:hover {
  color: var(--accent);
}

.footer-nav-link.active {
  color: var(--accent);
}

.footer-link-badge {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.footer-link-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 2px 0 0;
  line-height: 1.38;
  text-align: left;
}

.footer-static-item {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.footer-nav-link .mini-ext {
  width: 13.5px;
  height: 13.5px;
  stroke-width: 2;
  opacity: 0.7;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.footer-nav-link:hover .mini-ext {
  opacity: 1;
  transform: translate(1px, -1px);
  color: var(--accent);
}

.footer-disclaimer-box {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-top: 2px;
}

:root[data-theme="light"] .footer-disclaimer-box {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.footer-disclaimer-text {
  font-size: 0.72rem;
  line-height: 1.48;
  color: var(--text-muted);
  margin: 0;
  text-align: left;
}

/* Middle Monumental Wordmark (巨幅雕塑级字标) */
.footer-wordmark-container {
  width: 100%;
  overflow: hidden;
  padding: 8px 0 16px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 10px;
  user-select: none;
  pointer-events: none;
  text-align: center;
  box-sizing: border-box;
}

.footer-wordmark-text {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(3.0rem, 12vw, 9.5rem);
  line-height: 0.85;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  width: 100%;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12);
  opacity: 0.85;
}

:root[data-theme="light"] .footer-wordmark-text {
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.12);
  opacity: 0.75;
}

/* Bottom Row (Sub-footer Metadata) */
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.footer-meta-sep {
  color: var(--border-medium);
}

.footer-edition {
  color: var(--accent);
  font-weight: 600;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
}

.footer-copyright-line {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.35;
}

/* Responsive Rules for Mega Directory Footer */
@media (max-width: 1024px) {
  .footer-top-row {
    flex-direction: column;
    gap: 36px;
    margin-bottom: 28px;
  }
  .footer-brand-column {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .footer-nav-columns {
    width: 100%;
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 36px 16px 24px;
    margin-top: 36px;
  }
  .footer-top-row {
    gap: 28px;
    margin-bottom: 24px;
  }
  .footer-brand-desc {
    display: none;
  }
  .footer-brand-actions {
    margin-top: 8px;
  }
  .footer-nav-columns {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .footer-nav-group {
    border-bottom: 1px solid var(--border-subtle);
  }
  .footer-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 4px;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-group-title {
    display: inline-block;
    width: auto;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .footer-chevron {
    display: block;
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  }
  .footer-nav-group.open .footer-chevron {
    transform: rotate(180deg);
    color: var(--accent);
  }
  .footer-group-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.35s ease;
    padding: 0 4px;
  }
  .footer-nav-group.open .footer-group-collapse {
    max-height: 520px;
    opacity: 1;
    padding-bottom: 14px;
  }
  .footer-link-hint {
    display: none;
  }
  .footer-group-list {
    gap: 10px;
  }
  .footer-wordmark-container {
    padding: 6px 0 12px;
  }
  .footer-wordmark-text {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  }
  :root[data-theme="light"] .footer-wordmark-text {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.12);
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* -------------------------------------------------------------
   Single Artwork Direct Share & Toast Notification
   ------------------------------------------------------------- */
.nav-btn.copied {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.6) !important;
  background: var(--accent-subtle) !important;
}

.meta-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 6px 4px 10px;
  margin-top: 4px;
}

.meta-share-url {
  flex: 1;
  font-size: 0.76rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
}

.meta-copy-btn {
  background: var(--accent-subtle);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-weight: 500;
}

.meta-copy-btn:hover {
  background: var(--accent);
  color: #07080b;
}

.meta-copy-btn.copied {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
}

.gallery-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(18, 22, 28, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  font-size: 0.84rem;
  padding: 8px 18px;
  border-radius: 9999px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}

.gallery-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.toast-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

:root[data-theme="light"] .gallery-toast {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  color: #0f141c;
}

/* 鼠标跟随微型反馈气泡 (复制网址等就近瞬时提示) */
.cursor-toast-pill {
  position: fixed;
  transform: translate(-50%, -100%) scale(0.9);
  background: rgba(14, 18, 25, 0.94);
  color: #80cc28;
  border: 1px solid rgba(128, 204, 40, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  animation: cursorFloatIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  user-select: none;
}

:root[data-theme="light"] .cursor-toast-pill {
  background: rgba(255, 255, 255, 0.96);
  color: #559616;
  border-color: rgba(106, 168, 32, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

@keyframes cursorFloatIn {
  from { opacity: 0; transform: translate(-50%, -60%) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

.cursor-toast-pill.fade-out {
  opacity: 0;
  transform: translate(-50%, -135%) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* =====================================================================
   Share Popover Dropdown & Submodals (网址 / 二维码 / 竖版海报)
   ==================================================================== */
.share-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: rgba(18, 22, 30, 0.95);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 5px;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}

.share-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* 位于底部浮动工具栏时向上弹出 */
.viewer-floating-toolbar .share-popover {
  top: auto;
  bottom: calc(100% + 12px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  transform-origin: bottom center;
  z-index: 100;
}

.viewer-floating-toolbar .share-popover.open {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 底部三角形定位锚点（精准指向分享按钮中轴线） */
.viewer-floating-toolbar .share-popover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(18, 22, 30, 0.95);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  transform: translateX(-50%) rotate(45deg);
  border-bottom-right-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  .viewer-floating-toolbar .share-popover {
    left: auto !important;
    right: -10px !important;
    transform: translateY(8px) scale(0.96) !important;
    transform-origin: bottom right !important;
    width: 172px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    gap: 2px !important;
  }
  .viewer-floating-toolbar .share-popover.open {
    transform: translateY(0) scale(1) !important;
  }
  .viewer-floating-toolbar .share-popover::after {
    left: auto !important;
    right: 22px !important;
    transform: rotate(45deg) !important;
  }
  .share-popover-item {
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
  }
  .share-item-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }
  .share-item-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
  .share-item-title {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
  }
  .share-item-desc {
    font-size: 0.66rem !important;
    margin-top: 1px !important;
  }
}

:root[data-theme="light"] .viewer-floating-toolbar .share-popover::after {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: rgba(0, 0, 0, 0.09);
  border-bottom-color: rgba(0, 0, 0, 0.09);
}

:root[data-theme="light"] .share-popover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.share-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.16s ease, transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

.share-popover-item:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

:root[data-theme="light"] .share-popover-item:hover {
  background: rgba(var(--accent-rgb), 0.10);
}

.share-popover-item:active {
  transform: scale(0.98);
}

.share-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.share-popover-item:hover .share-item-icon {
  transform: scale(1.08);
  background: var(--accent);
  color: #07080b;
}

.share-item-icon svg {
  width: 18px;
  height: 18px;
}

.share-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.share-item-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.share-item-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.25;
  margin-top: 2px;
  white-space: nowrap;
}

.share-popover-item.copied .share-item-title {
  color: var(--accent);
}

/* -------------------------------------------------------------
   Share Submodal Base (二维码 & 海报弹窗统一基类)
   ------------------------------------------------------------- */
.share-submodal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.share-submodal.open {
  display: flex;
}

.share-submodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.share-submodal.open .share-submodal-backdrop {
  opacity: 1;
}

.share-submodal-dialog {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 380px;
  max-height: min(92vh, 92dvh);
  background: var(--bg-surface-elevated, #161a23);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transform: scale(0.94) translateY(14px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  display: flex;
  flex-direction: column;
}

.share-submodal.open .share-submodal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

:root[data-theme="light"] .share-submodal-dialog {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.share-submodal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.share-submodal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.02em;
}

.share-submodal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.share-submodal-close:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
  border-color: var(--border-medium);
}

.share-submodal-body {
  padding: 24px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.share-submodal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.share-submodal-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-submodal-btn.primary {
  background: var(--accent);
  color: #07080b;
  border: 1px solid var(--accent);
}

.share-submodal-btn.primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

.share-submodal-btn.secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.share-submodal-btn.secondary:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
  background: var(--bg-surface-elevated);
}

/* 移动端竖屏优化：按钮均分通栏、适度尺寸与舒适圆角 */
@media (max-width: 600px) {
  .share-submodal-dialog {
    width: min(340px, calc(100vw - 32px));
    border-radius: 16px;
  }
  .share-submodal-body {
    padding: 18px 16px;
  }
  .share-qr-box {
    width: 160px;
    height: 160px;
    padding: 7px;
    border-radius: 10px;
  }
  .share-submodal-footer {
    display: flex;
    gap: 8px;
  }
  .share-submodal-footer .share-submodal-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 9px 12px;
  }
}

/* -------------------------------------------------------------
   QR Code Submodal Spec (典藏装裱与专属微标排版)
   ------------------------------------------------------------- */
.share-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

.share-qr-box-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.share-qr-box {
  padding: 7px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

:root[data-theme="light"] .share-qr-box {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.08);
}

.share-qr-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 二维码正中心 OpenQGIS 头像微标（利用 15% 容错，秒级扫码兼具专属图腾印章美感） */
.share-qr-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  background: #ffffff;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  border: 2px solid #ffffff;
  overflow: hidden;
  pointer-events: none;
}

.share-qr-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  display: block;
}

/* 规格标签胶囊 */
.share-qr-meta-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 4px;
  flex-wrap: wrap;
}

.share-qr-chip {
  font-size: 0.70rem;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.share-qr-chip-res {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(104, 167, 56, 0.14);
  border: 1px solid rgba(104, 167, 56, 0.35);
  color: #8cd348;
  font-family: var(--font-mono);
  font-weight: 600;
}

:root[data-theme="light"] .share-qr-chip {
  background: rgba(0, 0, 0, 0.04);
}

.share-qr-artwork-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 0;
  text-align: center;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 手机横屏 / 矮屏紧凑模式 (业内标准触发阈值：高度 <= 520px) */
@media (max-height: 520px) {
  .share-submodal-dialog {
    max-height: min(94vh, 94dvh);
    border-radius: 14px;
    width: min(340px, 90vw);
  }
  .share-submodal-header {
    padding: 8px 16px;
  }
  .share-submodal-close {
    width: 26px;
    height: 26px;
  }
  .share-submodal-body {
    padding: 6px 16px;
  }
  .share-qr-box {
    width: 116px;
    height: 116px;
    padding: 6px;
    border-radius: 8px;
  }
  .share-qr-center-badge {
    width: 25px;
    height: 25px;
    border-radius: 6px;
  }
  .share-qr-avatar-img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }
  .share-qr-meta-chips {
    margin: 4px 0 2px;
    gap: 4px;
  }
  .share-qr-chip,
  .share-qr-chip-res {
    font-size: 0.62rem;
    padding: 1px 6px;
  }
  .share-qr-artwork-title {
    margin: 2px 0 0;
    font-size: 0.86rem;
  }
  .share-submodal-footer {
    padding: 8px 16px;
    gap: 8px;
  }
  .share-submodal-btn {
    padding: 6px 12px;
    font-size: 0.76rem;
  }
}

/* -------------------------------------------------------------
   Poster Submodal Spec (典藏画卷海报多比例引擎)
   ------------------------------------------------------------- */
.poster-dialog {
  max-width: 540px;
  max-height: 94vh;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.poster-dialog.ratio-horizontal {
  max-width: min(960px, 94vw);
}

.poster-dialog.ratio-horizontal .poster-preview-stage {
  max-width: 100%;
  max-height: min(65vh, 520px);
}

.poster-dialog.ratio-horizontal .poster-preview-img {
  max-height: min(65vh, 520px);
}

.poster-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.poster-title-ratio {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}

.poster-ratio-dropdown {
  position: relative;
  display: inline-flex;
}

.poster-ratio-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.poster-ratio-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

:root[data-theme="light"] .poster-ratio-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a202c;
}

:root[data-theme="light"] .poster-ratio-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: var(--accent);
  color: var(--accent);
}

.poster-ratio-btn .chevron-icon {
  width: 10px;
  height: 10px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.poster-ratio-btn[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

.poster-ratio-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 175px;
  background: rgba(18, 22, 30, 0.96);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.poster-ratio-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

:root[data-theme="light"] .poster-ratio-menu {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.poster-ratio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.76rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
}

.poster-ratio-item:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}

:root[data-theme="light"] .poster-ratio-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f141c;
}

.poster-ratio-item.active {
  background: rgba(128, 204, 40, 0.16);
  color: var(--accent);
  font-weight: 600;
}

.ratio-item-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.74rem;
}

.ratio-item-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.poster-ratio-item.active .ratio-item-desc {
  color: var(--accent);
}

.poster-body {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: calc(94vh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster-preview-stage {
  position: relative;
  width: auto;
  max-width: 100%;
  max-height: min(68vh, 620px);
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  overflow: visible;
  transition: max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.poster-preview-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(68vh, 620px);
  object-fit: contain;
  border-radius: 8px;
  display: block;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.poster-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  min-width: 240px;
  gap: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--font-mono);
}

.poster-spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--border-medium);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {

  .hero-top-actions {
    top: 14px;
    right: 14px;
    gap: 6px;
  }
  .hero-actions-capsule {
    padding: 2px 4px;
    gap: 2px;
  }
  .hero-actions-capsule .capsule-btn {
    height: 28px;
    padding: 0 6px;
    font-size: 0.72rem;
  }
  .hero-actions-capsule .hero-theme-btn {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   Page Anchor Spine (左侧极简测绘标尺导览轴 · 测绘数字原点与悬停高质感提示)
   ========================================================================== */
.page-anchor-spine {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(-24px);
  z-index: 85;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  user-select: none;
  padding: 14px 0;
  width: 28px;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 仅在瀑布流卡片区域激活展示 */
.page-anchor-spine.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* 首屏未进入画廊模式下，严格禁止展示导览轴 */
body:not(.in-gallery) .page-anchor-spine {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) translateX(-24px) !important;
}

.viewer-open .page-anchor-spine {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) translateX(-24px) !important;
}

.page-spine-track {
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

:root[data-theme="light"] .page-spine-track {
  background: rgba(0, 0, 0, 0.09);
}

.page-spine-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #80cc28, #6bb31e);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(128, 204, 40, 0.65);
  transition: height 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-spine-nodes {
  display: flex;
  flex-direction: column;
  gap: 46px; /* 间距由 20px 显著拉开至 46px，舒展大气 */
  position: relative;
  z-index: 2;
  align-items: center;
}

.page-spine-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.page-spine-node:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

/* 数字测绘原点 */
.page-spine-dot {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--bg-surface, #141a24);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: var(--text-secondary, rgba(255, 255, 255, 0.72));
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  user-select: none;
}

:root[data-theme="light"] .page-spine-dot {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  color: #4b5563;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Hover State */
.page-spine-node:hover .page-spine-dot {
  border-color: var(--accent, #80cc28);
  color: var(--accent, #80cc28);
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--accent-rgb, 128, 204, 40), 0.4);
}

/* Active State (激活原点高亮翡翠实心或强高对比度胶囊) */
.page-spine-node.active .page-spine-dot {
  background: var(--accent, #80cc28);
  border-color: var(--accent, #80cc28);
  color: #0b0e14;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(128, 204, 40, 0.75), 0 2px 8px rgba(0, 0, 0, 0.35);
  transform: scale(1.15);
}

:root[data-theme="light"] .page-spine-node.active .page-spine-dot {
  background: var(--accent, #61a319);
  border-color: var(--accent, #61a319);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(97, 163, 25, 0.5), 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Floating Tooltip with Category Name (尺寸加大、字体更清晰的大气悬停提示框) */
.page-spine-tooltip {
  position: absolute;
  left: calc(100% + 14px);
  padding: 8px 16px;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-md, 8px);
  background: rgba(14, 18, 25, 0.94);
  color: var(--text-primary, #f0f6fc);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-rgb, 128, 204, 40), 0.12);
  font-family: var(--font-sans);
  font-weight: 500;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
}

:root[data-theme="light"] .page-spine-tooltip {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-primary, #0f141c);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 0 16px rgba(106, 168, 32, 0.12);
}

.page-spine-node:hover .page-spine-tooltip {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.page-spine-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(255, 255, 255, 0.16);
}

.page-spine-tooltip::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(14, 18, 25, 0.94);
}

:root[data-theme="light"] .page-spine-tooltip::before {
  border-right-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .page-spine-tooltip::after {
  border-right-color: rgba(255, 255, 255, 0.96);
}

.page-spine-tooltip .page-spine-idx {
  color: var(--accent, #80cc28);
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-weight: 700;
  font-size: 0.84rem;
  background: rgba(var(--accent-rgb, 128, 204, 40), 0.14);
  padding: 2px 7px;
  border-radius: 4px;
}

:root[data-theme="light"] .page-spine-tooltip .page-spine-idx {
  color: var(--accent, #559314);
  background: rgba(97, 163, 25, 0.12);
}

.page-spine-tooltip .page-spine-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.page-spine-tooltip .page-spine-count {
  opacity: 0.65;
  font-size: 0.78rem;
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  margin-left: 2px;
}

/* Responsive adjustment for main container with left spine */
@media (min-width: 1200px) {
  .gallery-main {
    padding-left: 64px !important;
  }
}

@media (max-width: 1099px) {
  .page-anchor-spine {
    display: none !important;
  }
}

/* ==========================================================================
   Waterfall Category Sections (画廊分类分块瀑布流)
   ========================================================================== */
.gallery-sections-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.gallery-category-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 84px;
  position: relative;
}

/* 章节顶部优雅工程界标分隔线（第2个分类起） */
.gallery-category-section + .gallery-category-section {
  padding-top: 52px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .gallery-category-section + .gallery-category-section {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* 章节顶部左侧技术测绘刻度块（响应左侧导览轴并划定章节起始） */
.gallery-category-section + .gallery-category-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--accent, #80cc28);
  border-radius: 2px;
}

.category-section-header {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .category-section-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.category-header-lead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.category-section-idx {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 0.92rem;
  font-weight: 700;
  color: #80cc28;
  letter-spacing: 0.06em;
  background: rgba(128, 204, 40, 0.09);
  border: 1px solid rgba(128, 204, 40, 0.25);
  padding: 1px 7px;
  border-radius: 4px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

:root[data-theme="light"] .category-section-idx {
  color: #61a319;
  background: rgba(107, 179, 30, 0.08);
  border-color: rgba(107, 179, 30, 0.22);
}

.category-section-divider {
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 0.85rem;
}

.category-section-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.category-section-badge {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 2px;
}

:root[data-theme="light"] .category-section-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.category-section-desc {
  margin: 8px 0 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 800px;
}

/* Topic Badge on Artwork Cards */
.tag-pill-topic {
  background: rgba(128, 204, 40, 0.14) !important;
  color: #80cc28 !important;
  border: 1px solid rgba(128, 204, 40, 0.32) !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .tag-pill-topic {
  background: rgba(107, 179, 30, 0.1) !important;
  color: #61a319 !important;
  border: 1px solid rgba(107, 179, 30, 0.25) !important;
}

/* Interactive Category Header in Overview */
.category-section-header.clickable {
  cursor: pointer;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.category-header-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.category-header-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  opacity: 0.75;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] .category-header-action {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

.category-enter-arrow {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.category-section-header.clickable:hover .category-header-action {
  opacity: 1;
  color: #80cc28;
  border-color: rgba(128, 204, 40, 0.35);
  background: rgba(128, 204, 40, 0.1);
}

.category-section-header.clickable:hover .category-enter-arrow {
  transform: translateX(3px);
}

:root[data-theme="light"] .category-section-header.clickable:hover .category-header-action {
  color: #6bb31e;
  border-color: rgba(107, 179, 30, 0.35);
  background: rgba(107, 179, 30, 0.08);
}

.category-section-header.clickable:hover .category-section-title {
  color: #80cc28;
}

:root[data-theme="light"] .category-section-header.clickable:hover .category-section-title {
  color: #6bb31e;
}

.category-section-header.clickable:hover {
  border-bottom-color: rgba(128, 204, 40, 0.3);
}

:root[data-theme="light"] .category-section-header.clickable:hover {
  border-bottom-color: rgba(107, 179, 30, 0.25);
}

/* SubCategory Dedicated Sub-view (专题子界面) */
.subcategory-view-hero {
  width: 100%;
  margin-bottom: 20px;
  padding: 22px 26px 18px 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
  animation: subviewFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes subviewFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

:root[data-theme="light"] .subcategory-view-hero {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}

/* Subview Navigation Breadcrumb Bar (桌面端面包屑导航条) */
.subview-nav-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  color: var(--text-muted);
}

.subview-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1;
}

:root[data-theme="light"] .subview-back-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

.subview-back-btn:hover {
  background: rgba(128, 204, 40, 0.12);
  border-color: rgba(128, 204, 40, 0.4);
  color: #80cc28;
}

:root[data-theme="light"] .subview-back-btn:hover {
  background: rgba(107, 179, 30, 0.1);
  border-color: rgba(107, 179, 30, 0.35);
  color: #6bb31e;
}

.subview-back-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  stroke-width: 2.2;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.subview-back-btn:hover .subview-back-icon {
  transform: translateX(-2px);
}

.subview-nav-divider {
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 0.8rem;
}

.subview-nav-current {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.82rem;
}

/* Subview Content Row (左侧标题与收录指标，右侧导言题记) */
.subview-content-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.subview-lead-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
}

.subview-idx {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 1.25rem;
  font-weight: 700;
  color: #80cc28;
  letter-spacing: 0.06em;
}

:root[data-theme="light"] .subview-idx {
  color: #6bb31e;
}

.subview-divider {
  color: var(--text-muted);
  opacity: 0.35;
}

.subview-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.subview-badge {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 11px;
  border-radius: 999px;
  align-self: center;
}

:root[data-theme="light"] .subview-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.subview-desc-col {
  flex: 1;
  max-width: 580px;
}

.subview-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.subview-cards-grid {
  width: 100%;
}

/* ==========================================================================
   Gallery Mode & Subcategory View (独立画廊大厅与专题画廊模式)
   在进入画廊大厅后，彻底隐藏开屏 Hero，使 siteHeader 确立为页面物理顶端，
   读者在瀑布流中向上滚动到顶即止，彻底杜绝回滚到全屏图。
   ========================================================================== */
body.in-gallery .hero-screen,
body.in-subview .hero-screen,
html.viewer-open .hero-screen,
body.viewer-open .hero-screen,
html.viewer-preopen .hero-screen,
body.viewer-preopen .hero-screen {
  display: none !important;
}

body.in-subview .gallery-subbar {
  display: none !important;
}

body.in-subview .page-anchor-spine {
  display: none !important;
}

body.in-subview .site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.22),
    0 4px 20px rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] body.in-subview .site-header {
  box-shadow: 
    inset 1.2px 1.5px 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.75),
    0 4px 18px rgba(0, 0, 0, 0.05);
}

body.in-subview .gallery-sections-wrap {
  gap: 0 !important;
}

body.in-subview .gallery-main {
  padding-left: 28px !important;
}

/* 响应式断点：双端字号彻底解耦，为移动端定制专属字号大小 */
@media (max-width: 860px) {
  .subview-content-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .subview-desc-col {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .gallery-sections-wrap {
    gap: 48px;
  }
  .gallery-category-section + .gallery-category-section {
    padding-top: 36px;
  }
  .gallery-category-section + .gallery-category-section::before {
    width: 32px;
  }
  .category-section-more-btn {
    min-height: 44px;
    padding: 8px 18px;
    font-size: 0.82rem;
  }
  .subcategory-view-hero {
    margin-bottom: 14px;
    padding: 14px 16px 12px 16px;
    border-radius: 12px;
  }
  .subview-nav-bar {
    margin-bottom: 8px;
    font-size: 0.72rem;
    gap: 6px;
  }
  .subview-back-btn {
    min-height: 36px;
    font-size: 0.72rem;
    padding: 4px 10px;
    gap: 5px;
  }
  .subview-back-icon {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
  }
  .subview-nav-current {
    font-size: 0.72rem;
  }
  .subview-lead-title-row {
    gap: 8px;
  }
  .subview-idx {
    font-size: 0.95rem;
  }
  .subview-title {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
  }
  .subview-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
  }
  .subview-desc {
    font-size: 0.76rem;
    line-height: 1.45;
  }
}

@media (max-width: 540px) {
  body.in-subview .gallery-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .subcategory-view-hero {
    margin-bottom: 10px;
    padding: 12px 12px 10px 12px;
    border-radius: 10px;
  }
  .subview-nav-bar {
    margin-bottom: 6px;
    font-size: 0.68rem;
  }
  .subview-back-btn {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  .subview-idx {
    font-size: 0.88rem;
  }
  .subview-title {
    font-size: 1.05rem;
  }
  .subview-badge {
    font-size: 0.62rem;
    padding: 1.5px 6px;
  }
  .subview-desc {
    font-size: 0.72rem;
    line-height: 1.4;
  }
}



/* =============================================================
   Morphicons Integration & 3-Layer Toolbar Architecture
   ============================================================= */

/* 1. Ensure icon layer supports 3D preserve and full centering */
.tb-icon-layer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 2. Tool buttons: absolute transparent background, no circular discs */
.viewer-floating-toolbar .tool-btn,
.viewer-float-toolbar .tool-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.viewer-floating-toolbar .tool-btn:hover,
.viewer-float-toolbar .tool-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

:root[data-theme="light"] .viewer-floating-toolbar .tool-btn,
:root[data-theme="light"] .viewer-float-toolbar .tool-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .viewer-floating-toolbar .tool-btn:hover,
:root[data-theme="light"] .viewer-float-toolbar .tool-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. Smooth rotation dynamics for #toolRotate */
#toolRotateSvg {
  transform-origin: 50% 50%;
  will-change: transform;
  transform-style: preserve-3d;
  pointer-events: none;
}


/* Mobile Tactile Physics: Touch-Down Depress, Touch-Up Release */
@media (hover: none) or (pointer: coarse) {
  .viewer-floating-toolbar .tool-btn,
  .viewer-float-toolbar .tool-btn {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
  }
  .viewer-floating-toolbar .tool-btn.is-touch-down,
  .viewer-float-toolbar .tool-btn.is-touch-down {
    transform: scale(0.88) !important;
    opacity: 0.85 !important;
  }
}