/* 唯问 · 同一片山水，五种观察方式。 DOM owns content; SVG owns atmosphere. */
:root {
  --world-x: 0px; --world-y: 0px;
  --world-space: clamp(22px, 4vw, 64px);
  --world-curve: #668795; --world-mountain: #9bb5bb;
  --world-water: #b2c6cb; --world-star: #486977;
  --world-nav-surface: rgba(246, 249, 248, .98);
}
[data-theme="dark"] {
  --world-curve: #6e91a7; --world-mountain: #40596e;
  --world-water: #4f657b; --world-star: #bccdd7;
  --world-nav-surface: rgba(27, 39, 52, .98);
}
.world-ready .ink-bg,.world-ready #wuxing-canvas,.world-ready .topbar,.world-ready .bottom-nav { display: none !important; }
.world-ready { --nav-h: 0px; --topbar-h: 0px; background: var(--paper); }
.world-ready { isolation: isolate; }
.world-ready .app { max-width: 1120px; padding: 110px var(--world-space) 130px; margin: 0 auto; }
.world-ready .view.active { animation: none; }
.world-ready .view.active.stagger > * { animation: none; opacity: 1; transform: none; }
.world-ready #view-zhiming.active { display: block; }
.world-ready .view { position: relative; }
.world-ready .page-head { margin: 12px 0 42px; }
.world-ready .page-title { font-family: "Zhiming Serif", "Songti SC", serif; font-size: clamp(34px, 5vw, 52px); letter-spacing: .14em; font-weight: 400; }
.world-ready .page-sub { font-size: 13px; color: var(--ink-2); letter-spacing: .12em; max-width: 46em; }
.world-ready .foot-note { line-height: 2; }
.world-ready button,.world-ready a { -webkit-tap-highlight-color: transparent; }
.world-ready :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; }
.world-ready .card { box-shadow: none; background: var(--surface); border-color: var(--line-soft); border-radius: 12px; }
.world-ready .btn-primary { background: var(--primary); border: 0; color: var(--surface-2); border-radius: 7px; }
.world-ready .sub-head { padding: 6px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.world-ready .zm-back { min-width: 44px; min-height: 44px; border-radius: 50%; background: transparent; }
.world-ready :is(.result-card,.mj-card,.qzr-section,.zw-pan,.wendao-msg,.shop-detail) { background-color: var(--surface); }
.world-ready .qzr-section { border-radius: 8px; }
.world-ready .mj-tabs,.world-ready .qzr-nav { background: var(--veil); }

/* Persistent landscape. Decorative only: no chart facts ever enter these paths. */
.world-scene { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; color: var(--world-curve); background: var(--paper); }
.world-scene svg { position: absolute; width: 100%; height: 100%; }
.world-land { transform: translate(var(--world-x), var(--world-y)); transition: opacity 700ms, transform 800ms; }
.world-mountain-far { fill: var(--world-mountain); opacity: .12; }
.world-mountain-near { fill: var(--world-mountain); opacity: .19; }
.world-water { fill: none; stroke: var(--world-water); stroke-width: .65; opacity: .4; }
.world-horizon { stroke: var(--world-curve); stroke-width: .65; fill: none; opacity: .22; }
.world-star { fill: var(--world-star); opacity: .4; }
.world-constellation { stroke: var(--world-curve); stroke-width: .7; fill: none; opacity: .14; }
.world-core { width: min(68vw, 680px) !important; height: min(68vw, 680px) !important; left: 41%; top: 18%; opacity: .46; transform: translate(var(--world-x), var(--world-y)); transition: top 800ms, left 800ms, width 800ms, height 800ms, opacity 800ms; }
.world-orbit { transform-origin: 250px 250px; animation: world-turn 240s linear infinite; }
.world-orbit path,.world-orbit circle { fill: none; stroke: currentColor; stroke-width: .7; }
.world-ticks { stroke-dasharray: .5 21; stroke-width: 4 !important; opacity: .44; }
#world-curve { stroke-width: 1 !important; opacity: .72; }
.world-core-point { fill: currentColor !important; stroke: none !important; }
.world-symbol-detail { opacity: 0; transition: opacity 650ms; }
[data-world="zhiming"] .symbol-time { opacity: .4; }
[data-world="zhiming"][data-world-system="ziwei"] .symbol-time { opacity: 0; }
[data-world="zhiming"][data-world-system="ziwei"] .symbol-palaces { opacity: .42; }
[data-world="zhiming"][data-world-system="qizheng"] .symbol-time { opacity: 0; }
[data-world="zhiming"][data-world-system="qizheng"] .symbol-orbits { opacity: .46; }
[data-world="wendao"] .world-core { opacity: .14; top: 25%; left: 44%; }
[data-world="yangyun"] .world-core { opacity: .16; top: 35%; left: 45%; }
[data-world="yangyun"] .world-mountain-near { opacity: .27; }
[data-world="tongdao"] .world-constellation { opacity: .36; }
[data-world="tongdao"] .world-core { opacity: .2; }
[data-world="ziguan"] .world-core,[data-world="auth"] .world-core { opacity: .19; left: 36%; top: 15%; }
[data-world="ziguan"] .world-land,[data-world="auth"] .world-land { opacity: .42; }
[data-world-level="reading"] .world-core { opacity: .075; }
[data-world-level="reading"] .world-land { opacity: .32; }
[data-world-level="reading"] .world-orbit { animation-play-state: paused; }
[data-world-level="forming"] .world-core { opacity: .35; }
[data-motion="reduce"] .world-orbit,.world-paused .world-orbit { animation: none; }
[data-motion="reduce"] .world-scene * { transition: none !important; }
@keyframes world-turn { to { transform: rotate(360deg); } }

/* Constant orientation, not a second business navigation implementation. */
.world-topline { position: absolute; top: max(22px, env(safe-area-inset-top)); left: var(--world-space); right: var(--world-space); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1320px; margin: 0 auto; }
.world-wordmark { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--ink); padding: 8px 0; min-height: 44px; cursor: pointer; }
.world-wordmark svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1; }
.world-wordmark span { font-family: "Zhiming Serif",serif; font-size: 24px; letter-spacing: .16em; }
.world-location { color: var(--ink-2); font-size: 11px; letter-spacing: .13em; }
.world-skip { position: fixed; top: -70px; z-index: 2000; background: var(--surface); color: var(--ink); padding: 16px; }
.world-skip:focus { top: 10px; left: 10px; }
.world-nav-toggle { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 400; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 18px 8px 10px; border: 1px solid var(--line-2); border-radius: 48px; background: var(--world-nav-surface); color: var(--ink); box-shadow: 0 5px 24px rgba(30, 52, 70, .08); cursor: pointer; }
.world-nav-toggle svg { width: 34px; height: 34px; stroke: var(--primary); fill: none; stroke-width: 1.2; transition: transform 420ms; }
.world-nav-toggle span { font-size: 12px; letter-spacing: .08em; }
.world-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.world-menu { position: fixed; z-index: 390; inset: 0; display: grid; place-items: center; background: var(--world-nav-surface); padding: max(20px, env(safe-area-inset-top)) 24px max(100px, env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; }
.world-menu[hidden] { display: none; }
.world-menu-open { overflow: hidden; }
.world-menu-open .world-orbit { animation-play-state: paused; }
.world-menu-inner { width: min(620px, 100%); position: relative; }
.world-menu-heading { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); font-size: 12px; letter-spacing: .08em; }
.world-close { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 25px; cursor: pointer; }
.world-menu-map { height: 380px; position: relative; margin: 25px 0; }
.world-menu-map::before { content: ''; position: absolute; width: 230px; height: 230px; border: 1px solid var(--line); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.world-menu-link { position: absolute; border: 0; background: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 16px; min-height: 72px; min-width: 96px; cursor: pointer; }
.world-menu-link strong { font-family: "Zhiming Serif",serif; font-weight: 400; font-size: 24px; letter-spacing: .12em; }
.world-menu-link small { font-size: 11px; color: var(--ink-2); }
.world-menu-link[aria-current] strong { color: var(--primary); }
.world-menu-link[aria-current]::after { content: ''; width: 4px; height: 4px; background: var(--seal); border-radius: 50%; }
.world-menu-link:nth-child(1) { top: 0; left: calc(50% - 48px); }
.world-menu-link:nth-child(2) { top: 105px; right: 5%; }
.world-menu-link:nth-child(3) { bottom: 0; right: 18%; }
.world-menu-link:nth-child(4) { bottom: 0; left: 18%; }
.world-menu-link:nth-child(5) { top: 105px; left: 5%; }
.world-menu-center { position: absolute; left: calc(50% - 24px); top: calc(50% - 24px); width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 50%; background: none; color: var(--primary); font-family: "Zhiming Serif",serif; font-size: 18px; cursor: pointer; }
.world-menu-tools { display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; color: var(--ink-2); font-size: 12px; }
.world-menu-tools button { background: none; border: 0; padding: 12px 0; color: var(--ink); min-height: 44px; cursor: pointer; }
.world-menu-tools select { min-height: 44px; padding: 8px; max-width: 190px; font-size: 12px; background: var(--surface); }
.world-menu-tools label { display: flex; align-items: center; gap: 8px; }
.world-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.world-shared-ghost { position: fixed; z-index: 350; pointer-events: none; font-family: "Zhiming Serif",serif; color: var(--ink); letter-spacing: .14em; transform-origin: top left; }

/* The landing is a landscape of entries, never a grid of identical cards. */
.world-ready .app:has(#view-world.active) { max-width: 1320px; padding-top: 106px; padding-bottom: 115px; }
.world-landing { min-height: clamp(700px, calc(100svh - 140px), 780px); position: relative; }
.world-intro { position: relative; z-index: 2; width: fit-content; padding-top: 5vh; }
.world-eyebrow { font-size: 11px; color: var(--ink-2); letter-spacing: .24em; margin-bottom: 22px; }
.world-title { font-family: "Zhiming Serif", "Songti SC",serif; font-size: clamp(62px, 7.5vw, 100px); font-weight: 400; letter-spacing: .24em; line-height: 1.25; color: var(--ink); }
.world-motto { margin-top: 22px; font-family: "Zhiming Serif",serif; font-size: 15px; letter-spacing: .2em; color: var(--ink-2); line-height: 1.9; }
.world-map { position: absolute; inset: 0; }
.world-portal { position: absolute; z-index: 3; display: flex; align-items: center; gap: 19px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; padding: 14px; min-height: 76px; transition: transform 450ms, color 300ms; }
.world-portal svg { width: 52px; height: 52px; stroke: var(--primary); fill: none; stroke-width: .8; flex-shrink: 0; transition: transform 600ms; }
.world-portal-name { font-family: "Zhiming Serif",serif; display: block; font-size: 27px; letter-spacing: .14em; font-weight: 400; }
.world-portal-caption { display: block; margin-top: 7px; font-size: 11px; letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; }
.world-portal::after { content: '↗'; font-size: 16px; color: var(--ink-3); margin-left: 10px; transition: transform 300ms; }
.world-portal:hover svg { transform: rotate(12deg); }
.world-portal:hover::after { transform: translate(3px,-3px); }
.portal-zhiming { top: 8%; right: 12%; }
.portal-wendao { top: 42%; right: 1%; }
.portal-yangyun { bottom: 6%; right: 25%; }
.portal-tongdao { bottom: 28%; left: 9%; }
.portal-ziguan { top: 24%; left: 41%; }
.portal-ziguan svg { width: 38px; height: 38px; }
.portal-ziguan .world-portal-name { font-size: 23px; }
.world-landing-note { position: absolute; bottom: 1%; left: 0; color: var(--ink-2); font-size: 11px; line-height: 2.2; letter-spacing: .12em; }
.world-mobile-note { display: none; }

/* The tools grow out of each scene; professional data stays orderly. */
.world-ready #sys-tabs { display: flex; align-items: flex-end; gap: 22px; padding: 28px 0 16px; border: 0; background: none; overflow: visible; margin: 0 0 20px; }
.world-ready .sys-tab { flex: 0 1 auto; border: 0; border-radius: 0; background: none; min-height: 80px; padding: 12px 8px; color: var(--ink-2); position: relative; white-space: normal; }
.world-ready .sys-tab::before { content: ''; display: block; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%; margin: 0 auto 15px; transition: border-radius 420ms, transform 500ms; }
.world-ready .sys-tab[data-sys="ziwei"]::before { width: 25px; height: 25px; border-radius: 3px; transform: rotate(45deg); }
.world-ready .sys-tab[data-sys="qizheng"]::before { width: 35px; height: 24px; transform: rotate(-24deg); }
.world-ready .sys-tab.active { color: var(--primary); box-shadow: none; }
.world-ready .sys-tab.active::before { border-color: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.world-ready .sys-tab-name { font-size: 15px; letter-spacing: .06em; }
.world-ready .sys-flag { font-size: 10px; display: block; margin: 6px 0 0; }
.world-ready .sys-tab[data-sys="ziwei"] { margin-bottom: 25px; }
.world-ready #zm-home { padding: 10px 0 30px; position: relative; }
.world-ready .entry-poem { margin: 12px 0 30px; max-width: 380px; }
.world-ready .ep-line { font-size: clamp(26px, 4vw, 38px); }
.world-ready .start-card { max-width: 430px; background: none; min-height: 94px; border: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); border-radius: 0; padding: 24px 0; }
.world-ready .start-card::after { display: none; }
.world-ready .sc-seal { border-radius: 50%; width: 54px; height: 54px; border: 1px solid var(--line-2); color: var(--primary); background: none; }
/* 观运三入口（2026-10-22）：等宽三列、整组居中。
   原先这里是「flex 右对齐 + 宽度随文字自适应」，随卦的副标题最长
   （多出「· 静心观卦」四个字），把这一排的视觉重心拽向左侧，看着像
   整组偏左。现在副标题只留「一事一问」，三张卡改成等宽固定列、
   整组居中，「观运」标签同步居中 —— 不抢上方「起盘」的戏，
   自成一排稳稳收在页面下方。
   max-width 同时充当桌面宽度上限与移动端铺满的开关：
   容器宽于 512px 时整组居中；窄于 512px 时三列等分铺满。
   ⚠ 这里用「固定列宽 + justify-content:center」而不是「1fr + max-width + margin:auto」：
     在 ≥1024 时 #zm-home 本身是 grid（两列 1fr / 420），.fun-grid 是跨列的
     grid item —— grid item 上的一对 auto 水平 margin 会让宽度塌成 fit-content
     （实测三列只剩 364px，每张卡 106px，「今日 · 你的命局」被挤成两行）。 */
.world-ready .fun-grid { display: grid; grid-template-columns: repeat(3, 156px); justify-content: center; gap: 22px; margin: 0 0 14px; }
.world-ready .fun-card { width: auto; min-width: 0; min-height: 108px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 6px; box-shadow: none; }
.world-ready .fun-card:nth-child(2) { margin-top: 0; }
/* 「观运」标签与三张卡同宽、同轴。
   .sec-label 本身是 flex + 一道渐隐引线（::after flex:1），text-align 对它无效——
   以前那条 text-align:right 从来没起过作用，文字一直钉在左端。
   这里把标签也收进与卡组一致的 512px 并居中：引线正好停在卡组右缘，
   形成「观运 ————————」压在三张卡上方的轴线。 */
.world-ready .fun-label { width: min(100%, 512px); margin: 22px auto 12px; justify-self: center; }
.world-ready .fun-icon { background: transparent; color: var(--primary); border-radius: 50%; border: 1px solid var(--line-2); }
.world-ready .wd-entrance { min-height: 250px; padding: 50px 0; text-align: left; }
.world-ready .wd-new-btn { margin-left: 18%; width: 130px; height: 130px; background: none; box-shadow: none; }
.world-ready .wd-core { font-family: "Zhiming Serif",serif; font-size: 36px; font-weight: 400; background: none; color: var(--ink); }
.world-ready .wd-caption { text-align: left; font-family: "Zhiming Serif",serif; font-size: 25px; letter-spacing: .14em; margin: 30px 0 0 18%; }
.world-ready .wd-caption-sub { margin-left: 18%; text-align: left; color: var(--ink-2); }
.world-ready .wd-history-sec { margin-left: min(18%, 150px); }
.world-ready .wd-div-sec { max-width: 650px; }
.world-ready .wd-input-area { background: var(--veil); border-top: 1px solid var(--line); }
.world-ready .wx-circle-row { justify-content: flex-start; gap: clamp(12px, 4vw, 38px); margin: 54px 0 60px; }
.world-ready .wx-circle:nth-child(even) { transform: translateY(20px); }
.world-ready .wx-circle { background: none; box-shadow: none; border-width: 1px; }
.world-ready .cap-cards { display: flex; gap: 20px; flex-wrap: wrap; }
.world-ready .cap-card { flex: 1 1 200px; background: none; border-width: 0 0 1px; border-radius: 0; }
.world-ready .item-grid { gap: 24px; }
.world-ready .self-quote { padding: 10px 0 35px; text-align: left; }
.world-ready .self-list { display: flex; flex-direction: column; max-width: 700px; margin-left: auto; gap: 0; }
.world-ready .self-card { min-height: 82px; padding: 22px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; position: relative; }
.world-ready .self-card::after { content: '↗'; position: absolute; right: 15px; top: 25px; color: var(--ink-3); }
.world-ready .self-card:nth-child(even) { margin-left: 40px; }
.world-ready .zg-vipcard { max-width: 450px; background: var(--surface); border: 1px solid var(--line); margin: 14px 0 28px; }
.world-ready .zg-vipcard-grid { justify-content: flex-start; gap: 26px; }
.world-ready .peer-hero,.world-ready .pd-hero { background: none; box-shadow: none; }
.world-ready .peer-card,.world-ready .pd-card { background: var(--surface); border-color: var(--line); }
.world-ready .auth-card { max-width: 620px; }

/* Real waiting state: observed, never simulated or delayed. */
.world-forming { position: fixed; pointer-events: none; z-index: 30; bottom: max(26px, env(safe-area-inset-bottom)); left: var(--world-space); display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 170px); padding: 12px; background: var(--veil); border: 1px solid var(--line-soft); border-radius: 7px; font-size: 11px; color: var(--ink-2); }
.world-forming[hidden] { display: none; }
.world-forming svg { width: 34px; height: 34px; flex-shrink: 0; color: var(--primary); }
.world-forming path,.world-forming ellipse { fill: none; stroke: currentColor; stroke-width: 1; }
.world-forming .forming-time,.world-forming .forming-palaces,.world-forming .forming-orbits { display: none; transform-origin: 30px 30px; }
.world-forming[data-kind="bazi"] .forming-ink,.world-forming[data-kind="ziwei"] .forming-ink,.world-forming[data-kind="qizheng"] .forming-ink { display: none; }
.world-forming[data-kind="bazi"] .forming-time { display: block; animation: world-turn 12s linear infinite; }
.world-forming[data-kind="ziwei"] .forming-palaces { display: block; animation: world-ink 3s ease-in-out infinite alternate; }
.world-forming[data-kind="qizheng"] .forming-orbits { display: block; animation: world-turn 14s linear infinite; }
.world-forming circle { fill: none; stroke: currentColor; stroke-width: 1; transform-origin: 30px 30px; animation: world-ink 2.2s ease-out infinite; }
.world-forming circle:nth-child(2) { animation-delay: .5s; }
.world-forming circle:nth-child(3) { animation-delay: 1s; }
.world-forming[data-kind="ziwei"] circle { rx: 2; stroke-dasharray: 3 4; }
.world-forming[data-kind="qizheng"] circle { transform: rotate(-20deg); animation-name: world-orbital; }
@keyframes world-ink { from { transform: scale(.45); opacity: .85; } to { transform: scale(1.15); opacity: .08; } }
@keyframes world-orbital { to { transform: rotate(340deg); } }
[data-motion="reduce"] .world-forming circle,.world-paused .world-forming circle { animation: none; }
.world-paused .world-forming g { animation-play-state: paused !important; }
.world-ready .pd-tiers { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-left: auto; }
.world-ready .pd-tier { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 24px 12px; position: relative; }
.world-ready .pd-tier:nth-child(2) { margin-left: 6%; }
.world-ready .pd-tier:nth-child(3) { margin-left: 12%; }
.world-ready .pd-tier::before { content: ''; width: 9px; height: 9px; border: 1px solid var(--primary); border-radius: 50%; position: absolute; left: -8px; top: 28px; }
.world-ready .pd-switch-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.world-ready .wendao-intro .intro-line { font-family: "Zhiming Serif",serif; font-size: 22px; }
.world-ready #wendao-home .wendao-intro .intro-sub { max-width: 34em; font-size: 12px; color: var(--ink-2); }
.world-ready .membership-plan { background: var(--surface); border-radius: 8px; padding-top: 26px; padding-bottom: 26px; }
.world-ready .membership-plan.selected { border-color: var(--primary); background: var(--primary-soft); }
body:has(.payment-return)::before { content: ''; position: fixed; width: 65vw; height: 65vw; border-radius: 50%; border: 1px solid var(--line); right: -25vw; top: 5vh; z-index: -1; }
.world-ready .wd-thinking,.world-ready .ai-thinking { border-left: 2px solid var(--primary); }
.world-ready .wd-thinking::before,.world-ready .ai-thinking::before { content: ''; display: inline-block; width: 9px; height: 9px; margin: 0 9px; border: 1px solid var(--primary); border-radius: 50%; }
.world-orientation { display: flex; align-items: center; gap: 12px; }
.world-back { min-width: 44px; min-height: 44px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
[data-world="world"] .world-back { visibility: hidden; }
body:not(.world-ready) .world-nav-toggle,body:not(.world-ready) .world-topline,body:not(.world-ready) .world-scene,body:not(.world-ready) .world-forming { display: none; }
.world-ready .self-card { text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.world-ready .self-card .self-k { display: block; padding-right: 24px; }
.world-ready .self-card .self-v { display: block; text-align: left; }

@media (min-width: 900px) {
  .world-ready #view-zhiming:not(:has(#zm-entry:not(.hidden),#zm-result:not(.hidden))) { max-width: 900px; }
  .world-ready #view-yangyun .yangyun-intro { max-width: 420px; margin-left: 10%; line-height: 2.3; font-size: 22px; }
  .world-ready #zg-home { max-width: 860px; }
}
@media (max-width: 950px) {
  /* 首页 Hero 顶部留白收紧（2026-10-22）：基础 :has() 规则特异性更高，
     必须同特异性在后面覆盖；其余页面维持 95px。品牌栏 absolute 不受影响。 */
  .world-ready .app { padding-top: 95px; padding-bottom: 120px; }
  .world-ready .app:has(#view-world.active) { padding-top: 90px; }
  .world-topline { gap: 10px; }
  .world-location { font-size: 10px; letter-spacing: .04em; }
  .world-wordmark span { font-size: 21px; }
  .world-core { width: 100vw !important; height: 100vw !important; top: 21%; left: 10%; }
  .world-landing { min-height: 700px; }
  .world-intro { padding-top: 6px; }
  .world-title { font-size: 61px; }
  .world-motto { font-size: 12px; letter-spacing: .12em; }
  .world-eyebrow { margin-bottom: 18px; font-size: 10px; }
  .world-portal { gap: 12px; padding: 12px 5px; min-height: 76px; }
  .world-portal-name { font-size: 23px; }
  .world-portal svg { width: 39px; height: 39px; }
  .world-portal-caption { font-size: 10px; letter-spacing: .04em; }
  .world-portal::after { margin-left: 3px; }
  .portal-zhiming { top: 30%; right: 0; }
  .portal-wendao { top: 46%; left: 0; right: auto; }
  .portal-yangyun { top: 62%; right: 0; bottom: auto; }
  .portal-tongdao { top: 78%; left: 0; bottom: auto; }
  .portal-ziguan { top: 94%; right: 0; left: auto; }
  .portal-ziguan .world-portal-name { font-size: 22px; }
  .world-landing-note { display: none; }
  .world-ready #sys-tabs { gap: 10px; justify-content: space-between; }
  .world-ready .sys-tab { padding-left: 3px; padding-right: 3px; }
  .world-ready .sys-tab-name { font-size: 14px; }
  .world-ready .start-card { padding: 21px 0; }
  .world-ready .fun-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 512px; margin-inline: auto; }
  .world-ready .fun-card { min-width: 0; padding: 13px 4px; }
  .world-ready .wd-history-sec { margin-left: 0; }
  .world-ready .wx-circle-row { gap: 12px; justify-content: space-between; }
  .world-ready .wx-circle { width: 48px; height: 48px; }
  .world-ready .self-card:nth-child(even) { margin-left: 18px; }
  .world-ready .self-card { padding-right: 30px; }
  .world-nav-toggle { right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); min-height: 52px; padding-right: 14px; }
  .world-menu-map { height: 335px; }
  .world-menu-map::before { width: 190px; height: 190px; }
  .world-menu-link { min-width: 80px; padding: 12px 8px; }
  .world-menu-link strong { font-size: 22px; }
  .world-menu-link:nth-child(1) { left: calc(50% - 40px); }
  .world-menu-link:nth-child(2) { top: 95px; right: 0; }
  .world-menu-link:nth-child(3) { right: 10%; }
  .world-menu-link:nth-child(4) { left: 10%; }
  .world-menu-link:nth-child(5) { top: 95px; left: 0; }
  .world-menu-tools { gap: 10px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .world-menu { display: block; padding-bottom: 90px; }
  .world-menu-inner { margin: 0 auto; }
  .world-menu-map { height: 240px; }
  .world-menu-link:nth-child(2),.world-menu-link:nth-child(5) { top: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-ready *, .world-ready *::before, .world-ready *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
[data-motion="reduce"] .world-ready *,[data-motion="reduce"] .world-ready *::before,[data-motion="reduce"] .world-ready *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
@media (max-width: 700px) {
  .kb-open .world-ready .world-nav-toggle,.kb-open .world-ready .world-forming { display: none; }
}

/* Landing portal entrance only. The real destination keeps its layout while
   hidden, and becomes visible only after focus, push and heading settlement. */
.world-entering:not(.world-entry-reveal) .app > .view.active { opacity: 0 !important; pointer-events: none; }
.world-entering { overflow: hidden; }
.world-entering .world-forming { visibility: hidden; }
.world-entry-layer { position: fixed; z-index: 320; pointer-events: none; }
.world-entry-layer .world-landing { min-height: 100%; height: 100%; }
.world-entry-title { position: fixed; z-index: 350; pointer-events: none; color: var(--ink); white-space: nowrap; transform-origin: top left; }
.world-entering:not(.world-entry-reveal) .world-topline { opacity: 0 !important; pointer-events: none; }
.world-entry-layer,.world-entry-title { will-change: transform, opacity; }
.world-entering .world-scene { will-change: transform; }

/* 自观四个入口共用标题与副标题起点，保留原有尺寸及动效。 */
.world-ready #zg-home .self-card { flex-direction:column; align-items:flex-start; justify-content:center; text-align:left; }
.world-ready #zg-home .self-card .self-k,
.world-ready #zg-home .self-card .self-v { align-self:stretch; text-align:left; margin-left:0; }

/* ==========================================================================
   自观首页 · 有秩序的自由布局（2026-10-02 重排）
   --------------------------------------------------------------------------
   原来四个入口一行一行竖排、大小一致，主次无从分辨。这一版按语义分组、
   按主次给大小与位置：
     · 「我」——当前人物与它的命盘，是这一页唯一的主角（最大、最靠前，
       并且是全站唯一带纵向轴线的一枚）；
     · 「命盘记录 / 我的订单」——与命盘直接相关，紧随主角、两枚并排；
     · 「设置」——外围辅助，压到最小最淡，收成一条细边；
     · 「权益」——独立成栏的深墨卡，视觉权重仅次于主角。
   桌面分两区（左「我」／右「权益」），移动端回到单列自然顺序。
   秩序来自分组、大小与留白，而不是把所有入口排成等宽格子。
   ========================================================================== */

/* —— 移动端：单列，DOM 顺序即主次 —— */
.world-ready #zg-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 26px;
}
.world-ready #zg-home > .self-quote { margin: 0; }
.world-ready #zg-home > .self-list {
  grid-column: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  margin: 0; max-width: none;
}
/* 抵消世界版给偶数卡片的错位：新布局用自己的分组表达主次，
   两套偏移叠在一起只会让人以为没对齐。 */
.world-ready #zg-home > .self-list > .self-card { margin-left: 0; }

/* 主角卡：唯一带纵向轴线（--primary）的一枚，字号升到标题级 */
.world-ready #zg-home .self-core {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  min-height: 0;
  padding: 26px 56px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--primary);
  border-radius: 12px;
}
.world-ready #zg-home .self-core .self-core-tag {
  font-size: 11px; letter-spacing: .22em; color: var(--ink-3);
}
.world-ready #zg-home .self-core .self-k {
  font-family: "Zhiming Serif", "Songti SC", serif;
  font-size: clamp(21px, 2.3vw, 28px);
  letter-spacing: .1em; line-height: 1.35; color: var(--ink);
}
.world-ready #zg-home .self-core .self-v {
  font-size: 13px; line-height: 1.7; color: var(--ink-2);
}
.world-ready #zg-home .self-core::after { top: 28px; right: 20px; font-size: 15px; }

