/* ===== 动画效果 ===== */
@keyframes titleGlow{0%,100%{text-shadow:0 0 8px rgba(212,168,83,0.2)}50%{text-shadow:0 0 20px rgba(212,168,83,0.5),0 0 40px rgba(212,168,83,0.15)}}
@keyframes borderPulse{0%,100%{border-color:rgba(212,168,83,0.1)}50%{border-color:rgba(212,168,83,0.35)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes starTwinkle{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* 标题发光 */
[id^="view"] > header h1{animation:titleGlow 4s ease-in-out infinite}

/* 装饰线脉冲 */
.header-ornament{animation:borderPulse 3s ease-in-out infinite;box-shadow:0 0 6px rgba(212,168,83,0.2)}

/* 面板入场 */
.strength-panel,.liuqin-panel,.analysis-card{animation:fadeInUp 0.5s ease both}

/* 输入面板边框呼吸 */
.input-panel{animation:borderPulse 5s ease-in-out infinite}

/* 导航毛玻璃 */
.top-nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.input-panel{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* 大运卡片悬停 */
.dayun-card{transition:transform 0.2s,border-color 0.2s}
.dayun-card:hover{transform:translateY(-3px);border-color:rgba(212,168,83,0.3)}

/* 按钮悬停 */
.btn-calculate{transition:transform 0.15s,box-shadow 0.15s}
.btn-calculate:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,168,83,0.3)}

/* 付费墙呼吸 */
.pay-wall{animation:borderPulse 4s ease-in-out infinite}

/* 星空背景图 */
[id^="view"] > header{background-size:cover;background-position:center;background-blend-mode:overlay;background-color:rgba(13,8,21,0.78);position:relative;overflow:hidden}
#viewSingle > header{background-image:url(images/topics/bazi-hero.webp)}
#viewZiwei > header{background-image:url(images/topics/ziwei-hero.webp)}
#viewZodiac > header{background-image:url(images/topics/zodiac-hero.webp)}
#viewMatch > header{background-image:url(images/features/match.webp)}
#viewQimen > header{background-image:url(images/topics/qimen-hero.webp)}
#viewNaming > header{background-image:url(images/features/naming.webp)}
#viewTarot > header{background-image:url(images/features/tarot.webp)}
#viewFengshui > header{background-image:url(images/features/fengshui.webp)}
#viewLiuren > header{background-image:url(images/features/liuren.webp)}
#viewShengxiao > header{background-image:url(images/features/shengxiao.webp)}
#viewGua > header{background-image:url(images/features/gua.webp)}
#viewDate > header{background-image:url(images/features/date.webp)}
#viewSaved > header{background-image:url(images/features/saved.webp)}
[id^="view"] > header h1,[id^="view"] > header .subtitle,[id^="view"] > header .header-ornament{position:relative;z-index:2}

/* 结果区/面板背景 */
#result{background-image:url(images/reports/bazi-report.webp);background-size:cover;background-position:center;background-attachment:scroll;background-blend-mode:overlay;background-color:rgba(7,14,21,0.96);border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.03)}
#ziweiResult{background-image:url(images/reports/ziwei-report.webp);background-size:cover;background-position:center;background-attachment:scroll;background-blend-mode:overlay;background-color:rgba(8,11,20,0.96);border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.03)}
#zodiacResult{background-image:url(images/reports/zodiac-report.webp);background-size:cover;background-position:center;background-attachment:scroll;background-blend-mode:overlay;background-color:rgba(8,12,20,0.96);border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.03)}

/* 板块独立 */
body.view-active #viewSingle{display:none!important}
body.view-active .intro-hook,body.view-active .today-glance,body.view-active #dailyFortuneSlot,body.view-active .decision-card,body.view-active .start-paipan-entry,body.view-active .feature-grid,body.view-active > .container > header{display:none!important}
[id^="view"]:not([style*="display: none"]):not([style*="display:none"]){min-height:100vh}
[id^="view"][style*="display: none"],[id^="view"][style*="display:none"]{display:none!important;height:0!important;overflow:hidden!important;visibility:hidden!important;position:absolute!important}
html{scroll-behavior:auto}

/* 隐藏旧元素 */
#luckyWheel,.wx-quiz,[id*="wheel"]{display:none!important}
.paywall,.paywall-section,[id*="paywallSlot"]{display:none!important}
.video-bg{display:none!important}

/* 付费墙样式 */
.pay-wall{border-radius:14px;margin:24px 0;padding:32px 20px;text-align:center}
.pay-wall.tier1{border:1px solid rgba(212,168,83,0.25);background:linear-gradient(160deg,rgba(212,168,83,0.06),rgba(13,8,21,0.96))}
.pay-wall.tier2{border:1px solid rgba(139,108,199,0.25);background:linear-gradient(160deg,rgba(139,108,199,0.06),rgba(13,8,21,0.96))}
.pay-wall.tier3{border:2px solid rgba(212,168,83,0.3);background:linear-gradient(160deg,rgba(212,168,83,0.08),rgba(13,8,21,0.96))}

/* 导航sticky */
.top-nav{position:sticky;top:0;z-index:100;background-color:rgba(13,8,21,0.85)}

/* 减弱动效 */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 上线版动效收口：保留首次进入，取消持续闪烁和循环呼吸。 */
body.classic-shell [id^="view"] > header h1,
body.classic-shell .input-panel,
body.classic-shell .pay-wall { animation:none; }

/* 2026.08.02-10 · 上线版视觉与可用性收口 */
body.classic-shell {
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 2%,rgba(59,106,121,.16),transparent 26%),
    radial-gradient(circle at 88% 18%,rgba(137,94,169,.11),transparent 28%),
    linear-gradient(180deg,#071019 0,#050b11 48%,#070d13 100%);
  color:#e6ebe7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.classic-shell > .container {
  width:min(1480px,100%);
  max-width:1480px;
  padding-right:clamp(16px,3vw,40px);
  padding-left:clamp(16px,3vw,40px);
}

body.classic-shell .top-nav {
  top:8px !important;
  margin:0 0 22px !important;
  padding:9px 12px !important;
  border:1px solid rgba(216,186,104,.2);
  border-radius:22px;
  background:rgba(5,14,21,.9) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
}

body.classic-shell .top-nav .nav-item,
body.classic-shell .top-nav .nav-more {
  min-height:46px;
  border-radius:15px;
  font-weight:680;
  letter-spacing:.02em;
}

body.classic-shell .top-nav .nav-item.active {
  border-color:rgba(231,204,126,.62);
  background:linear-gradient(145deg,rgba(225,191,91,.24),rgba(117,74,40,.18));
  box-shadow:inset 0 0 0 1px rgba(244,215,131,.08),0 8px 24px rgba(0,0,0,.2);
  color:#f6e8bb;
}

body.classic-shell [id^="view"] > header {
  min-height:clamp(260px,31vw,390px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin-top:16px;
  padding:clamp(34px,5vw,70px);
  border:1px solid rgba(216,185,103,.24);
  border-radius:32px;
  background-color:rgba(5,14,21,.74);
  box-shadow:0 28px 90px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04);
}

body.classic-shell [id^="view"] > header h1 {
  max-width:760px;
  margin:0;
  color:#f3f0e8;
  font-family:"PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC",sans-serif;
  font-size:clamp(30px,4vw,52px);
  font-weight:820;
  line-height:1.2;
  letter-spacing:.06em;
  text-shadow:0 8px 32px rgba(0,0,0,.52);
}

body.classic-shell [id^="view"] > header .subtitle {
  max-width:700px;
  margin-top:15px;
  color:#bec9c7;
  font-size:clamp(13px,1.4vw,16px);
  line-height:1.8;
  letter-spacing:.03em;
}

body.classic-shell .input-panel {
  overflow:hidden;
  border:1px solid rgba(216,186,104,.22) !important;
  border-radius:28px !important;
  background-color:rgba(8,19,27,.93) !important;
  box-shadow:0 26px 75px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.035);
}

body.classic-shell input,
body.classic-shell select,
body.classic-shell textarea {
  min-height:46px;
  border-color:rgba(143,166,169,.24);
  border-radius:13px;
  background-color:rgba(3,11,17,.82);
  color:#edf0e9;
  font-family:"PingFang SC","Microsoft YaHei UI",sans-serif;
}

body.classic-shell input:focus,
body.classic-shell select:focus,
body.classic-shell textarea:focus {
  border-color:rgba(225,194,105,.7);
  box-shadow:0 0 0 3px rgba(225,194,105,.11),0 10px 28px rgba(0,0,0,.2);
  outline:0;
}

body.classic-shell .btn-calculate,
body.classic-shell .primary-button {
  min-height:50px;
  overflow:hidden;
  border:1px solid rgba(246,220,145,.58);
  border-radius:16px;
  background:linear-gradient(105deg,#d8b660,#b9872d 58%,#d9bd70);
  box-shadow:0 13px 34px rgba(163,116,35,.22),inset 0 1px rgba(255,255,255,.3);
  color:#11130f;
  font-weight:780;
  letter-spacing:.04em;
}

body.classic-shell button,
body.classic-shell a { -webkit-tap-highlight-color:transparent; }
body.classic-shell button:focus-visible,
body.classic-shell a:focus-visible,
body.classic-shell [tabindex]:focus-visible {
  outline:2px solid #efd783;
  outline-offset:3px;
}

.app-runtime-recovery {
  position:fixed;
  z-index:10050;
  inset:0;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(2,8,13,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.app-runtime-recovery[hidden] { display:none !important; }
.app-runtime-recovery__card {
  position:relative;
  width:min(610px,100%);
  overflow:hidden;
  padding:38px;
  border:1px solid rgba(225,194,105,.38);
  border-radius:28px;
  background:radial-gradient(circle at 92% 0,rgba(177,126,65,.17),transparent 38%),linear-gradient(145deg,#101f29,#050e15 72%);
  box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.05);
}
.app-runtime-recovery__seal {
  width:66px;
  height:74px;
  display:grid;
  place-items:center;
  border:1px solid rgba(235,207,129,.58);
  border-radius:22px 22px 22px 7px;
  background:rgba(219,180,71,.08);
  color:#ead07e;
  font-size:24px;
  font-weight:780;
}
.app-runtime-recovery__copy { margin-top:24px; }
.app-runtime-recovery__copy small { color:#d9bc69;font-size:10px;font-weight:760;letter-spacing:.14em; }
.app-runtime-recovery__copy h2 { margin:9px 0 0;color:#f3f0e8;font-size:clamp(24px,4vw,34px);line-height:1.35; }
.app-runtime-recovery__copy p { margin:12px 0 0;color:#9babad;font-size:14px;line-height:1.8; }
.app-runtime-recovery__actions { display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:28px; }
.app-runtime-recovery__actions button,
.app-runtime-recovery__actions a { min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 22px;border-radius:15px;text-decoration:none; }
.app-runtime-recovery__actions button { border:1px solid rgba(240,216,146,.58);background:linear-gradient(105deg,#dfbf69,#b98934);color:#11130f;font-weight:760; }
.app-runtime-recovery__actions a { border:1px solid rgba(145,166,169,.22);background:rgba(3,11,17,.64);color:#b9c5c3; }
.app-runtime-recovery__card > em { display:block;margin-top:15px;color:#687d82;font-size:10.5px;font-style:normal;text-align:center; }

@media(max-width:720px) {
  body.classic-shell > .container { padding-right:12px;padding-left:12px; }
  body.classic-shell .top-nav { top:6px !important;margin-bottom:14px !important;padding:7px !important;border-radius:18px; }
  body.classic-shell .top-nav .nav-item,
  body.classic-shell .top-nav .nav-more { min-height:42px; }
  body.classic-shell [id^="view"] > header { min-height:240px;margin-top:10px;padding:28px 22px;border-radius:24px; }
  body.classic-shell [id^="view"] > header h1 { font-size:29px;letter-spacing:.03em; }
  body.classic-shell .input-panel { padding:24px 17px !important;border-radius:23px !important; }
  .app-runtime-recovery__card { padding:27px 22px;border-radius:23px; }
  .app-runtime-recovery__actions { grid-template-columns:1fr; }
}

/* 2026.08.02-10 · 紫微 / 星座与八字统一画布 */
body.classic-shell.view-ziwei,
body.classic-shell.view-zodiac {
  overflow-x:hidden !important;
  overflow-x:clip !important;
}

body.classic-shell.view-ziwei > .container,
body.classic-shell.view-zodiac > .container {
  width:min(1480px,100%);
  max-width:1480px !important;
  box-sizing:border-box;
  margin-right:auto !important;
  margin-left:auto !important;
  padding-right:clamp(16px,2vw,30px) !important;
  padding-left:clamp(16px,2vw,30px) !important;
  overflow:visible !important;
}

body.classic-shell.view-ziwei #mainContent,
body.classic-shell.view-zodiac #mainContent,
body.classic-shell.view-ziwei #viewZiwei,
body.classic-shell.view-zodiac #viewZodiac {
  width:100%;
  max-width:none !important;
  box-sizing:border-box;
  overflow:visible !important;
}

/* 八字以主题主图直接进入测算，紫微和星座同步取消重复的旧式横幅。 */
body.classic-shell #viewZiwei > header,
body.classic-shell #viewZodiac > header {
  display:none !important;
}

body.classic-shell #viewZiwei > .calculator-visual,
body.classic-shell #viewZiwei > .input-panel,
body.classic-shell #viewZiwei > .interpretive-scene,
body.classic-shell #viewZodiac > .calculator-visual,
body.classic-shell #viewZodiac > .input-panel,
body.classic-shell #viewZodiac > .interpretive-scene {
  width:100%;
  max-width:1420px;
  box-sizing:border-box;
  margin-right:auto;
  margin-left:auto;
}

body.classic-shell #viewZiwei > .calculator-visual,
body.classic-shell #viewZodiac > .calculator-visual {
  min-height:250px;
  margin-top:4px;
  margin-bottom:28px;
}

@media(min-width:821px) {
  body.classic-shell #ziweiResult.is-peer-segmented,
  body.classic-shell #zodiacResult.is-peer-segmented {
    position:static;
    left:auto;
    width:min(1420px,100%) !important;
    max-width:1420px !important;
    box-sizing:border-box;
    margin:28px auto 0 !important;
    padding:clamp(16px,1.45vw,24px) !important;
    transform:none;
    border:1px solid rgba(var(--peer-brand-rgb,216,188,114),.18) !important;
    border-radius:32px !important;
    box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.03) !important;
  }

  body.classic-shell #ziweiResult.is-peer-segmented {
    background:linear-gradient(155deg,rgba(8,17,24,.99),rgba(4,10,16,.998)) !important;
  }

  body.classic-shell #zodiacResult.is-peer-segmented {
    background:linear-gradient(155deg,rgba(7,17,24,.99),rgba(3,10,16,.998)) !important;
  }
}

/* 星盘已经随主测算自动生成；旧的第二套排盘入口仅保留兼容代码，不再打断正式阅读。 */
body.classic-shell #viewZodiac > .natal-highlight,
body.classic-shell #viewZodiac > #natalResult {
  display:none !important;
}

body.classic-shell .peer-reader-workspace {
  grid-template-columns:clamp(292px,22vw,316px) minmax(0,1fr);
  gap:20px;
  margin:8px 0 26px;
}

body.classic-shell .peer-reader-panel {
  max-height:none;
  overflow:visible;
}

@media(max-width:820px) {
  body.classic-shell.view-ziwei > .container,
  body.classic-shell.view-zodiac > .container {
    padding-right:12px !important;
    padding-left:12px !important;
  }

  body.classic-shell #ziweiResult.is-peer-segmented,
  body.classic-shell #zodiacResult.is-peer-segmented {
    width:100% !important;
    box-sizing:border-box;
    margin-top:20px !important;
  }

  body.classic-shell .peer-reader-workspace {
    grid-template-columns:1fr;
    gap:14px;
    margin-top:0;
  }
}

/* 2026.08.02-10 · 年轻化几何图标系统 */
body.classic-shell .top-nav-brand__seal,
body.classic-shell .nav-item__seal,
body.classic-shell .seo-topic-card__icon,
body.classic-shell .career-report-entry__mark {
  --modern-icon-rgb:216,188,114;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--modern-icon-rgb),.42);
  border-radius:13px;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.16),transparent 34%),
    linear-gradient(145deg,rgba(var(--modern-icon-rgb),.22),rgba(6,16,24,.78));
  color:rgb(var(--modern-icon-rgb));
  font-family:Inter,"SF Pro Display","Segoe UI Symbol","Microsoft YaHei UI",system-ui,sans-serif !important;
  font-weight:700;
  letter-spacing:0;
  text-shadow:none;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 8px 22px rgba(0,0,0,.2),0 0 18px rgba(var(--modern-icon-rgb),.07);
}

