/**
 * ============================================================================
 * 乾坤堂 · 官方应用宫门户 2.0 样式表 (portal_style.css)
 * ----------------------------------------------------------------------------
 * 适配规范: WCAG 黄金高对比度、宣纸/夜观双主题、SEC-13~18 移动端工业级自适应
 * ============================================================================
 */

:root {
  --bg-1: #0a0e16;
  --bg-2: #0d1320;
  --bg-3: #111a2c;
  --text-main: #ede6d8;
  --text-soft: #c8c2b7;
  --text-muted: #9c9480;
  --gold: #d8b863;
  --gold-2: #b9923a;
  --cinnabar: #c0392b;
  --cinnabar-2: #9e2b1e;
  --card-bg: rgba(18, 24, 38, 0.72);
  --card-border: rgba(216, 184, 99, 0.22);
  --card-border-hover: rgba(216, 184, 99, 0.60);
  --shadow: rgba(0, 0, 0, 0.45);
  --seal-bg: #b5341f;
  --star-color: rgba(255, 248, 230, 0.75);
}

[data-theme="paper"] {
  --bg-1: #efe6d2;
  --bg-2: #f5edd9;
  --bg-3: #e6dac0;
  --text-main: #2a2114;
  --text-soft: #5b4a2e;
  --text-muted: #8a7a5c;
  --gold: #a87e2c;
  --gold-2: #8a6418;
  --cinnabar: #b5341f;
  --cinnabar-2: #8e2515;
  --card-bg: rgba(255, 251, 242, 0.88);
  --card-border: rgba(176, 52, 31, 0.22);
  --card-border-hover: rgba(176, 52, 31, 0.55);
  --shadow: rgba(120, 90, 40, 0.15);
  --seal-bg: #b5341f;
  --star-color: transparent;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100vw;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-main);
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  background:
    radial-gradient(1200px 720px at 82% -12%, rgba(216, 184, 99, 0.12), transparent 60%),
    radial-gradient(900px 620px at 8% 112%, rgba(192, 57, 43, 0.10), transparent 55%),
    linear-gradient(165deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s ease, color 0.3s ease;
  overflow-x: hidden;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 星汉层 (夜观模式可见) */
.stars-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

.stars-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 18%, var(--star-color), transparent),
    radial-gradient(1.2px 1.2px at 28% 72%, var(--star-color), transparent),
    radial-gradient(1.6px 1.6px at 45% 34%, var(--star-color), transparent),
    radial-gradient(1.1px 1.1px at 62% 12%, var(--star-color), transparent),
    radial-gradient(1.5px 1.5px at 74% 58%, var(--star-color), transparent),
    radial-gradient(1.2px 1.2px at 86% 28%, var(--star-color), transparent),
    radial-gradient(1.4px 1.4px at 92% 78%, var(--star-color), transparent),
    radial-gradient(1.2px 1.2px at 38% 52%, var(--star-color), transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}

[data-theme="paper"] .stars-layer {
  opacity: 0;
}

@keyframes twinkle {
  from { opacity: 0.45; }
  to { opacity: 0.95; }
}

/* 主容器安全箱约束 (SEC-13) */
.main-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}

/* 定位胶囊条 (SEC-15) */
.location-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(216, 184, 99, 0.08);
  border: 1px solid rgba(216, 184, 99, 0.25);
  font-size: 11.5px;
  color: var(--text-soft);
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="paper"] .location-capsule {
  background: rgba(181, 52, 31, 0.06);
  border-color: rgba(181, 52, 31, 0.22);
  color: var(--text-soft);
}

/* 顶栏 */
.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(216, 184, 99, 0.16);
}