/* 次要入口：仍是「行」，不是「卡」—— 用小字号与细边退出视觉中心 */
.world-ready #zg-home .self-minor { min-height: 0; padding: 17px 44px 16px 0; }
.world-ready #zg-home .self-minor .self-k { font-size: 14px; color: var(--ink-2); }
.world-ready #zg-home .self-minor .self-v { font-size: 11px; color: var(--ink-3); }
.world-ready #zg-home .self-minor::after { top: 21px; }
/* 外围：设置再降一级 —— 只有一行字，弱到像脚注 */
.world-ready #zg-home .self-utility { padding-block: 14px; }

/* 权益栏：唯一的深墨卡。桌面端进右栏，内部改竖排
   （窄栏里再横排会被压扁，读数会变成两行数字） */
.world-ready #zg-home > .zg-vipcard {
  grid-column: 1;
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--sp-5);
  margin: 0; max-width: none;
  padding: clamp(22px, 2.6vw, 30px);
}
.world-ready #zg-home > .zg-vipcard .zg-vipcard-head {
  flex-direction: column; align-items: flex-start; gap: 6px;
}
.world-ready #zg-home > .zg-vipcard .zg-vipcard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.world-ready #zg-home > #zg-logout { justify-self: start; margin: 0; }

/* 可点性：细边与箭头一起回应指针，但因为主角已经用尺寸说话，
   这里不需要再加阴影与放大（那会让整页变吵）。 */
