/* ═══════════════════════════════════════════════════════════
   星座.live · 星系屏切换设计
   - 全屏「屏」(screen)：一屏一个主题，整屏切换，不用长滚动
   - 星球感：星野底图 + 视差 + 光晕 + 轨道环
   - 白紫机甲风保留，但底色改深空
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 深空底色 */
  --space-0:#05030f;
  --space-1:#0a0620;
  --space-2:#120a2e;
  --space-3:#1a1140;
  /* 星系强调色 */
  --nebula:#7b4dff;
  --nebula-2:#a97dff;
  --nebula-deep:#4a2ecf;
  --cyan:#37d6c8;
  --star:#ffffff;
  /* 文字 */
  --ink:#f2eeff;
  --ink-2:#c5bce0;
  --ink-3:#a49bc4;
  /* 玻璃面板 */
  --glass:rgba(22,14,48,.62);
  --glass-2:rgba(30,20,62,.72);
  --edge:rgba(150,120,255,.22);
  --edge-2:rgba(150,120,255,.40);
  --r:20px;
  --r-sm:12px;
  /* 注意：正文含占星符号（♈☉ 等）时，中文字体缺这些码位会渲染成豆腐块。
     字体栈末尾补专业符号字体，浏览器会逐字回退到有字形的那个。 */
  --font:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,system-ui,
         "Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","DejaVu Sans",sans-serif;

  /* ── 别名：mbti-radar.css / 旧组件用的是浅色主题变量名，深空版必须补上，
        否则 color 取不到值 + background-clip:text 会把文字裁成透明（实测 MBTI 大字 0×0） ── */
  --muted:#8b82ad;
  --ink2:#c5bce0;
  --ink-2:#c5bce0;
  --purple:#7b4dff;
  --purple-deep:#dcd0ff;
  --purple-soft:rgba(123,77,255,.16);
  --line:rgba(150,120,255,.22);
  --line2:rgba(150,120,255,.40);
  --bg2:rgba(22,14,48,.62);
  --shadow:0 12px 34px rgba(0,0,0,.42);
  --good:#4ade9b;
  --warn:#ffc46b;
  --bad:#ff8181;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--space-0);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* 全屏切屏，不滚动 */
}
a{color:var(--nebula-2);text-decoration:none}
/* 品牌/卡片类链接悬停不要下划线（实测 .brand 悬停时整块文字带下划线，
   用户明确要求取消）。只对正文链接保留下划线。 */
a:hover{text-decoration:underline}
a.brand:hover,
a.brand:hover *,
.nx-card a:hover,
.nx-card:hover a{text-decoration:none !important}

/* ───────────── 星空背景层（三层视差） ───────────── */
#space{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--space-0)}
#space .layer{position:absolute;inset:-10%;background-repeat:repeat;will-change:transform}
#space .galaxy{
  position:absolute;inset:0;
  background-size:cover;background-position:center 30%;
  opacity:.58;filter:saturate(1.1) brightness(.92);
  transform:scale(1.06);transition:transform 1.4s cubic-bezier(.22,.8,.24,1);
}
#space .veil{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(123,77,255,.20), transparent 62%),
    radial-gradient(900px 600px at 12% 100%, rgba(55,214,200,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,3,15,.72) 0%, rgba(5,3,15,.42) 42%, rgba(5,3,15,.86) 100%);
  pointer-events:none;
}
/* CSS 星点（不依赖图片，兜底 + 增强密度） */
#stars-css{position:absolute;inset:0;opacity:.9}
#stars-css i{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--dur,4s) ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}

/* 飘浮的星云团 */
.orb{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(46px);opacity:.34;mix-blend-mode:screen;
  animation:float 22s ease-in-out infinite alternate;
}
@keyframes float{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(18px,-26px,0) scale(1.09)}
}

/* ───────────── 顶栏（悬浮） ───────────── */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:linear-gradient(180deg, rgba(5,3,15,.86), rgba(5,3,15,0));
  backdrop-filter:blur(10px);
  /* 顶栏高度随导航行数变化（两行 → 约 96px），用变量统一给 .screen 让位 */
  --barh:96px;
}
.bar{
  display:flex;align-items:stretch;justify-content:center;gap:20px;
  height:auto;min-height:64px;
  width:min(1460px,calc(100% - 32px));margin:0 auto;padding-block:7px;
  flex-direction:row;flex-wrap:wrap;
}
/* 品牌块与导航框同高：两者都在 .bar 的 stretch 下等高对齐 */
.bar .brand{flex:0 0 auto;align-self:stretch}
/* 导航整块居中；不写在这里（见下方 nav.screens 主定义），避免被后续规则覆盖 */
/* 导航右侧留白，避免最后一个按钮贴屏幕边（实测「口径」贴边） */
nav.screens{margin-right:8px}

/* ── 品牌区（放大版）──
   组成：星云 logo（52px）+ 主名（28px）+ slogan（一行小字）
   用纵向 flex 把主名与 slogan 叠在一起，整体与右侧 tag 框等高。 */
.brand{
  display:flex;align-items:center;gap:2px;
  font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--ink);
  padding:6px 4px;
}
.brand .brand-txt{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:0;
}
.brand .brand-name{
  font-size:28px;font-weight:800;line-height:1.1;letter-spacing:.01em;
  white-space:nowrap;
}
.brand .brand-name b{color:var(--nebula-2)}
/* slogan：小字、带一点字距，像品牌签名 */
.brand .brand-slogan{
  font-size:11px;font-weight:500;line-height:1.35;
  color:#9d93c4;letter-spacing:.06em;white-space:nowrap;
  opacity:.92;
}
.brand .brand-slogan em{
  font-style:normal;color:#b79bff;font-weight:600;
}
/* 星云 logo 槽位：SVG 由 nebula-logo.js 注入；从 32 提到 52，再提到 72
   ── 为什么用负边距 ──
   实测：星云图形右边界在槽位内 x=75，槽位宽 72（含 viewBox 右侧 19px 空白余量），
   文字从 x=119 开始 → 视觉间距 44px，其中 19px 是 SVG 空白、25px 是 gap。
   收窄办法：槽位减到 62px 并把 SVG 右移，吃掉 viewBox 的空白余量；
   gap 从 13 降到 2，让星云的光晕边缘几乎贴住文字。 */
.logo-slot{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:72px;flex:none;
  margin-left:4px;
  margin-right:-8px;   /* 吃掉 SVG viewBox 右侧的空白余量 */
}
.logo-slot svg{display:block;overflow:visible}
/* 旋臂缓慢自转，制造「活的星云」；prefers-reduced-motion 时停。
   旋转原点必须跟 logo 尺寸一致：logo 72px → 原点 36px。 */
.nebula-spin{
  transform-origin:36px 36px;
  animation:nebulaRotate 26s linear infinite;
}
@keyframes nebulaRotate{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .nebula-spin{animation:none}
}
.brand:hover .logo-slot svg{filter:drop-shadow(0 0 10px rgba(169,125,255,.9))}
.brand b{color:var(--nebula-2)}

/* 屏导航：一行排完（16 个标签）
   ── 为什么能一行 ──
   标签从 20 减到 16，且外框已去掉，一行所需宽度约 16×80 = 1280px，
   在 1440 视口（可用 1408）内放得下。这里不设 max-width 上限，
   让 flex 自然一行排开；窄屏仍然允许换行兜底（wrap）。 */