[data-theme="paper"] .portal-header {
  border-bottom-color: rgba(181, 52, 31, 0.15);
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-text .brand-name {
  font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-size: 19px;
  letter-spacing: 2px;
  color: var(--text-main);
  font-weight: 600;
}

.brand-text .brand-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-pill {
  cursor: pointer;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-soft);
  padding: 6px 13px;
  border-radius: 999px;
  font-family: "Noto Serif SC", serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-pill:hover {
  border-color: var(--card-border-hover);
  color: var(--gold);
}

.btn-pill-gold {
  border-color: rgba(216, 184, 99, 0.45);
  color: #fed679;
  background: rgba(216, 184, 99, 0.12);
}

[data-theme="paper"] .btn-pill-gold {
  border-color: rgba(181, 52, 31, 0.4);
  color: #8e2515;
  background: rgba(181, 52, 31, 0.08);
}

/* 分类 Tab 切换栏 (SEC-17 渐进式收拢) */
.category-tab-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 14px;
  scrollbar-width: none;
}

.category-tab-bar::-webkit-scrollbar {
  display: none;
}

.cat-tab-btn {
  padding: 7px 15px;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-soft);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: "Noto Serif SC", serif;
}

.cat-tab-btn:hover {
  color: var(--gold);
  border-color: var(--card-border-hover);
}

.cat-tab-btn.active {
  background: linear-gradient(135deg, rgba(216, 184, 99, 0.25), rgba(192, 57, 43, 0.2));
  border-color: var(--gold);
  color: #fff2c2;
  font-weight: 600;
}

[data-theme="paper"] .cat-tab-btn.active {
  background: linear-gradient(135deg, rgba(181, 52, 31, 0.18), rgba(216, 184, 99, 0.15));
  border-color: var(--cinnabar);
  color: #8e2515;
}

/* 卡片网格 */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* 软件卡片 */
.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  color: var(--text-main);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.app-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-border-hover);
  box-shadow: 0 12px 30px var(--shadow), 0 0 0 1px var(--card-border-hover);
}

/* 斗首日课王牌高亮卡片 */
.app-card.card-featured {
  border-color: rgba(216, 184, 99, 0.55);
  background: linear-gradient(150deg, rgba(28, 20, 38, 0.85), rgba(18, 24, 38, 0.85));
  box-shadow: 0 4px 20px rgba(216, 184, 99, 0.12);
}

[data-theme="paper"] .app-card.card-featured {
  background: linear-gradient(150deg, rgba(255, 248, 235, 0.95), rgba(255, 252, 246, 0.95));
  border-color: rgba(181, 52, 31, 0.45);
}

.card-top {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 10px;
}

.card-gourd-box {
  width: 48px;
  height: 64px;
  flex-shrink: 0;
}

.card-title-group {
  flex: 1;
  min-width: 0;
}

.card-title {
  margin: 0;
  font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 1px;
  color: var(--text-main);
}

.card-badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  color: #fff2c2;
  background: linear-gradient(135deg, #b5341f, #8e2515);
  border: 1px solid rgba(254, 214, 121, 0.4);
  border-radius: 4px;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.card-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 12px;
  flex: 1;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.card-tags span {
  font-size: 11px;
  color: var(--gold-2);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(216, 184, 99, 0.06);
}

[data-theme="paper"] .card-tags span {
  color: var(--cinnabar);
  border-color: rgba(181, 52, 31, 0.2);
  background: rgba(181, 52, 31, 0.05);
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 184, 99, 0.15);
  gap: 8px;
}

[data-theme="paper"] .card-actions {
  border-top-color: rgba(181, 52, 31, 0.14);
}