.world-ready #zg-home .self-card::after {
  transition: transform .18s ease, color .18s ease;
}
.world-ready #zg-home .self-card:hover::after,
.world-ready #zg-home .self-card:focus-visible::after {
  transform: translate(2px, -2px); color: var(--primary);
}
.world-ready #zg-home .self-core:hover,
.world-ready #zg-home .self-core:focus-visible {
  border-color: var(--line); border-left-color: var(--primary);
}
.world-ready #zg-home .self-minor:hover .self-k,
.world-ready #zg-home .self-minor:focus-visible .self-k { color: var(--ink); }

/* —— 桌面端：左「我」／右「权益」两区 ——
   主角通栏，记录与订单并排，设置收成一条细边；
   右栏本身是一块留白，权益卡因此获得与功能入口不同的地位。 */
@media (min-width: 1024px) {
  .world-ready #zg-home {
    grid-template-columns: minmax(0, 1.6fr) minmax(272px, 1fr);
    column-gap: clamp(34px, 4.2vw, 72px);
    row-gap: 30px;
    align-items: start;
  }
  .world-ready #zg-home > .self-quote { grid-column: 1 / -1; }
  .world-ready #zg-home > .self-list { grid-column: 1; grid-row: 2; }
  .world-ready #zg-home > .zg-vipcard { grid-column: 2; grid-row: 2; align-self: start; }
  .world-ready #zg-home > #zg-logout { grid-column: 1; grid-row: 3; }

  .world-ready #zg-home > .self-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
  }
  .world-ready #zg-home > .self-list > .self-core { grid-column: 1 / -1; }
  /* 设置只占半格：它必须看起来比「命盘记录 / 我的订单」还轻，
     右边留出的空位就是这一版有意留下的呼吸。 */
  .world-ready #zg-home > .self-list > .self-utility { grid-column: 1 / 2; }
}