body.classic-shell .top-nav-brand__seal::after,
body.classic-shell .nav-item__seal::after,
body.classic-shell .seo-topic-card__icon::after,
body.classic-shell .career-report-entry__mark::after {
  position:absolute;
  top:5px;
  right:5px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.68);
  box-shadow:0 0 8px rgba(var(--modern-icon-rgb),.72);
  content:"";
}

body.classic-shell .top-nav-brand__seal {
  --modern-icon-rgb:124,205,218;
  border-radius:14px;
  background:
    radial-gradient(circle at 25% 18%,rgba(255,255,255,.18),transparent 35%),
    linear-gradient(145deg,rgba(105,182,205,.25),rgba(132,100,196,.18) 58%,rgba(6,16,24,.88));
  color:#d9f5f4;
}

body.classic-shell .nav-home .nav-item__seal { --modern-icon-rgb:126,199,213; }
body.classic-shell [data-view="single"] .nav-item__seal { --modern-icon-rgb:232,151,116; }
body.classic-shell [data-view="ziwei"] .nav-item__seal { --modern-icon-rgb:186,153,225; }
body.classic-shell [data-view="zodiac"] .nav-item__seal { --modern-icon-rgb:116,184,230; }
body.classic-shell [data-view="match"] .nav-item__seal { --modern-icon-rgb:234,142,169; }
body.classic-shell [data-view="saved"] .nav-item__seal { --modern-icon-rgb:157,181,224; }
body.classic-shell [data-view="shengxiao"] .nav-item__seal { --modern-icon-rgb:126,204,153; }
body.classic-shell [data-view="gua"] .nav-item__seal,
body.classic-shell [data-view="date"] .nav-item__seal { --modern-icon-rgb:221,187,103; }
body.classic-shell [data-view="qimen"] .nav-item__seal,
body.classic-shell [data-view="fengshui"] .nav-item__seal { --modern-icon-rgb:104,197,179; }
body.classic-shell [data-view="naming"] .nav-item__seal { --modern-icon-rgb:205,148,211; font-size:10px; }
body.classic-shell [data-view="tarot"] .nav-item__seal { --modern-icon-rgb:174,150,226; }
body.classic-shell [data-view="liuren"] .nav-item__seal { --modern-icon-rgb:119,172,221; }
body.classic-shell .nav-more .nav-item__seal { --modern-icon-rgb:215,184,102; font-size:8px !important; }

body.classic-shell .top-nav-shell .nav-item.active .nav-item__seal {
  border-color:rgba(var(--modern-icon-rgb),.8);
  background:linear-gradient(145deg,rgba(var(--modern-icon-rgb),.94),rgba(var(--modern-icon-rgb),.54));
  color:#071018;
  box-shadow:inset 0 1px rgba(255,255,255,.4),0 0 22px rgba(var(--modern-icon-rgb),.2);
}

body.classic-shell .seo-topic-card:nth-child(1) .seo-topic-card__icon { --modern-icon-rgb:232,151,116; }
body.classic-shell .seo-topic-card:nth-child(2) .seo-topic-card__icon { --modern-icon-rgb:186,153,225; }
body.classic-shell .seo-topic-card:nth-child(3) .seo-topic-card__icon { --modern-icon-rgb:116,184,230; }
body.classic-shell .seo-topic-card:nth-child(4) .seo-topic-card__icon { --modern-icon-rgb:104,197,179; }
body.classic-shell .career-report-entry__mark { --modern-icon-rgb:218,190,109; }

@media(max-width:720px) {
  body.classic-shell .top-nav-brand__seal,
  body.classic-shell .nav-item__seal { border-radius:11px; }
}