.btn-open {
  text-decoration: none;
  font-size: 13px;
  color: #ffd875;
  background: rgba(216, 184, 99, 0.15);
  border: 1px solid rgba(216, 184, 99, 0.35);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: "ZCOOL XiaoWei", serif;
  letter-spacing: 1px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-open:hover {
  background: rgba(216, 184, 99, 0.28);
  border-color: #ffd875;
  color: #fff;
}

[data-theme="paper"] .btn-open {
  color: #8e2515;
  background: rgba(181, 52, 31, 0.08);
  border-color: rgba(181, 52, 31, 0.3);
}

.btn-install {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 5px 10px;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.btn-install:hover {
  border-color: var(--card-border-hover);
  color: var(--gold);
}

/* 筹备中卡片 */
.app-card.card-placeholder {
  opacity: 0.88;
}

.app-card.card-placeholder .card-title {
  color: var(--text-soft);
}

.placeholder-badge {
  font-size: 11px;
  color: #fbeede;
  background: #6b7280;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}

/* 弹窗与抽屉 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #111724;
  border: 1px solid rgba(216, 184, 99, 0.35);
  border-radius: 14px;
  padding: 22px 20px 20px;
  color: var(--text-main);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  max-height: 90vh;
  overflow-y: auto;
}

[data-theme="paper"] .modal-card {
  background: #fffcf5;
  border-color: rgba(181, 52, 31, 0.35);
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-close-btn:hover {
  color: var(--gold);
}

.modal-title {
  margin: 0 0 14px;
  font-family: "ZCOOL XiaoWei", serif;
  font-size: 20px;
  color: #ffd875;
  letter-spacing: 1.5px;
  text-align: center;
}

[data-theme="paper"] .modal-title {
  color: #8e2515;
}

.modal-channel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(20, 27, 43, 0.7);
  border: 1px solid rgba(216, 184, 99, 0.16);
  gap: 10px;
}

[data-theme="paper"] .channel-item {
  background: rgba(247, 241, 230, 0.85);
  border-color: rgba(181, 52, 31, 0.16);
}

.channel-info h4 {
  margin: 0 0 3px;
  font-size: 14px;
  color: var(--text-main);
}

.channel-info p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}

.btn-action-sm {
  padding: 6px 12px;
  font-size: 12px;
  color: #ffd875;
  background: rgba(216, 184, 99, 0.15);
  border: 1px solid rgba(216, 184, 99, 0.35);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* 页脚 (SEC-16 安全区避让) */
.portal-footer {
  margin-top: 40px;
  padding: 24px 0 calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(216, 184, 99, 0.16);
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.8;
}

.footer-brand {
  font-family: "ZCOOL XiaoWei", serif;
  font-size: 16px;
  color: var(--text-soft);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 600px) {
  .apps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portal-header {
    flex-wrap: wrap;
    gap: 10px;
  }
}


/* ==========================================================================
   乾坤堂 · 方案 B【时空力学 · 经纬真躔】动态天机罗盘开屏典仪样式
   ========================================================================== */
.opening-ceremony-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 40%, #151821 0%, #090B0F 70%, #050608 100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
}
.opening-ceremony-overlay.fading-out {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(8px);
  pointer-events: none;
}
.ceremony-sky-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.ceremony-stars {
  position: absolute;
  width: 100%; height: 100%;
  background-image: 
    radial-gradient(1px 1px at 25px 35px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 120px 80px, #ffd875, transparent),
    radial-gradient(1px 1px at 240px 190px, #fff, transparent),
    radial-gradient(2px 2px at 320px 110px, #f5e8c7, transparent),
    radial-gradient(1px 1px at 80px 280px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 210px 320px, #ffd875, transparent);
  background-size: 380px 380px;
  opacity: 0.6;
  animation: starsTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starsTwinkle {
  0% { opacity: 0.35; transform: scale(0.99); }
  100% { opacity: 0.75; transform: scale(1.01); }
}
.ceremony-skip-btn {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  background: rgba(20, 18, 25, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #F5E8C7;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  z-index: 10;
  transition: all 0.2s;
}
.ceremony-skip-btn:hover {
  background: rgba(158, 26, 26, 0.85);
  border-color: #ffd875;
  color: #fff;
  transform: scale(1.03);
}
.ceremony-core-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 460px;
  padding: 20px;
  position: relative;
  z-index: 2;
}
.ceremony-astrolabe-wrap {
  width: clamp(285px, 78vw, 325px);
  height: clamp(285px, 78vw, 325px);
  margin-bottom: 24px;
  position: relative;
  filter: drop-shadow(0 0 45px rgba(212, 175, 55, 0.55));
}
@media (min-width: 768px) {
  .ceremony-astrolabe-wrap {
    width: 380px;
    height: 380px;
    margin-bottom: 28px;
  }
}
.ceremony-astrolabe-svg {
  width: 100%;
  height: 100%;
}
.astrolabe-outer-ring {
  transform-origin: 180px 180px;
  animation: spinAstrolabe 54s linear infinite;
}
.astrolabe-mid-ring {
  transform-origin: 180px 180px;
  animation: spinAstrolabeRev 24s linear infinite;
}
.astrolabe-inner-ring {
  transform-origin: 180px 180px;
  animation: spinAstrolabe 16s linear infinite;
}
@keyframes spinAstrolabe {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spinAstrolabeRev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* 方案 B 烫金诗诀流光排印 */
.ceremony-poetry-box {
  margin-bottom: 22px;
}
.ceremony-line {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', 'Songti SC', serif;
  color: #FCE8B2;
  letter-spacing: 2px;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(8px);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
  animation: lineSlideFade 0.75s ease-out forwards;
}
.ceremony-line.line-1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 3.5px;
  color: #FFF;
  margin-bottom: 8px;
  text-shadow: 0 0 16px rgba(255, 216, 117, 0.65);
  animation-delay: 0.35s;
}
.ceremony-line.line-2 {
  font-size: 15px;
  color: #FEE49E;
  letter-spacing: 2.2px;
  margin-bottom: 4px;
  animation-delay: 1.1s;
}
.ceremony-line.line-3 {
  font-size: 14px;
  color: #E2C98A;
  letter-spacing: 2.5px;
  margin-bottom: 8px;
  animation-delay: 1.85s;
}
.ceremony-line.line-author {
  font-size: 12.5px;
  color: #C5A866;
  letter-spacing: 4px;
  animation-delay: 2.6s;
}
@keyframes lineSlideFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ceremony-progress-wrap {
  width: 140px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.ceremony-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #ffd875, #ffffff);
  animation: progressFill 4.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes progressFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* 高清独立软件 LOGO 统一视觉规范 */
.app-icon-hd {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  object-fit: cover;
  flex-shrink: 0;
  background: #0E1118;
  transition: transform 0.25s, box-shadow 0.25s;
}
.app-card:hover .app-icon-hd {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
  border-color: #ffd875;
}

.brand-hall-logo {
  width: 52px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.45));
  transition: transform 0.2s;
}
.brand-hall-logo:hover {
  transform: scale(1.05);
}


/* 移动端顶栏 LOGO 适度平衡，确保不挤压右侧操作按钮 */
@media screen and (max-width: 480px) {
  .brand-hall-logo {
    width: 44px !important;
    height: 58px !important;
  }
  .brand-text .brand-name {
    font-size: 17px !important;
  }
}

/* 真实二十八星宿与深空星汉氛围增强 */
.deep-sky-stars {
  animation: starsTwinkle 6s ease-in-out infinite alternate;
}


/* ==========================================================================
   真实浩瀚星空苍穹全屏旋转样式 (堂主定案：真实星空周天自转)
   ========================================================================== */
.ceremony-sky-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
  background: #04060b;
}

.real-sky-rotating-vault {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(160vw, 160vh);
  height: max(160vw, 160vh);
  max-width: 2400px;
  max-height: 2400px;
  transform: translate(-50%, -50%);
  animation: celestialVaultRotate 80s linear infinite;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

#realCosmosCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.95;
  filter: contrast(1.1) brightness(1.05);
}

@keyframes celestialVaultRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 暗角与中心柔光遮罩，确保中央金色罗盘、大篆总堂号与诗诀极其清晰尊贵 */
.sky-vignette-mask {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(9, 12, 22, 0.15) 0%, rgba(5, 7, 14, 0.45) 60%, rgba(2, 3, 7, 0.82) 100%);
  pointer-events: none;
}


/* 纯净高亮北斗七星呼吸微光 (无文字，纯透星芒) */
.pure-luminous-big-dipper {
  animation: pureDipperTwinkle 3.5s ease-in-out infinite alternate;
}
@keyframes pureDipperTwinkle {
  0% { opacity: 0.85; filter: drop-shadow(0 0 2px rgba(255, 216, 117, 0.6)); }
  100% { opacity: 1.0; filter: drop-shadow(0 0 6px rgba(255, 216, 117, 0.95)) drop-shadow(0 0 10px rgba(72, 202, 228, 0.7)); }
}


/* 微缩纯净北斗七星高亮星芒呼吸效果 */
.mini-big-dipper-stellar {
  animation: miniDipperGlow 3s ease-in-out infinite alternate;
}
@keyframes miniDipperGlow {
  0% { filter: drop-shadow(0 0 2px rgba(255, 216, 117, 0.7)); }
  100% { filter: drop-shadow(0 0 5px rgba(255, 216, 117, 1.0)) drop-shadow(0 0 8px rgba(72, 202, 228, 0.7)); }
}


/* ==========================================================================
   真实北斗星空旋转盘 (堂主指定：真实星空质感，除字后围绕 LOGO 周天旋转)
   ========================================================================== */
.ceremony-astrolabe-wrap {
  width: clamp(285px, 78vw, 325px);
  height: clamp(285px, 78vw, 325px);
  margin-bottom: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .ceremony-astrolabe-wrap {
    width: 380px;
    height: 380px;
    margin-bottom: 28px;
  }
}

.astrolabe-real-sky-disc {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 45px rgba(20, 35, 75, 0.55), inset 0 0 35px rgba(2, 4, 8, 0.85);
  animation: rotateDiscInPlace 80s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

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

#cleanedDipperCanvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 依据堂主训令：最外圈粗黄圈/虚线圈彻底移除，星盘与深空融为一体 */

/* 中心乾坤堂红金总堂号宝印 (巍然屹立于宇宙天极中宫) */
.astrolabe-center-logo-box {
  position: relative;
  z-index: 10;
  width: 86px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(212, 175, 55, 0.45));
  pointer-events: none;
}

.astrolabe-center-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================================
 * 乾坤堂 · 双版本线上横评对比悬浮胶囊栏 (Plan A vs Plan B)
 * ============================================================================ */
.version-compare-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(14, 18, 28, 0.88);
  border: 1px solid rgba(216, 184, 99, 0.35);
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  flex-wrap: wrap;
}

[data-theme="paper"] .version-compare-bar {
  background: rgba(245, 237, 217, 0.92);
  border-color: rgba(176, 52, 31, 0.35);
  box-shadow: 0 4px 14px rgba(120, 90, 40, 0.12);
}

.compare-bar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

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

.compare-opt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 18px;
  font-size: 12px;
  text-decoration: none;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1.2;
}

.compare-opt-btn:hover {
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
}

.compare-opt-btn.active {
  background: linear-gradient(135deg, rgba(216, 184, 99, 0.25), rgba(192, 57, 43, 0.25));
  border-color: var(--gold);
  color: #ffd875;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(216, 184, 99, 0.3);
}

[data-theme="paper"] .compare-opt-btn.active {
  background: linear-gradient(135deg, rgba(216, 184, 99, 0.2), rgba(192, 57, 43, 0.15));
  color: #9e2b1e;
  border-color: #b5341f;
}

.ceremony-top-controls {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 100;
  max-width: calc(100vw - 120px);
}

.ceremony-plan-badge {
  background: rgba(20, 18, 25, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: #F5E8C7;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

.ceremony-ctrl-pill {
  cursor: pointer;
  background: rgba(20, 18, 25, 0.85);
  border: 1px solid rgba(216, 184, 99, 0.65);
  color: #fed679;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(216, 184, 99, 0.25);
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
  font-family: inherit;
}

.ceremony-ctrl-pill:hover {
  background: rgba(35, 30, 42, 0.95);
  border-color: #ffd875;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(216, 184, 99, 0.45);
}

.ceremony-ctrl-pill.active {
  background: linear-gradient(135deg, rgba(216, 184, 99, 0.35) 0%, rgba(160, 120, 40, 0.45) 100%);
  border-color: #ffd875;
  color: #ffffff;
  font-weight: 600;
}

/* ============================================================================
 * 乾坤堂 · 方案 B 专属：圈在北斗七星里面，变成正圆，只包住葫芦；色调温润参照前期
 * ============================================================================ */
.gourd-halo-ring {
  display: none;
}

body[data-plan="b"] .gourd-halo-ring,
body[data-plan="a"].show-plan-a-halo .gourd-halo-ring,
.gourd-halo-ring.force-show {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(216, 184, 99, 0.22); /* 堂主训令：外圈线极淡 */
  box-shadow: 
    0 0 25px rgba(240, 205, 110, 0.60),
    0 0 55px rgba(216, 184, 99, 0.38),
    0 0 85px rgba(216, 184, 99, 0.22),
    inset 0 0 25px rgba(240, 205, 110, 0.35); /* 堂主训令：更宽大更亮的光晕，星冕漫射 */
  background: radial-gradient(circle at center, rgba(255, 230, 150, 0.28) 0%, rgba(216, 184, 99, 0.12) 55%, transparent 80%);
  z-index: 5;
  pointer-events: none;
  animation: gourdHaloBreathe 3.5s ease-in-out infinite alternate;
  transition: all 0.5s ease;
}

@keyframes gourdHaloBreathe {
  0% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.88;
    box-shadow: 
      0 0 22px rgba(240, 205, 110, 0.50),
      0 0 45px rgba(216, 184, 99, 0.30),
      0 0 75px rgba(216, 184, 99, 0.18),
      inset 0 0 20px rgba(240, 205, 110, 0.28);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.02);
    opacity: 1.0;
    box-shadow: 
      0 0 32px rgba(240, 205, 110, 0.75),
      0 0 65px rgba(216, 184, 99, 0.45),
      0 0 95px rgba(216, 184, 99, 0.28),
      inset 0 0 30px rgba(240, 205, 110, 0.42);
  }
}

/* ============================================================================
 * 堂主最高灵感：光晕动态闪亮璀璨星冕 (Dynamic Sparkling Shimmer Corona)
 * ============================================================================ */
.gourd-halo-ring.sparkle-mode,
body.halo-sparkle-active .gourd-halo-ring {
  border-color: rgba(255, 235, 170, 0.45);
  animation: 
    gourdHaloSparklePulse 2.6s ease-in-out infinite alternate,
    gourdHaloColorShimmer 3.8s ease-in-out infinite alternate !important;
}

.gourd-halo-ring.sparkle-mode::before,
body.halo-sparkle-active .gourd-halo-ring::before {
  content: "";
  position: absolute;
  top: -24px; left: -24px; right: -24px; bottom: -24px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 235, 170, 0.38) 22deg,
    transparent 48deg,
    transparent 90deg,
    rgba(255, 245, 200, 0.48) 112deg,
    transparent 138deg,
    transparent 180deg,
    rgba(255, 235, 170, 0.38) 202deg,
    transparent 228deg,
    transparent 270deg,
    rgba(255, 245, 200, 0.48) 292deg,
    transparent 318deg,
    transparent 360deg
  );
  filter: blur(6px);
  animation: rotateSparkleRays 32s linear infinite;
  pointer-events: none;
}