/* 自观：统一边线与间距，不使用错位排版。 */
.world-ready #zg-home {
  width:100%; max-width:none; grid-template-columns:minmax(0,1fr);
  gap:24px; align-items:stretch;
}
.world-ready #zg-home > .self-quote {
  grid-column:1; grid-row:1; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:8px;
  margin:0; padding:0; min-width:0; align-self:stretch; overflow-wrap:anywhere;
}
.world-ready #zg-home > .self-quote > p { margin:0; }
.world-ready #zg-home > .self-quote > p:first-of-type { font-size:clamp(20px,4.6vw,26px); line-height:1.65; }
.world-ready #zg-home > .zg-vipcard {
  grid-column:1; grid-row:2; width:100%; min-width:0; margin:0;
  padding:24px; gap:20px; align-self:stretch;
}
.world-ready #zg-home .zg-vipcard-head { flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px; }
.world-ready #zg-home .zg-vipcard-more { min-height:44px; }
.world-ready #zg-home > .self-list {
  grid-column:1 / -1; grid-row:3; margin:0; width:100%; max-width:none;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.world-ready #zg-home > .self-list > .self-card {
  grid-column:auto; grid-row:auto; margin:0; min-width:0; width:100%;
  min-height:104px; padding:20px 38px 20px 16px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px;
  overflow-wrap:anywhere; text-align:left;
}
.world-ready #zg-home > .self-list > .self-core { grid-column:1 / -1; min-height:128px; padding:24px 44px 24px 20px; }
.world-ready #zg-home .self-card .self-k,.world-ready #zg-home .self-card .self-v { padding:0; }
.world-ready #zg-home .self-card::after { top:22px; right:16px; }
.world-ready #zg-home > #zg-logout { grid-column:1 / -1; grid-row:4; margin:0; justify-self:start; }
@media(min-width:768px) {
  .world-ready #zg-home { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .world-ready #zg-home > .self-quote { grid-column:1; grid-row:1; padding:16px 0; }
  .world-ready #zg-home > .zg-vipcard { grid-column:2; grid-row:1; }
  .world-ready #zg-home > .self-list { grid-row:2; gap:20px 28px; }
  .world-ready #zg-home > #zg-logout { grid-row:3; }
}
.ai-wait-hint { color:var(--ink-2); font-size:12px; line-height:1.8; margin-top:14px; }