nav.screens{
  display:flex;gap:7px;margin:0;flex-wrap:nowrap;
  justify-content:center;align-items:center;
  flex:0 1 auto;width:auto;max-width:none;
  overflow:visible;scrollbar-width:none;
  padding:6px 0;
  position:relative;
  border-radius:0;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
/* 一行排不下时（<1300px）才允许换行 */
@media (max-width:1300px){
  nav.screens{flex-wrap:wrap;max-width:660px}
}
/* 去框后星点伪元素一并收起（不留孤立装饰） */
nav.screens::before{content:none}
nav.screens::after{content:none}
/* 外框已去掉，原本用于框内的星点/星云/银河装饰一并移除（无框即无需装饰）。 */
nav.screens button{
  appearance:none;border:1px solid rgba(150,120,255,.28);background:rgba(22,14,48,.62);
  color:var(--ink-2);
  font-family:var(--font);font-size:12.5px;font-weight:500;
  padding:7px 12px;border-radius:999px;
  cursor:pointer;white-space:nowrap;transition:.25s;
  backdrop-filter:blur(8px);
  flex-shrink:0;
  /* 每个 tag 自己也是「一小块星空」：极淡星点 + 内高光，不是纯色块 */
  background-image:
    radial-gradient(circle .9px at 22% 34%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(circle .7px at 68% 66%, rgba(201,182,255,.42) 0%, transparent 100%),
    radial-gradient(circle .8px at 44% 78%, rgba(255,255,255,.34) 0%, transparent 100%),
    radial-gradient(circle .7px at 84% 26%, rgba(180,220,255,.36) 0%, transparent 100%),
    linear-gradient(160deg, rgba(123,77,255,.10), rgba(255,255,255,0) 65%);
}
nav.screens button:hover{
  color:#fff;background-color:rgba(123,77,255,.32);
  border-color:rgba(150,120,255,.58);
  box-shadow:0 0 14px rgba(123,77,255,.35);
}
nav.screens button.on{
  color:#fff;
  background-color:transparent;
  background-image:
    radial-gradient(circle 1px at 20% 30%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(circle .8px at 62% 62%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(circle .9px at 80% 24%, rgba(255,255,255,.55) 0%, transparent 100%),
    linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;
  box-shadow:0 4px 18px rgba(123,77,255,.6),0 0 0 2px rgba(123,77,255,.24);
  font-weight:600;
}

/* ── 两行导航：不再是「一屏塞下」，而是「分两行，字号保持正常」 ──
   19 标签 × 13px/14px 单行需约 1200px，宽屏可用仅 1102 → 只能缩字号+滚动，
   实测挤压品牌区、末项截断。改两行后每行约 10 个，余量充裕，不用再缩字。
   顶栏高度由 66px 提到 100px 以容纳两行（.bar 同步改）。 */
.bar{
  height:auto;min-height:64px;
  align-items:center;flex-wrap:nowrap;
  padding-block:7px;
}
@media (max-width:1359px){
  .bar{gap:12px;min-height:92px}
  nav.screens{gap:6px}
  nav.screens button{font-size:12.5px;padding:6px 11px}
}
@media (max-width:1279px){
  .bar{gap:10px;min-height:88px}
  nav.screens{gap:5px}
  nav.screens button{font-size:12px;padding:6px 9px}
}
@media (max-width:1060px){
  nav.screens{gap:4px}
  nav.screens button{font-size:11.5px;padding:5px 8px}
}
@media (max-width:1023px){
  .bar{gap:8px;min-height:auto}
  .brand{font-size:16px}
  .brand .logo-slot{width:26px;height:26px}
  nav.screens{gap:4px}
  nav.screens button{font-size:11px;padding:5px 7px;letter-spacing:-.01em}
}

/* ───────────── 命盘+今日互动 ───────────── */
.transit-header{
  display:flex;align-items:baseline;gap:10px;margin-bottom:14px;
}
.transit-grid{display:flex;flex-direction:column;gap:8px}
.transit-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:12px;background:rgba(10,6,32,.5);
  border:1px solid var(--edge);cursor:pointer;transition:.2s;
}
.transit-item:hover{
  background:rgba(10,6,32,.7);border-color:rgba(123,77,255,.4);
  transform:translateX(4px);
}
.transit-tag{
  flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
}
.transit-body{
  flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.transit-planet{
  font-size:14px;font-weight:500;color:var(--ink);
}
.transit-dir{
  flex:none;font-size:12px;padding:4px 10px;border-radius:999px;
  background:rgba(123,77,255,.2);color:#b79bff;font-weight:500;
}

/* ───────────── 屏容器 ───────────── */
#stage{position:relative;z-index:10;height:100vh;padding-top:var(--barh,96px)}
.screen{
  position:absolute;inset:var(--barh,96px) 0 0 0;
  display:flex;align-items:flex-start;justify-content:center;
  /* 底部留足空间，避免内容被屏边裁切（实测能力屏底部文案被切） */
  padding:26px 20px 96px;
  opacity:0;visibility:hidden;transform:scale(.965) translateY(16px);
  transition:opacity .58s cubic-bezier(.22,.8,.24,1),
             transform .58s cubic-bezier(.22,.8,.24,1),
             visibility .58s;
  pointer-events:none;
  overflow-y:auto;overflow-x:hidden;
}
.screen.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.screen-inner{width:min(1200px,100%);margin:auto;padding:4px 0}
/* 星盘屏要更宽：三栏布局需要横向空间。
   但用户要求两侧留白、不能贴边，所以从 1560 收到 1440，
   配合 .chart-arena 自身的 max-width 1400 + padding，两侧各有 20px 以上留白。 */
#s-chart .screen-inner{width:min(1440px,calc(100% - 40px))}

/* ── 星盘屏：圆盘推到最右，光圈紧挨右侧圆点
   用户：「你把这个放大最右面就行。光圈跟最右的圆点保持很小的距离」

   实测（视口 1482）：
     光圈右边缘 1421，右侧圆点左边缘 1453 → 间隙 32px（要压到 ~10px）
     所以要整体右移 22px。
   右侧 32px 的构成：screen-inner 居中 8 + hero 右 padding 8 + stage 内剩余 16
   → screen-inner 放到 100%，hero 右 padding 归零即可。 */
#s-chart .screen-inner{width:min(1482px,100%)}
#s-chart .hero{padding-left:36px;padding-right:0}
/* .screen 自带 padding:26px 20px 96px，右侧 20px 就是光圈到视口/圆点之间的最后一段。
   星盘屏去掉右侧 padding，让圆盘真正顶到最右。 */
#s-chart.screen{padding-right:0}

/* ───────────── 玻璃卡（block 块模式） ───────────── */
.card{
  /* 恢复玻璃块底：半透明深紫底 + 1px 边框 + 圆角 + 模糊 + 阴影。
     上一版把全站都改成「上下直线切割」，实测把星空盖没了，
     用户要求回滚到 block 块模式 —— 只有「星盘」区保留上下直线。 */
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:22px;
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 18px 50px rgba(0,0,0,.46), inset 0 1px 0 rgba(169,125,255,.16);
}
/* 全站不再用 .card 的伪元素画切割线（回到 block 模式）。
   注意：这里不能写 content:none —— 会连 .card.aurora:before 的描边一起干掉。
   切割线只在「星盘」区用独立的 .chart-block 承载（见文件末尾）。 */
/* aurora：块模式下的渐变描边（普通卡片用）
   注意：hero 也带 aurora 类，但它不该有框 —— 见下方 .hero.aurora:before 覆盖 */
.card.aurora{position:relative;overflow:hidden}
.card.aurora:before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(123,77,255,.75),rgba(55,214,200,.35),rgba(123,77,255,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
/* ── hero 的 aurora 描边：关闭 ──
   用户明确说：「我要把白色的框去掉，或者我看不见这个框」。

   根因：.card.aurora:before 画的渐变描边是
   linear-gradient(135deg, rgba(123,77,255,.75), rgba(55,214,200,.35), ...)，
   在深色背景上叠加后视觉上呈**白色细线**，形成一圈明显的白框。

   hero 已经通过 .hero 的 background/border/圆角/shadow 有了玻璃卡外观，
   不需要再叠这一层描边。关掉它，框只剩「底色+圆角」的柔和边界。 */
.hero.aurora:before{
  content:none !important;
  display:none !important;
}
.hero::before,
.hero::after{
  content:none !important;
}

.grid{display:grid;gap:16px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ───────────── 排版 ───────────── */
h1{font-size:clamp(32px,5vw,58px);line-height:1.12;margin:0 0 16px;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 8px;letter-spacing:-.01em}
h3{font-size:17px;margin:0 0 8px}
p{margin:0 0 12px;color:var(--ink-2)}
.sub{color:var(--ink-3);font-size:14px}
.glow-text{
  background:linear-gradient(96deg,#fff,#c9b3ff 46%,#7b4dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--nebula-2);margin-bottom:10px}

.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tag{
  font-size:12.5px;padding:6px 13px;border-radius:999px;
  background:rgba(123,77,255,.14);border:1px solid var(--edge-2);color:var(--ink-2);
}

/* ───────────── 按钮 ───────────── */
button,.btn{
  font-family:var(--font);font-size:15px;cursor:pointer;
  border-radius:var(--r-sm);padding:0 22px;height:46px;
  border:1px solid var(--edge-2);background:rgba(255,255,255,.04);color:var(--ink);
  transition:.2s;
}
button:hover,.btn:hover{border-color:var(--nebula);background:rgba(123,77,255,.18)}
button.primary{
  border:0;color:#fff;
  background:linear-gradient(96deg,#7b4dff,#a97dff);
  box-shadow:0 10px 30px rgba(123,77,255,.46);
}
button.primary:hover{box-shadow:0 14px 38px rgba(123,77,255,.62);transform:translateY(-1px)}
button.ghost{background:transparent}

/* ───────────── 表单 ───────────── */
.formgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr auto;gap:12px;align-items:end}
.field label{display:block;font-size:12px;color:var(--ink-3);margin-bottom:6px;letter-spacing:.03em}
.field input,.field select{
  width:100%;height:46px;padding:0 13px;border-radius:var(--r-sm);
  border:1px solid var(--edge-2);background:rgba(10,6,32,.72);color:var(--ink);
  font-family:var(--font);font-size:15px;outline:none;transition:.16s;
}
.field input:focus,.field select:focus{
  border-color:var(--nebula);box-shadow:0 0 0 4px rgba(123,77,255,.22);
}
.field input::placeholder{color:#6b6389}
select option{background:#120a2e;color:var(--ink)}

/* ───────────── 屏指示器（右侧小行星点） ───────────── */
#dots{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
#dots button{
  width:11px;height:11px;min-height:0;padding:0;border-radius:50%;
  background:rgba(169,125,255,.22);border:1px solid rgba(169,125,255,.38);
  transition:.24s;position:relative;
}
#dots button.on{
  /* 原 border-color:#fff（纯白），改紫金 */
  background:var(--nebula-2);border-color:rgba(255,222,150,.95);
  box-shadow:0 0 0 4px rgba(123,77,255,.26), 0 0 16px rgba(169,125,255,.9);
  transform:scale(1.22);
}
#dots button:after{
  content:attr(data-label);position:absolute;right:22px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:12px;color:var(--ink-2);
  background:rgba(10,6,32,.9);border:1px solid var(--edge);border-radius:8px;
  padding:4px 9px;opacity:0;pointer-events:none;transition:.18s;
}
#dots button:hover:after{opacity:1}

/* 切屏箭头 / 提示 */
.nav-hint{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:14px;font-size:12px;color:var(--ink-3);
}
.nav-hint button{
  width:38px;height:38px;min-height:0;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;
}

/* ───────────── 星盘（深空版配色） ───────────── */
.chartbox svg .pl-node{cursor:help}
.chartbox svg .pl-node:hover circle{stroke:#fff;filter:drop-shadow(0 0 8px rgba(169,125,255,.95))}

/* ───────────── 能力屏：MBTI 小卡 + 星座符号 ───────────── */
.mbti-mini{padding:16px 17px}
.mbti-mini-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.mbti-src{
  font-size:11px;padding:3px 9px;border-radius:999px;
  background:rgba(123,77,255,.16);border:1px solid var(--edge-2);color:#c3b3f0;
  white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis;
}
/* 大字兜底：背景渐变在部分环境下 background-clip:text 会失效（计算色 rgba(0,0,0,0)），
   补一层 -webkit-text-fill-color 与 color 兜底，保证字一定看得见 */
.mbti-mini .mbti-big .lt{
  font-size:clamp(36px,4.6vw,46px);
  color:#dcd0ff;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .mbti-mini .mbti-big .lt{color:#dcd0ff;-webkit-text-fill-color:#dcd0ff;background:none}
}
.mbti-mini .mbti-core{margin-bottom:12px;padding:8px 11px;font-size:13px}
.mbti-mini .axis-row{margin-bottom:8px;padding:6px 8px}
.mbti-mini .mbti-detail{min-height:58px;padding:11px 13px;font-size:12.5px}
.mbti-mini .mbti-chips{margin-top:9px}

/* 星座符号：瓦片上做成圆环徽章 */
.signtile .g{
  width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(169,125,255,.34), rgba(123,77,255,.10));
  border:1px solid rgba(169,125,255,.42);
  color:#e0d4ff;text-shadow:0 0 10px rgba(169,125,255,.8);
}
.signtile:hover .g{
  /* 用户要求：「所有类似这样的边框，不要白色啊。你可以用紫色 火 紫金色的边显示」
     原来是 border-color:#fff（纯白），在深紫底上非常刺眼。
     改成紫金色 rgba(255,222,150) —— 带金的暖紫，与全站星云配色统一。 */
  border-color:rgba(255,222,150,.92);
  box-shadow:0 0 0 3px rgba(169,125,255,.18), 0 0 18px rgba(255,210,140,.55);
}

/* ───────────── 12 维卡片（深空版） ───────────── */
.dimcard{
  border-radius:15px;border:1px solid var(--edge);
  background:rgba(22,14,48,.58);padding:16px;
  backdrop-filter:blur(10px);position:relative;overflow:hidden;
}
.dimcard:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;
  background:linear-gradient(180deg,var(--nebula-2),rgba(123,77,255,.05));
}
.dimhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dimname{font-weight:700;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dimscore{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.dimscore small{font-size:11px;font-weight:600;color:var(--ink-3);margin-left:2px}
.stars{color:var(--nebula-2);letter-spacing:2px;font-size:12px}
.meter{height:5px;border-radius:999px;background:rgba(123,77,255,.18);margin:9px 0 10px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--nebula-2),var(--nebula))}
.dimtext{font-size:13px;color:var(--ink-2);line-height:1.7}
.dimtext p{margin:0 0 5px}
.basis{margin-top:9px;padding-top:9px;border-top:0;font-size:11.5px;color:var(--ink-3);line-height:1.65}
.basis div{margin:2px 0}
.g-A{color:#4ade9b}.g-B{color:#7cc4ff}.g-C{color:#ffc46b}.g-D{color:#ff8181}

/* ───────────── 时间轴（生命轨迹） ───────────── */
.timeline{margin-top:4px}
.tl-row{display:grid;grid-template-columns:52px 1fr 46px;gap:11px;align-items:center;margin-bottom:8px}
.tl-year{font-size:12.5px;color:var(--ink-2);font-weight:600}
.tl-track{height:10px;border-radius:999px;background:rgba(123,77,255,.14);overflow:hidden}
.tl-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--nebula-2),var(--nebula));transition:width .6s}
.tl-score{font-size:12.5px;font-weight:700;text-align:right}

/* 日历屏的「选中日」只用紧凑摘要（原来塞 6 张完整卡片，手机上高达 2264px） */
#day-dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#day-dims .dimcard{padding:9px 10px;border-radius:11px}
#day-dims .dimcard:before{width:2px}
#day-dims .dimname{font-size:12px}
#day-dims .dimscore{font-size:20px}
#day-dims .stars{font-size:10px;letter-spacing:1px}
#day-dims .meter{margin:6px 0 0;height:4px}
#day-dims .dimtext,#day-dims .basis{display:none}   /* 详情留到能力屏看 */

/* ───────────── 日历（深空版） ───────────── */
.calbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.calbar .month{font-size:16px;font-weight:700;color:var(--ink);margin-right:auto}
.calbar button{width:34px;height:34px;min-height:0;padding:0;border-radius:10px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal .dow{text-align:center;font-size:11px;color:var(--ink-3);padding:4px 0}
.day{
  border:1px solid var(--edge);border-radius:9px;background:rgba(30,20,62,.5);
  min-height:54px;padding:5px 6px;cursor:pointer;transition:.14s;
}
.day:hover{border-color:var(--nebula);background:rgba(48,30,96,.7)}
.day.mute{opacity:.28;cursor:default}
.day.today{border-color:var(--nebula);box-shadow:0 0 0 2px rgba(123,77,255,.22)}
.day.sel{background:linear-gradient(180deg,rgba(123,77,255,.34),rgba(48,30,96,.6));border-color:var(--nebula-2)}
.day .n{font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:3px}
/* 「今天」用小圆点标记，不用文字（手机窄格里“3 今天”会挤成两行） */
.day .tdot{width:4px;height:4px;border-radius:50%;background:var(--nebula-2);
  box-shadow:0 0 6px var(--nebula-2);display:inline-block;flex:none}
/* 分数与星级同行左右排；原来分数 16px、星级紧贴下方，54px 小格里会叠在一起（实测重叠） */
.day .row{display:flex;align-items:baseline;justify-content:space-between;gap:2px;line-height:1.15}
.day .s{font-size:15px;font-weight:800;flex:none;line-height:1.1}
.day .g{font-size:8.5px;color:var(--ink-3);letter-spacing:0;white-space:nowrap;overflow:hidden;flex:none}

/* ───────────── 表格 / kv（深空版） ───────────── */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th,table.tbl td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--edge)}
table.tbl th{color:var(--ink-3);font-weight:600;font-size:11.5px}
.card table.tbl{display:block;overflow-x:auto}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px}
.kv div{
  background:rgba(30,20,62,.55);border:1px solid var(--edge);
  border-radius:11px;padding:9px 11px;font-size:12.5px;color:var(--ink-2);
}
.kv b{display:block;font-size:14px;color:var(--nebula-2);font-weight:700}

/* ───────────── 12 星座瓦片（深空版） ───────────── */
.signtile{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-radius:14px;
  background:rgba(22,14,48,.58);border:1px solid var(--edge);
  backdrop-filter:blur(10px);
  transition:.18s;text-decoration:none;
}
.signtile:hover{
  transform:translateY(-2px);border-color:var(--edge-2);
  background:rgba(38,24,78,.72);
  box-shadow:0 12px 30px rgba(123,77,255,.28);
}
/* ── 星座符号徽章：必须保持正圆 ──
   踩过的坑：这条规则原来只写 `width:30px` 没写 height，
   在 flex 容器里被 align-items 拉伸成 29×37（比例 0.789）= 椭圆。
   现在用 aspect-ratio:1 + height 显式锁死，任何父容器都不会拉变形。 */
.signtile .g{
  font-size:22px;line-height:1;
  width:30px;height:30px;aspect-ratio:1/1;flex:none;
  min-width:30px;min-height:30px;
  text-align:center;color:var(--nebula-2);
  display:flex;align-items:center;justify-content:center;
}
.signtile .nm{font-weight:700;color:var(--ink);font-size:14.5px}
.signtile .r{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.signtile .sc{
  margin-left:auto;font-size:19px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);padding-left:8px;border-left:1px solid var(--edge);
  min-width:42px;text-align:right;
}
/* 分数档位配色（深空底上提高明度） */
.signtile .sc.g-A{color:#4ade9b}
.signtile .sc.g-B{color:#7cc4ff}
.signtile .sc.g-C{color:#ffc46b}
.signtile .sc.g-D{color:#ff8181}

/* ───────────── 能力屏专用布局（一屏内放下，不裁切） ───────────── */
.ability-layout{
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:22px;align-items:start;
}
.ability-radar{padding:10px 12px 12px}
.ability-radar .radar-box{max-width:400px;margin:0 auto}
/* 右侧卡片区：自身滚动，绝不让整屏被撑破 */
.ability-side{
  max-height:calc(100vh - 240px);
  overflow-y:auto;overflow-x:hidden;
  padding-right:6px;scrollbar-width:thin;
  scrollbar-color:rgba(150,120,255,.5) transparent;
}
.ability-side::-webkit-scrollbar{width:6px}
.ability-side::-webkit-scrollbar-thumb{background:rgba(150,120,255,.45);border-radius:99px}
.ability-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
/* 屏内卡片压紧一点，两列能塞下 6 张 */
.ability-cards .dimcard{padding:13px 14px}
.ability-cards .dimscore{font-size:26px}
.ability-cards .dimtext{font-size:12.5px;line-height:1.6}
.ability-cards .basis{font-size:11.5px}

@media(max-width:1000px){
  .ability-layout{grid-template-columns:1fr}
  .ability-side{max-height:none;overflow:visible}
  .ability-radar .radar-box{max-width:340px}
}
@media(max-width:620px){
  .ability-cards{grid-template-columns:1fr}
}

/* ───────────── 响应式 ───────────── */
@media(max-width:1000px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body{font-size:15px}
  .bar{height:58px;gap:10px}
  #stage{padding-top:58px}
  .screen{inset:58px 0 0 0;padding:12px 13px 78px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr 1fr}
  nav.screens{display:none}       /* 手机上用底部切换箭头 + 滑动 */
  #dots{display:none}
  h1{font-size:28px;line-height:1.2}
  h2{font-size:20px}

  /* 手机端压紧：日历屏曾经高达 3943px（一屏只有 786px），必须收敛 */
  .card{padding:14px;border-radius:16px}
  .grid{gap:11px}
  .cal{gap:3px}
  .day{min-height:44px;padding:3px 4px;border-radius:7px}
  .day .n{font-size:9.5px}
  .day .s{font-size:13px}
  .day .g{display:none}
  .cal .dow{font-size:9.5px;padding:2px 0}
  .calbar .month{font-size:14px}
  .calbar button{width:30px;height:30px}
  .kv{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:7px}
  .kv div{padding:7px 8px;font-size:11.5px}
  .kv b{font-size:12.5px}
  .dimcard{padding:12px}
  .dimscore{font-size:24px}
  .dimtext{font-size:12px}
  .basis{font-size:11px}
  .tl-row{grid-template-columns:44px 1fr 38px;gap:8px;margin-bottom:6px}
  .tl-track{height:8px}
  .signtile{padding:10px 11px;gap:8px;border-radius:11px}
  .signtile .nm{font-size:13.5px}
  .signtile .r{font-size:10.5px}
  .signtile .sc{font-size:16px;min-width:34px}
  .ability-radar .radar-box{max-width:300px}
  .ability-cards{grid-template-columns:1fr}
  table.tbl{font-size:11.5px}
  table.tbl th,table.tbl td{padding:5px 6px}
}
/* ───────────── 星盘下方动作区 + 完整解析按钮 ───────────── */
.chart-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(150,120,255,.16);
}
.chart-actions .primary{
  appearance:none;border:0;cursor:pointer;
  padding:10px 22px;border-radius:999px;
  font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 6px 20px rgba(123,77,255,.45);
  transition:.22s;
}
.chart-actions .primary:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(123,77,255,.6)}
.chart-actions .primary:active{transform:translateY(0)}
.chart-actions .sub{font-size:12.5px;color:var(--muted);line-height:1.6}

/* ───────────── 相位线悬停解读框（大方块，跟随鼠标） ───────────── */
#bigchart{position:relative}
.aspect-tip{
  position:fixed;z-index:200;
  /* 跟随鼠标：left/top 由 app.js 的 moveTip 实时写入 */
  top:0;left:0;
  width:320px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(160deg, rgba(28,18,62,.98), rgba(14,9,36,.98));
  border:1px solid rgba(169,125,255,.5);
  box-shadow:0 20px 54px rgba(0,0,0,.66), 0 0 0 1px rgba(169,125,255,.14) inset,
             0 0 34px rgba(123,77,255,.26);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .15s, visibility .15s;
  pointer-events:none;
}
.aspect-tip.show{opacity:1;visibility:visible}
.aspect-tip .at-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.aspect-tip .at-head b{font-size:15.5px;color:#efe7ff;font-weight:800;letter-spacing:.01em}
.aspect-tip .at-tag{
  padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid;
}
.aspect-tip .at-meta{
  font-size:12px;color:#a99ed0;margin-bottom:11px;
  padding-bottom:10px;border-bottom:1px solid rgba(150,120,255,.18);
}
.aspect-tip .at-body{font-size:13.5px;line-height:1.85;color:#d6cdef;margin-bottom:9px}
.aspect-tip .at-adv{
  color:#b9f0d6;background:rgba(52,211,153,.10);
  border-left:2.5px solid rgba(52,211,153,.55);
  padding:8px 10px;border-radius:0 8px 8px 0;margin-bottom:9px;
}
.aspect-tip .at-foot{
  font-size:11.5px;color:#8b81ad;margin-top:6px;
  padding-top:9px;border-top:1px solid rgba(150,120,255,.16);
}
/* 星盘容器窄时（手机/单栏）：大框同样跟随鼠标，宽度上限收窄，不做外挂定位 */
@media (max-width:1180px){
  .aspect-tip{width:min(320px, calc(100vw - 24px))}
}

/* 相位线悬停：整组加亮 */
.asp-line{transition:opacity .18s}
.asp-line:hover .asp-vis{stroke:#e9dcff}
/* ───────────── 完整解析内联区（紧跟星盘图下方） ───────────── */
.essay-inline{
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(150,120,255,.18);
}
.essay-inline .ei-head{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  justify-content:space-between;margin-bottom:14px;
}
.essay-inline .ei-title{min-width:0;flex:1 1 280px}
.essay-inline .ei-title h3{margin:2px 0 4px;font-size:19px}
.essay-inline .ei-title .sub{display:block;font-size:12.5px;line-height:1.6;color:var(--muted)}
.essay-inline .ei-side{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none;
}
.essay-inline .ei-chars{
  font-size:12px;color:#b79bff;font-weight:600;
  padding:3px 10px;border-radius:999px;
  background:rgba(123,77,255,.16);border:1px solid rgba(150,120,255,.3);
  white-space:nowrap;
}
.essay-inline .ei-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.essay-inline .ei-btns button{
  appearance:none;cursor:pointer;font-family:var(--font);
  font-size:12.5px;font-weight:600;
  padding:8px 14px;border-radius:999px;
  color:var(--ink-2);background:rgba(22,14,48,.6);
  border:1px solid rgba(150,120,255,.32);
  transition:.2s;white-space:nowrap;
}
.essay-inline .ei-btns button:hover{
  color:#fff;background:rgba(123,77,255,.32);border-color:rgba(150,120,255,.6);
}
.essay-inline .ei-btns button.primary{
  color:#fff;background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;box-shadow:0 4px 16px rgba(123,77,255,.42);
}
.essay-inline .ei-btns button.primary:hover{box-shadow:0 7px 22px rgba(123,77,255,.58)}
/* 完整解析直接展开全文：不限高、不出内滚动条（原来 max-height:520px 会出个小条） */
.essay-inline .ei-body{max-height:none;overflow:visible;padding-right:0}
@media (max-width:720px){
  .essay-inline .ei-side{align-items:stretch;width:100%}
  .essay-inline .ei-btns{justify-content:flex-start}
  .essay-inline .ei-body{max-height:none}
}
/* ───────── 星盘舞台：左边盘、右侧留给相位大悬停框 ─────────
   原来 #bigchart 只有 520px 居中，320px 的大框外挂会超出列宽；
   改成舞台占满列宽、盘居中靠左、大框吸附在盘右侧。 */
/* ───────── 星盘竞技场：左数据 / 中盘 / 右动画 ─────────
   用户要求：星盘与左右两栏整体缩小，给页面两边留空间（不能贴边）。
   改法：整体加 max-width 1440 并居中，两侧自然留白；
   中间盘上限从 860 收到 760，两栏各 240。 */
.chart-arena{
  display:grid;
  /* ── 三栏宽度与间距：给圆盘光环留出空间 ──
     问题（用户「不是一个完整的圆」）：中间的圆盘紧贴左右两块侧栏，
     实测 disc.right=1006、arena-right.left=1030，只差 24px 的 gap；
     而土元素光环是 0 0 48px，向外扩散 48px → 右侧被「此刻天象」卡片压住，
     光环在 3 点钟方向断开，看着就不是一个完整的圆。

     解决：不再压缩圆盘（用户要大盘），而是从侧栏和间距里挤空间：
       · 侧栏 240 → 206px（内容仍放得下）
       · gap 24 → 40px
       · chart-stage 再加 18px 内边距
     合计圆盘两侧净空 = 18 + 40 = 58px > 48px 光环，圆能闭合。
     按 1099px 可用宽算：206 + 40 + 607 + 40 + 206，圆盘 = 607-36 = 571px（与原来一致）。 */
  grid-template-columns:minmax(190px,206px) minmax(0,1fr) minmax(190px,206px);
  gap:40px;
  /* 垂直居中：三栏以各自中线对齐，左右两块的中线正好落在星盘圆心高度上。
     原来是 align-items:start（顶对齐），侧栏比盘矮，就全挤在上半部，
     实测左栏中心比盘心高 174px、右栏高 137px。 */
  align-items:center;
  margin:4px auto 0;
  max-width:1400px;
  padding:0 12px;
}
.arena-side{min-width:0}

/* 侧栏通用样式：玻璃小卡，和盘同一套星空语言 */
.arena-side{
  padding:15px 16px;border-radius:14px;
  background:linear-gradient(165deg,rgba(22,13,48,.82),rgba(12,7,28,.88));
  border:1px solid rgba(123,77,255,.26);
  box-shadow:0 10px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(169,125,255,.14);
  backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
  /* ── 层叠顺序：侧栏必须压在星盘光环「下面」──
     实测像素：右侧 60°~93° 的土元素光环完全缺失（覆盖率 60%），
     其余三个方向 100%。原因是左右侧栏在 DOM 里排在中间列之后，
     同层叠上下文下后绘制的盖住先绘制的 —— 即使几何上留了 58px 净空，
     侧栏的半透明底 + blur 仍会把光环罩住。
     z-index:0 不如 -1 可靠（-1 会被父级背景遮），
     这里用 0 + 让星盘 stage 提到 1，光环就浮在侧栏之上。 */
  z-index:0;
}
/* 侧栏内也嵌一层微星点，不孤立成纯色块 */
.arena-side::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle 1px at 18% 22%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(circle .8px at 72% 48%, rgba(201,182,255,.6) 0%, transparent 100%),
    radial-gradient(circle .9px at 40% 78%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(circle .8px at 88% 18%, rgba(180,220,255,.5) 0%, transparent 100%);
}
.as-head{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:#b79bff;margin-bottom:11px;position:relative;
}
.as-dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#a855f7;box-shadow:0 0 8px rgba(168,85,247,.9);
  animation:asDotPulse 2.4s ease-in-out infinite;
}
.as-dot.blue{background:#5ec8ff;box-shadow:0 0 8px rgba(94,200,255,.9)}
.as-dot.green{background:#5eead4;box-shadow:0 0 8px rgba(94,234,212,.9)}
.as-dot.amber{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.9)}
.as-dot.pink{background:#f472b6;box-shadow:0 0 8px rgba(244,114,182,.9)}
@keyframes asDotPulse{
  0%,100%{opacity:.5;transform:scale(.8)}
  50%    {opacity:1; transform:scale(1.15)}
}
.as-sep{height:1px;margin:14px 0;background:linear-gradient(90deg,transparent,rgba(150,120,255,.26),transparent)}

/* 左栏：行星落点行 */
.as-body{display:flex;flex-direction:column;gap:7px;position:relative}
.as-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:12px;padding:5px 0;
  border-bottom:1px dashed rgba(150,120,255,.12);
}
.as-row:last-child{border-bottom:0}
.as-row b{color:#9d93c4;font-weight:600;flex:none}
.as-row span{color:#e0d4ff;font-weight:700;text-align:right;min-width:0}

/* 元素配比：四条带动画的横条 */
.as-elements{display:flex;flex-direction:column;gap:9px;position:relative}
.as-el{display:grid;grid-template-columns:14px 26px 1fr;align-items:center;gap:8px;font-size:11.5px}
.as-el i{width:8px;height:8px;border-radius:50%;display:block}
.as-el b{color:var(--ink-3);font-weight:600}
.as-el span{color:#e0d4ff;font-weight:700;font-variant-numeric:tabular-nums}
.as-el[data-el="火"] i{background:#ff7a59;box-shadow:0 0 7px rgba(255,122,89,.8)}
.as-el[data-el="土"] i{background:#ffc46b;box-shadow:0 0 7px rgba(255,196,107,.8)}
.as-el[data-el="风"] i{background:#5ec8ff;box-shadow:0 0 7px rgba(94,200,255,.8)}
.as-el[data-el="水"] i{background:#9d7bff;box-shadow:0 0 7px rgba(157,123,255,.8)}

/* 右栏：此刻天象（行星实时点位图） */
.sky-now{max-width:210px;margin:0 auto 4px;min-height:150px}
.sky-empty{
  display:flex;align-items:center;justify-content:center;
  min-height:150px;padding:18px 12px;border-radius:50%;
  font-size:11px;color:var(--ink-3);text-align:center;line-height:1.7;
  border:1px dashed rgba(150,120,255,.24);
}
.orbit-anim::before,.orbit-anim::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(150,120,255,.18);
}
.orbit-anim::before{width:66%;height:66%}
.orbit-anim::after{width:96%;height:96%;border-color:rgba(94,200,255,.14)}
.orb{
  position:absolute;left:50%;top:50%;width:0;height:0;
  animation:orbSpin linear infinite;
}
.orb i{
  position:absolute;transform:translate(-50%,-50%);
  font-style:normal;font-size:15px;line-height:1;
  filter:drop-shadow(0 0 6px currentColor);
}
.orb-1{animation-duration:16s}
.orb-1 i{transform:translate(-50%,-50%) translateY(-46px);color:#ffc46b;font-size:16px}
.orb-2{animation-duration:24s;animation-direction:reverse}
.orb-2 i{transform:translate(-50%,-50%) translateY(-68px);color:#dcd0ff;font-size:14px}
.orb-3{animation-duration:32s}
.orb-3 i{transform:translate(-50%,-50%) translateY(-88px);color:#5ec8ff;font-size:13px}
.orb-4{animation-duration:42s;animation-direction:reverse}
.orb-4 i{transform:translate(-50%,-50%) translateY(-104px);color:#ff7a59;font-size:13px}
@keyframes orbSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.orb-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:17px;color:#c9a0ff;
  filter:drop-shadow(0 0 10px rgba(168,85,247,.8));
  animation:orbCore 3.2s ease-in-out infinite;
}
@keyframes orbCore{
  0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.92)}
  50%    {opacity:1; transform:translate(-50%,-50%) scale(1.1)}
}

/* 右栏：月相 */
.as-moon{display:flex;align-items:center;gap:12px;position:relative}
.as-moon-icon{
  font-size:30px;line-height:1;flex:none;color:#f0e9ff;
  filter:drop-shadow(0 0 12px rgba(220,208,255,.55));
  animation:asMoonGlow 4s ease-in-out infinite;
}
@keyframes asMoonGlow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(220,208,255,.4))}
  50%    {filter:drop-shadow(0 0 18px rgba(220,208,255,.8))}
}
.as-moon-txt{min-width:0}
.as-moon-txt b{display:block;font-size:13px;color:#e0d4ff;margin-bottom:3px}
.as-moon-txt span{font-size:11px;color:var(--ink-3);line-height:1.5}

/* 右栏：今日建议 */
.as-tip{
  font-size:12px;line-height:1.75;color:#c4b8e4;
  position:relative;padding-left:10px;
  border-left:2px solid rgba(244,114,182,.5);
}

/* 盘：按列宽吃满，上限收到 760（整体缩一档，给页面两侧留空间） */
.chart-arena .chart-wheel{
  width:100%;max-width:760px;margin:0 auto;
}
.chart-arena /* ── 星盘居中列：上下左右留出光环扩散空间 ──
   圆盘本体 571px，土元素光晕向外 48px。
   原来这一列没有内边距，光环直接溢出到相邻的侧栏与上下内容里，
   被压住就看着「不是一个完整的圆」。
   给 22px 内边距 + 父级 gap 40px = 每侧 62px 净空，48px 光晕完全装得下。 */
.chart-stage{
  min-height:0;display:flex;justify-content:center;
  padding:22px 18px;box-sizing:border-box;
  /* 星盘（含外圈元素光环）要浮在左右侧栏之上，
     否则光环的左右两侧会被侧栏半透明底+blur 罩住。 */
  position:relative;z-index:2;
}

@media (max-width:1400px){
  .chart-arena{grid-template-columns:minmax(170px,210px) minmax(0,1fr) minmax(170px,210px);gap:16px}
}
@media (max-width:1180px){
  /* 中等屏：撤两栏，盘独占整行（保证盘不被挤小） */
  .chart-arena{grid-template-columns:1fr;gap:14px}
  .arena-left{order:2}
  .arena-right{order:3}
  .chart-stage{order:1}
  .arena-side{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .arena-side > .as-sep{display:none}
  .arena-left{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .arena-side{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .orb,.orb-core,.as-dot,.as-moon-icon{animation:none}
}
.chart-wheel{
  /* 星盘容器宽度由所在格子决定（.chart-arena 里是中间列，最大 860px）。
     以前写 min(700px,100%,60vh) 会按视口高度压盘，用户要求「星盘要足够大，别缩小」，
     所以去掉 60vh 限制，只保留 max-width 兜底。 */
  width:100%;max-width:860px;
  flex:none;
  position:relative;
  margin:0 auto;
}
.chart-wheel svg{display:block;width:100%;height:auto}
/* 大框相对「盘」定位，不是相对舞台 */
.chart-wheel .aspect-tip{
  left:calc(100% + 16px);top:0;
}
@media (max-width:1180px){
  .chart-stage{min-height:0}
  .chart-wheel{width:min(700px,100%)}
  .chart-wheel .aspect-tip{
    left:0;right:0;top:auto;bottom:6px;margin:0 auto;
    width:calc(100% - 12px);max-width:420px;
  }
}
/* ───────── 日运弹窗：12 维逐条解析 ───────── */
.daydim-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.daydim-item{
  padding:13px 15px;border-radius:12px;
  background:rgba(22,14,48,.55);border:1px solid var(--edge);
}
.daydim-item .dd-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.daydim-item .dd-head b{font-size:14px;color:var(--ink);font-weight:700}
.daydim-item .dd-score{font-size:19px;font-weight:800;line-height:1}
.daydim-item .dd-score small{font-size:10.5px;font-weight:600;color:var(--ink-3);margin-left:1px}
.daydim-item .dd-grade{font-size:11.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.daydim-item .dd-body p{margin:0 0 6px;font-size:13px;line-height:1.8;color:var(--ink-2)}
.daydim-item .dd-basis{
  margin-top:9px;padding-top:9px;border-top:0;
  font-size:11.5px;line-height:1.75;color:var(--ink-3);
}
.daydim-item .dd-basis b{display:block;color:#b79bff;margin-bottom:4px;font-size:11.5px}
/* ───────── 日历屏：日历在上、月运在下 ───────── */
.cal-top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:20px;align-items:start;margin-bottom:16px;
}
#month-card{margin-top:0}
/* ── 左栏：日历 + 月运汇总（上下叠） ──
   日历卡片只有 414px 高，「选中的日子」有 946px，左栏底部空出 ≈518px。
   月运汇总放进这个空档，并让左栏整体拉伸到与右栏等高。 */
.cal-left{
  display:flex;flex-direction:column;gap:14px;min-width:0;
  align-self:stretch;
}
.cal-left > .card{margin:0}

/* 月运汇总（紧凑版）：填满日历下方的空档，与右栏底部齐平
   实测：日历 414px；右栏「选中的日子」946px → 下方空档 ≈ 518px 要交给月运。
   做法：左栏 .cal-left 撑满行高（align-self:stretch），月运 flex:1 吃掉剩余空间，
   格子用 grid-auto-rows:1fr 等分高度，无论窗口多高都能正好填满。 */
.month-compact{
  padding:18px 20px;display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;
}
.month-compact h3{font-size:15px;margin:0 0 14px}
.month-compact .month-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:8px;
  flex:1 1 auto;min-height:0;
}
.month-compact .mcell{
  padding:8px 4px;border-radius:11px;
  aspect-ratio:auto;min-height:0;
}
.month-compact .mcell b{font-size:clamp(16px,1.5vw,21px)}
.month-compact .mcell span{font-size:10.5px}
.month-compact .mcell-bar{height:2.5px}
.year-line-box{
  margin-top:14px;padding-top:13px;
  border-top:1px solid var(--edge);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.year-line-box b{font-size:12.5px;color:var(--ink-3);font-weight:600;flex:none}
.year-line-box p{font-size:12.5px;line-height:1.6}

/* 右栏：只放「选中的日子」 */
.cal-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.cal-right > .card{margin:0}
@media (max-width:980px){
  .cal-top{grid-template-columns:1fr;gap:14px}
}

/* 「总体」卡：可点提示要显眼（原来只有 title，用户不知道能点） */
.dimcard-action{cursor:pointer;border-color:rgba(150,120,255,.5)}
.dimcard-action:hover{
  border-color:rgba(169,125,255,.85);
  background:rgba(38,24,78,.75);
  box-shadow:0 0 0 2px rgba(123,77,255,.22);
}
.dimcard-action .dd-more{
  margin-top:8px;padding-top:7px;border-top:1px dashed rgba(150,120,255,.28);
  font-size:11.5px;color:#b79bff;font-weight:700;letter-spacing:.01em;
}
.dimcard-action:hover .dd-more{color:#e0d4ff}
/* ───────── 入口次要链接（或跳到今日运程 ↓） ───────── */
.link-jump{
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--font);font-size:12.5px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;
  padding:4px 6px;border-radius:6px;transition:.18s;
}
.link-jump:hover{color:#c9b6ff}

/* ───────── 需要先排盘的引导页（梦想屏未排盘时） ───────── */
.need-chart{
  max-width:620px;margin:6vh auto 0;text-align:center;
  padding:38px 30px;border-radius:20px;
  background:rgba(22,14,48,.62);border:1px solid rgba(150,120,255,.34);
  backdrop-filter:blur(12px);
  box-shadow:0 22px 56px rgba(0,0,0,.42);
}
.need-chart .nc-ico{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:25px;color:#d9c9ff;
  background:radial-gradient(circle at 34% 30%, rgba(169,125,255,.5), rgba(123,77,255,.14));
  border:1px solid rgba(169,125,255,.5);
  box-shadow:0 0 28px rgba(123,77,255,.42);
}
.need-chart h2{margin:0 0 12px;font-size:21px;line-height:1.5;color:var(--ink)}
.need-chart p{margin:0 0 22px;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.need-chart .primary{
  appearance:none;border:0;cursor:pointer;
  padding:11px 26px;border-radius:999px;
  font-family:var(--font);font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 6px 22px rgba(123,77,255,.48);transition:.2s;
}
.need-chart .primary:hover{transform:translateY(-1px);box-shadow:0 9px 28px rgba(123,77,255,.62)}
/* ───────── 二十四节气屏 ───────── */
.term-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.term-wheel-card{padding:16px}
.term-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--edge);font-size:12px;color:var(--ink-3)}
.term-legend .tl-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.term-legend .tl-dot.now{background:#a855f7;box-shadow:0 0 8px #a855f7}
.term-legend .tl-dot.sign{background:#6d4aff}
.term-detail{min-width:0}
.term-cur{padding:18px 20px}
.tc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.tc-name{font-size:26px;font-weight:800;color:var(--ink)}
.tc-sign{font-size:13px;color:#b79bff;padding:3px 10px;border-radius:999px;background:rgba(123,77,255,.16);border:1px solid rgba(150,120,255,.3)}
.tc-note{font-size:12.5px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
.tc-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.tc-row{display:flex;gap:10px;font-size:13px;line-height:1.7}
.tc-row b{flex:none;width:42px;color:#b79bff;font-weight:700}
.tc-row span{color:var(--ink-2)}
.tc-yiji{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tc-yi,.tc-ji{padding:12px 14px;border-radius:12px;background:rgba(22,14,48,.6);border:1px solid var(--edge)}
.tc-yi{border-left:3px solid #34d399}
.tc-ji{border-left:3px solid #f87171}
.tc-yi b{color:#34d399}.tc-ji b{color:#f87171}
.tc-yi b,.tc-ji b{display:block;font-size:13px;margin-bottom:7px}
.tc-yi ul,.tc-ji ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.9;color:var(--ink-2)}
.tc-next{font-size:12px;color:var(--ink-3);padding-top:10px;border-top:1px solid var(--edge)}
.term-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:7px}
.term-item{
  appearance:none;cursor:pointer;font-family:var(--font);
  /* ── 文字溢出修复 ──
     原来 padding:8px 6px 没有固定高度，格子高度由 grid 行高决定，
     而「霜降 / 天蝎座 ♏」两行文字在窄格里会顶出底边（用户附件1）。
     现在：给足上下内边距 + 用 flex 纵向居中 + 行高收紧，
     文字再多也被关在格子里，不会触及边框。 */
  padding:10px 6px 12px;
  min-height:62px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:10px;text-align:center;line-height:1.25;
  background:rgba(30,20,62,.55);border:1px solid var(--edge);transition:.16s;
}
.term-item:hover{border-color:rgba(169,125,255,.6);background:rgba(48,30,96,.72)}
.term-item.on{background:linear-gradient(135deg,rgba(123,77,255,.4),rgba(168,85,247,.28));border-color:rgba(169,125,255,.8)}
.term-item b{display:block;font-size:12.5px;color:var(--ink);font-weight:700;margin:0;line-height:1.2;white-space:nowrap}
.term-item span{font-size:10.5px;color:var(--ink-3);line-height:1.2;white-space:nowrap}
.term-item i{display:block;width:4px;height:4px;border-radius:50%;background:transparent;margin:4px auto 0}
.term-item i.major{background:#6d4aff}
@media (max-width:980px){ .term-wrap{grid-template-columns:1fr} .tc-yiji{grid-template-columns:1fr} }
/* ───────── 合盘屏 ───────── */
.syn-form{padding:20px 22px}
.syn-grid{display:grid;grid-template-columns:1fr 44px 1fr;gap:14px;align-items:start}
.syn-side{min-width:0}
.syn-label{
  font-size:13px;font-weight:800;color:#b79bff;margin-bottom:10px;
  padding-bottom:7px;border-bottom:1px solid var(--edge);
}
.syn-mid{display:flex;align-items:center;justify-content:center;height:100%;font-size:22px;color:#7d74a0}
.syn-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--edge)}
.syn-actions .primary{
  appearance:none;border:0;cursor:pointer;padding:11px 24px;border-radius:999px;
  font-family:var(--font);font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 6px 20px rgba(123,77,255,.45);transition:.2s;
}
.syn-actions .primary:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(123,77,255,.6)}

.syn-head-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.syn-person{min-width:0}
.syn-person b{display:block;font-size:18px;color:var(--ink);margin-bottom:3px}
.syn-person span{font-size:12.5px;color:var(--ink-3)}
.syn-vs{font-size:20px;color:#a855f7;font-weight:700}
.syn-sum{font-size:13.5px;line-height:1.8;color:var(--ink-2);margin:0}
.syn-sum b{color:#e0d4ff}

.syn-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.syn-card{
  padding:14px 15px;border-radius:14px;background:rgba(22,14,48,.58);
  border:1px solid var(--edge);transition:.18s;min-width:0;
}
.syn-card:hover{border-color:rgba(169,125,255,.5);background:rgba(32,20,66,.72)}
.syn-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.syn-card-head b{font-size:14.5px;color:var(--ink)}
.syn-score{font-size:22px;font-weight:800;line-height:1}
.syn-grade{font-size:12px;color:var(--ink-3);line-height:1.6;margin-bottom:9px;min-height:2.6em}
.syn-bar{height:5px;border-radius:999px;background:rgba(123,77,255,.18);overflow:hidden;margin-bottom:9px}
.syn-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7b4dff,#a855f7)}
.syn-lead{font-size:11.5px;line-height:1.7;color:#a99ed0;padding-top:8px;border-top:1px dashed var(--edge)}

.syn-aspects{display:flex;flex-direction:column;gap:7px}
.syn-asp-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:rgba(30,20,62,.5);border:1px solid var(--edge);font-size:12.5px}
.syn-asp-tag{flex:none;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid}
.syn-asp-text{flex:1;color:var(--ink-2);min-width:0}
.syn-asp-deg{flex:none;color:#8b81ad;font-size:12px}
.syn-houses{display:flex;flex-direction:column;gap:6px}
.syn-house-item{padding:8px 12px;border-radius:9px;background:rgba(30,20,62,.45);font-size:12.5px;color:var(--ink-2);border-left:2.5px solid rgba(169,125,255,.5)}
.syn-house-item b{color:#e0d4ff}
@media (max-width:980px){
  .syn-grid{grid-template-columns:1fr}
  .syn-mid{height:auto;padding:6px 0}
  .syn-dims{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){ .syn-dims{grid-template-columns:1fr} }
/* ───────── 十二宫位全解 ───────── */
.house-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.house-item{
  padding:12px 13px;border-radius:12px;min-width:0;cursor:pointer;
  background:rgba(22,14,48,.55);border:1px solid var(--edge);transition:.18s;
}
.house-item:hover{border-color:rgba(169,125,255,.6);background:rgba(34,22,70,.75);transform:translateY(-1px)}
.house-item.em{background:linear-gradient(160deg,rgba(123,77,255,.22),rgba(22,14,48,.6));border-color:rgba(169,125,255,.7)}
.house-item.empty{opacity:.62}
.hi-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.hi-num{
  flex:none;width:19px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;background:rgba(123,77,255,.55);
}
.house-item.em .hi-num{background:linear-gradient(135deg,#7b4dff,#a855f7);box-shadow:0 0 10px rgba(168,85,247,.5)}
.hi-name{font-size:13px;font-weight:700;color:var(--ink)}
.hi-rank{font-size:9.5px;color:#ffc46b;font-weight:700;padding:1px 6px;border-radius:999px;background:rgba(255,196,107,.14);border:1px solid rgba(255,196,107,.35);margin-left:auto}
.hi-field{font-size:11.5px;line-height:1.65;color:var(--ink-3);margin-bottom:7px;min-height:3.3em}
.hi-planets{display:flex;gap:4px;flex-wrap:wrap}
.hi-planets span{font-size:10.5px;padding:2px 7px;border-radius:999px;background:rgba(123,77,255,.18);color:#c9b6ff;border:1px solid rgba(150,120,255,.28)}
.hi-planets .hi-none{background:transparent;border:1px dashed var(--edge);color:var(--ink-3)}
@media (max-width:1100px){ .house-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .house-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ───────── 星座 × 宫位 交集（弹窗内） ───────── */
.sh-note{
  padding:12px 14px;border-radius:11px;margin-bottom:16px;
  background:rgba(123,77,255,.13);border-left:3px solid #a855f7;
  font-size:13px;line-height:1.75;color:#d8ccff;
}
.sh-note b{color:#fff}
.sh-segs{display:flex;flex-direction:column;gap:9px;margin:12px 0 4px}
.sh-seg{
  padding:11px 13px;border-radius:11px;
  background:rgba(30,20,62,.55);border:1px solid var(--edge);
}
.sh-seg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.sh-seg-head b{font-size:13.5px;color:#e0d4ff}
.sh-seg-head span{font-size:11.5px;color:#9b90bf;flex:none}
.sh-seg-body{font-size:12.5px;line-height:1.7;color:var(--ink-2)}
/* ───────── 节气盘（动态版） ───────── */
#term-wheel{position:relative;transition:.2s}
#term-wheel svg{filter:drop-shadow(0 8px 40px rgba(109,74,255,.22))}
/* 节气扇区 / 星座环 的过渡 */
#term-wheel .tw-term-bg,
#term-wheel .tw-sign-bg{transition:fill .22s ease,border-color .22s ease,stroke-width .22s}
/* 当前节气的脉动光环 */
@keyframes twPulse{
  0%  {transform:scale(1);opacity:.95}
  70% {transform:scale(2.1);opacity:0}
  100%{transform:scale(2.1);opacity:0}
}
#term-wheel .tw-pulse{
  transform-box:fill-box;transform-origin:center;
  animation:twPulse 2.4s ease-out infinite;
}
/* 内圈文字不再做淡入。原因：悬停时整个 SVG 会重绘，重绘后动画从 0 重新开始，
   鼠标停在盘上的整段时间内圆心文字反复闪没（实测「鼠标到轮盘上，圆心的显示就没了」）。
   圆盘是高频交互控件，任何「重绘即重播」的动画都会造成闪烁，这里一律不做。 */
@keyframes twFade{
  from{opacity:0;transform:translateY(4px)}
  to  {opacity:1;transform:translateY(0)}
}
/* 全盘文字：永不参与淡入，始终保持完全可见 */
#term-wheel svg text{opacity:1 !important;animation:none !important}
@media (prefers-reduced-motion: reduce){
  #term-wheel .tw-pulse{animation:none}
}
/* ───────── 月运汇总：12 个正方形格 ───────── */
/* 用 aspect-ratio 保证是正方形（不是靠固定 px，响应式也方） */
.month-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-top:4px;
}
.mcell{
  position:relative;aspect-ratio:1/1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:10px 6px 14px;
  border-radius:12px;cursor:pointer;
  background:rgba(24,15,52,.62);
  border:1px solid rgba(109,74,255,.28);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
  overflow:hidden;
}
.mcell:hover{
  transform:translateY(-2px);
  border-color:rgba(169,125,255,.75);
  background:rgba(40,26,84,.8);
}
.mcell b{
  font-size:clamp(20px,2.2vw,27px);font-weight:800;line-height:1;
  letter-spacing:-.02em;
}
.mcell span{
  font-size:11.5px;color:var(--ink-3);font-weight:600;
  white-space:nowrap;
}
/* 底部细进度条：高度=分数 */
.mcell-bar{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(109,74,255,.16);
}
.mcell-bar em{
  position:absolute;left:0;bottom:0;width:100%;
  display:block;border-radius:0 2px 0 0;
  background:linear-gradient(90deg,#7b4dff,#a855f7);
}
/* 分数档位配色 */
.mcell.hi  b{color:#5eead4}
.mcell.up  b{color:#a3e635}
.mcell.mid b{color:#c4b5fd}
.mcell.low b{color:#fbbf24}
.mcell.bad b{color:#fb7185}
.mcell.hi  .mcell-bar em{background:linear-gradient(90deg,#14b8a6,#5eead4)}
.mcell.up  .mcell-bar em{background:linear-gradient(90deg,#65a30d,#a3e635)}
.mcell.mid .mcell-bar em{background:linear-gradient(90deg,#7b4dff,#c4b5fd)}
.mcell.low .mcell-bar em{background:linear-gradient(90deg,#d97706,#fbbf24)}
.mcell.bad .mcell-bar em{background:linear-gradient(90deg,#be123c,#fb7185)}
/* 该维最高分加个微光 */
.mcell.hi{background:rgba(20,60,60,.42);border-color:rgba(94,234,212,.45)}
.mcell.empty{border-style:dashed;opacity:.55;cursor:default}
.mcell.empty b{color:var(--ink-3);font-size:18px}

@media (max-width:1100px){ .month-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:640px){ .month-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} }

/* ───────── 英雄区（重设计：左文案 + 右星座环） ───────── */
/* 基础布局（这些属性与「框」无关，必须有） */
.hero{
  margin-bottom:16px;
  padding:32px 36px;
  position:relative;
  overflow:hidden;
}
/* ── hero 完全无框（最高优先级，压过 .nx-card.big-block:hover）──
   实测发现真凶：nebula-cards.css 里的
     .nx-card.big-block:hover{ background-color: rgba(22,14,48,.62) !important }
   它同样带 !important，但优先级 = 2 类 + 伪类 = (0,3,0)，
   比 .hero:hover (0,2,0) 高，所以每次都被它覆盖 → 鼠标移过去出现底色框。

   对策：用更高优先级的选择器。
     `.screen .hero.hero:hover` = (0,4,0) > (0,3,0)
   并同样加 !important，双保险。 */
.screen .hero.hero,
.screen .hero.hero:hover,
#s-chart .hero,
#s-chart .hero:hover,
body .hero.card.aurora,
body .hero.card.aurora:hover{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  outline:none !important;
}
/* 伪元素也一并锁死（.card.aurora:before 画描边、.nx-card 可能加装饰层） */
.hero::before,
.hero::after,
.hero.aurora::before,
.hero.aurora::after,
.hero.nx-card::before,
.hero.nx-card::after{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}
/* 右上角柔光（已并入上面 .hero 的 background-image，此段仅留说明）
   注意：hero 同时是 .card，而 .card::after 已被用来画「下切割线」。
   若这里继续用 ::after，420×320 的光斑会顶掉下切割线
   （实测 .card::after 高度变成 320px）。
   ::before 也已由 .card 用于「上切割线」，同样不能占。
   解法：把柔光改成 background 的一层，落在元素自身背景里，不占伪元素。 */
/* 右上角柔光已并入 .hero 的 background-image。
   旧的 ::after 光斑必须停用 —— 但 .card::after 同时承担「下切割线」，
   所以这里只清掉光斑相关属性，绝不写 content:none（那会把下切割线一起干掉）。
   实测：写 content:none 后 .card::after 的 linear-gradient 消失，下切割线丢失。 */
/* hero 无框 → 不需要上下切割线。
   之前这里给 .hero::after 画了 .card 的下切割线（1px 渐变），
   那是 block 模式才要的东西；hero 既然不要框，这条线也一并不画。 */
.hero::after{
  content:none;
}
.hero-grid{
  display:grid;
  /* 用户：「登陆的位置居中了，要靠右边的」
     参考图里圆盘基本贴着内容区右边缘：
       · 右列宽度 = 圆盘宽度（不预留空白）
       · 左列吃掉剩余空间
       · 右列 margin-right 归零（原来 -16px 的外推取消，改由列宽精确控制）
     实测原来 stage 中心在视口 61.7%，左留 645 / 右留 285 —— 明显偏左。 */
  /* 右列宽度 = 圆盘实际宽度：607 × 1.30 = 789（用户要求「整个圆要放大 30%」） */
  grid-template-columns:minmax(0,1fr) 789px;
  gap:24px;align-items:center;
  column-gap:24px;
  justify-content:end;
  position:relative;z-index:1;
}
@media (max-width:1400px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(520px,780px)}
}
.hero-copy{min-width:0}
.hero-title{
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.28;
  margin:10px 0 12px;
  letter-spacing:-.01em;
}
.hero-lead{
  font-size:14px;line-height:1.85;color:var(--ink-2);
  margin:0;max-width:560px;
}
.hero-tags{
  display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;
}
.hero-tags .tag{
  font-size:11.5px;padding:5px 12px;border-radius:999px;
  color:#b9abd8;background:rgba(123,77,255,.13);
  border:1px solid rgba(150,120,255,.26);
}
/* CTA 成组紧跟文案 —— 不再甩到角落 */
.hero-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;
}
.hero-btn{
  appearance:none;border:0;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;gap:7px;
  font-family:inherit;font-size:14.5px;font-weight:800;color:#fff;
  padding:13px 30px;border-radius:999px;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 10px 28px rgba(123,77,255,.5);
  transition:transform .18s ease,box-shadow .18s ease;
}
.hero-btn em{font-style:normal;font-size:15px}
.hero-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(123,77,255,.72);
}
.hero-link{
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:#9d93c4;
  padding:6px 2px;transition:.16s;
}
.hero-link:hover{color:#c9b6ff;text-decoration:underline}

/* 右侧装饰：三层星座环 + 光点，缓慢反向自转。
   justify-self:stretch 让环吃掉整个右列，避免列内右侧再留空白。 */
.hero-art{
  justify-self:stretch;align-self:center;
  width:100%;max-width:420px;aspect-ratio:1/1;
  position:relative;
  margin-right:-16px;   /* 贴到卡片内边距边缘，视觉更满 */
}
.hero-art svg{display:block;width:100%;height:100%;overflow:visible}
.hero-ring-a,.hero-ring-b,.hero-ring-c{
  transform-box:fill-box;transform-origin:center;
}
.hero-ring-a{animation:heroSpin 46s linear infinite}
.hero-ring-b{animation:heroSpinB 34s linear infinite}
.hero-ring-c{animation:heroSpin 26s linear infinite reverse}
@keyframes heroSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes heroSpinB{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

@media (max-width:1000px){
  .hero{padding:26px 22px}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-art{width:min(220px,70%);order:-1}   /* 窄屏：图在上、文案在下 */
}
@media (max-width:640px){
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-btn{justify-content:center}
  .hero-link{text-align:center}
}
@media (prefers-reduced-motion: reduce){
  .hero-ring-a,.hero-ring-b,.hero-ring-c{animation:none}
}

/* ───────── 生命轨迹：柱状 + 折线组合图 ───────── */
.life-chart{
  display:block;width:100%;height:auto;
  min-height:240px;
}
.lc-bar{transition:opacity .16s ease}
.lc-bar:hover{opacity:1}
.lc-dot{transition:r .16s ease}
.lc-dot:hover{r:6.5}
/* 容器给点内边距，避免 Y 轴刻度贴边 */
#chart-life{padding:4px 2px}


/* ───────── 品牌区文字：永不带下划线 ─────────
   .brand 是 <a>，全站 a:hover 会加下划线；这里显式覆盖。 */
.brand,
.brand:hover,
.brand *,
.brand:hover *,
.brand-name,
.brand-slogan{
  text-decoration:none !important;
  border-bottom:0 !important;
}


/* ═══════════════════════════════════════════════════════
   星盘区隔：上下两条凹凸线，不要大块背景
   ───────────────────────────────────────────────────────
   原来这块是 .card，带 1360×843 的半透明底 + 1px 边框 + 20px 圆角
   + blur(16px) + 18px 阴影 —— 视觉上是一整块盖住星空的大板子。
   用户要求只保留「上下边框有一个凹凸线的感觉」，不要背景。

   做法：
     · 容器（.chart-block）全透明，无边框、无圆角、无模糊、无阴影
     · 上下各一条 SVG 凹凸线：中间一段下凹（顶）/ 上凸（底），
       两端用 linearGradient 渐隐，避免出现硬端点
     · 线的颜色取星云紫，1.2px 细线，不抢内容
   ═══════════════════════════════════════════════════════ */

.chart-block{
  position:relative;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  /* ── 内边距给光环留出空间 ──
     原 padding:6px 0 4px。土元素（--elem 峰值）的外圈光晕是
       drop-shadow(0 0 48px) + ::after 的 0 0 38px + 0 0 14px，
     合计向外扩散约 50~55px，而上下只有 6px / 4px 的余量 ——
     光环被上下相邻内容压住、显示不完整（用户：「土元素的光环没有显示完整」）。
     现在四边都留出 56px：足够容纳最大幅度的土象光环，又不会把版面拉太散。 */
  padding:56px 56px;
  box-sizing:border-box;
}

/* 分隔线：心跳波形
   ── 左右留白（用外层 div 实现）──
   踩过的坑：直接给 <svg> 加 padding-inline 无效 ——
   SVG 元素不遵守 box-sizing 的 padding 收缩规则（实测 svg_w 仍等于容器宽）。
   所以外面套一层 .wave-wrap 负责留白，svg 在里面 100% 铺满。 */
.wave-wrap{
  display:block;
  width:100%;
  padding-inline:5%;      /* 左右各留 5% */
  box-sizing:border-box;
}
.wave-wrap.top{margin-bottom:6px}
.wave-wrap.bottom{margin-top:6px}

.chart-block > .chart-divider,
.wave-wrap > .chart-divider{
  display:block;
  width:100%;
  /* ── 高度从 40px 提到 88px ──
     viewBox 是 "0 0 1320 40"，波形 bbox 高 26（y 7~33）。
     圆盘悬停时波形 scaleY 放大到 2 倍 → 高 52，上下各超出 SVG 边界 6 单位，
     被相邻内容压住，用户看到的就是「只有厚度、波峰没变高」。
     现在容器给到 88px，放大后有充足空间，波峰波谷真正长高。
     同时 viewBox 保持 40 —— 图形按原始坐标绘制，容器变高只是多留出上下空间。 */
  height:88px;
  overflow:visible;
  pointer-events:none;
}

/* ── 声波动画：带节奏的起伏 ──
   ── 为什么用 ±半组而不是 0 → -整组 ──
   原来 `0 → -22.727%` 是单向平移，整个动画周期里波形只往左走，
   任何时刻截帧都偏离初始位置（最大偏一整组 = 300 单位 ≈ 278px），
   所以看起来「永远不在正中」。

   现在改成 `-11.36% → +11.36%`（±半组）：
     · 动画中点正好是偏移 0 的原位（视觉居中）
     · 左右对称摆动，任意时刻的偏离都不超过半组
     · 仍保持无缝（波是周期性的，半组位移不破坏连续性） */
.chart-block > .chart-divider.wave .wave-main,
.chart-divider.wave .wave-main{
  /* 主波（紫）方向：从右到左。
     原先 waveScroll 是 -11.36% → +11.36%（向右走），加 reverse 就变成右→左。 */
  animation: waveScroll 12s linear infinite reverse;
}
.chart-block > .chart-divider.wave .wave-sub,
.chart-divider.wave .wave-sub{
  /* 副波（金/白细线）方向：从左到右 —— 与主波相反，形成对流。 */
  animation: waveScroll 18s linear infinite,
             wavePulse 3.6s ease-in-out infinite;
}
@keyframes waveScroll{
  from{ transform:translateX(-11.36%); }   /* 半组左 */
  to  { transform:translateX(11.36%); }    /* 半组右，中点=原位 */
}

/* ═══════════════════════════════════════════════════════
   悬停「圆形盘面」→ 波形活跃（更快 / 更大 / 叠加元素色）
   ───────────────────────────────────────────────────────
   用户三次纠正后确定的规则：
     ① 触发条件是**圆形盘面**，不是外面的大方框
        → JS 用半径做命中测试，落在圆内才给 body 加 [data-wave-elem]
     ② 圆盘边框也变元素色，移开恢复
     ③ 不同属性星座 → 波形多一条**该元素颜色**的波 + 频率不同：
          火象 红 1.6s（最快）> 水象 蓝紫 2.4s > 风象 青蓝 3.4s > 土象 黄褐 5.2s（最慢）

   为什么不用 .chart-block:hover：那是矩形命中，
   鼠标只要在方框里就会触发（用户说「你是圆盘外的大框就变色了」）。
   改用 body[data-wave-elem] —— 只有 JS 判定指针在圆内时才存在。
   ═══════════════════════════════════════════════════════ */

/* 元素色波浪：默认隐藏，靠 body[data-wave-elem] 打开 */
.chart-divider.wave .wave-elem{
  opacity:0;
  transform-origin:50% 50%;
  transform-box:fill-box;
  transition:opacity .3s ease;
}

/* 圆盘内悬停 → 主波加速 + 幅度放大 + 元素色
   用户要求：「移到圆盘，幅度要放大，节奏要加快」。

   上一版只加速（--wave-speed），没有放大 —— 而且原来的
   waveScrollBig 关键帧带固定 scaleY，换元素后 duration 变了但 scale 不变，
   幅度看起来没反应。现在改成：
     · 幅度：主波 scaleY(2.0)、副波 scaleY(2.3)，写在 transform 里
     · 节奏：duration 用 --wave-speed（火 1.6s 最快 → 土 5.2s 最慢）
     · 元素色：白波本身也叠一层元素色辉光
   scaleY 与 translateX 必须写在同一个 transform 里（分开写会互相覆盖）。 */
/* ── 幅度按元素分级（用户：土 > 风 > 水 > 火）──
   波峰波谷的高低才是有意义的差异，光改粗细不够。
   用 --wave-amp 承接分级值，由 body[data-wave-elem] 设定：
     土 3.4 / 风 2.9 / 水 2.3 / 火 1.9
   （幅度与频率反相关：土最慢但起伏最大，火最快但起伏最小 —— 
     沉的东西振幅大、快的东西振幅小，符合物理直觉） */

/* ── 元素 → 波浪幅度分级（用户钦定的顺序：土 > 风 > 水 > 火）──
   注意：与频率顺序正好相反 —— 土最慢但起伏最大，火最快但起伏最小。 */
body[data-wave-elem="earth"]{ --wave-amp:3.4; }   /* 土：波峰最高 */
body[data-wave-elem="air"]  { --wave-amp:2.9; }   /* 风 */
body[data-wave-elem="water"]{ --wave-amp:2.3; }   /* 水 */
body[data-wave-elem="fire"] { --wave-amp:1.9; }   /* 火：波峰最低 */

/* 主波（紫）：从右到左。from 用 +11.36%，to 用 -11.36% —— 方向与旧版相反。 */
@keyframes waveHoverMain{
  from{ transform:translateX(11.36%)  scaleY(var(--wave-amp, 2.6)); }
  to  { transform:translateX(-11.36%) scaleY(var(--wave-amp, 2.6)); }
}
@keyframes waveHoverSub{
  /* 副波（金）：从左到右，与主波反向对流 */
  from{ transform:translateX(-11.36%) scaleY(calc(var(--wave-amp, 2.6) * 1.12)); }
  to  { transform:translateX(11.36%)  scaleY(calc(var(--wave-amp, 2.6) * 1.12)); }
}

body[data-wave-elem] .chart-divider.wave .wave-main{
  animation-name: waveHoverMain !important;
  animation-duration: var(--wave-speed, 1.6s) !important;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin:50% 50%;
  transform-box:fill-box;
  filter: drop-shadow(0 0 3px rgba(var(--wave-elem),.95))
          drop-shadow(0 0 12px rgba(var(--wave-elem),.6))
          brightness(1.15);
}
body[data-wave-elem] .chart-divider.wave .wave-sub{
  animation-name: waveHoverSub, wavePulse !important;
  animation-duration: var(--wave-speed, 1.6s), calc(var(--wave-speed, 1.6s) * 0.7) !important;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  transform-origin:50% 50%;
  transform-box:fill-box;
  filter: drop-shadow(0 0 8px rgba(var(--wave-elem),.55));
}

/* 元素色附加波：同样放大，与主波同步 */
body[data-wave-elem] .chart-divider.wave .wave-elem{
  opacity:.95;
  animation: waveHoverElem var(--wave-speed, 1.6s) linear infinite;
  filter: drop-shadow(0 0 6px rgba(var(--wave-elem),.9))
          drop-shadow(0 0 16px rgba(var(--wave-elem),.5));
}

/* 元素色波浪的平移（与主波同向同速同幅度，叠成一条彩色波） */
/* 元素色波（金/橙等）：从左到右 —— 与主波反向对流。 */
@keyframes waveHoverElem{
  from{ transform:translateX(-11.36%) scaleY(var(--wave-amp, 2.6)); }
  to  { transform:translateX(11.36%)  scaleY(var(--wave-amp, 2.6)); }
}

/* 圆盘外圈的元素色光环（圆形，不是方框） */
.pl-stage[data-elem] .pl-svg{
  filter:drop-shadow(0 0 12px rgba(var(--elem),.6))
         drop-shadow(0 0 30px rgba(var(--elem),.3));
  transition:filter .3s ease;
}

@media (prefers-reduced-motion: reduce){
  body[data-wave-elem] .chart-divider.wave .wave-main,
  body[data-wave-elem] .chart-divider.wave .wave-sub,
  body[data-wave-elem] .chart-divider.wave .wave-elem{ animation:none !important; }
}

@keyframes wavePulse{
  0%,100%{ opacity:.35; }
  50%    { opacity:.85; }
}

/* 波线加一点辉光，像发光的声音轨迹 */
.chart-divider.wave .wave-main{
  filter:drop-shadow(0 0 3px rgba(190,150,255,.75));
}

@media (prefers-reduced-motion: reduce){
  .chart-block > .chart-divider.wave .wave-main,
  .chart-divider.wave .wave-sub{ animation:none; }
}

/* 线条加一点点呼吸，别太死板（尊重减少动效） */
.chart-block > .chart-divider path{
  filter:drop-shadow(0 0 4px rgba(168,140,255,.45));
}
@media (prefers-reduced-motion: reduce){
  .chart-block > .chart-divider path{filter:none}
}


/* ═══════════════════════════════════════════════════════
   节气屏去掉大框（用户：「节气的框不要显示，类似 hero 的框一样」）
   ───────────────────────────────────────────────────────
   hero 是本站「无框」的榜样，实测它的计算样式是：
     background: rgba(0,0,0,0)   border: 0px none   radius: 0px   shadow: none

   节气屏有三个大容器还是老式玻璃卡片（底色 + 1px 边 + 20px 圆角 + 投影），
   全部按 hero 的规格拍平：
     · .term-wheel-card  577×625  节气圆盘外框
     · .term-cur         605×391  当前节气详情
     · .card.nx-card     605×287  宜忌/下一页等

   注意：内层的小元素（tc-sign 节气标签、tc-yi/tc-ji 宜忌块、term-item 24 个节气按钮）
   保留自己的边框 —— 它们是「内容件」不是「容器」，去掉会散架。
   ═══════════════════════════════════════════════════════ */
#s-terms .card.term-wheel-card,
#s-terms .card.term-wheel-card:hover,
#s-terms .card.term-cur,
#s-terms .card.term-cur:hover,
#s-terms .term-detail > .card.nx-card,
#s-terms .term-detail > .card.nx-card:hover,
#s-terms .term-detail > .card{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* 去掉可能残留的伪元素描边层 */
#s-terms .card.term-wheel-card::before,
#s-terms .card.term-wheel-card::after,
#s-terms .card.term-cur::before,
#s-terms .card.term-cur::after,
#s-terms .term-detail > .card.nx-card::before,
#s-terms .term-detail > .card.nx-card::after,
#s-terms .term-detail > .card::before,
#s-terms .term-detail > .card::after{
  content:none !important;
  display:none !important;
}
/* 大容器不做星云 hover（与 hero / big-block 一致） */
#s-terms .card.term-wheel-card,
#s-terms .card.term-cur,
#s-terms .term-detail > .card.nx-card{
  animation:none !important;
}


/* ═══════════════════════════════════════════════════════
   能力屏：拆掉雷达图外面的大框
   ───────────────────────────────────────────────────────
   用户要求：「把能力圆盘背景大框拆了」。
   实测那个框是 .card.aurora.ability-radar（555×605）：
     background rgba(22,14,48,.62) + 1px 边 + 20px 圆角 + 投影
   和 hero 一样拍平成透明，让雷达图直接浮在星空上。

   注意：只拆「外层卡片」，不动雷达图自身的绘制
   （圆盘、网格、区间带、数据线都保留）。 */
#s-ability .card.ability-radar,
#s-ability .card.ability-radar:hover{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  animation:none !important;
  padding:0 !important;
}
#s-ability .card.ability-radar::before,
#s-ability .card.ability-radar::after{
  content:none !important;
  display:none !important;
}




/* ═══════════════════════════════════════════════════════
   12 维能力盘（整圆扇区版）
   ───────────────────────────────────────────────────────
   用户要求：「画成一个整圆，类似节气圆盘。文字包含在相关主题雷达里面。
              现在是分开的。这样，文字那个方块就能取消。」

   结构（radar12.js 生成）：
     .rd-sector          一个主题的扇形组（12 个拼成整圆）
       .rd-sec-base      底色（分数越高越浓）
       .rd-sec-fill      高亮层（默认透明）
       .rd-sec-edge      分界线
       .rd-lbl > text    维度名 + 分数（直接画在扇形内部）

   交互：
     · 悬停 → 该片扇区亮起，文字加发光（不再需要跨元素联动）
     · 默认 → 12 片按 --i 错峰循环亮起，形成绕盘扫动的光点
   ═══════════════════════════════════════════════════════ */

/* 扇区/文字 过渡 */
#s-ability .rd-sector{ transition:filter .2s ease; }
#s-ability .rd-sector .rd-sec-fill{ transition:opacity .22s ease; }
#s-ability .rd-sector .rd-lbl text{ transition:fill .22s ease, filter .22s ease; }

/* ── 悬停：点亮整片 + 文字发光 ── */
#s-ability .rd-sector:hover .rd-sec-fill{ opacity:1; }
#s-ability .rd-sector:hover .rd-lbl text{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.95));
}
#s-ability .rd-sector:hover{ filter:brightness(1.15); }

/* ── 默认：12 片错峰循环亮起（绕盘扫动的光点） ──
   用户要求：「转的速度太快，调到原来速度的 25%」。
   原周期 5.4s（12 × 0.45s）→ 现 21.6s（12 × 1.8s），正好 4 倍时长 = 25% 速度。
   任一时刻仍只有 1~2 片是亮的。 */
@keyframes rdNotice{
  0%   { opacity:0;    }
  3%   { opacity:0.55; }
  7%   { opacity:0.90; }     /* 最亮 */
  13%  { opacity:0.45; }
  20%  { opacity:0;    }     /* 熄灭，剩余 80% 保持暗 */
  100% { opacity:0;    }
}

#s-ability .radar12-box:not(:hover) .rd-sector .rd-sec-fill{
  animation:rdNotice 21.6s linear infinite;
  animation-delay:calc(var(--i, 0) * 1.8s);
}

/* 文字跟着微亮，让"现在轮到哪个主题"看得出来 */
@keyframes rdLblNotice{
  0%   { opacity:.82; }
  5%   { opacity:1;   }
  11%  { opacity:1;   }
  19%  { opacity:.82; }
  100% { opacity:.82; }
}
#s-ability .radar12-box:not(:hover) .rd-sector .rd-lbl{
  animation:rdLblNotice 21.6s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * 1.8s);
}

/* 悬停时停止循环，交还手动高亮 */
#s-ability .radar12-box:hover .rd-sector .rd-sec-fill,
#s-ability .radar12-box:hover .rd-sector .rd-lbl{
  animation:none;
}

@media (prefers-reduced-motion: reduce){
  #s-ability .rd-sector .rd-sec-fill,
  #s-ability .rd-sector .rd-lbl{ animation:none !important; }
}


/* ═══════════════════════════════════════════════════════
   今日运程盘（同心圆环版）
   ───────────────────────────────────────────────────────
   用户反馈：「附件1 这个不是我想要的。参考附件2 星盘的整体运作。
              附件3，标题内容要放大盘上面。」

   旧版问题：波浪是「直线 12 段」，像音轨不像盘。
   新版对齐星盘结构：外环 12 宫位 → 环绕波动线 → 中心总分。
   ═══════════════════════════════════════════════════════ */

/* 标题区（在盘上方，左对齐成组） */
.today-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:8px;
}
.today-head h2{
  font-size:22px;letter-spacing:.01em;
}

/* ═══════════════════════════════════════════════════════
   今日运程屏 · 三栏布局（左右信息方块 + 中央圆盘）
   2026-11-07 第五轮，两条需求：
     「今日运程盘离 波浪线以及标题的 padding 要加大。」
     「左右两边添加上面内容，要有类似 星座tag 命盘 左右两个blog 一样的方块。」
   结构照搬星盘屏 .chart-arena（左数据栏 / 中盘 / 右建议栏），
   间距与方块样式也沿用那套语汇，保证两屏看起来是同一个产品。
   ═══════════════════════════════════════════════════════ */
.today-stage{
  display:grid;
  /* 中间列给到命盘同尺寸（643px），左右栏收窄 */
  grid-template-columns:minmax(170px,220px) minmax(0,680px) minmax(170px,220px);
  gap:22px;
  /* 参照星盘命盘 .chart-arena：左右栏垂直居中于圆盘
     ⇒ 左右两块的横向基准线正好落在圆心上。
     实测命盘：盘圆心 Y=1346，左栏中线 1345.5、右栏中线 1345（差 ≤1px）。 */
  align-items:center;
  /* 左右栏用 align-self:start + JS 精调 margin-top 对齐圆心，
     所以这里的 center 只作用于"让中央列自身居中" */
  justify-content:center;
  margin:26px auto 30px;
  max-width:1180px;
}
@media (max-width:1180px){
  .today-stage{grid-template-columns:minmax(0,1fr) minmax(0,640px); gap:16px}
  .today-side.today-right{grid-column:1 / -1}
}
@media (max-width:900px){
  .today-stage{grid-template-columns:1fr; gap:16px; max-width:620px}
  .today-side{order:2}
  .today-center{order:1}
}

/* 左右栏：中线对准**圆心**（不是对准整个中央列的中线）
   2026-11-07 需求：「左右两个块的横轴，要圆心对接。可以参考 命盘。」

   为什么不能只靠 align-items:center：
     中央列 = 盘(660) + 间距(34) + 波浪(88) + 边距，总高 790，其中线在 650；
     而盘本身只有 660 高，圆心在 593。两者差 57px。
     grid 的 align-items:center 对齐的是"整个中央列的中线"，所以差 57px。

   做法：左右栏 align-self:start 顶到列顶，再由 JS 算 margin-top：
      目标：栏顶 + 栏高/2 == 圆心Y
      ⇒ margin-top = 圆心Y - 列顶 - 栏高/2
   栏高随内容变化，所以必须运行时算（写死会在数据变化后错位）。
   见 app.js 的 alignTodaySidesToCenter()。 */
.today-side{
  padding:16px 16px 18px;
  border-radius:16px;
  background:linear-gradient(165deg,rgba(28,18,62,.72),rgba(16,9,38,.55));
  border:1px solid rgba(150,120,255,.26);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
  align-self:start;
  /* 由 JS 写入 translateY，使本块中线 == 圆心。
     用 transform 而不是 margin：margin 会参与 grid 单元的尺寸计算，
     与 align-self 叠加后产生 3~4px 残差（实测）；transform 不参与布局，精确。 */
  transform:translateY(var(--tw-side-shift, 0px));
}
.ts-head{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:#d7ccff;margin-bottom:10px;
}
.ts-dot{
  width:7px;height:7px;border-radius:50%;background:#a97dff;
  box-shadow:0 0 8px rgba(169,125,255,.9);flex:none;
}
.ts-dot.blue{background:#5ec8ff;box-shadow:0 0 8px rgba(94,200,255,.9)}
.ts-dot.green{background:#5eead4;box-shadow:0 0 8px rgba(94,234,212,.9)}
.ts-dot.amber{background:#ffc46b;box-shadow:0 0 8px rgba(255,196,107,.9)}
.ts-dot.pink{background:#ff8fb0;box-shadow:0 0 8px rgba(255,143,176,.9)}
.ts-sep{height:1px;background:rgba(150,120,255,.16);margin:13px 0}

.ts-body{display:flex;flex-direction:column;gap:7px}
.ts-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.ts-row b{color:#a99ed0;font-weight:600}
.ts-row span{color:#e6dfff}

.ts-elements{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ts-el{display:flex;align-items:center;gap:6px;font-size:12px;color:#cfc6ea}
.ts-el i{width:8px;height:8px;border-radius:2px;flex:none}
.ts-el[data-el="火"] i{background:#ff7a59}
.ts-el[data-el="土"] i{background:#ffc46b}
.ts-el[data-el="风"] i{background:#5ec8ff}
.ts-el[data-el="水"] i{background:#9d7bff}
.ts-el b{font-weight:700;color:#e9e2ff}
.ts-el span{margin-left:auto;color:#b6a9dd}

.ts-rank{display:flex;flex-direction:column;gap:9px}
.ts-rank-row{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px}
.ts-rank-row span{color:#a99ed0}
.ts-rank-row b{font-weight:800;font-size:13.5px}
.ts-tip{font-size:12.5px;line-height:1.75;color:#d6cdef}

.ts-legend{display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:#b6a9dd}
.ts-legend span{display:flex;align-items:center;gap:7px}
.ts-legend i{width:9px;height:9px;border-radius:2px;flex:none}

/* 分数分布：12 根竖条，高度=分数、颜色=该维分色 */
.ts-spread-bar{
  display:flex;align-items:flex-end;gap:3px;
  height:58px;margin-bottom:8px;
}
.ts-spread-bar i{
  flex:1;border-radius:3px 3px 0 0;
  transition:height .35s ease;
  box-shadow:0 0 6px rgba(0,0,0,.25) inset;
}
.ts-spread-note{font-size:11.5px;color:#b6a9dd;text-align:center}

/* 中央列：盘上方留白（离标题）、盘与波之间留白，都在这两条里 */
.today-center{display:flex;flex-direction:column;align-items:stretch}
.today-wheel-wrap{
  display:flex;flex-direction:column;align-items:stretch;
  margin:8px auto 0;width:100%;max-width:none;
  gap:34px;                 /* 盘 ↔ 波浪：需求「padding 要加大」，18px 实测仍显挤，提到 34px */
}

#today-wheel{width:100%;max-width:660px;position:relative;}
#today-wheel svg{display:block;width:100%;height:auto;overflow:visible;}

/* ── 圆盘本体的动态：只给「边」做呼吸，不给整个圆做（2026-11-06 第四轮）
   需求："只需要圆盘的边高亮就行，不需要整个圆内部都变色。"
   原来这里给 #today-wheel svg 挂了 twDiscBreath（opacity .94→1 + scale 1→1.008），
   那是整个圆（含内部扇形与文字）一起呼吸缩放 —— 属于"内部也在动/变色"。
   现在撤掉，呼吸交给 #today-wheel::after 的描边环（只影响边框，与命盘 discRing 同做法）。 */
/* 悬停整盘：发光只走 ::after 的边（见下方边高亮规则）。
   ⚠️ 这里**不能**再给 #today-wheel.tw-hover svg 挂 drop-shadow ——
      那会让整个 SVG（含圆内部）一起发光，等于「内部变色」，
      与需求「只需要圆盘的边高亮就行，不需要整个圆内部都变色」直接相反。
      （2026-11-06 实测踩过：上一轮残留的这条规则仍在生效，svgFilter 读到三层 drop-shadow） */
/* 悬停的宫位自己亮起来（原来只有 brightness，现在加元素色描边，与星盘一致） */
.tw-house.tw-on path{filter:brightness(1.3);}
.tw-house.tw-on .tw-hi{opacity:1 !important;}

/* ═══════════════════════════════════════════════════════
   今日盘 边高亮 + 环直径动态（2026-11-06 第四轮）
   ───────────────────────────────────────────────────────
   需求原文：
     "只需要圆盘的边高亮就行，不需要整个圆内部都变色。"
     "圆环的直径是动态的，根据颜色来。"

   命盘（planetlock.css）的边高亮实测做法 —— 完全照搬：
     #bigchart[data-elem]::after{
       border:2.5px solid rgba(var(--elem),.90);      ← 只描边，不填充
       box-shadow: 0 0 14px .85 / 0 0 38px .55 / inset 0 0 24px .20;
       z-index:3;                                      ← 浮在 SVG 之上
       animation:discRing 2.6s ease-in-out infinite;   ← 2.6s 呼吸
     }
   所以今日盘也改成 ::after 伪元素：
     · 只画边，圆内部一个像素都不填 → 满足「不需要整个圆内部变色」
     · 颜色跟 --tw-elem 走（悬停哪个宫，边就是那个宫的分数色）
     · 原来挂在 svg 上的三层 drop-shadow 撤掉（那会让整个圆一起发光 = 内部变色）

   环直径动态（跟颜色走）：
     命盘是 --disc-amp（火1.00/水1.25/风1.55/土1.95）经 scale() 改波环直径。
     今日盘按分数档映射成同一区间（低分小、高分大），悬停时用 CSS 变量控制 scale。
   ═══════════════════════════════════════════════════════ */
#today-wheel{ position:relative; }
/* 默认：紫金呼吸（未悬停）——与命盘默认态一致 */
#today-wheel::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2.5px solid rgba(180,138,255,.72);
  box-shadow:
    0 0 14px rgba(180,138,255,.65),
    0 0 38px rgba(255,220,150,.38);
  pointer-events:none;
  z-index:3;
  animation:twDiscRing 2.6s ease-in-out infinite;
}
@keyframes twDiscRing{
  0%,100%{ opacity:.72; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.012); }
}
/* 悬停某宫：边换成该宫分数色。
   ⚠️ 边环**不按分数放大**——命盘实测：::after 只做 discRing 1→1.015 呼吸，
      按元素放大的是盘内波环（--disc-amp 1.00~1.95）。
      上一版我把 --tw-ring-scale 也写给了 ::after，导致 95 分时边宽 1021px、
      远超出圆盘本身（540px），环会飘到盘外（实测抓到）。
      现在边环只换色 + 呼吸；直径放大只作用在 .tw-ring-one 波环上。 */
#today-wheel[data-tw-elem="1"]::after{
  border-color:rgba(var(--tw-elem),.92);
  box-shadow:
    0 0 14px rgba(var(--tw-elem),.85),
    0 0 38px rgba(var(--tw-elem),.55),
    inset 0 0 24px rgba(var(--tw-elem),.18);
  animation:twDiscRing 2.6s ease-in-out infinite;
}
/* ── 盘内波环：直径也随颜色/分数动态（第②条口径）──
   命盘把 --disc-amp 写进 twRingSpinAmp 的 transform 里实现，
   这里同样：rotate + scale 必须写在同一个 transform，分开会互相覆盖。 */
/* 环的动效：旋转 + 呼吸（2026-11-07 第十一轮）
   为什么加呼吸：环是闭合对称图形，只靠 rotate 转起来肉眼几乎看不出
   （转 360° 回到原位，中间没有可参照的变化）。
   实测用户说「波没运动」就是这个原因。
   现在叠加两层：
     · rotate 18s 一圈（比原来 26s 快，看得出在走）
     · opacity/亮度 3.6s 呼吸（与命盘 wavePulse 同节奏）
   旋转 + 明暗起伏，静止截图看不出来，但真人盯着看能明确感到"波在动"。 */
/* ═══════════════════════════════════════════════════════
   盘内扫描环：一次只亮一个颜色（2026-11-07 第十七轮）
   ───────────────────────────────────────────────────────
   用户口径：「圈是要扫描到对应的颜色，再显示对应颜色的圈。」

   实现（纯 CSS，跑合成层，丝滑）：
     · 12 条环叠在同一个容器里，各自带 --slot（第几格）
     · 每条环走同一个 keyframes twScanShow，周期 24s = 12 格 × 2s
     · animation-delay = slot × 2s（负值，让 12 条错开铺满整个周期）
     · keyframes 里：自己那 1/12 时间 opacity=1，其余时间 opacity=0
     ⇒ 任何时刻只有 1 条环可见；它每 2 秒跳到下一个扇区的
       颜色与直径，形成"扫描"观感。
   ═══════════════════════════════════════════════════════ */
.tw-scanv2{
  /* ⚠️ 必须是 none：环是纯装饰，若接收事件会挡住下面 8/12 个宫位，
     实测 elementFromPoint 落在 tw-scanv2-glow / tw-scanv2-main 上，
     导致鼠标移到那些宫位时 pointerover 根本不触发 = 用户说的"不跟手/滞后"。 */
  pointer-events:none;
  transform-origin:50% 50%;
  transform-box:fill-box;
  /* ⭐ 丝滑感的真正来源：照搬星盘 .disc-wave-g 的 discWaveSpin 26s linear infinite。
     之前这一层是**静止**的（实测 transform:none），只靠每 2s 换色，
     所以看着一顿一顿 —— 星盘的波是**一直转**的，这才是"丝滑"。 */
  animation:twScanSpin 26s linear infinite;
  will-change:transform;
}
@keyframes twScanSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
/* ⚠️ 可见性由 app.js 的 __todayScan 调度器统一控制（每 2s 切一条）。
   CSS 不再挂 opacity animation —— 之前 CSS 与 JS 各跑一套，
   实测会互相覆盖导致"圈都不显示了"。
   切换只改 opacity 属性，不碰 path、不重排 ⇒ 不卡。 */
.tw-scanv2 path{ pointer-events:none; }
.tw-scanv2-one{
  opacity:0;
  /* ⚠️ 不要加 transition：实测 0.18s 淡出会让"旧环还在可见"与"波已换新色"
     并存，读出来是环/波错开一格（环青、波橙）。丝滑感来自旋转，不靠淡入淡出。 */
}
.tw-scanv2-main{ animation:twScanBreath 2s ease-in-out infinite; }
@keyframes twScanBreath{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.28); }
}
@media (prefers-reduced-motion: reduce){
  .tw-scanv2-one{ transition:none; }
  .tw-scanv2-main{ animation:none; }
}

@keyframes twRingSpin{
  from{ transform:rotate(0deg)   scale(var(--tw-ring-scale,1)); }
  to  { transform:rotate(360deg) scale(var(--tw-ring-scale,1)); }
}
/* 悬停后转速加快（与命盘 discWaveSpinAmp 同做法） */
@keyframes twRingSpinFast{
  from{ transform:rotate(0deg)   scale(var(--tw-ring-scale,1)); }
  to  { transform:rotate(360deg) scale(var(--tw-ring-scale,1)); }
}
.tw-ring-glow{
  filter:drop-shadow(0 0 7px rgba(205,180,255,.5))
         drop-shadow(0 0 16px rgba(255,215,150,.35));
}
/* tw-ring-main 的亮度由 twRingPulse 动画统一控制，这里不再写静态 filter */

/* 环的颜色由 JS 内联写在 path 的 stroke 上（按均分档的整圈单色）。
   ⚠️ CSS 这里**不能**再写 stroke —— 会盖掉内联值，
      表现为"环永远是同一个颜色，不随档位变"。 */


/* 悬停某宫：边框换色；环本身保持各档原色
   ⚠️ 原来这里有一条把 .tw-ring-main 染成单色的悬停规则，
      会把 5 条不同颜色的环一次性变成同一色，与"不同颜色的圆"口径冲突，已删。 */

@media (prefers-reduced-motion: reduce){
}




/* 盘底下的水平线波（与星盘屏同构：圆盘波 + 底线波） */
#today-wave{width:min(540px,100%);margin-top:2px;}
#today-wave svg{display:block;width:100%;height:auto;overflow:visible;}

/* ═══════════════════════════════════════════════════════
   #today-wave 盘下波浪：动效与「星盘 tag → 命盘」完全一致
   ───────────────────────────────────────────────────────
   用户 2026-11-06：「圆圈底下的波浪线是要动态。波浪线以及圆圈的动态
   要跟附件2一致。你仔细研究一些 星盘tag 命盘的动态。」

   星盘命盘的实测动效（space.css / planetlock.css）：
     ① 主波：waveScroll 12s linear infinite reverse（右→左）
     ② 副波：waveScroll 18s linear infinite（左→右）+ wavePulse 3.6s 呼吸
     ③ 圆环波：discWaveSpin 26s linear infinite（绕圆心转）
     ④ 悬停：切元素色 + scaleY 放大 + 速度换成 --wave-speed（火1.6/水2.4/风3.4/土5.2）
   这里把 ①②④ 搬到盘下那条波上（③ 属于盘内环波，用户已要求取消）。

   实现要点：
     · 每条宫位波拆成 wave-main（粗）+ wave-sub（细错相）+ wave-elem（元素色，
       平时 opacity:0，仅悬停时淡入）—— 与星盘同一套三层结构，不再用旧的单层 + 呼吸。
     · 平移用 CSS transform:translateX，位移量按 viewBox 宽度折算成百分比，
       保证 12s 走完一整组仍无缝（波形本身是周期性的）。
   ═══════════════════════════════════════════════════════ */
/* 盘下水平波：尺寸照命盘 .chart-divider.wave 的规则
   命盘实测：viewBox 1320×40，但 CSS height 固定 88px、宽度拉满容器（1195px）。
   为什么高度不跟着 viewBox 比例走：viewBox 高 40、宽 1320，按比例算只有 16px 高，
   实机渲染出来又扁又短（实测今日盘 svg 只有 540×16，命盘是 1195×88）。
   命盘是显式写死 height:88px + preserveAspectRatio=none，让波形在纵向被拉开 —— 
   这样波峰才有"起伏感"，而不是一条压扁的细线。 */
#today-wave{width:100%;margin:0;display:block;}
#today-wave .tw-bwave{
  display:block;width:100%;height:88px;      /* 与命盘同高 */
  overflow:visible;
  transform-origin:50% 50%;
  transform-box:fill-box;
}
/* 盘下水平波：纯 CSS 平移（2026-11-07 第十六轮 · 100% 照搬星盘）
   星盘真源：.wave-main{animation:waveScroll 12s linear infinite reverse}
             @keyframes waveScroll{from{translateX(-11.36%)}to{translateX(11.36%)}}

   为什么这次能动：波形路径横向重复 3 遍（总宽 3×viewBox），
   整组从 0 平滑移到 -1 个 viewBox 宽，移完正好接上下一轮起点
   ⇒ 无缝连续，纯合成层动画，不重排不重绘。

   用户报「最表面那一层还是不动」：之前用 JS 改 path 的 d（主线程一卡一顿），
   且只更新了主线没管副波。现在整组平移，两层一起动，零 JS。 */
#today-wave .tw-bmain{
  filter:drop-shadow(0 0 3px rgba(190,150,255,.7));
}
.tw-bscroll{
  animation:twBScroll 12s linear infinite reverse;
  will-change:transform;
}
@keyframes twBScroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-33.3333%); }
}
#today-wave .tw-bsub{
  animation:twBScroll 18s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .tw-bscroll, #today-wave .tw-bsub{ animation:none; }
}
/* 元素色波：默认透明；悬停某维时**整条**换成该维单色（排他，一次一种色） */
#today-wave .tw-belem{
  opacity:0;
  transition:opacity .28s ease;
}
#today-wave.wave-on .tw-belem{opacity:1;}
/* 悬停时把主波/副波压暗，避免和单色波叠成"两种颜色" */
#today-wave.wave-on .tw-bmain,
#today-wave.wave-on .tw-bsub{opacity:.18;transition:opacity .28s ease;}
@keyframes twWaveScroll{
  from{ transform:translateX(-6%); }
  to  { transform:translateX(6%); }
}
/* 中点是原位，所以视觉上永远围绕中心摆动，不会整体跑偏（星盘踩过这个坑） */
@keyframes twWavePulse{
  0%,100%{ opacity:.35; }
  50%    { opacity:.85; }
}


/* 宫位悬停：整片亮起 */
.tw-house{transition:filter .2s ease;}
.tw-house:hover{filter:brightness(1.25);}
.tw-house:hover .tw-hi{opacity:1 !important;}

/* ── 宫位悬停 → 盘下对应那段波浪同步激活（用户 2026-11-06：
      「鼠标移到对应的宫位，下面的波浪线会根据对应的颜色，进行变化」）──
   联动靠 JS 在 .tw-house 上写 data-active，CSS 只需按 idx 配合同 --i 的波组。
   三段动效全部照搬星盘命盘的悬停行为：
     · 元素色波淡入（对应星盘 wave-elem 的 opacity 0→1）
     · 主/副波放大（对应星盘 scaleY 放大，幅度按元素分级）
     · 波速换成本宫分数对应档位（对应星盘 --wave-speed） */
#today-wave .tw-bseg .tw-belem{opacity:0;transition:opacity .28s ease;}
#today-wave .tw-bseg:hover .tw-belem{opacity:1;}
#today-wave .tw-bseg.is-on .tw-belem{opacity:1;}
#today-wave .tw-bseg.is-on .tw-bmain{
  animation-duration:var(--tw-speed,1.6s) !important;
  filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor);
}
#today-wave .tw-bseg.is-on .tw-bsub{
  animation-duration:var(--tw-speed,1.6s),3.6s !important;
}
/* 放大：主波在自身 transform 里叠 scaleY（与星盘 waveHoverMain 同做法，
   translateX 与 scaleY 必须写在同一个 transform 里，分开会互相覆盖） */
@keyframes twWaveBig{
  from{ transform:translateX(-6%) scaleY(var(--tw-amp,1.9)); }
  to  { transform:translateX(6%)  scaleY(var(--tw-amp,1.9)); }
}
#today-wave .tw-bseg.is-on .tw-bmain{
  animation-name:twWaveBig !important;
  transform-origin:50% 50%;
  transform-box:fill-box;
}
#today-wave .tw-bseg.is-on .tw-bsub{
  animation-name:twWaveBig,twWavePulse !important;
  transform-origin:50% 50%;
  transform-box:fill-box;
}

/* 宫位循环高亮（21.6s 一圈，与能力盘同节奏） */
@keyframes twNotice{
  0%{opacity:0}
  3%{opacity:.45}
  7%{opacity:.8}
  13%{opacity:.35}
  20%{opacity:0}
  100%{opacity:0}
}
.today-wheel-wrap:not(:hover) .tw-house .tw-hi{
  animation:twNotice 21.6s linear infinite;
  animation-delay:calc(var(--i,0) * 1.8s);
}

/* 波浪段：错峰呼吸，形成"能量绕盘流动"的观感 */
@keyframes twWaveBreathe{
  0%,100%{stroke-opacity:.62}
  50%    {stroke-opacity:1}
}
.tw-wave-seg{
  animation:twWaveBreathe 3.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 0.22s);
}

@media (prefers-reduced-motion: reduce){
  .tw-house .tw-hi, .tw-wave-seg{animation:none !important;}
}

/* ═══════════════════════════════════════════════════════
   黄圈在圆外显示（2026-11-07 第二十二轮）
   ───────────────────────────────────────────────────────
   主上：「不是贴，是远离圆边」「要突破这个圆的外面，波谷贴圆边，波峰要在外面」。
   黄圈基线画在 R+18、波峰到 R+30，已超出 viewBox(540) 的边界（R=260）。
   默认 SVG 会 overflow:hidden 把它裁掉 ⇒ 必须 visible，
   并让外层容器不裁切、留出 40px 余量。
   ═══════════════════════════════════════════════════════ */
#today-wheel, #today-wheel .tw-svg, #today-wheel svg{
  overflow:visible !important;
}
#today-wheel{
  /* 给圆外的黄圈光晕留出呼吸空间，避免被父容器裁切 */
  padding:0;
  margin:34px auto;
}

/* ═══════════════════════════════════════════════════════
   今日运程页 · 排盘输入条（2026-11-07 第二十三轮）
   ───────────────────────────────────────────────────────
   主上：「附件1，格式错误。就是输入命盘的框。」
   这里复用排盘屏的 .formgrid / .field（同源，不新造输入框外观），
   只补外层容器与标题行。
   ═══════════════════════════════════════════════════════ */
#today-birth-bar{
  margin:0 0 14px;
}
.today-birth-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;
}
.today-birth-head b{
  font-size:15px;font-weight:700;color:var(--ink);
}
.today-birth-head .sub{
  font-size:12px;color:var(--ink-3);
}
/* 输入条在窄屏折叠成两列（与排盘屏同一断点行为） */
@media (max-width:900px){
  .today-birth .formgrid{grid-template-columns:1fr 1fr}
}