.gourd-halo-ring.sparkle-mode::after,
body.halo-sparkle-active .gourd-halo-ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.85),
    0 0 45px rgba(255, 230, 140, 0.75),
    0 0 85px rgba(240, 205, 110, 0.55),
    0 0 125px rgba(216, 184, 99, 0.35),
    inset 0 0 28px rgba(255, 250, 220, 0.60);
  animation: sparkleTwinkleFlash 1.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes gourdHaloSparklePulse {
  0% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.82;
    filter: brightness(0.95) saturate(1.1);
  }
  50% {
    filter: brightness(1.28) saturate(1.35) drop-shadow(0 0 20px rgba(255, 240, 180, 0.85));
  }
  100% {
    transform: translate(-50%, -50%) scale(1.09);
    opacity: 1.0;
    filter: brightness(1.40) saturate(1.45) drop-shadow(0 0 32px rgba(255, 245, 190, 0.98));
  }
}

@keyframes gourdHaloColorShimmer {
  0% {
    background: radial-gradient(circle at center, rgba(255, 245, 190, 0.48) 0%, rgba(240, 205, 110, 0.25) 50%, rgba(216, 184, 99, 0.10) 75%, transparent 90%);
  }
  50% {
    background: radial-gradient(circle at center, rgba(255, 255, 240, 0.60) 0%, rgba(255, 225, 135, 0.32) 45%, rgba(216, 184, 99, 0.14) 70%, transparent 88%);
  }
  100% {
    background: radial-gradient(circle at center, rgba(255, 240, 175, 0.42) 0%, rgba(235, 195, 95, 0.22) 55%, rgba(216, 184, 99, 0.08) 80%, transparent 92%);
  }
}

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

@keyframes sparkleTwinkleFlash {
  0% {
    opacity: 0.45;
    transform: scale(0.97);
  }
  35% {
    opacity: 0.98;
    transform: scale(1.04);
  }
  75% {
    opacity: 0.60;
    transform: scale(0.99);
  }
  100% {
    opacity: 1.0;
    transform: scale(1.05);
  }
}

/* 方案 B：彻底移除北斗七星外围的大圆盘与外围大光晕，让七星自由畅游于圈外深空 */
body[data-plan="b"] .ceremony-astrolabe-wrap {
  filter: none !important;
}

body[data-plan="b"] .astrolabe-real-sky-disc {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ============================================================================
 * 乾坤堂 · 方案 C (堂主最高指示：葫芦外圈虚线连接四星旋转 + 葫芦底部旋转太极阴阳鱼)
 * ============================================================================ */
.taiji-yin-yang-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 124px;
  height: 124px;
  z-index: 4;
  pointer-events: none;
  animation: rotateTaijiDisc 38s linear infinite, taijiNebulaBreathe 4.5s ease-in-out infinite alternate;
  transform-origin: center center;
  filter: drop-shadow(0 0 12px rgba(216, 184, 99, 0.30));
}

.taiji-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes rotateTaijiDisc {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes taijiNebulaBreathe {
  0% { opacity: 0.28; filter: drop-shadow(0 0 8px rgba(216, 184, 99, 0.22)); }
  100% { opacity: 0.38; filter: drop-shadow(0 0 16px rgba(216, 184, 99, 0.40)); }
}

.four-stars-orbit-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 216px;
  height: 216px;
  z-index: 6;
  pointer-events: none;
  animation: rotateFourStarsOrbit 28s linear infinite;
  transform-origin: center center;
}

@media (min-width: 768px) {
  .four-stars-orbit-wrap {
    width: 250px;
    height: 250px;
  }
}

.four-stars-orbit-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

@keyframes rotateFourStarsOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 4 颗灵动星宿的有机呼吸脉动 (Twinkle & Pulse) */
.orbit-star-1 {
  animation: starTwinklePulse 2.8s ease-in-out infinite alternate;
  transform-origin: 348px 190px;
}

.orbit-star-2 {
  animation: starTwinklePulse 3.4s ease-in-out infinite alternate 0.8s;
  transform-origin: 190px 348px;
}

.orbit-star-3 {
  animation: starTwinklePulse 3.1s ease-in-out infinite alternate 1.6s;
  transform-origin: 32px 190px;
}

.orbit-star-4 {
  animation: starTwinklePulse 3.8s ease-in-out infinite alternate 2.3s;
  transform-origin: 190px 32px;
}

@keyframes starTwinklePulse {
  0% {
    opacity: 0.65;
    transform: scale(0.85);
  }
  100% {
    opacity: 1.0;
    transform: scale(1.18);
    filter: drop-shadow(0 0 8px rgba(255, 240, 190, 0.95));
  }
}