/* ══════════ space.css ══════════ */
/* ═══════════════════════════════════════════════════════════
   星座.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 主定义），避免被后续规则覆盖 */
/* 导航右侧留白，避免最后一个按钮贴屏幕边（实测「口径」贴边） */
/* 主上（2026-11-09）：「工作台 跟 算法tag，直接空间太多了，要跟其它tag的间隔一样。」
   实测：'工作台'按钮是 .bar 的直接子元素（不在 nav.screens 内），
   它与 nav 的间距 = 本 margin-right(8) + 按钮 margin-left(2) − 10 ≈ 20px，
   而 nav 内部各 tag 只有 gap:7px。
   ⇒ 收到 7px，与 nav 内 gap 完全一致。 */
nav.screens{margin-right:7px}

/* ── 品牌区（放大版）──
   组成：星云 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;
  /* ── 金属材质（用户：「经典版这一部分也要改成类似附件有材质的」）──
     原来看起来是普通白字 + 普通紫字，扁平没质感。
     附件那种是"抛光金属/亮面塑料"：
       竖向渐变（亮紫→深紫）+ 顶部 1px 白色高光边 +
       下方硬阴影（压出浮雕）+ 外围柔光（发光）
     实现：background-clip:text 做渐变填充，filter 叠两层
       drop-shadow（硬阴影）和（柔光）。
     ⚠️ 文字已透明，必须用 drop-shadow 而不是 text-shadow。 */
  background:linear-gradient(180deg,
    #ffffff 0%, #f7f0ff 18%, #e6d8ff 40%,
    #c4a8ff 62%, #9d7ef0 82%, #7d5fd6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  /* 高光改"柔和"：0.5 硬白线换成 0.38 + 1px，避免像贴了一层白漆 */
  filter:
    drop-shadow(0 -1px 0.5px rgba(255,255,255,.38))   /* 顶部柔高光 */
    drop-shadow(0 2px 3px rgba(20,8,42,.9))           /* 硬阴影（浮雕） */
    drop-shadow(0 0 15px rgba(150,110,255,.55));      /* 外围柔光 */
}
.brand .brand-name b{
  /* .live 用同样的金属处理，但配色换成紫→青，做出双色金属 */
  color:transparent;
  background:linear-gradient(180deg,
    #efe6ff 0%, #c9b3ff 30%, #9fb4ff 58%,
    #6fd4ff 84%, #48a8e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
}
/* slogan：小字、带一点字距，像品牌签名 */
.brand .brand-slogan{
  font-size:11px;font-weight:500;line-height:1.35;
  color:#a99cd0;letter-spacing:.06em;white-space:nowrap;
  opacity:.95;
  text-shadow:0 1px 2px rgba(10,4,26,.8);
}
.brand .brand-slogan em{
  font-style:normal;font-weight:700;
  /* 「（LIVE）」也跟着做一点金属感，但保持小字不抢主标题 */
  color:transparent;
  background:linear-gradient(180deg,#d8c8ff 0%,#a98cff 55%,#8a6ae8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* 星云 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;
}
/* 通用按钮悬停：只用 background-color / border-color，禁用 background 简写。
   ── 2026-11-11 根因修复（主上：附件4「鼠标移过去变成附件3，看不见」、
      附件8「鼠标一移过去就看不见了」）──
   旧写法 `button:hover{background:rgba(123,77,255,.18)}` 里的 background
   是简写，会把组件自己声明的 background-image（金色渐变）重置成 none，
   只剩一层半透明紫底；而这些按钮的文字色是深棕 #3a2400，
   于是深字压在深紫底上 ⇒ 整体"消失"。实测 .wb-growth-up / .wb-up-buy /
   .wb-note-modal-ok 三个金色按钮 hover 后 background-image 全变 none。
   改成只动 background-color，渐变照常绘制；再包一层 :where() 把特异性降到 0，
   保证 wb-points / wb-notes 里各组件自己的悬停样式永远优先。 */
:where(button, .btn):hover{
  border-color:var(--nebula);
  background-color: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);
}

/* ── 12 星座瓦片吉祥物（主上 2026-11-13「全部都做」）──
   每格放对应星座的挥手萌宠，12 只一次成套展示。
   .signtile 本身已是 flex（gap:11px），插进现有流即可，不改原布局。 */
.signtile .wb-signs-pet{
  width:44px;height:44px;flex:none;
  margin:0;   /* 原 .wb-signs-pet 有 margin-bottom，这里覆盖 */
  filter:drop-shadow(0 3px 8px rgba(123,77,255,.3));
  transition:transform .2s ease;
}
.signtile:hover .wb-signs-pet{transform:translateY(-2px) scale(1.05)}
@media (max-width:820px){
  .signtile .wb-signs-pet{width:34px;height:34px}
}
/* ── 星座符号徽章：必须保持正圆 ──
   踩过的坑：这条规则原来只写 `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;
  /* 用户：「两边的 block 大小、高度不一致，要一致。」
     ⚠️ 原来 .chart-arena 是 align-items:center，两侧栏各按内容高度居中，
        左侧（今日星象+元素配比）矮、右侧（此刻天象+月相+今日建议）高。
     改法：侧栏自身 align-self:stretch（拉满行高），
           内部用 flex column + space-between 把内容均匀铺开，
           两块侧栏高度就一致了。 */
  align-self:stretch;
  display:flex;
  flex-direction:column;
}

/* 侧栏通用样式：玻璃小卡，和盘同一套星空语言 */
.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;
  /* 用户：「附件3 中间空了一块」——上一版我让 .as-sep 用 flex:1 撑开，
     实测被撑到 111px，就是那块空白。撤销该做法，改为「内容自然排列 + 底部留白由 flex 吸收」。
     左右高度一致由外层 align-self:stretch 保证，不靠撑大分隔线。 */
  justify-content:flex-start;
  gap:0;
}
/* 撤销上一版的弹性撑开 —— 这就是"中间空一块"的元凶 */
.arena-left > .as-sep{
  flex:0 0 auto;
  min-height:0;
  margin:10px 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;
  /* 波浪铺满 .today-stage 全宽（1180）—— 主上：「要延伸到和左右两侧信息栏的外边缘齐平」。
     圆盘由下方 .today-wheel-wrap > #today-wheel 单独锁 660 居中，不受影响。 */
  width:calc(100% + 500px);
  margin-left:-250px;
  margin-right:-250px;
  gap: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){
}




/* 盘底下的水平线波（与星盘屏同构：圆盘波 + 底线波） */
/* ⚠️ 波浪宽度（2026-11-08 第二十四轮）
   主上：「还是没居中，左边好多空位」「要延伸到和左右两侧信息栏的外边缘齐平」。
   原来写 width:min(540px,100%)，而父级 .today-center 在 .today-stage 的中间列
   （680px），所以波浪只覆盖圆盘宽度 680，两侧各空 250 ⇒ 看着偏。
   但它位于 .today-wheel-wrap 内、而 wrap 已经被 .today-stage 的中间列限宽，
   所以这里不能只改 width —— 必须让 wrap 跳出中间列、按 stage 全宽铺。
   做法：.today-wheel-wrap 用负外边距向两侧扩展到 stage 全宽
        （左右各 -250 = (1180-680)/2），波浪再 width:100% 铺满。 */
/* 波浪与圆盘**严格同宽**（660）且同中心：
   参照物是圆盘，不是 stage。宽度写死 660 而不是 100%，
   因为父级 .today-center 是 680（含 10px 内边），差 20px 就会看出错位。 */
/* ⚠️ flex 父级 .today-wheel-wrap 是 align-items:stretch，
   它会把子元素横向拉满 680 —— 光写 width:660px 无效（实测仍 680）。
   必须 align-self:center 让它摆脱 stretch，width 才生效。 */
#today-wave{width:100%;margin:2px auto 0;}
/* ⚠️ overflow 必须 hidden：波形 path 横向重复 3 遍（总宽≈3960），
   overflow:visible 会让它画出容器、右端一直顶到画面边缘（实测溢出 938px）。
   这就是主上反复说"偏右/右边没有空间"的真正原因 —— 几何虽居中，但视觉上一路糊到右边。
   关掉后只在容器内显示，两端严格与圆盘对齐。 */
#today-wave svg{display:block;width:100%;height:auto;overflow:hidden;clip-path:inset(0 0 0 0);}

/* ═══════════════════════════════════════════════════════
   #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;      /* 与命盘同高 */
  /* ⚠️ SVG 的 overflow 属性不可靠（实测内部 <g> 照样画到容器外，宽度 3589）。
     必须用 clip-path 强制裁剪到自身盒子的可视区。
     path 横向重复 3 遍（为滚动留余量），只有 0..viewBox 这一段该可见。 */
  overflow:hidden;
  clip-path:inset(0 0 0 0);
  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;
}
/* ⚠️ 位移量必须**正好等于一个 tile 周期**，否则循环点会错位。
   实测：tile 周期 = 300 单位（usable 1200 / 4 个 tile），
   而 viewBox 宽 1320 ⇒ 300/1320 = 22.7273%。
   原来写 -33.3333%（=1320/3=440）与 tile 周期不一致，
   每轮结束时波形被推歪 140 单位 ⇒ 视觉上"波浪线没有居中"（左空少、右空多）。
   现在改为精确周期，任何时刻左右留白都对称、循环无缝。 */
/* viewBox 宽 = W = 1320（一个循环）；tile 宽 = W/4 = 330；
   位移 1 个 tile = 330/1320 = 25%。 */
@keyframes twBScroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-25%); }
}
#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}
}

/* wrap 扩到 1180 后，圆盘不能再被拉伸——保持 660 并居中 */
/* 圆盘同样要摆脱 stretch，锁定 660 并与波浪同宽 */
.today-wheel-wrap > #today-wheel{
  width:660px;max-width:100%;align-self:center;margin-left:auto;margin-right:auto;
}
@media (max-width:900px){
  /* 窄屏：取消负边距，恢复常规流式 */
  .today-wheel-wrap{width:100%;margin-left:0;margin-right:0;}
  .today-wheel-wrap > #today-wheel{width:100%;max-width:100%;}
}

/* ══════════════════════════════════════════════════════════════════
   星盘屏：波浪线上方留白收紧（2026-11-08）
   ──────────────────────────────────────────────────────────────────
   主上：「PC版，波浪线 离上一部分的空位太多了，往上移。」

   实测（1600px 视口）波浪 top=1054，而 hero 底部=980 → 空 74px，来源：
     hero 的 margin-bottom      16px
     #chart-result 的 margin-top 18px
     .chart-block 的 padding    56px（四边等距，给土元素光环留空间）
   合计 74px（其中 56 是主要来源）。

   处理：只收紧**上方**留白，左右 56 / 下方 56 保持不动 ——
         光环需要的是"四周不被相邻内容压住"，上方那 56px 对波浪来说纯属多余空白。
         chart-block 上方 padding 56→14（省 42），hero 与 chart-result 的间距小幅收紧。
   ══════════════════════════════════════════════════════════════════ */
#s-chart .chart-block {
  padding-top: 14px;
}
#s-chart #chart-result {
  margin-top: 4px;
}
#s-chart .hero {
  margin-bottom: 8px;
}


/* ══ 主上（2026-11-09）：「在经典版、工作台里，主要 tag 太远了，贴回"算法"的 tag」══
   实测：nav.screens 各 tag 间距都是均匀 7px，但整块 nav 的 x=265 → right=1411，
        宽 1147 已经贴到屏幕最右（视口 1422），与右侧「工作台」按钮之间没有留白，
        同时它左边与品牌 logo 之间空了一大块（x=265 - brand right）。
   ⇒ 让 .bar 靠左排、nav 紧跟品牌，tag 自然就"贴回"算法那一端。 */
/* ⚠️ 实测定位（主上截图 + 量数）：
   tag 之间间距全是 7px，是均匀的；
   真正大的是 **logo 到第一个 tag「星盘」之间** ——
   品牌 right≈314，星盘 x=309（1600 视口下），中间空了近 2-3 个 tag 宽，
   因为 nav 用 justify-content:center 在自己那 1147px 的框里居中，左侧留白被吃掉了。
   ⇒ 让 bar 靠左、nav 跟着品牌走，tag 就"贴回"算法这一端。 */
header.site .bar{
  justify-content:flex-start!important;
  /* 主上（2026-11-09）：「工作台 跟 算法tag，直接空间太多了，要跟其它tag的间隔一样。」
     实测链：nav 内部 tag 之间 = 7px；而「算法&声明」→「工作台」= 17px。
     多出的 10px 来自这条 .bar 的 gap（n​av 与按钮都是它的直接子元素）。
     ⇒ gap 收到 7px，与 nav 内部完全一致；品牌到 nav 也随之收到 7px，视觉更整齐。 */
  gap:7px!important;
}
/* nav 自己不要再居中，内容靠左排 */
header.site .bar nav.screens{
  justify-content:flex-start!important;
}
/* nav 不再往右撑满，按内容宽度，紧跟在品牌后面 */
header.site .bar nav.screens{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:none!important;
  margin-left:0!important;
  /* 主上（2026-11-09）：「工作台 跟 算法tag，直接空间太多了，要跟其它tag的间隔一样。」
     这两条 !important 才是最终生效值（文件末尾，优先级最高）。
     原来 8px + 按钮 2px = 10px 额外间距，加上 nav 内 gap 7px 视觉上到 20px。
     ⇒ nav 右 margin 归 0，全部间距交给按钮的 margin-left 统一给 7px。 */
  margin-right:0!important;
}
/* 「工作台」按钮紧跟在 nav 后面（有登录态时才显示） */
header.site .bar #btn-to-workbench{
  /* .bar 的 gap 已经是 7px，这里归零避免叠成 14px */
  margin-left:0!important;
  margin-right:auto!important;   /* 把它自己及其后推到左侧，右侧留空 */
  flex:0 0 auto;
}

/* ══════════ maya.css ══════════ */
/* 星座.live · 玛雅历法屏样式
 *
 * 用户要求：
 *   「加一个「玛雅」的 tag，玛雅的运程叠加十二星座，形成综合方案。
 *     玛雅历法（卓金历）也要有年、月、日盘。
 *     要有符号，有名字，有图案，有对应的颜色。」
 *
 * 三张盘横排（窄屏换行），每张：盘 + 名字 + 含义。
 * 20 符号总表用网格，今天对应的那个高亮。
 */

/* ── 三盘横排 ── */
.maya-trio{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin:0 0 18px;
}
@media (max-width:900px){
  .maya-trio{grid-template-columns:1fr;}
}

.maya-card{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 12px 16px;
  border-radius:14px;
  background:rgba(22,14,48,.42);
  border:1px solid rgba(150,120,255,.20);
}
.maya-cap{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;
  color:rgba(200,188,240,.72);text-transform:uppercase;
  margin-bottom:8px;
}
.maya-vis{width:200px;max-width:100%;}
.maya-vis svg{display:block;width:100%;height:auto;overflow:visible;}

/* 盘缓慢自转（图腾不动，只有外圈光晕转） */
@keyframes mayaSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.maya-vis svg > circle:nth-of-type(2){
  transform-origin:50% 50%;
  animation:mayaSpin 60s linear infinite;
  stroke-dasharray:2 6;
}

.maya-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:10px;font-size:16px;
}
.maya-name b{font-weight:900;letter-spacing:.02em;}
.maya-tag{
  font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  border:1px solid;background:rgba(0,0,0,.18);
}
.maya-sub{
  margin-top:8px;display:flex;flex-direction:column;gap:4px;
  font-size:12px;line-height:1.65;color:var(--ink-2);text-align:center;
}
.maya-line{opacity:.9;}
.maya-line b{color:#dcd0ff;}

/* ── 综合方案 ── */
.maya-combo{
  padding:14px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);
  border:1px solid rgba(150,120,255,.20);
  margin-bottom:18px;
}
.maya-combo-row{
  display:flex;gap:10px;align-items:flex-start;
  padding:7px 0;border-bottom:1px solid rgba(150,120,255,.10);
  font-size:13px;line-height:1.7;
}
.maya-combo-row:last-child{border-bottom:0;}
.maya-combo-row b{
  flex:none;width:64px;font-size:12px;font-weight:800;
  color:#b79bff;letter-spacing:.04em;
}
.maya-combo-row span{flex:1;color:var(--ink-2);}
.maya-combo-row.warn b{color:#f0c8a0;}

/* ── 20 符号总表 ── */
.maya-grid-wrap{
  padding:14px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);
  border:1px solid rgba(150,120,255,.20);
}
.maya-sol-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;margin-top:10px;
}
@media (max-width:900px){ .maya-sol-grid{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width:520px){ .maya-sol-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }

.maya-sol{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border-radius:10px;
  background:rgba(30,20,62,.42);
  border:1px solid rgba(150,120,255,.14);
  transition:.18s;
}
.maya-sol:hover{
  border-color:var(--mc);
  background:rgba(48,30,96,.6);
  transform:translateY(-1px);
}
.maya-sol.on{
  border-color:var(--mc);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--mc) 30%, transparent),
             0 0 16px color-mix(in srgb, var(--mc) 45%, transparent);
}
.maya-sol-ico{width:42px;flex:none;}
.maya-sol-ico svg{display:block;width:100%;height:auto;}
.maya-sol-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.maya-sol-txt b{font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;}
.maya-sol-txt i{
  font-size:10px;font-style:normal;letter-spacing:.03em;
  color:var(--mc);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


/* ═══════════════════════════════════════════════════════
   玛雅历屏（重做版）
   ═══════════════════════════════════════════════════════ */
.maya-head{text-align:center;margin-bottom:16px;}
.maya-head h2{font-size:24px;margin:0 0 6px;}
.maya-head .sub{max-width:660px;margin:0 auto;}

/* ── ② 玛雅历表 ── */
.maya-cal-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;
  margin-bottom:18px;
}
@media (max-width:1000px){ .maya-cal-wrap{grid-template-columns:1fr;} }

.maya-cal-left,.maya-cal-right{
  padding:14px 14px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);border:1px solid rgba(150,120,255,.20);
}

/* 表头：13 列音调 */
.mc-head{
  display:grid;grid-template-columns:repeat(13,1fr);gap:4px;
  margin:8px 0 5px;
}
.mc-hcol{
  text-align:center;font-size:10px;font-weight:800;
  color:rgba(200,188,240,.55);letter-spacing:.04em;
}

/* 网格：13 列 */
.mc-grid{
  display:grid;grid-template-columns:repeat(13,1fr);gap:4px;
}
.mc-cell{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  /* ── 文字被挡住修复 ──
     原来 padding 只有 5px/6px，格子被 flex 压到刚好装不下三行
     （音调号 + 图腾 + 日符名 + 日期），底部日期被强度条压住或直接溢出。
     现在：给足上下内边距 + 固定最小高度 + 底部留 4px 给强度条。 */
  padding:7px 3px 10px;
  min-height:74px;
  border-radius:8px;
  background:rgba(30,20,62,.45);
  border:1px solid rgba(150,120,255,.14);
  cursor:pointer;transition:.15s;font-family:inherit;
  overflow:visible;
  line-height:1;
}
.mc-cell:hover{
  border-color:var(--mc);background:rgba(48,30,96,.65);
  transform:translateY(-1px);
}
.mc-cell.on{
  border-color:var(--mc);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mc) 32%,transparent),
             0 0 14px color-mix(in srgb,var(--mc) 50%,transparent);
}
.mc-cell.sel{
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.28);
}
/* 预警等级：左上角小点 */
.mc-cell.alert::before,
.mc-cell.warn::before,
.mc-cell.good::before{
  content:"";position:absolute;left:3px;top:3px;
  width:5px;height:5px;border-radius:50%;
}
.mc-cell.alert::before{background:#ff5a5a;box-shadow:0 0 6px #ff5a5a;}
.mc-cell.warn::before{background:#fbbf24;}
.mc-cell.good::before{background:#5eead4;}

.mc-tone{
  font-size:9px;font-weight:800;color:rgba(200,188,240,.62);
  line-height:1;margin-bottom:1px;
}
.mc-glyph{width:24px;height:24px;display:block;flex:none;margin:1px 0;}
.mc-glyph svg{display:block;width:100%;height:100%;}
.mc-sol{
  font-size:9px;font-weight:700;color:var(--mc);
  line-height:1.2;white-space:nowrap;
  max-width:100%;overflow:visible;
  margin-top:1px;
}
.mc-date{font-size:8.5px;color:rgba(200,188,240,.5);line-height:1.2;margin-top:1px;}
/* 强度条：格子底部一条 */
.mc-int{
  position:absolute;left:0;bottom:0;height:2px;
  background:var(--mc);opacity:.75;border-radius:0 2px 2px 0;
}

.mc-legend{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;
  font-size:10.5px;color:rgba(200,188,240,.6);
}
.mc-legend span{display:inline-flex;align-items:center;gap:5px;}
.lg-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.lg-dot.good{background:#5eead4;}
.lg-dot.warn{background:#fbbf24;}
.lg-dot.alert{background:#ff5a5a;}
.lg-dot.on{background:#fff;}

/* ── 选中详情 ── */
.md-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid rgba(150,120,255,.14);
}
.md-glyph{width:46px;height:46px;flex:none;}
.md-glyph svg{display:block;width:100%;height:100%;}
.md-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
.md-title b{font-size:15px;font-weight:900;color:var(--mc);}
.md-title span{font-size:11px;color:rgba(200,188,240,.6);}

.md-row{
  display:flex;gap:8px;padding:6px 0;
  font-size:12px;line-height:1.6;color:var(--ink-2);
  border-bottom:1px solid rgba(150,120,255,.07);
}
.md-row i{
  flex:none;width:34px;font-style:normal;font-size:11px;
  color:rgba(200,188,240,.5);font-weight:700;
}
.md-row b{color:#dcd0ff;}

.md-flags{margin-top:9px;display:flex;flex-direction:column;gap:6px;}
.mflag{
  padding:7px 9px;border-radius:9px;font-size:11.5px;line-height:1.6;
  display:flex;flex-direction:column;gap:2px;
}
.mflag b{font-size:11.5px;font-weight:800;}
.mflag.f-alert{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);color:#ffb0b0;}
.mflag.f-warn{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.30);color:#fbd78a;}
.mflag.f-good{background:rgba(94,234,212,.10);border:1px solid rgba(94,234,212,.28);color:#9df0e0;}

.md-bar{
  margin-top:10px;height:5px;border-radius:3px;
  background:rgba(150,120,255,.14);overflow:hidden;
}
.md-bar i{display:block;height:100%;border-radius:3px;transition:width .3s;}

/* ── ③ 强度曲线 + 预测 ── */
.maya-forecast{
  padding:14px 16px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);border:1px solid rgba(150,120,255,.20);
  margin-bottom:18px;
}
#maya-chart svg{display:block;width:100%;height:auto;}
.maya-summary{
  margin:10px 0 14px;font-size:13px;line-height:1.75;color:var(--ink-2);
  padding:10px 12px;border-radius:10px;
  background:rgba(123,77,255,.09);border-left:3px solid rgba(169,125,255,.5);
}
.maya-pf-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
@media (max-width:900px){ .maya-pf-grid{grid-template-columns:1fr;} }

.mpf-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 9px;margin-top:6px;border-radius:9px;
  background:rgba(30,20,62,.45);border:1px solid rgba(150,120,255,.14);
  cursor:pointer;transition:.15s;font-family:inherit;text-align:left;
}
.mpf-item:hover{border-color:rgba(169,125,255,.6);background:rgba(48,30,96,.65);}
.mpf-d{width:7px;height:7px;border-radius:50%;flex:none;}
.mpf-item b{font-size:12px;font-weight:800;color:var(--ink);flex:none;}
.mpf-item i{
  font-style:normal;font-size:11px;color:var(--ink-3);
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mpf-item em{font-style:normal;font-size:12px;font-weight:800;color:#b79bff;flex:none;}

/* ── ④ 音调 / 日符详解 ── */
.maya-detail-wrap{
  padding:14px 16px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);border:1px solid rgba(150,120,255,.20);
  margin-bottom:18px;
}
.maya-tabs{display:flex;gap:8px;margin-bottom:12px;}
.maya-tab{
  padding:7px 16px;border-radius:999px;
  background:rgba(123,77,255,.12);border:1px solid rgba(150,120,255,.26);
  color:#c9b6ff;font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.16s;
}
.maya-tab:hover{background:rgba(123,77,255,.26);color:#fff;}
.maya-tab.on{
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(123,77,255,.42);
}

.maya-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
@media (max-width:900px){ .maya-list{grid-template-columns:1fr;} }
.maya-list[hidden]{display:none;}

.mlist-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:10px;
  background:rgba(30,20,62,.42);border:1px solid rgba(150,120,255,.13);
}
.mlist-n{
  flex:none;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(123,77,255,.2);border:1px solid rgba(169,125,255,.35);
  font-size:12px;font-weight:900;color:#dcd0ff;
}
.mlist-glyph{flex:none;width:30px;height:30px;}
.mlist-glyph svg{display:block;width:100%;height:100%;}
.mlist-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.mlist-t b{font-size:12.5px;font-weight:800;color:var(--ink);}
.mlist-t b i{font-style:normal;font-size:11px;color:#a99ed0;font-weight:600;}
.mlist-t i,.mlist-t em{
  font-style:normal;font-size:11.5px;line-height:1.5;
  color:var(--ink-3);
}
.mlist-p{
  flex:none;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;
}
.mlist-p.pw3{background:rgba(255,90,90,.18);color:#ff9a9a;border:1px solid rgba(255,90,90,.32);}
.mlist-p.pw2{background:rgba(251,191,36,.16);color:#fbd78a;border:1px solid rgba(251,191,36,.30);}
.mlist-p.pw1{background:rgba(150,120,255,.14);color:#b9a8ff;border:1px solid rgba(150,120,255,.26);}
.mlist-color{
  flex:none;width:10px;height:10px;border-radius:50%;
}


/* ═══════════════════════════════════════════════════════
   玛雅日详情弹窗（用户：点击时弹新窗口，不要右侧面板）
   ═══════════════════════════════════════════════════════ */
.maya-modal{
  position:fixed;inset:0;z-index:320;
  display:flex;align-items:center;justify-content:center;
}
.maya-modal[hidden]{display:none;}
.maya-modal-mask{
  position:absolute;inset:0;
  background:rgba(4,2,12,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.maya-modal-box{
  position:relative;
  width:min(420px, calc(100vw - 40px));
  max-height:min(76vh, 640px);
  overflow-y:auto;
  padding:20px 20px 22px;
  border-radius:16px;
  background:linear-gradient(165deg,rgba(30,18,64,.99),rgba(16,9,38,.995));
  border:1px solid rgba(150,120,255,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.8), 0 0 0 1px rgba(169,125,255,.12) inset;
  animation:mayaPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes mayaPop{
  from{opacity:0;transform:translateY(10px) scale(.96);}
  to  {opacity:1;transform:translateY(0) scale(1);}
}
.maya-modal-x{
  position:absolute;right:12px;top:12px;
  width:28px;height:28px;border-radius:9px;
  background:rgba(123,77,255,.18);
  border:1px solid rgba(150,120,255,.32);
  color:#c9b6ff;font-size:17px;line-height:1;
  cursor:pointer;padding:0;transition:.15s;z-index:2;
}
.maya-modal-x:hover{background:rgba(255,90,90,.32);color:#fff;border-color:rgba(255,120,120,.5);}

/* 弹窗内的详情排版（比右侧面板更宽松） */
.maya-modal-box .md-head{padding-right:34px;}
.maya-modal-box .md-glyph{width:54px;height:54px;}
.maya-modal-box .md-title b{font-size:18px;}
.maya-modal-box .md-title span{font-size:12px;}
.maya-modal-box .md-row{font-size:13px;padding:8px 0;}
.maya-modal-box .mflag{font-size:12.5px;padding:9px 11px;}

/* 日历左侧占满（右侧面板已隐藏） */
.maya-cal-wrap{grid-template-columns:1fr;}
.maya-cal-right[hidden]{display:none;}

/* ══════════ mbti-radar.css ══════════ */
/* ───────── MBTI 交互面板 + 雷达图样式 ───────── */

.panel-bridge{
  font-size:13px;color:#d2c9e8;line-height:1.75;
  background:rgba(55,214,200,.09);
  border:1px solid rgba(55,179,164,.34);border-radius:12px;
  padding:11px 14px;margin-bottom:16px;
}
.panel-bridge b{color:#7ef0dd}

.mbti-panel{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.mbti-panel:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#6d4aff,#a97dff 55%,#37b3a4);
}
.mbti-eyebrow{
  font-size:11.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:6px;
}
/* 结论：四个大字，字母本身可点 */
.mbti-big{
  display:flex;gap:6px;margin:2px 0 8px;user-select:none;
}
.mbti-big .lt{
  font-size:clamp(44px,7vw,62px);font-weight:800;line-height:1;letter-spacing:-.02em;
  /* 兜底顺序：先给实色，再用渐变裁切。若裁切失效仍能看见字（实测有环境算出 rgba(0,0,0,0)） */
  color:#dcd0ff;
  background-image:linear-gradient(160deg,#ffffff 6%,#c9b3ff 52%,#8f6bff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  cursor:pointer;padding:2px 6px;border-radius:10px;transition:transform .16s;
}
.mbti-big .lt:hover{
  transform:translateY(-3px) scale(1.06);
  background:linear-gradient(160deg,#6d4aff,#37b3a4);
  -webkit-background-clip:text;background-clip:text;
}
.mbti-big .lt.on{
  background-image:linear-gradient(160deg,#ffb0b0,#ff5a5a 60%,#ff8181);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  box-shadow:0 0 0 2px rgba(255,90,90,.22) inset;
}
.mbti-big .lt.on:after{
  content:"";position:absolute;
}
.mbti-nick{
  font-size:15px;font-weight:700;color:var(--purple-deep);margin-bottom:6px;
}
.mbti-core{
  /* 深空版：原来是浅底(#f6f2ff)+浅字(--ink2=#c5bce0)，导致看不清。
     统一改深底玻璃卡 + 浅字（实测白底上浅紫字几乎读不出） */
  font-size:14px;color:#dcd4f2;line-height:1.75;
  padding:11px 14px;border-radius:12px;
  background:rgba(123,77,255,.12);
  border:1px solid var(--edge-2);margin-bottom:16px;
}

.mbti-axes{margin-top:2px}
.axis-row{
  margin-bottom:11px;cursor:pointer;padding:7px 9px;border-radius:11px;
  border:1px solid transparent;transition:.14s;
}
.axis-row:hover{background:rgba(123,77,255,.14);border-color:var(--edge-2)}
.axis-row.on{background:rgba(226,58,58,.12);border-color:rgba(255,120,120,.5);box-shadow:0 0 0 2px rgba(226,58,58,.12) inset}
.axis-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:5px}
.axis-name{font-weight:700;color:var(--purple-deep)}
.axis-name em{font-style:normal;color:#e23a3a;margin-left:4px}
.axis-pct{color:var(--muted);font-size:11.5px}
.axis-bar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:rgba(123,77,255,.20)}
.axis-bar i:first-child{background:linear-gradient(90deg,#8f6bff,#6d4aff)}
.axis-bar i:last-child{background:rgba(123,77,255,.20);flex:1}
.axis-row.on .axis-bar i:first-child{background:linear-gradient(90deg,#ff8080,#e23a3a)}
.axis-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:3px}

.mbti-detail{
  margin-top:12px;padding:13px 15px;border-radius:12px;
  background:rgba(10,6,32,.62);border:1px dashed var(--edge-2);
  font-size:13px;color:#d2c9e8;line-height:1.75;
  min-height:66px;
}
.mbti-detail b{color:#e8e2ff;font-weight:700}
.mbti-detail .k{color:#ff9b9b;font-weight:800}
.mbti-detail-hint{color:#9a90b8;font-size:12.5px}

.mbti-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.mbti-chips .chip{
  font-size:11.5px;padding:4px 10px;border-radius:999px;background:rgba(123,77,255,.16);
  border:1px solid var(--line2);color:var(--purple-deep);
}

/* 雷达 */
.radar-box{position:relative;max-width:460px;margin:0 auto}
.radar-box svg{width:100%;height:auto;display:block}
.radar-box .rd-node{cursor:pointer}
.radar-box .rd-node:hover text{fill:#e23a3a}
.radar-box .rd-node:hover rect{fill:rgba(226,58,58,.06)}
.radar-legend{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  font-size:11.5px;color:var(--muted);margin-top:4px;
}
.radar-legend span{display:inline-flex;align-items:center;gap:5px}
.sw{width:14px;height:3px;border-radius:2px;display:inline-block}
.sw-red{background:#e23a3a}
.sw-teal{background:linear-gradient(90deg,#0f6b70,#8fd9c4);height:9px;border-radius:3px}
.sw-dash{background:repeating-linear-gradient(90deg,#0f6b70 0 4px,transparent 4px 8px)}
.radar-tip{
  text-align:center;font-size:11.5px;color:var(--muted);margin-top:6px;min-height:16px;
}
.radar-tip.hit{color:#e23a3a;font-weight:600}

@media(max-width:620px){
  .mbti-big .lt{font-size:42px;padding:2px 4px}
  .mbti-panel{padding:16px}
  .radar-box{max-width:330px}
}

/* ══════════ modal.css ══════════ */
/* 详情弹框样式（深空版） */
/* z-index 必须高于工作台（#wb 是 900）——
   工作台把经典版 <section> 搬进来复用，那些屏里的点击会调经典版 Modal。
   实测（2026-11-13「十二星座点瓦片没反应」）：
     .modal-root z-index 200 < #wb 900 ⇒ 弹窗 DOM 已 open、内容 1927 字，
     但被工作台整层盖住，用户完全看不到。
   ⇒ 提到 1000，保证在工作台之上。经典版场景下 200 与 1000 无差别（没有更高层）。 */
.modal-root{position:fixed;inset:0;z-index:1000;display:none}
.modal-root.open{display:block}

.modal-mask{
  position:absolute;inset:0;background:rgba(4,2,12,.72);
  backdrop-filter:blur(6px);
  animation:fadeIn .22s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
  --accent-c: #7b4dff;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(880px, calc(100vw - 40px));
  max-height:min(86vh, 980px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(20,12,44,.985), rgba(14,8,34,.99));
  border:1px solid rgba(150,120,255,.34);
  border-radius:20px;
  box-shadow:0 40px 120px rgba(0,0,0,.72), 0 0 0 1px rgba(169,125,255,.14) inset;
  animation:popIn .26s cubic-bezier(.2,.9,.25,1);
  overflow:hidden;
}
.modal.wide{width:min(1160px, calc(100vw - 40px))}
@keyframes popIn{
  from{opacity:0;transform:translate(-50%,-46%) scale(.965)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* 操作条 */
.modal-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;flex:none;
  background:linear-gradient(90deg, rgba(123,77,255,.26), rgba(55,214,200,.12));
  border-bottom:1px solid var(--edge);
}
.modal-kind{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#dfd4ff;font-weight:700;
}
.modal-spacer{flex:1}
.modal-act{
  height:30px;min-height:0;padding:0 12px;font-size:12.5px;
  border-radius:8px;border:1px solid rgba(255,222,150,.34);
  background:rgba(255,255,255,.07);color:#e8e2ff;
}
.modal-act:hover{background:rgba(123,77,255,.22);border-color:rgba(255,222,150,.62)}
/* 「分享」是主动作：紫渐变实心，和「复制」（次要灰框）明显区分
   原来两者同款灰框，用户看不出哪个是主按钮（实测被点名） */
#modal-share{
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(123,77,255,.45);
  padding:0 16px;
}
#modal-share:hover{
  background:linear-gradient(135deg,#8a5cff,#b56bff);
  border-color:transparent;
  box-shadow:0 6px 20px rgba(123,77,255,.62);
}
#modal-share:active{transform:translateY(1px)}
/* 分享按钮前加一个小图标（纯 CSS 三角/箭头，不引资源） */
#modal-share::before{
  content:"↗";margin-right:5px;font-size:12.5px;opacity:.95;
}
.modal-x{
  width:30px;height:30px;min-height:0;padding:0;border-radius:8px;font-size:17px;
  border:1px solid rgba(255,222,150,.28);background:rgba(123,77,255,.14);color:#fff;
}
.modal-x:hover{background:rgba(255,90,90,.32);border-color:rgba(255,120,120,.6)}

/* 内容 */
.modal-scroll{overflow-y:auto;padding:22px 26px 26px;scrollbar-width:thin;
  scrollbar-color:rgba(150,120,255,.5) transparent}
.modal-scroll::-webkit-scrollbar{width:7px}
.modal-scroll::-webkit-scrollbar-thumb{background:rgba(150,120,255,.45);border-radius:99px}

.modal-head{border-bottom:1px solid var(--edge);padding-bottom:16px;margin-bottom:18px}
.modal-head h2{
  font-size:clamp(19px,2.4vw,26px);margin:0 0 12px;line-height:1.28;
  background:linear-gradient(96deg,#fff,#c9b3ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.modal-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:var(--ink-2)}
.modal-meta span{display:inline-flex;gap:6px;align-items:baseline}
.modal-meta em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.modal-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.modal-tags span{
  font-size:11.5px;padding:3px 10px;border-radius:999px;
  background:rgba(123,77,255,.18);border:1px solid var(--edge-2);color:#cfc3f5;
}

.modal,.modal *{
  /* 弹框内符号必须有符号字体兜底，否则 ♊ 这类码位显示成白方块（实测） */
  font-family:var(--font), "Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","DejaVu Sans",sans-serif;
}
.modal-body{font-size:14.5px;line-height:1.82;color:var(--ink-2)}
.modal-body h3{
  font-size:16px;color:var(--ink);margin:22px 0 9px;
  padding-left:10px;border-left:3px solid var(--accent-c);
}
.modal-body h3:first-child{margin-top:0}
.modal-body p{margin:0 0 11px}
.modal-body b,.modal-body strong{color:var(--ink)}
.modal-body ul{margin:0 0 12px;padding-left:20px}
.modal-body li{margin-bottom:6px}
.modal-body .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:12px 0}
.modal-body .kv div{background:rgba(30,20,62,.6);border:1px solid var(--edge);
  border-radius:11px;padding:9px 11px;font-size:12.5px}
.modal-body .kv b{display:block;font-size:15px;color:var(--accent-c);font-weight:700}
.modal-body .basis{margin-top:10px;padding-top:10px;border-top:0;
  font-size:12px;color:var(--ink-3)}
.modal-body .big-score{
  display:flex;align-items:baseline;gap:10px;margin:4px 0 14px;
}
.modal-body .big-score em{font-style:normal;font-size:44px;font-weight:800;line-height:1;
  color:var(--accent-c)}
.modal-body .big-score span{font-size:13px;color:var(--ink-3)}
.modal-body .bar{height:7px;border-radius:99px;background:rgba(123,77,255,.18);
  overflow:hidden;margin:8px 0 14px}
.modal-body .bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-c),#37d6c8)}

/* 弹窗打开时锁住整页滚动：本站滚动发生在 .screen（overflow-y:auto）上，
   只锁 body 无效 —— 在弹窗里滚一下，背后的分屏会跟着滚（实测） */
body.modal-open{overflow:hidden}
body.modal-open .screen{overflow:hidden !important}
body.modal-open #stage{overflow:hidden}

@media(max-width:700px){
  .modal{width:calc(100vw - 20px);max-height:90vh;border-radius:15px}
  .modal-scroll{padding:16px 15px 20px}
  .modal-bar{padding:9px 10px;gap:6px}
  .modal-act{padding:0 9px;font-size:11.5px}
}

/* ───────── 星座符号（维度徽标）─────────
   原来绝对定位 right:12px/top:11px，正好压在右上角的分数上（实测「65分」被图标遮住）。
   改为随标题行进流排布：图标 + 维度名，分数独占右侧，互不重叠。 */
.sign-badge{
  flex:none;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
  background:rgba(123,77,255,.16);border:1px solid var(--edge-2);
  color:#cbb9ff;pointer-events:none;
  margin-right:2px;
}
.dimcard{position:relative}
.dimcard .sign-badge{opacity:.95}
/* 维度名过长时压缩名字，不挤分数 */
.dimhead .dimname{min-width:0}
.dimhead .dimname{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.dimhead .dimscore{flex:none;white-space:nowrap}

/* 可点提示 */
.dimcard[data-clickable="1"],.signtile,.tl-row[data-clickable="1"]{cursor:pointer}
.dimcard[data-clickable="1"]:hover{
  border-color:var(--edge-2);
  box-shadow:0 10px 26px rgba(123,77,255,.22);
}
.dimcard[data-clickable="1"]:after{
  content:"点击查看详情";position:absolute;right:12px;bottom:9px;
  font-size:10.5px;color:var(--ink-3);opacity:0;transition:.16s;
}
.dimcard[data-clickable="1"]:hover:after{opacity:1}
/* 「已按 MBTI 加权」说明标记（不是按钮，故无 hover 手型） */
.adj-note{
  font-size:10.5px;color:#b79bff;font-weight:600;
  border:1px solid rgba(150,120,255,.45);border-radius:999px;
  padding:1px 7px;vertical-align:middle;cursor:help;
  background:rgba(123,77,255,.12);white-space:nowrap;
}

/* ══════════ science.css ══════════ */
/* 星座科普页 */
.sci-signs{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
}
.sci-sign{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:13px 8px;border-radius:15px;cursor:pointer;
  background:rgba(22,14,48,.58);border:1px solid var(--edge);
  backdrop-filter:blur(10px);transition:.18s;text-align:center;
  height:auto;min-height:0;
}
.sci-sign:hover{
  transform:translateY(-3px);border-color:var(--edge-2);
  background:rgba(38,24,78,.74);box-shadow:0 12px 28px rgba(123,77,255,.28);
}
.sci-sign .si-g{
  font-size:26px;line-height:1;color:#e0d4ff;
  text-shadow:0 0 14px rgba(169,125,255,.85);
}
.sci-sign .si-n{font-size:13.5px;font-weight:700;color:var(--ink)}
.sci-sign .si-r{font-size:10.5px;color:var(--ink-3)}
.sci-sign .si-tags{font-size:10px;color:#a99ed0}

/* 元素 */
.sci-elements{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sci-el{
  border-radius:12px;padding:11px 12px;
  background:rgba(30,20,62,.55);border:1px solid var(--edge);
  border-left:3px solid var(--c,#7b4dff);
}
.sci-el .el-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.sci-el .el-top b{font-size:14px;color:var(--c,#dcd0ff)}
.sci-el .el-top span{font-size:14px;letter-spacing:1px;color:#a99ed0}
.sci-el p{margin:0;font-size:12px;line-height:1.65;color:var(--ink-2)}

/* 模式 */
.sci-modes{display:flex;flex-direction:column;gap:9px}
.sci-mode{
  border-radius:11px;padding:10px 12px;
  background:rgba(30,20,62,.5);border:1px solid var(--edge);
}
.sci-mode b{font-size:13.5px;color:#dcd0ff}
.sci-mode p{margin:3px 0 0;font-size:12px;line-height:1.6;color:var(--ink-2)}

/* 相位 */
.sci-aspects{display:flex;flex-direction:column;gap:7px}
.sci-asp{
  display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:10px;
  background:rgba(30,20,62,.5);border-left:3px solid var(--c,#7b4dff);
  font-size:12.5px;
}
.sci-asp b{color:var(--c,#dcd0ff);min-width:64px;font-size:12px}
.sci-asp span{color:var(--ink-2)}

/* 宫位 */
.sci-houses{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* 十二宫位卡片（重设计）
   ── 原来错在哪 ──
   .sci-house 是 grid，只有两个列轨（22px + auto）：
     第1格 <i>宫号   → 列1
     第2格 <b>宫名   → 列2
     第3格 <span>描述 → 换行到第二行 列1（22px 宽）
     第4格 <em>对应星座 → 同一行 列2
   于是「自然对应 白羊座」被塞进 22px 的窄列里，硬折成「白羊 / 座」两行。
   而且宫号只跨 2 行，描述与星座挤在一起，整块又高又散。

   ── 新结构（三栏一行，信息密度高）──
     ① 左：宫号徽章（28×28 圆角块，居中）
     ② 中：宫名（粗体）+ 描述（第二行小字）
     ③ 右：对应星座（胶囊标签，右对齐，不折行）
   卡片高度从 ~86px 降到 ~54px，十二宫一屏能看全。 */
.sci-houses{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.sci-house{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:2px 12px;align-items:center;
  padding:10px 13px;border-radius:11px;
  background:rgba(30,20,62,.5);
  border:1px solid var(--edge);
  transition:.16s;
}
.sci-house:hover{
  background:rgba(48,30,92,.68);
  border-color:rgba(169,125,255,.55);
}
/* ① 宫号：小徽章 */
.sci-house i{
  grid-column:1;grid-row:1 / span 2;
  width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:12px;font-weight:800;
  color:#c9b6ff;background:rgba(123,77,255,.22);
  border:1px solid rgba(150,120,255,.3);
  align-self:center;
}
/* ② 宫名 */
.sci-house b{
  grid-column:2;grid-row:1;
  font-size:13px;font-weight:700;color:#e8e0ff;
  white-space:nowrap;line-height:1.3;
}
/* ② 描述：宫名右侧第二行，最多一行省略 */
.sci-house span{
  grid-column:2;grid-row:2;
  font-size:11px;color:#9489b5;line-height:1.45;
  display:block;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;
}
/* ③ 对应星座：右侧胶囊，永不折行 */
.sci-house .sh-sign,
.sci-house .sh-sign em{
  grid-column:3;grid-row:1 / span 2;
  justify-self:end;align-self:center;
  display:inline-flex;align-items:center;gap:4px;
  margin:0;font-style:normal;font-size:10.5px;font-weight:600;
  color:#b79bff;white-space:nowrap;
  padding:4px 10px;border-radius:999px;
  background:rgba(123,77,255,.13);
  border:1px solid rgba(150,120,255,.24);
}
@media (max-width:900px){
  .sci-houses{grid-template-columns:1fr}
}

/* 格局 */
.sci-patterns{display:flex;flex-direction:column;gap:9px}
.sci-pat{
  display:grid;grid-template-columns:34px auto;gap:3px 10px;
  padding:10px 12px;border-radius:11px;
  background:rgba(30,20,62,.5);border:1px solid var(--edge);
}
.sci-pat .pi-g{
  grid-row:span 2;align-self:center;font-size:19px;color:#b79bff;
  text-align:center;text-shadow:0 0 12px rgba(169,125,255,.7);
}
.sci-pat b{font-size:13px;color:#dcd0ff}
.sci-pat span{font-size:11.5px;color:var(--ink-3);line-height:1.5}

@media(max-width:1000px){
  .sci-signs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
  .sci-signs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sci-sign{padding:10px 6px}
  .sci-sign .si-g{font-size:22px}
  .sci-sign .si-n{font-size:12px}
  .sci-elements{grid-template-columns:1fr}
  .sci-houses{grid-template-columns:1fr}
}
/* 宫位区块：补「自然对应星座」小标 */
/* 旧的 .sci-house .sh-sign{display:block;...} 已并入上方新规则（胶囊样式）。
   保留这条注释说明去向，避免以后又被加回来覆盖。 */

/* ══════════ yunqi-shichen-disc.css ══════════ */
/* ───────── 五运六气 ───────── */
.yunqi-card{padding:22px 24px}
.yq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.yq-head h3{font-size:19px;color:var(--ink)}
.yq-ganzhi{
  font-size:26px;font-weight:800;letter-spacing:.08em;
  color:#e0d4ff;padding:6px 18px;border-radius:12px;
  background:linear-gradient(135deg,rgba(123,77,255,.3),rgba(168,85,247,.18));
  border:1px solid rgba(169,125,255,.42);
}
.yq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.yq-item{
  padding:15px 16px;border-radius:13px;min-width:0;
  background:rgba(24,15,52,.6);border:1px solid var(--edge);
}
.yq-k{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:8px;letter-spacing:.02em}
.yq-v{font-size:17px;font-weight:800;color:#e0d4ff;margin-bottom:7px;line-height:1.35}
.yq-d{font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.yq-rel{
  padding:12px 15px;border-radius:11px;margin-bottom:16px;
  background:rgba(123,77,255,.12);border-left:3px solid #a855f7;
  font-size:13px;line-height:1.75;color:#d8ccff;
}
.yq-month{
  padding:16px 18px;border-radius:13px;
  background:rgba(18,10,42,.55);border:1px solid var(--edge);
}
.yq-month h4{font-size:14.5px;margin:0 0 12px;color:var(--ink)}
.yq-month h4 span{color:#b79bff}
.yq-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.yqm-i{
  padding:10px 12px;border-radius:10px;background:rgba(30,20,62,.6);
  display:flex;flex-direction:column;gap:5px;min-width:0;
}
.yqm-i b{font-size:11px;color:var(--ink-3);font-weight:600}
.yqm-i span{font-size:13px;color:#e0d4ff;font-weight:700;line-height:1.4}
.yq-do,.yq-watch{font-size:13px;line-height:1.75;margin:0 0 6px}
.yq-do{color:#a3e635}
.yq-watch{color:#fbbf24}
.yq-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--edge);font-size:11.5px}

/* ───────── 十二时辰 ───────── */
.sc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:18px;align-items:start}
.sc-wheel-card{padding:14px}
.sc-legend{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--edge);
  font-size:11.5px;color:var(--ink-3);
}
.sc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;background:rgba(109,74,255,.5)}
.sc-dot.now{background:linear-gradient(135deg,#7b4dff,#a855f7);box-shadow:0 0 8px rgba(168,85,247,.7)}
.sc-cur{padding:18px 20px}
.scc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.scc-name{font-size:26px;font-weight:800;color:#f0e9ff}
.scc-time{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.scc-meridian{
  font-size:14px;font-weight:700;color:#b79bff;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--edge);
}
.scc-saying{font-size:13px;line-height:1.8;color:var(--ink-2);margin:0 0 14px}
.scc-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.scc-row{display:flex;gap:10px;font-size:12.5px;line-height:1.7}
.scc-row b{flex:none;width:74px;color:var(--ink-3);font-weight:600}
.scc-row span{color:var(--ink-2);min-width:0}
.scc-yiji{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px;border-top:1px solid var(--edge)}
.scc-yi b,.scc-ji b{display:block;font-size:12px;margin-bottom:7px;font-weight:700}
.scc-yi b{color:#5eead4}
.scc-ji b{color:#fb7185}
.scc-yi ul,.scc-ji ul{margin:0;padding-left:16px}
.scc-yi li,.scc-ji li{font-size:12px;line-height:1.75;color:var(--ink-2)}
.sc-advice{padding:16px 18px}
.scc-advice-body .sca-top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.sca-top b{font-size:15px;color:#e0d4ff}
.sca-top span{font-size:12px;color:var(--ink-3)}
.sca-line{font-size:13px;line-height:1.85;color:var(--ink-2);margin:0 0 12px}
.sca-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
.sca-i{padding:9px 12px;border-radius:9px;background:rgba(30,20,62,.55);font-size:12.5px;line-height:1.65}
.sca-i b{color:#b79bff;margin-right:8px;font-weight:700}
.sca-i span{color:var(--ink-2)}
.sca-tip{font-size:12.5px;line-height:1.7;color:#fbbf24;margin:0}
.sc-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.scl-item{
  padding:11px 12px;border-radius:11px;cursor:pointer;
  background:rgba(24,15,52,.55);border:1px solid var(--edge);
  display:flex;flex-direction:column;gap:3px;min-width:0;transition:.16s;
}
.scl-item:hover{border-color:rgba(169,125,255,.6);background:rgba(38,24,78,.75)}
.scl-item.on{background:linear-gradient(160deg,rgba(123,77,255,.28),rgba(24,15,52,.6));border-color:rgba(169,125,255,.8)}
.scl-item b{font-size:14px;color:#e0d4ff}
.scl-item span{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.scl-item i{font-size:11px;color:#9d8cff;font-style:normal}
.scl-item em{font-size:11.5px;color:#ffd6a5;font-style:normal;font-weight:700}

/* ───────── DISC ───────── */
.disc-head{display:flex;align-items:center;gap:20px;padding:22px 24px;flex-wrap:wrap}
.dh-code{
  font-size:38px;font-weight:800;letter-spacing:.06em;line-height:1;
  background:linear-gradient(135deg,#a3e635,#7b4dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dh-info{min-width:0;flex:1}
.dh-info h3{font-size:20px;margin:0 0 6px;color:var(--ink)}
.disc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.disc-card{
  padding:16px 16px 14px;border-radius:14px;min-width:0;
  background:rgba(24,15,52,.6);border:1px solid var(--edge);
  border-top:3px solid var(--dc);transition:.18s;
}
.disc-card.secondary{border-color:rgba(169,125,255,.45)}
.disc-card.primary{
  background:linear-gradient(165deg,rgba(123,77,255,.22),rgba(24,15,52,.62));
  border-color:var(--dc);box-shadow:0 8px 28px rgba(123,77,255,.25);
}
.dc-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.dc-letter{
  font-size:17px;font-weight:800;color:var(--dc);
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--dc) 18%,transparent);
}
.dc-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.dc-badge{
  margin-left:auto;font-size:9.5px;font-style:normal;font-weight:800;
  padding:2px 7px;border-radius:999px;
  background:rgba(163,230,53,.18);color:#a3e635;border:1px solid rgba(163,230,53,.4);
}
.dc-badge.sec{background:rgba(169,125,255,.16);color:#c9b6ff;border-color:rgba(169,125,255,.4)}
.dc-score{font-size:32px;font-weight:800;color:var(--ink);line-height:1;margin-bottom:8px}
.dc-bar{height:5px;border-radius:999px;background:rgba(123,77,255,.16);overflow:hidden;margin-bottom:11px}
.dc-bar i{display:block;height:100%;border-radius:999px;background:var(--dc)}
.dc-want,.dc-fear{font-size:11.5px;line-height:1.65;color:var(--ink-3);margin-bottom:4px}
.dc-fear{color:#a99ed0}
.disc-read{padding:20px 22px}
.disc-read p{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin:0 0 11px}
.disc-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:16px 0 12px}
.disc-trio>div{
  padding:12px 14px;border-radius:11px;background:rgba(30,20,62,.55);
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.disc-trio b{font-size:11px;color:var(--ink-3);font-weight:600}
.disc-trio span{font-size:12.5px;line-height:1.65;color:#e0d4ff}
.disc-work{
  padding:12px 15px;border-radius:11px;
  background:rgba(123,77,255,.12);border-left:3px solid #a855f7;
  font-size:13px;line-height:1.75;color:#d8ccff;
}
.disc-work b{color:#fff}

/* ───────── 节气弹窗里的时间框 ───────── */
.term-time-box{
  padding:14px 16px;border-radius:12px;margin-bottom:16px;
  background:rgba(123,77,255,.13);border:1px solid rgba(169,125,255,.32);
}
.ttb-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0}
.ttb-row span{font-size:12px;color:var(--ink-3);font-weight:600}
.ttb-row b{font-size:14px;color:#fff;font-variant-numeric:tabular-nums;font-weight:700}
.ttb-now{
  margin-top:9px;padding-top:9px;border-top:1px dashed rgba(169,125,255,.3);
  font-size:12px;color:#a3e635;font-weight:700;
}
.term-yi-ul,.term-ji-ul{margin:0 0 12px;padding-left:18px}
.term-yi-ul li,.term-ji-ul li{font-size:13px;line-height:1.8;color:var(--ink-2)}
.sign-term-list{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px}
.stl-item{padding:13px 15px;border-radius:11px;background:rgba(30,20,62,.55);border:1px solid var(--edge)}
.stl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.stl-head b{font-size:15px;color:#e0d4ff}
.stl-head span{font-size:11px;color:#a3e635;font-weight:700}
.stl-time{font-size:12.5px;color:#c9b6ff;font-variant-numeric:tabular-nums;margin-bottom:5px}
.stl-body{font-size:12px;color:var(--ink-3);line-height:1.6}

@media (max-width:1100px){
  .yq-grid{grid-template-columns:1fr}
  .yq-month-grid{grid-template-columns:1fr}
  .sc-wrap{grid-template-columns:1fr}
  .disc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .disc-trio{grid-template-columns:1fr}
  .sc-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .disc-grid{grid-template-columns:1fr}
  .sc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scc-yiji{grid-template-columns:1fr}
}
/* ───────── 五运六气 × 星座 ───────── */
.yqz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.yqz-card{
  padding:13px 14px;border-radius:12px;min-width:0;
  background:rgba(24,15,52,.6);border:1px solid var(--edge);
  border-left:3px solid rgba(109,74,255,.4);transition:.16s;
}
.yqz-card:hover{transform:translateY(-2px);border-color:rgba(169,125,255,.65);background:rgba(38,24,78,.75)}
.yqz-card.hi{border-left-color:#fb7185;background:linear-gradient(160deg,rgba(251,113,133,.13),rgba(24,15,52,.62))}
.yqz-card.lo{border-left-color:#fbbf24;background:linear-gradient(160deg,rgba(251,191,36,.11),rgba(24,15,52,.62))}
.yqz-card.up{border-left-color:#5eead4;background:linear-gradient(160deg,rgba(94,234,212,.10),rgba(24,15,52,.62))}
.yqz-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.yqz-head b{font-size:14px;color:var(--ink)}
.yqz-rel{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;color:#c9b6ff;background:rgba(123,77,255,.18);border:1px solid rgba(150,120,255,.3)}
.yqz-card.hi .yqz-rel{color:#fecdd3;background:rgba(251,113,133,.18);border-color:rgba(251,113,133,.4)}
.yqz-card.lo .yqz-rel{color:#fde68a;background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.4)}
.yqz-card.up .yqz-rel{color:#a7f3d0;background:rgba(94,234,212,.16);border-color:rgba(94,234,212,.4)}
.yqz-elem{font-size:11px;color:var(--ink-3);margin-bottom:8px}
.yqz-note{font-size:11.5px;line-height:1.7;color:var(--ink-2);min-height:3.4em}

/* 六气 → 脏腑对照表 */
.yq-table{display:flex;flex-direction:column;gap:6px}
.yqt-row{
  display:grid;grid-template-columns:96px 88px 1fr 1.5fr;gap:10px;align-items:center;
  padding:10px 13px;border-radius:10px;background:rgba(24,15,52,.45);
  border:1px solid transparent;font-size:12px;
}
.yqt-row.on{background:rgba(123,77,255,.2);border-color:rgba(169,125,255,.55)}
.yqt-row.half{background:rgba(123,77,255,.10);border-color:rgba(169,125,255,.28)}
.yqt-row b{color:#e0d4ff;font-size:12.5px}
.yqt-row span{color:#ffd6a5;font-weight:700}
.yqt-row i{color:var(--ink-3);font-style:normal}
.yqt-row em{color:var(--ink-2);font-style:normal;line-height:1.55}
@media (max-width:1100px){
  .yqz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yqt-row{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){ .yqz-grid{grid-template-columns:1fr} }

/* ───────── 空态落地页（DISC / 时辰等未排盘时） ───────── */
.empty-land{padding:26px 28px}
.el-top{margin-bottom:20px}
.el-badge{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;
  padding:4px 12px;border-radius:999px;margin-bottom:12px;
  color:#c9b6ff;background:rgba(123,77,255,.18);border:1px solid rgba(150,120,255,.4);
}
.el-top h3{font-size:21px;margin:0 0 10px;color:var(--ink);line-height:1.4}
.el-lead{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin:0;max-width:760px}

.el-flow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:16px 18px;border-radius:13px;margin-bottom:20px;
  background:rgba(18,10,42,.55);border:1px solid var(--edge);
}
.el-step{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 130px}
.el-step b{font-size:10.5px;color:#7d74a0;font-weight:800;letter-spacing:.1em}
.el-step span{font-size:13px;font-weight:700;color:#e0d4ff}
.el-step i{font-size:11px;color:var(--ink-3);font-style:normal;line-height:1.5}
.el-arrow{flex:none;color:#6d4aff;font-size:15px}

.el-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:22px}
.el-type{
  padding:14px 15px;border-radius:12px;min-width:0;
  background:rgba(24,15,52,.6);border:1px solid var(--edge);
  border-top:3px solid var(--tc);
}
.et-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.et-letter{
  width:25px;height:25px;flex:none;border-radius:7px;font-size:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;color:var(--tc);
  background:color-mix(in srgb,var(--tc) 17%,transparent);
}
.et-head b{font-size:13px;color:var(--ink)}
.et-row{font-size:11.5px;line-height:1.7;color:var(--ink-2);margin-bottom:3px}
.et-row em{font-style:normal;color:var(--ink-3);margin-right:6px}
.et-weak{color:#a99ed0}

.el-cta{text-align:center;padding:8px 0 18px}
.el-btn{
  appearance:none;border:0;cursor:pointer;
  padding:14px 34px;border-radius:999px;
  font-family:inherit;font-size:15.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 10px 32px rgba(123,77,255,.5);
  transition:.2s;
}
.el-btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(123,77,255,.66)}
.el-btn span{margin-left:6px}
.el-hint{font-size:12px;color:var(--ink-3);margin:11px 0 0}
.el-foot{
  font-size:11.5px;line-height:1.7;color:var(--ink-3);
  padding-top:14px;border-top:1px solid var(--edge);margin:0;
}
@media (max-width:1100px){ .el-types{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .el-types{grid-template-columns:1fr}
  .empty-land{padding:20px 16px}
  .el-flow{flex-direction:column;align-items:stretch}
  .el-arrow{text-align:center;transform:rotate(90deg)}
}

/* ══════════ layers.css ══════════ */
/* 星盘深度三层：三要素卡 / 落位卡 / 格局卡 */
.layer-card{
  border-radius:15px;padding:15px;
  background:rgba(22,14,48,.62);border:1px solid var(--edge);
  backdrop-filter:blur(10px);position:relative;overflow:hidden;
}
.layer-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;
  background:linear-gradient(180deg,#b79bff,rgba(123,77,255,.05));
}
.lc-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.lc-g{font-size:20px;color:#dcd0ff;line-height:1;text-shadow:0 0 12px rgba(169,125,255,.75)}
.lc-name{font-size:15px;font-weight:800;color:var(--ink)}
.lc-pos{font-size:12.5px;color:#b79bff;margin-left:auto}
.lc-house{font-size:11.5px;color:var(--ink-3);margin-bottom:9px}
.lc-head{font-size:13.5px;color:var(--ink);margin:0 0 10px;line-height:1.62;font-weight:500}
.lc-row{display:flex;gap:8px;font-size:12px;line-height:1.6;margin-bottom:5px;color:var(--ink-2)}
.lc-row b{
  flex:none;font-size:10.5px;font-weight:700;color:#a99ed0;
  border:1px solid var(--edge);border-radius:999px;padding:1px 7px;height:17px;
}
.lc-row.warn b{color:#ffc46b;border-color:rgba(255,196,107,.42)}

/* 落位卡 */
.place-card{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:11px 13px;height:auto;min-height:0;
  border-radius:12px;background:rgba(30,20,62,.55);
  border:1px solid var(--edge);cursor:pointer;transition:.16s;
  font-family:var(--font);
}
.place-card:hover{
  border-color:var(--edge-2);background:rgba(44,28,86,.7);
  transform:translateY(-1px);box-shadow:0 8px 20px rgba(123,77,255,.2);
}
.pc-g{
  font-size:17px;color:#dcd0ff;width:24px;text-align:center;flex:none;
  text-shadow:0 0 10px rgba(169,125,255,.65);
}
.pc-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pc-main b{font-size:13px;color:var(--ink);font-weight:700}
.pc-pos{font-size:11.5px;color:#a99ed0}
.pc-pos em{font-style:normal;color:#ff8181;font-size:10px}
.pc-house{font-size:11px;color:var(--ink-3);flex:none}

/* 格局卡 */
.pat{
  display:grid;grid-template-columns:32px 1fr;gap:2px 10px;
  padding:11px 13px;border-radius:12px;
  background:rgba(30,20,62,.55);border:1px solid var(--edge);
}
.pat.warn{border-left:3px solid #ffc46b}
.pat.note{border-left:3px solid #7cc4ff}
.pt-g{
  grid-row:span 2;align-self:center;font-size:18px;color:#b79bff;
  text-align:center;text-shadow:0 0 12px rgba(169,125,255,.7);
}
.pt-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-main b{font-size:13px;color:#dcd0ff}
.pt-why{font-size:11px;color:var(--ink-3);line-height:1.5}

@media(max-width:700px){
  .layer-card{padding:12px}
  .lc-head{font-size:12.5px}
  .place-card{padding:9px 10px}
  .pc-house{display:none}
}

/* ══════════ layouts.css ══════════ */
/* 拆屏后的布局：能力雷达单屏 / MBTI 单屏 / 九型单屏 / 今日运程单屏 */

/* ── 屏2 能力雷达：单图 + 右侧读数 ── */
.radar-solo{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:22px;align-items:center;max-width:1080px;margin:0 auto;
}
.radar-solo .ability-radar{padding:12px}
.radar-solo .radar-box{max-width:460px;margin:0 auto}
.radar-side .kv{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.radar-side .kv div{font-size:13px}
.radar-side .kv b{font-size:17px}

/* ── 屏3 MBTI ── */
.mbti-layout{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:20px;align-items:start;max-width:1080px;margin:0 auto;
}
.mbti-hero{padding:24px}
.mbti-hero .mbti-big{margin-bottom:10px}
.mbti-hero .mbti-big .lt{font-size:clamp(52px,7.4vw,76px);padding:2px 8px}
.mbti-hero .mbti-nick{font-size:17px;margin-bottom:10px}
.mbti-hero .mbti-core{font-size:14.5px}
.mbti-hero .mbti-chips{margin-top:14px}
#s-mbti .mbti-axes{margin-top:4px}
#s-mbti .axis-row{padding:9px 11px;margin-bottom:10px}
#s-mbti .mbti-detail{min-height:96px;font-size:13px}

/* ── 屏4 九型 ── */
.ennea-layout{
  display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:20px;align-items:start;max-width:1120px;margin:0 auto;
}
.ennea-wheel{max-width:420px;margin:0 auto}
.ennea-wheel svg{width:100%;height:auto;display:block}
.ennea-hero{padding:18px}
.ennea-top{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.ennea-glyph{
  font-size:34px;line-height:1;color:#ff8a8a;
  text-shadow:0 0 16px rgba(255,90,90,.55);
}
.ennea-name{font-size:21px;font-weight:800;color:var(--ink)}
.ennea-alias{font-size:12.5px;color:var(--ink-3)}
.ennea-wing{
  margin-left:auto;font-size:12px;padding:4px 11px;border-radius:999px;
  background:rgba(255,196,107,.14);border:1px solid rgba(255,196,107,.42);color:#ffc46b;
  white-space:nowrap;
}
.ennea-line{
  font-size:13px;line-height:1.72;color:var(--ink-2);
  padding:7px 0;border-top:1px solid var(--edge);
}
.ennea-line b{color:#dcd0ff;margin-right:6px;font-weight:700}
.ennea-body{
  font-size:13px;line-height:1.72;color:var(--ink-2);
  padding:9px 11px;border-radius:10px;margin-top:9px;
  background:rgba(30,20,62,.5);border-left:2.5px solid #7b4dff;
}
.ennea-body.warn{border-left-color:#ffc46b}
.ennea-triad{
  margin-top:11px;font-size:12px;line-height:1.7;color:var(--ink-3);
  padding:9px 11px;border-radius:10px;background:rgba(123,77,255,.10);
}
.ennea-triad b{color:#b79bff}

.ennea-rank{display:flex;flex-direction:column;gap:7px}
.ennea-rank .er-row{display:grid;grid-template-columns:52px 1fr 42px;gap:9px;align-items:center;font-size:12px}
.ennea-rank .er-n{color:var(--ink-2);white-space:nowrap}
.ennea-rank .er-track{height:8px;border-radius:99px;background:rgba(123,77,255,.16);overflow:hidden}
.ennea-rank .er-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#37d6c8,#7b4dff)}
.ennea-rank .er-row.top .er-n{color:#ff8a8a;font-weight:700}
.ennea-rank .er-row.top .er-fill{background:linear-gradient(90deg,#ff8181,#ff5a5a)}
.ennea-rank .er-row.wing .er-n{color:#ffc46b}
.ennea-rank .er-v{text-align:right;color:var(--ink-3)}

/* ── 屏5 今日运程 ── */
.today-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;max-width:1180px;margin:0 auto;
}
.today-grid .dimcard{padding:18px}
.today-grid .dimscore{font-size:32px}
.today-grid .dimtext{font-size:13px}
.today-grid .basis{font-size:11.5px}

@media(max-width:1000px){
  .radar-solo,.mbti-layout,.ennea-layout{grid-template-columns:1fr;max-width:640px}
  .today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .radar-solo .radar-box{max-width:380px}
  .ennea-wheel{max-width:340px}
}
@media(max-width:700px){
  .today-grid{grid-template-columns:1fr}
  .mbti-hero{padding:16px}
  .mbti-hero .mbti-big .lt{font-size:46px}
  .ennea-top{gap:9px}
  .ennea-glyph{font-size:28px}
  .ennea-name{font-size:18px}
  .radar-side .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ══════════ essay.css ══════════ */
/* 分享海报弹窗 + 长文解析排版 */

/* ── 海报弹窗 ── */
/* ⚠️ 工作台场景必须抬高（主上 2026-11-13「分享按钮都用不了了」）──
   实测层级：.wb(900) < .wb-askmodal(1100) < .modal-root(1200)
   而 .poster-root 原来是 300 ⇒ 从工作台弹窗里点「生成分享海报」，
   海报虽然生成了（1080×1440 PNG，img.complete=true，尺寸 420×560），
   但整层被 .wb-askmodal 盖住，命中测试打到的是弹窗正文 h2，
   用户完全看不到海报——表现就是「分享按钮没用」。
   ⇒ 提到 1300，高于 .modal-root(1200)，保证海报永远在最上层。 */
.poster-root{position:fixed;inset:0;z-index:1300;display:none}
.poster-root.open{display:block}
.poster-mask{position:absolute;inset:0;background:rgba(4,2,12,.82);backdrop-filter:blur(8px)}
.poster-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 32px));max-height:92vh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(20,12,44,.99),rgba(12,7,32,.99));
  border:1px solid rgba(150,120,255,.34);border-radius:20px;
  box-shadow:0 40px 120px rgba(0,0,0,.8);
  animation:popIn .26s cubic-bezier(.2,.9,.25,1);overflow:hidden;
}
.poster-bar{
  display:flex;align-items:center;gap:10px;padding:13px 16px;flex:none;
  border-bottom:1px solid var(--edge);
  background:linear-gradient(90deg,rgba(123,77,255,.28),rgba(55,214,200,.12));
}
.poster-bar b{font-size:14px;color:#fff}
.poster-hint{font-size:11.5px;color:rgba(200,190,230,.65)}
.poster-x{
  margin-left:auto;width:30px;height:30px;min-height:0;padding:0;border-radius:8px;
  font-size:17px;border:1px solid rgba(255,222,150,.28);background:rgba(123,77,255,.14);color:#fff;
}
.poster-imgwrap{
  overflow-y:auto;padding:14px;flex:1;display:flex;justify-content:center;
}
.poster-imgwrap img{
  width:100%;max-width:420px;height:auto;border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.poster-actions{
  display:flex;gap:9px;padding:12px 16px 6px;flex:none;
}
.poster-btn{
  flex:1;height:44px;min-height:0;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13.5px;text-decoration:none;
  border:1px solid rgba(150,120,255,.4);background:rgba(255,255,255,.05);color:#e8e2ff;
  cursor:pointer;transition:.16s;
}
.poster-btn:hover{background:rgba(123,77,255,.22);border-color:rgba(169,125,255,.7)}
.poster-btn.primary{
  border:0;color:#fff;background:linear-gradient(96deg,#7b4dff,#a97dff);
  box-shadow:0 8px 22px rgba(123,77,255,.4);
}
.poster-tip{
  padding:2px 16px 14px;font-size:11.5px;color:rgba(200,190,230,.55);text-align:center;flex:none;
}

/* ── 十二星座运程弹框（12 维逐条） ── */
.sr-top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-radius:13px;margin-bottom:16px;
  background:linear-gradient(100deg,rgba(123,77,255,.20),rgba(55,214,200,.08));
  border:1px solid var(--edge-2);
}
.sr-big{display:flex;align-items:baseline;gap:9px}
.sr-big em{font-style:normal;font-size:42px;font-weight:800;line-height:1;color:#fff}
.sr-big span{font-size:13px;color:var(--ink-2)}
.sr-moon{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.sr-moon b{color:#cbb9ff}

.sr-dim{
  border-radius:12px;padding:12px 14px;margin-bottom:10px;
  background:rgba(30,20,62,.55);border:1px solid var(--edge);
  border-left:2.5px solid #7b4dff;
}
.sr-dim-h{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.sr-ico{display:inline-flex;line-height:1}
.sr-dim-h b{font-size:14px;color:#fff}
.sr-score{font-size:16px;font-weight:800;margin-left:2px}
.sr-grade{font-size:11.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.sr-body{font-size:13px;line-height:1.78;color:var(--ink-2)}
.sr-body p{margin:0 0 6px}
.sr-body p:last-child{margin-bottom:0}
.sr-basis{
  margin-top:8px;padding-top:8px;border-top:0;
  font-size:11.5px;color:var(--ink-3);line-height:1.65;
}
.sr-basis b{color:#b79bff;margin-right:6px}

@media(max-width:700px){
  .sr-big em{font-size:34px}
  .sr-moon{margin-left:0;width:100%}
  .sr-body{font-size:12.5px}
}

/* ── 长文解析 ── */
.essay-wrap{max-width:860px;margin:0 auto}
.essay-head{text-align:center;margin-bottom:18px}
.essay-meta{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px;
}
.essay-meta span{
  font-size:11.5px;padding:4px 11px;border-radius:999px;
  background:rgba(123,77,255,.16);border:1px solid var(--edge-2);color:#c3b3f0;
}
.essay-body{
  font-size:15.5px;line-height:2.0;color:#cfc6e4;
  letter-spacing:.012em;
}
.essay-body h3{
  font-size:17px;color:#fff;margin:30px 0 12px;padding-left:12px;
  border-left:3px solid #7b4dff;line-height:1.4;
}
.essay-body h3:first-child{margin-top:0}
.essay-body p{margin:0 0 16px;text-indent:0}
.essay-body b{color:#e8e2ff}
.essay-foot{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--edge);
  font-size:12px;color:rgba(200,190,230,.5);line-height:1.8;
}
.essay-chars{
  font-size:11.5px;color:rgba(200,190,230,.42);margin-top:8px;text-align:right;
}

@media(max-width:700px){
  .essay-body{font-size:14.5px;line-height:1.95}
  .poster-actions{flex-wrap:wrap}
  .poster-btn{flex:1 1 46%}
  .poster-imgwrap img{max-width:100%}
}

/* ══════════ dreams.css ══════════ */
/* 梦想清单样式 */
.dream-wrap{max-width:1000px;margin:0 auto}
.dream-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 18px}

.dream-card{
  border-radius:16px;padding:17px 18px;
  background:rgba(22,14,48,.62);border:1px solid var(--edge);
  backdrop-filter:blur(10px);position:relative;overflow:hidden;
  transition:.18s;
}
.dream-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;
  background:linear-gradient(180deg,#37d6c8,rgba(55,214,200,.05));
}
.dream-card:hover{border-color:var(--edge-2);box-shadow:0 12px 30px rgba(55,214,200,.14)}

.dc-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.dc-idx{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#0a0620;
  background:linear-gradient(140deg,#7ef0dd,#37d6c8);
}
.dc-name{font-size:15.5px;font-weight:800;color:#fff;line-height:1.35;flex:1}
.dc-fit{
  flex:none;font-size:10.5px;padding:2px 8px;border-radius:999px;
  background:rgba(55,214,200,.14);border:1px solid rgba(55,214,200,.42);color:#7ef0dd;
  white-space:nowrap;
}
.dc-brief{font-size:12.5px;color:var(--ink-3);line-height:1.65;margin:0 0 9px}
.dc-why{
  font-size:12.5px;color:#b9add8;line-height:1.68;margin:0 0 11px;
  padding:8px 10px;border-radius:9px;background:rgba(123,77,255,.10);
}
.dc-why b{color:#cbb9ff}
.dc-steps{counter-reset:st;margin:0;padding:0;list-style:none}
.dc-steps li{
  counter-increment:st;position:relative;padding-left:24px;
  font-size:12.5px;line-height:1.72;color:var(--ink-2);margin-bottom:7px;
}
.dc-steps li:before{
  content:counter(st);
  position:absolute;left:0;top:1px;
  width:17px;height:17px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#cbb9ff;
  background:rgba(123,77,255,.20);border:1px solid var(--edge-2);
}
.dc-steps li:last-child{margin-bottom:0}
.dc-more{
  margin-top:11px;padding-top:10px;border-top:0;
  font-size:11.5px;color:var(--ink-3);
}
.dc-more b{color:#b79bff}

/* 免责 */
.dream-disclaimer{
  margin-top:4px;padding:16px 18px;border-radius:14px;
  background:rgba(255,196,107,.07);border:1px solid rgba(255,196,107,.30);
  font-size:12px;line-height:1.85;color:#cfc6e4;
}
.dream-disclaimer b{color:#ffc46b}

@media(max-width:900px){
  .dream-list{grid-template-columns:1fr}
}

/* ══════════ skill.css ══════════ */
/* 今日星座 SKILL 屏 + 12 维雷达 */
.skill-wrap{max-width:940px;margin:0 auto}

.skill-src{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 13px;border-radius:13px;margin-bottom:14px;
  background:rgba(22,14,48,.6);border:1px solid var(--edge);
}
.src-btn{
  height:34px;min-height:0;padding:0 15px;border-radius:999px;font-size:13px;
  border:1px solid var(--edge-2);background:rgba(255,255,255,.04);color:var(--ink-2);
  cursor:pointer;transition:.16s;
}
.src-btn:hover{background:rgba(123,77,255,.18);color:#fff}
.src-btn.on{
  background:linear-gradient(96deg,#7b4dff,#a97dff);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(123,77,255,.4);
}
.src-btn:disabled{opacity:.62;cursor:pointer}

/* ───────── 星座下拉：与紫药丸按钮同一语言（深底/紫边/圆角/等高） ─────────
   原生 <select> 默认是白底黑字小方块，在这套深空主题里极扎眼（实测被点名）。 */
#skill-sign,#today-sign,#cal-sign{
  appearance:none;-webkit-appearance:none;
  height:34px;line-height:32px;
  padding:0 32px 0 14px;border-radius:999px;
  font-family:var(--font);font-size:13px;font-weight:600;
  color:#e0d4ff;
  background-color:rgba(255,255,255,.06);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b79bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  border:1px solid rgba(150,120,255,.42);
  cursor:pointer;transition:.18s;
  min-width:132px;
}
#skill-sign:hover,#today-sign:hover,#cal-sign:hover{
  background-color:rgba(123,77,255,.22);
  border-color:rgba(169,125,255,.75);
  color:#fff;
}
#skill-sign:focus-visible,#today-sign:focus-visible,#cal-sign:focus-visible{
  outline:none;
  border-color:rgba(169,125,255,.9);
  box-shadow:0 0 0 3px rgba(123,77,255,.28);
}
/* 展开后的选项在部分浏览器仍用系统配色，这里尽量压成深色 */
#skill-sign option,#today-sign option,#cal-sign option{
  background:#160e30;color:#e0d4ff;
}

.skill-missing{
  padding:10px 14px;border-radius:11px;margin-bottom:13px;
  background:rgba(255,196,107,.09);border:1px solid rgba(255,196,107,.34);
  font-size:12.5px;color:#ffd79a;line-height:1.7;
}

.skill-head{
  padding:16px 18px;border-radius:14px;margin-bottom:14px;
  background:linear-gradient(100deg,rgba(123,77,255,.22),rgba(55,214,200,.09));
  border:1px solid var(--edge-2);
  font-size:17px;font-weight:700;color:#fff;line-height:1.6;
}
.skill-head small{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:6px}

.skill-actions{display:flex;flex-direction:column;gap:11px}

.sk-card{
  display:grid;grid-template-columns:auto 1fr;gap:0 13px;
  padding:14px 16px;border-radius:14px;
  background:rgba(22,14,48,.66);border:1px solid var(--edge);
  transition:.18s;
}
.sk-card:hover{border-color:var(--edge-2);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.sk-idx{
  grid-row:span 3;align-self:start;
  width:30px;height:30px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#0a0620;
}
.sk-card.go .sk-idx{background:linear-gradient(140deg,#8ef7b8,#4ade9b)}
.sk-card.hold .sk-idx{background:linear-gradient(140deg,#ffd28a,#ffc46b)}
.sk-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.sk-dim{font-size:13px;font-weight:700;color:#dcd0ff}
.sk-tag{
  font-size:10.5px;padding:1px 8px;border-radius:999px;
}
.sk-card.go .sk-tag{background:rgba(74,222,155,.16);border:1px solid rgba(74,222,155,.42);color:#4ade9b}
.sk-card.hold .sk-tag{background:rgba(255,196,107,.14);border:1px solid rgba(255,196,107,.4);color:#ffc46b}
.sk-score{font-size:12.5px;font-weight:700;margin-left:auto}
.sk-text{font-size:14.5px;line-height:1.72;color:#fff;font-weight:500;margin-bottom:7px}
.sk-why{
  font-size:11.5px;color:var(--ink-3);line-height:1.65;
  padding-top:7px;border-top:0;
}
.sk-why b{color:#b79bff;font-weight:600}
.sk-time{color:#37d6c8;font-size:11.5px;margin-left:8px}

/* 可导入技能包 */
.skill-pack{
  margin-top:16px;border-radius:16px;overflow:hidden;
  background:linear-gradient(140deg,rgba(55,214,200,.10),rgba(123,77,255,.10));
  border:1px solid rgba(55,214,200,.34);
}
.sp-head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border-bottom:1px solid var(--edge);
}
.sp-head > div{flex:1;min-width:220px}
.sp-dl{
  flex:none;height:42px;padding:0 20px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:700;text-decoration:none;color:#0a0620;
  background:linear-gradient(96deg,#7ef0dd,#37d6c8);
  box-shadow:0 8px 22px rgba(55,214,200,.34);white-space:nowrap;
  transition:.16s;
}
.sp-dl:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(55,214,200,.5)}
.sp-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:16px 18px}

/* skillhub.news 同款安装面板 */
.sp-ver{
  font-size:10.5px;font-weight:800;letter-spacing:.02em;vertical-align:middle;
  margin-left:8px;padding:3px 9px;border-radius:999px;color:#0a0620;
  background:linear-gradient(135deg,#7ef0dd,#37d6c8);
}
.sp-block{padding-bottom:16px}
.sp-block + .sp-block{border-top:1px solid var(--edge);padding-top:16px}
.sp-block h4{font-size:12.5px;color:#b79bff;margin:0 0 7px}
.sp-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.sp-link{
  display:inline-flex;align-items:center;height:38px;padding:0 16px;
  border-radius:999px;border:1px solid rgba(55,214,200,.5);
  font-size:12.5px;font-weight:600;color:#7ef0dd;text-decoration:none;
  transition:.16s;white-space:nowrap;
}
.sp-link:hover{background:rgba(55,214,200,.14);border-color:rgba(55,214,200,.8)}
.sp-note{margin:9px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.6}
.sp-files{display:flex;flex-direction:column;gap:7px}
.sp-file{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 11px;border-radius:9px;
  background:rgba(10,6,32,.5);border:1px solid var(--edge);
}
.sp-file b{font-size:12px;color:#7ef0dd;font-weight:700;font-family:ui-monospace,monospace}
.sp-file span{font-size:11.5px;color:var(--ink-3);line-height:1.5}

.sp-steps h4{font-size:12.5px;color:#b79bff;margin:0 0 7px}
.sp-steps ol{margin:0;padding-left:18px}
.sp-steps li{font-size:12px;color:var(--ink-2);line-height:1.75;margin-bottom:5px}
.sp-steps code{
  font-family:ui-monospace,monospace;font-size:11px;
  background:rgba(123,77,255,.16);padding:1px 5px;border-radius:4px;color:#cbb9ff;
}
.sp-code{
  margin:8px 0 0;padding:10px 12px;border-radius:9px;
  background:rgba(10,6,32,.7);border:1px solid var(--edge);
  font-size:11px;line-height:1.7;color:#a99ed0;overflow-x:auto;
  font-family:ui-monospace,monospace;
}

.skill-foot{
  margin-top:16px;padding:13px 15px;border-radius:12px;
  background:rgba(30,20,62,.45);border:1px solid var(--edge);
  font-size:11.5px;color:var(--ink-3);line-height:1.8;
}

/* 12 维雷达 */
.radar12-box{max-width:560px;margin:0 auto}
.radar12-box svg{width:100%;height:auto;display:block}
.radar12-box .rd-node12{cursor:pointer}
/* 悬停只加背景高亮，不改文字颜色：
   原来这里写 `:hover text{fill:#e23a3a}` 会把维度名一起染红，鼠标一移过去标题就变暗/变红（实测） */
/* 能力屏顶部标题条：滚到图表也看得见主题 */
.ability-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;border-radius:12px;margin-bottom:14px;
  background:linear-gradient(100deg,rgba(123,77,255,.22),rgba(55,214,200,.08));
  border:1px solid var(--edge-2);
}
.ah-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#a97dff,#37d6c8);
  box-shadow:0 0 10px rgba(169,125,255,.9);
}
.ability-head b{font-size:15px;color:#fff;letter-spacing:.01em}
.ah-sub{font-size:11.5px;color:var(--ink-3);margin-left:auto}

/* 12 维读格：可点 + 悬停亮 */
#ability12-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.a12-cell{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:rgba(30,20,62,.55);border:1px solid var(--edge);
  border-radius:10px;padding:7px 9px;height:auto;min-height:0;
  cursor:pointer;transition:.16s;text-align:left;font-family:var(--font);
}
.a12-cell:hover{
  border-color:var(--edge-2);background:rgba(48,30,96,.8);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(123,77,255,.26);
}
.a12-cell:active{transform:translateY(0)}
.a12-name{font-size:11.5px;color:var(--ink-2)}
.a12-cell b{font-size:16px;font-weight:800;line-height:1.15}
.a12-band{font-size:10px;color:var(--ink-3)}

@media(max-width:1000px){
  .radar12-box{max-width:420px}
  #ability12-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .skill-head{font-size:15px;padding:13px 14px}
  .sk-text{font-size:13.5px}
  .sk-card{padding:12px 13px;gap:0 10px}
  #ability12-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ───────────── SKILL 屏重排：先讲用途，再给装法 ───────────── */
.skill-intro{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:16px 0 18px;
}
.skill-intro .si-card{
  padding:15px 16px;border-radius:14px;
  background:rgba(22,14,48,.58);border:1px solid var(--edge);
  backdrop-filter:blur(10px);
}
.skill-intro .si-ico{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 3px 12px rgba(123,77,255,.42);
  margin-bottom:9px;
}
.skill-intro h4{margin:0 0 7px;font-size:14.5px;color:var(--ink)}
.skill-intro p{margin:0;font-size:12.8px;line-height:1.75;color:var(--ink-2)}
.skill-intro b{color:#c9b6ff;font-weight:700}

.skill-install-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-bottom:14px;
}
.skill-install-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-install-grid .sig-block{
  display:flex;flex-direction:column;gap:9px;
  padding:15px 16px;border-radius:14px;
  background:rgba(22,14,48,.52);border:1px solid var(--edge);
  backdrop-filter:blur(10px);min-width:0;
}
.sig-head{display:flex;align-items:center;gap:9px;margin:0}
.sig-head h4{margin:0;font-size:14px;color:var(--ink)}
.sig-no{
  flex:none;width:20px;height:20px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;color:#fff;
  background:rgba(123,77,255,.55);
}
.skill-install-grid .sp-code{
  margin:0;max-height:200px;overflow:auto;
}
.skill-install-grid .sp-files{margin:0;gap:6px}
.skill-install-grid .sp-file{padding:8px 10px}
.skill-install-grid .sp-steps{margin:0;padding-left:18px;font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.skill-install-grid button,.skill-install-grid .sp-deeplink,.skill-install-grid .sp-dl{
  align-self:flex-start;
}
@media (max-width:1080px){
  .skill-intro{grid-template-columns:1fr 1fr}
  .skill-install-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .skill-intro,.skill-install-grid,.skill-install-grid.two{grid-template-columns:1fr}
}
/* ───────────── SKILL 屏两栏：左=今日清单，右=SKILL 说明+装法 ───────────── */
.skill-wrap{max-width:1240px}
.skill-two-col{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:18px;align-items:start;margin-top:6px;
}
.skill-col-left{min-width:0}
.skill-col-right{min-width:0;max-height:74vh;overflow-y:auto;padding-right:6px}
.skill-col-right::-webkit-scrollbar{width:6px}
.skill-col-right::-webkit-scrollbar-thumb{background:rgba(150,120,255,.35);border-radius:999px}
/* 右栏内：说明卡竖排成一条，安装块单列 */
.skill-col-right .skill-intro{grid-template-columns:1fr;gap:9px;margin:0 0 12px}
.skill-col-right .si-card{padding:12px 14px}
.skill-col-right .si-ico{width:22px;height:22px;font-size:11.5px;margin-bottom:6px}
.skill-col-right .skill-install-grid{grid-template-columns:1fr;gap:9px;margin-bottom:10px}
.skill-col-right .skill-install-grid.two{grid-template-columns:1fr}
.skill-col-right .sig-block{padding:12px 14px;gap:8px}
.skill-col-right .sp-code{font-size:11px;max-height:150px}
@media (max-width:1080px){
  .skill-two-col{grid-template-columns:1fr}
  .skill-col-right{max-height:none;overflow:visible;padding-right:0}
}
/* ───────────── 今日 SKILL 屏：底部引导条 ───────────── */
.skill-cta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  margin-top:16px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(120deg, rgba(123,77,255,.20), rgba(22,14,48,.55));
  border:1px solid rgba(150,120,255,.34);
}
.skill-cta b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.skill-cta .sub{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.skill-cta .primary{
  appearance:none;border:0;cursor:pointer;flex:none;
  padding:10px 20px;border-radius:999px;
  font-family:var(--font);font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 5px 18px rgba(123,77,255,.45);transition:.2s;
}
.skill-cta .primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(123,77,255,.6)}

/* ───────────── 安装 AI SKILL 独立屏 ───────────── */
.install-wrap{max-width:1180px;margin:0 auto}
.install-hero{text-align:center;margin-bottom:16px}
.install-hero h2{margin:2px 0 8px;font-size:24px}
.install-hero .sub{font-size:12.5px;color:var(--ink-3)}
.install-wrap .skill-intro{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.install-wrap .skill-install-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.install-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.install-detail .sig-block{
  display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:15px 16px;border-radius:14px;
  background:rgba(22,14,48,.52);border:1px solid var(--edge);
}
.install-foot{
  padding:12px 16px;border-radius:12px;font-size:12px;line-height:1.7;
  color:var(--ink-3);background:rgba(22,14,48,.4);border:1px solid var(--edge);
}
@media (max-width:980px){
  .install-wrap .skill-intro{grid-template-columns:1fr 1fr}
  .install-wrap .skill-install-grid,
  .install-detail{grid-template-columns:1fr}
}
@media (max-width:720px){
  .install-wrap .skill-intro{grid-template-columns:1fr}
}
/* ───────── 今日决策 · 生活类 6 项 ───────── */
.skill-lifestyle{margin-top:18px}
.ls-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  padding-top:16px;border-top:1px solid rgba(150,120,255,.18);
}
.ls-head h3{margin:0;font-size:17px;color:var(--ink)}
.ls-head .sub{font-size:12.5px;color:var(--ink-3)}
.ls-head .ls-share{
  margin-left:auto;flex:none;
  appearance:none;border:0;cursor:pointer;
  padding:8px 18px;border-radius:999px;
  font-family:var(--font);font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 4px 16px rgba(123,77,255,.44);transition:.2s;
}
.ls-head .ls-share:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(123,77,255,.6)}

.ls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ls-card{
  padding:15px 16px;border-radius:14px;min-width:0;
  background:rgba(22,14,48,.58);border:1px solid var(--edge);
  backdrop-filter:blur(10px);transition:.18s;
}
.ls-card:hover{border-color:rgba(169,125,255,.55);background:rgba(32,20,66,.72)}
.ls-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ls-ico{font-size:19px;line-height:1;flex:none}
.ls-title{font-size:14.5px;font-weight:700;color:var(--ink)}
.ls-value{
  font-size:13.5px;line-height:1.7;color:#e9e2ff;font-weight:600;
  padding:9px 11px;border-radius:10px;margin-bottom:9px;
  background:rgba(123,77,255,.13);border-left:2.5px solid rgba(169,125,255,.6);
}
.ls-reason{font-size:12.8px;line-height:1.8;color:var(--ink-2);margin-bottom:8px}
.ls-basis{
  font-size:11.5px;line-height:1.7;color:var(--ink-3);
  padding-top:8px;border-top:0;
}
@media (max-width:900px){ .ls-grid{grid-template-columns:1fr} }

/* ── 数值口径标签（本命 / 今日 / 月份）──
   用户要求：「方块显示的数值是今天的，还是月份的？没有明确。要明确。」
   能力屏这块是「本命禀赋」，所以大数字后面跟一个「本命」小标签，
   下方区间写「常态 lo–hi」，两处都把口径写死，不和「今日运程」混。 */
.a12-unit{
  font-style:normal;font-size:9.5px;font-weight:600;
  color:var(--ink-3);margin-left:4px;vertical-align:2px;
  opacity:.85;letter-spacing:.2px;
}

/* 生活决策卡片标签（表达层，2026-11-09）*/
.ls-lab{
  display:inline-block;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.08em;padding:1px 7px;margin-right:7px;border-radius:99px;
  background:rgba(140,90,255,.20);color:#c4a6ff;vertical-align:1px;
}

/* ══════════ personality.css ══════════ */
/* 人格体系切换 + 大五 + 16PF */

/* tab */
.pt-tabs{
  display:flex;gap:7px;justify-content:center;margin-bottom:16px;flex-wrap:wrap;
}
.pt-tab{
  height:38px;min-height:0;padding:0 20px;border-radius:999px;font-size:13.5px;font-weight:600;
  border:1px solid var(--edge-2);background:rgba(22,14,48,.6);color:var(--ink-2);
  cursor:pointer;transition:.18s;
}
.pt-tab:hover{background:rgba(123,77,255,.18);color:#fff}
.pt-tab.on{
  background:linear-gradient(96deg,#7b4dff,#a97dff);color:#fff;border-color:transparent;
  box-shadow:0 8px 22px rgba(123,77,255,.42);
}
.pt-pane{display:none}
.pt-pane.on{display:block}

/* 大五 */
.big5-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:18px;align-items:start;max-width:1080px;margin:0 auto;
}
.big5-bars{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.b5-row{
  padding:11px 13px;border-radius:12px;cursor:pointer;
  background:rgba(30,20,62,.52);border:1px solid var(--edge);transition:.16s;
}
.b5-row:hover{border-color:var(--edge-2);background:rgba(44,28,86,.7)}
.b5-top{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.b5-top b{font-size:14px;color:#fff}
.b5-top .sub{font-size:11px}
.b5-score{margin-left:auto;font-size:19px;font-weight:800}
.b5-track{height:8px;border-radius:99px;background:rgba(123,77,255,.16);overflow:hidden}
.b5-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8f6bff,#37d6c8)}
.b5-band{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.6}

/* 16PF */
.pf16-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-row{
  display:grid;grid-template-columns:32px 1fr 34px 1.1fr;
  gap:8px;align-items:center;
  padding:8px 11px;border-radius:10px;cursor:pointer;
  background:rgba(30,20,62,.5);border:1px solid var(--edge);transition:.15s;
  font-size:12.5px;
}
.pf-row:hover{border-color:var(--edge-2);background:rgba(44,28,86,.7)}
.pf-code{
  font-size:11px;font-weight:800;color:#37d6c8;
  border:1px solid rgba(55,214,200,.4);border-radius:5px;
  text-align:center;padding:1px 0;
}
.pf-name{color:#dcd0ff;font-weight:600}
.pf-scale{font-size:15px;font-weight:800;color:#fff;text-align:right}
.pf-lean{color:var(--ink-3);font-size:11.5px;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pf16-sec{display:flex;flex-direction:column;gap:8px}
.sec-row{
  display:grid;grid-template-columns:120px 50px 1fr;gap:10px;align-items:center;
  padding:9px 12px;border-radius:10px;
  background:rgba(30,20,62,.5);border:1px solid var(--edge);font-size:12.5px;
}
.sec-row b{color:#dcd0ff}
.sec-v{font-size:15px;font-weight:800;color:#37d6c8;text-align:right}
.sec-note{color:var(--ink-3);font-size:11.5px}

@media(max-width:1000px){
  .big5-layout{grid-template-columns:1fr}
  .pf16-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .pt-tab{padding:0 14px;font-size:12.5px;height:34px}
  .pf-row{grid-template-columns:28px 1fr 30px;font-size:12px}
  .pf-lean{display:none}
  .sec-row{grid-template-columns:1fr 40px;gap:6px}
  .sec-note{grid-column:1/-1;font-size:11px}
}

/* ══════════ datepicker.css ══════════ */
/* ───────── 自定义日期选择器 ───────── */
.dp-wrap{position:relative;display:block}
.dp-wrap input{padding-right:36px}
.dp-trigger{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;
  color:#a99ed0;cursor:pointer;transition:.15s;padding:0;
}
.dp-trigger:hover{background:rgba(123,77,255,.22);border-color:rgba(150,120,255,.45);color:#e0d4ff}

/* ── 层级：必须高于所有弹窗 ──
   第一次踩（z-index:180 vs .modal-root 200）：日期框在排盘弹窗里，被弹窗盖住。
   第二次踩（z-index:300 vs #wb-note-modal 1400）：点「自选日期」弹日历，
   日历 z-index 只有 300 < 记录弹窗 1400 ⇒ 面板弹了但完全被压在下面，
   elementFromPoint 打到的是弹窗里的 LABEL。用户看到的就是「点了没反应」。
   ⇒ 统一提到 2000（本站最高弹层是 wb-ctxmenu 2300 之下的记录/成长弹窗 1400~1600），
     日历永远在最上面。以后新增弹层若超过 2000，这里必须同步上调。 */
.dp-root{position:fixed;inset:0;z-index:2000;display:none}
.dp-root.open{display:block}
.dp-mask{position:absolute;inset:0;background:rgba(4,2,12,.5);backdrop-filter:blur(3px)}
.dp-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(340px,calc(100vw - 32px));
  /* ⚠️ 手机版必须限高 + 可滚（主上 2026-11-13「附件4，手机版输入命盘的日历，
     没法使用，一直翻不了页」）──
     实测：.dp-panel 是 top:50% + translate(-50%,-50%) 居中，**没有 max-height**。
     年份选择面板（12 个年份按钮 + 两组翻页）比月视图高得多，
     在 390×844 的手机上会超出屏幕底部 —— 确认按钮被切掉，用户点不到，
     表现就是"翻不了页"（其实翻页了，但选不了日期）。
     ⇒ 限高 + 内部滚动，保证任何视口下面板完整可达。 */
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* 面板本体也必须实色：.98/.99 仍是带 alpha，
     加上弹窗后面还有星空背景，会透出底色让数字发虚。
     改成纯 hex 实色。 */
  background:linear-gradient(165deg,#1c113a,#100924);
  background-color:#180d34;
  border:1px solid rgba(150,120,255,.42);
  border-radius:16px;padding:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 0 1px rgba(123,77,255,.14) inset;
}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dp-title{font-size:15px;font-weight:700;color:#f0e9ff;font-variant-numeric:tabular-nums}
.dp-nav{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:rgba(123,77,255,.14);border:1px solid rgba(150,120,255,.28);
  color:#c9b6ff;font-size:17px;line-height:1;cursor:pointer;transition:.15s;padding:0;
}
.dp-nav:hover{background:rgba(123,77,255,.32);color:#fff}
.dp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.dp-week span{text-align:center;font-size:11px;color:#8b81ad;font-weight:600;padding:4px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-blank{height:34px}
.dp-day{
  height:34px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:#d8ccff;font-size:13px;
  font-family:inherit;font-variant-numeric:tabular-nums;
  cursor:pointer;transition:.13s;padding:0;
}
.dp-day:hover{background:rgba(123,77,255,.28);border-color:rgba(169,125,255,.55);color:#fff}
.dp-day.wk{color:#9b90bf}
.dp-day.today{border-color:rgba(94,234,212,.5);color:#5eead4;font-weight:700}
.dp-day.sel{
  background:linear-gradient(135deg,#7b4dff,#a855f7);color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(123,77,255,.5);
}
.dp-foot{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(150,120,255,.18)}
.dp-quick{
  flex:1;padding:7px 0;border-radius:9px;font-size:12px;
  background:rgba(123,77,255,.13);border:1px solid rgba(150,120,255,.26);
  color:#c9b6ff;cursor:pointer;font-family:inherit;transition:.15s;
}
.dp-quick:hover{background:rgba(123,77,255,.3);color:#fff}
.dp-ok{
  flex:1.2;padding:7px 0;border-radius:9px;font-size:12px;font-weight:700;
  background:linear-gradient(135deg,#7b4dff,#a855f7);border:0;color:#fff;
  cursor:pointer;font-family:inherit;
}
body.dp-open{overflow:hidden}
@media (max-width:520px){
  .dp-panel{width:calc(100vw - 24px);padding:13px}
  .dp-day,.dp-blank{height:38px}
}


/* ═══════════════════════════════════════════════════════
   年 / 月 快速选择器（解决「日历选择很不方便」）
   ───────────────────────────────────────────────────────
   原来只有 ‹ › 逐月翻，1990 → 2024 要点 400 多次。
   现在点标题的年/月，直接弹网格一次跳到位。
   ═══════════════════════════════════════════════════════ */
.dp-title{
  display:flex;align-items:center;justify-content:center;gap:6px;flex:1;
}
.dp-yearbtn,.dp-monthbtn{
  display:inline-flex;align-items:baseline;gap:2px;
  padding:5px 11px;border-radius:9px;
  background:rgba(123,77,255,.14);
  border:1px solid rgba(150,120,255,.32);
  color:#f0e9ff;font-family:inherit;font-size:15px;font-weight:800;
  cursor:pointer;transition:.15s;
}
.dp-yearbtn:hover,.dp-monthbtn:hover{
  background:rgba(123,77,255,.3);
  border-color:rgba(169,125,255,.6);
  transform:translateY(-1px);
}
.dp-yearbtn i,.dp-monthbtn i{
  font-style:normal;font-size:11px;font-weight:600;
  color:#a99ed0;
}

/* 选择面板：盖在日历主体上 */
.dp-picker{
  position:absolute;left:50%;top:56px;transform:translateX(-50%);
  width:calc(100% - 28px);
  /* ── 必须完全不透明 ──
     原来写 rgba(30,18,62,.99)，看着接近不透明，
     但 .99 仍是带 alpha 的，且日历格子的文字/边框会透过来，
     用户看到「数字都堆在一起」（底下 1~30 的日历数字 + 上面 12 个年份）。
     现在用实色 + 双层保险：
       · background 用 #hex 纯色（无 alpha）
       · 再加一层不透明兜底 background-color
       · isolation 建立独立层叠上下文，防止下层元素穿插 */
  /* 双重实色：渐变两端都用 hex，background-color 再兜一层，
     保证任何像素都有实底，不会让下层透上来 */
  background-color:#1a0f38;
  background-image:linear-gradient(165deg,#1e123e,#100924);
  isolation:isolate;
  border:1px solid rgba(150,120,255,.5);
  border-radius:12px;padding:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(169,125,255,.14) inset;
  z-index:20;
}
/* 面板整体压住下层：插一个不透明背板，连 1px 缝隙都不透 */
.dp-picker::before{
  content:"";
  position:absolute;
  inset:-2px;                       /* 扩到边框外侧，连 1px 边缝都不留 */
  border-radius:14px;
  background:#170c30;               /* 比面板略深一档，形成实心底板 */
  z-index:-1;
  box-shadow:0 0 0 2px #170c30;     /* 再向外兜 2px 实色，防亚像素漏光 */
}
.dp-picker[hidden]{display:none;}
.dp-picker-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;font-size:12.5px;font-weight:700;color:#c9b6ff;
}
.dp-picker-x{
  width:24px;height:24px;border-radius:7px;
  background:rgba(123,77,255,.16);border:1px solid rgba(150,120,255,.28);
  color:#c9b6ff;font-size:15px;line-height:1;cursor:pointer;padding:0;
}
.dp-picker-x:hover{background:rgba(255,90,90,.28);color:#fff;}

.dp-pgrid{display:grid;gap:5px;}
.dp-pgrid-3{grid-template-columns:repeat(3,1fr);}
.dp-pgrid-4{grid-template-columns:repeat(4,1fr);}
.dp-pcell{
  padding:9px 0;border-radius:8px;
  /* 底色改成实色不透明：原来 .10 太透，面板底下日历数字会透上来 */
  background:#241548;
  border:1px solid rgba(150,120,255,.28);
  color:#e2d8ff;font-family:inherit;font-size:13px;font-weight:800;
  cursor:pointer;transition:.13s;
  font-variant-numeric:tabular-nums;
}
.dp-pcell:hover{
  background:#33205f;
  border-color:rgba(169,125,255,.75);
  color:#fff;
}
.dp-pcell.on{
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(123,77,255,.5);
}
.dp-pnav-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:9px;font-size:11.5px;color:#9b90bf;
}
.dp-pnav{
  padding:5px 10px;border-radius:7px;
  background:#26174c;border:1px solid rgba(150,120,255,.32);
  color:#cfbfff;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;
}
.dp-pnav:hover{background:rgba(123,77,255,.3);color:#fff;}


/* ── 年/月面板展开时：日历主体压暗 ──
   即使面板已经不透明，边缘和缝隙处仍可能透出下层数字，
   用户反馈「数字都堆在一起」。这里再加一层遮罩彻底隔断。 */
/* ── 面板展开时：直接把日历主体隐藏 ──
   压暗（opacity .18）还会留残影，视觉复核仍能看到「鬼影数字」。
   这里改成 display:none —— 彻底不渲染，物理上不可能透光。
   面板关掉时恢复，因为 closePicker 会移除 picker-open 类。 */
.dp-root.picker-open .dp-week,
.dp-root.picker-open .dp-grid{
  display:none;
}
/* 底部按钮保留（今天/1990/2000/关闭 仍可用），但压暗一点不抢焦点 */
.dp-root.picker-open .dp-foot{
  opacity:.55;
  pointer-events:none;
}
/* 面板本身要保持清晰 */
.dp-root.picker-open .dp-picker{
  opacity:1;
  filter:none;
  pointer-events:auto;
}

/* ══════════ chart-starfield.css ══════════ */
/* ───────── 星盘星空背景 + 悬停卡 + 空态 CTA ───────── */

/* 星点轻微闪烁（每颗 delay 不同，避免整片同步闪） */
@keyframes chartStarTwinkle{
  0%,100%{opacity:.85}
  50%    {opacity:.35}
}
#bigchart .chart-star{
  animation:chartStarTwinkle 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  #bigchart .chart-star{animation:none}
}

/* 空盘/未排盘中心 CTA：多层呼吸光晕 + 亮核脉动 */
@keyframes cectaHalo{
  0%  {transform:scale(1);    opacity:.9}
  70% {transform:scale(1.28); opacity:0}
  100%{transform:scale(1.28); opacity:0}
}
#bigchart .cecta-halo,
#bigchart .cecta-halo2,
#bigchart .cecta-halo3{
  transform-box:fill-box;transform-origin:center;
  animation:cectaHalo 3s ease-out infinite;
}
#bigchart .cecta-halo2{animation-delay:1s}
#bigchart .cecta-halo3{animation-delay:2s}
/* 中心亮核：明暗呼吸，让「亮着」这件事持续可见 */
@keyframes cectaGlow{
  0%,100%{opacity:.55;transform:scale(1)}
  50%    {opacity:1;  transform:scale(1.05)}
}
#bigchart .cecta-glow{
  transform-box:fill-box;transform-origin:center;
  animation:cectaGlow 2.6s ease-in-out infinite;
}
/* 提示文字也要闪，不然在星空上不显眼 */
@keyframes cectaHint{
  0%,100%{opacity:.75}
  50%    {opacity:1}
}
#bigchart .cecta-hintline{animation:cectaHint 2s ease-in-out infinite}
@keyframes cectaStar{
  0%,100%{opacity:.7;transform:scale(1)}
  50%    {opacity:1; transform:scale(1.16)}
}
#bigchart .cecta-star{
  transform-box:fill-box;transform-origin:center;
  animation:cectaStar 2.2s ease-in-out infinite;
}
/* 悬停：整个圆都亮起来（外圈三道光环 + 中心核 + 实底同时加亮） */
#bigchart #chart-empty-cta:hover .cecta-bg,
#bigchart #chart-center-cta:hover .cecta-bg{
  fill:rgba(78,44,150,.98);
  stroke:#ffffff;
  stroke-width:3;
}
#bigchart #chart-empty-cta:hover .cecta-glow,
#bigchart #chart-center-cta:hover .cecta-glow{
  fill:rgba(168,85,247,.52);
}
/* 悬停时光环不再脉动扩散，而是变成常亮的粗描边——「整个圆亮起来」 */
#bigchart #chart-empty-cta:hover .cecta-halo,
#bigchart #chart-center-cta:hover .cecta-halo,
#bigchart #chart-empty-cta:hover .cecta-halo2,
#bigchart #chart-center-cta:hover .cecta-halo2,
#bigchart #chart-empty-cta:hover .cecta-halo3,
#bigchart #chart-center-cta:hover .cecta-halo3{
  animation:none;
  opacity:1;
  transform:scale(1);
  filter:drop-shadow(0 0 14px rgba(168,85,247,.95));
}
#bigchart #chart-empty-cta:hover .cecta-halo,
#bigchart #chart-center-cta:hover .cecta-halo{stroke:#f0e9ff; stroke-width:3.2}
#bigchart #chart-empty-cta:hover .cecta-halo2,
#bigchart #chart-center-cta:hover .cecta-halo2{stroke:#a855f7; stroke-width:2.6}
#bigchart #chart-empty-cta:hover .cecta-halo3,
#bigchart #chart-center-cta:hover .cecta-halo3{stroke:#5ec8ff; stroke-width:2}

/* ───────── 星座悬停讲解卡 ───────── */
.sign-hover-card{
  position:fixed;z-index:150;left:0;top:0;
  width:min(330px,calc(100vw - 32px));
  padding:14px 16px;
  border-radius:13px;
  background:linear-gradient(165deg,rgba(28,17,58,.98),rgba(14,8,34,.99));
  border:1px solid color-mix(in srgb,var(--sac,#7b4dff) 55%,transparent);
  box-shadow:
    0 18px 48px rgba(0,0,0,.66),
    0 0 0 1px color-mix(in srgb,var(--sac,#7b4dff) 22%,transparent) inset,
    0 0 26px color-mix(in srgb,var(--sac,#7b4dff) 28%,transparent);
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  pointer-events:none;
}
.sign-hover-card.on{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.shc-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.shc-glyph{
  font-size:22px;line-height:1;color:var(--sac,#c9b6ff);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--sac,#7b4dff) 70%,transparent));
}
.shc-head b{font-size:15.5px;color:#f0e9ff;font-weight:800}
.shc-elem{
  margin-left:auto;font-size:10.5px;font-style:normal;font-weight:800;
  padding:2px 9px;border-radius:999px;
  color:var(--sac,#c9b6ff);
  background:color-mix(in srgb,var(--sac,#7b4dff) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--sac,#7b4dff) 42%,transparent);
}
.shc-sub{
  font-size:11.5px;line-height:1.65;color:#a99ed0;
  padding-bottom:9px;margin-bottom:9px;
  border-bottom:1px solid rgba(150,120,255,.16);
}
.shc-line{font-size:12.5px;line-height:1.75;color:#e0d4ff;margin-bottom:9px}
.shc-line b{color:#fff;font-weight:700}
.shc-seg{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:8px 10px;border-radius:9px;margin-bottom:6px;
  background:color-mix(in srgb,var(--sac,#7b4dff) 11%,transparent);
  border-left:2.5px solid color-mix(in srgb,var(--sac,#7b4dff) 60%,transparent);
}
.shc-house{font-size:12px;font-weight:700;color:#e0d4ff;flex:none}
.shc-pct{
  font-size:10.5px;font-weight:800;color:var(--sac,#c9b6ff);
  padding:1px 6px;border-radius:999px;
  background:color-mix(in srgb,var(--sac,#7b4dff) 20%,transparent);flex:none;
}
.shc-seg em{
  flex:1 1 100%;font-size:11.5px;line-height:1.6;
  color:var(--ink-2,#b9abd8);font-style:normal;
}
.shc-planets{
  font-size:11px;line-height:1.6;color:#ffd6a5;
  padding-top:7px;margin-top:7px;
  border-top:1px dashed rgba(150,120,255,.18);
}

/* ───────── 未输入命盘的引导条 ───────── */
.missing-hint{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  /* 现在它位于星盘「正上方」：上不贴标题、下紧贴盘沿 */
  margin:0 auto 14px;padding:13px 16px;border-radius:12px;
  background:linear-gradient(120deg,rgba(123,77,255,.16),rgba(94,200,255,.08));
  border:1px solid rgba(150,120,255,.38);
  position:relative;overflow:hidden;
  max-width:700px;
}
/* 内嵌一层微星点，避免「一条纯色提示条」 */
.missing-hint::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 34% 76%, rgba(201,182,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 58% 22%, rgba(255,255,255,.62), transparent),
    radial-gradient(1px 1px at 78% 68%, rgba(180,220,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 92% 36%, rgba(255,255,255,.55), transparent);
}
.mh-ico{
  flex:none;font-size:22px;color:#c9a0ff;
  filter:drop-shadow(0 0 10px rgba(168,85,247,.7));
}
.mh-body{flex:1 1 320px;min-width:0;position:relative}
.mh-body b{display:block;font-size:14px;color:#f0e9ff;margin-bottom:4px}
.mh-body span{font-size:12.5px;line-height:1.7;color:#b9abd8}
.mh-btn{
  flex:none;appearance:none;border:0;cursor:pointer;
  padding:10px 22px;border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  box-shadow:0 6px 20px rgba(123,77,255,.45);transition:.18s;
  position:relative;
}
.mh-btn:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(123,77,255,.6)}
@media (max-width:640px){
  .missing-hint{padding:13px 15px}
  .mh-btn{width:100%;text-align:center}
}

/* ── 已排盘圆心：悬停整体发亮 + 显示「切换命盘」提示 ── */
#bigchart #chart-center-cta.center-switch .switch-hint{
  opacity:0;transition:opacity .2s ease;
}
#bigchart #chart-center-cta.center-switch:hover .switch-hint{opacity:1}
#bigchart #chart-center-cta.center-switch:hover .cecta-bg{
  fill:rgba(78,44,150,.98);
  stroke:#ffffff;
  stroke-width:2.6;
}
#bigchart #chart-center-cta.center-switch:hover .cecta-halo{
  stroke:#c9a0ff;
  stroke-width:2.6;
  filter:drop-shadow(0 0 16px rgba(168,85,247,.95));
  animation:none;
}

/* ══════════ persona.css ══════════ */
/* ───────── 人格屏（五合一子标签） ───────── */
.persona-tabs{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 18px;max-width:820px;
}
.pt-tab{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;
  padding:9px 22px;border-radius:999px;
  color:#b9abd8;background:rgba(22,14,48,.62);
  border:1px solid rgba(150,120,255,.28);
  transition:.2s;white-space:nowrap;
  /* 每个子标签也是一小块星空 */
  background-image:
    radial-gradient(circle .9px at 24% 32%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(circle .7px at 70% 68%, rgba(201,182,255,.42) 0%, transparent 100%);
}
.pt-tab:hover{
  color:#fff;background-color:rgba(123,77,255,.3);
  border-color:rgba(150,120,255,.55);
}
.pt-tab.on{
  color:#fff;
  background-image:
    radial-gradient(circle .9px at 22% 34%, rgba(255,255,255,.7) 0%, transparent 100%),
    linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;
  box-shadow:0 6px 20px rgba(123,77,255,.5);
  font-weight:700;
}
.persona-panel{display:none}
.persona-panel.on{display:block}

/* ── 人格屏：五套体系一页排满，不用子标签切换 ──
   用户要求「全部一页排满，内容不要分不同 tag」。
   改成两列网格，五块内容并排展开，滚动一次看完。
   子标签栏保留但隐藏（切换逻辑照旧，不影响旧代码取节点）。 */
#s-persona .persona-tabs{display:none}
#s-persona .persona-panel{display:block !important}
#s-persona .persona-panel + .persona-panel{margin-top:18px}
/* MBTI 块占满整行（内容最多），其余四块走两列 */
#s-persona .persona-panel[data-ppanel="mbti"]{grid-column:1 / -1}

/* ── 人格彩色框 + 标题栏 + 分享 ── */
.pcard{
  padding:18px 20px;border-radius:16px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--pc) 12%,transparent), transparent 46%),
    linear-gradient(165deg, rgba(20,12,44,.82), rgba(11,6,26,.88));
  border:1px solid color-mix(in srgb,var(--pc) 40%,transparent);
  box-shadow:
    0 12px 40px rgba(0,0,0,.42),
    inset 0 0 0 1px color-mix(in srgb,var(--pc) 12%,transparent);
  position:relative;overflow:hidden;
}
/* 框内星点 */
.pcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle 1px at 16% 20%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(circle .8px at 72% 44%, color-mix(in srgb,var(--pc) 70%,#fff) 0%, transparent 100%),
    radial-gradient(circle .9px at 38% 76%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(circle .8px at 88% 22%, rgba(180,220,255,.45) 0%, transparent 100%);
}
.pc-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--pc) 24%,transparent);
  position:relative;
}
.pc-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.pc-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--pc);
  box-shadow:0 0 10px color-mix(in srgb,var(--pc) 85%,transparent);
  animation:pcDot 2.4s ease-in-out infinite;
}
@keyframes pcDot{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.pc-title b{font-size:16.5px;font-weight:800;color:#f0e9ff;letter-spacing:.01em}
.pc-desc{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.pc-share{
  appearance:none;cursor:pointer;flex:none;
  font-family:inherit;font-size:12px;font-weight:700;
  padding:7px 18px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb,var(--pc) 70%,#0000), var(--pc));
  border:0;
  box-shadow:0 5px 16px color-mix(in srgb,var(--pc) 45%,transparent);
  transition:.18s;
}
.pc-share:hover{transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--pc) 60%,transparent)}
/* 无盘时的输入引导 */
.pc-empty{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:13px 16px;border-radius:12px;
  background:color-mix(in srgb,var(--pc) 10%,transparent);
  border:1px dashed color-mix(in srgb,var(--pc) 42%,transparent);
  font-size:12.5px;color:var(--ink-2);
}
.pc-input{
  appearance:none;cursor:pointer;flex:none;
  font-family:inherit;font-size:12.5px;font-weight:700;
  padding:9px 20px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border:0;box-shadow:0 5px 16px rgba(123,77,255,.45);
  transition:.18s;
}
.pc-input:hover{transform:translateY(-1px)}
@media (max-width:640px){ .pc-head{flex-direction:column} .pc-share{width:100%} }

/* ── 未排盘时的人格介绍卡 ── */
.pc-intro p{font-size:13px;line-height:1.9;color:var(--ink-2);margin:0 0 10px}
.pc-intro p b{color:#e0d4ff}
.pc-intro .pi-note{
  font-size:12px;color:var(--ink-3);margin-top:10px;padding-top:9px;
  border-top:1px dashed rgba(150,120,255,.2);
}
/* 整屏共用的输入入口 */
.persona-global{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin:20px auto 4px;padding:18px 22px;max-width:720px;border-radius:14px;
  background:linear-gradient(120deg,rgba(123,77,255,.16),rgba(94,200,255,.08));
  border:1px solid rgba(150,120,255,.38);
}
.pg-txt{font-size:13px;line-height:1.7;color:#c4b8e4}
.pg-btn{
  appearance:none;cursor:pointer;flex:none;font-family:inherit;
  font-size:13.5px;font-weight:700;padding:11px 26px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#a855f7);border:0;
  box-shadow:0 6px 20px rgba(123,77,255,.45);transition:.18s;
}
.pg-btn:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(123,77,255,.6)}
@media (max-width:640px){ .persona-global{flex-direction:column;text-align:center} }

/* ── 星盘标题旁的「切换命盘」按钮 ── */
.switch-chart-btn{
  appearance:none;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;gap:5px;
  margin-left:auto;
  font-family:inherit;font-size:12px;font-weight:700;
  padding:6px 14px;border-radius:999px;color:#c9b6ff;
  background:rgba(123,77,255,.16);
  border:1px solid rgba(150,120,255,.42);
  transition:.18s;
}
.switch-chart-btn:hover{
  color:#fff;background:rgba(123,77,255,.4);
  border-color:rgba(169,125,255,.8);
  box-shadow:0 0 14px rgba(123,77,255,.45);
}

/* ── MBTI 左右两栏 ── */
.mbti-split{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:16px;align-items:start;
}
@media (max-width:980px){ .mbti-split{grid-template-columns:1fr} }

/* ───────── 人格屏顶部引导卡（星空玻璃 + 霓虹按钮） ───────── */
.ph-card{
  position:relative;overflow:hidden;
  max-width:760px;margin:6px auto 22px;
  padding:34px 30px 30px;border-radius:20px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(123,77,255,.26), transparent 70%),
    linear-gradient(165deg, rgba(28,17,60,.92), rgba(12,7,30,.95));
  border:1px solid rgba(169,125,255,.42);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(123,77,255,.10) inset;
  backdrop-filter:blur(18px) saturate(1.2);
}
/* 顶部一圈霓虹光晕 */
.ph-glow{
  position:absolute;left:50%;top:-70px;transform:translateX(-50%);
  width:340px;height:200px;pointer-events:none;
  background:radial-gradient(ellipse, rgba(168,85,247,.5), transparent 68%);
  filter:blur(28px);
  animation:phGlow 5s ease-in-out infinite;
}
@keyframes phGlow{0%,100%{opacity:.55}50%{opacity:.95}}
/* 内嵌星点 */
.ph-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(circle 1.1px at 14% 22%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(circle .9px at 82% 30%, rgba(201,182,255,.65) 0%, transparent 100%),
    radial-gradient(circle 1px at 36% 78%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(circle .9px at 68% 84%, rgba(180,220,255,.5) 0%, transparent 100%),
    radial-gradient(circle 1px at 92% 62%, rgba(255,255,255,.5) 0%, transparent 100%);
}
/* 星芒图标：圆形 + 霓虹外发光 */
.ph-ico{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle, rgba(168,85,247,.42), rgba(123,77,255,.10) 70%);
  border:1px solid rgba(201,160,255,.6);
  box-shadow:
    0 0 26px rgba(168,85,247,.7),
    0 0 60px rgba(123,77,255,.4),
    inset 0 0 18px rgba(201,160,255,.28);
  position:relative;
}
.ph-ico span{
  font-size:24px;color:#f0e9ff;line-height:1;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.9));
  animation:phStar 3s ease-in-out infinite;
}
@keyframes phStar{0%,100%{opacity:.75;transform:scale(.94) rotate(0)}50%{opacity:1;transform:scale(1.08) rotate(12deg)}}
.ph-title{
  font-size:22px;font-weight:800;color:#ffffff;margin:0 0 10px;
  letter-spacing:.01em;line-height:1.4;position:relative;
}
.ph-sub{
  font-size:13.5px;line-height:1.85;color:#b9abd8;
  margin:0 auto 18px;max-width:560px;position:relative;
}
.ph-points{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-bottom:22px;position:relative;
}
.ph-points span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:#c4b8e4;
  padding:6px 13px;border-radius:999px;
  background:rgba(123,77,255,.13);
  border:1px solid rgba(150,120,255,.28);
}
.ph-points i{
  font-style:normal;font-size:10px;font-weight:800;
  color:#c9a0ff;
}
/* 主按钮：霓虹渐变 + 外发光 */
.ph-btn{
  appearance:none;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:800;color:#fff;
  padding:14px 38px;border-radius:999px;border:0;
  background:linear-gradient(135deg,#8b5cf6,#a855f7 55%,#c026d3);
  box-shadow:
    0 10px 34px rgba(139,92,246,.62),
    0 0 0 1px rgba(201,160,255,.35) inset;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ph-btn em{font-style:normal;font-size:16px;transform:translateY(-1px)}
.ph-btn:hover{
  /* 只提亮阴影，不位移（人格区禁止面积变化） */
  transform:none;
  box-shadow:
    0 16px 46px rgba(139,92,246,.82),
    0 0 0 1px rgba(220,200,255,.55) inset;
}
@media (max-width:640px){
  .ph-card{padding:26px 18px 22px;margin:4px auto 18px}
  .ph-title{font-size:18px}
  .ph-btn{width:100%;justify-content:center}
  /* ⚠️ 手机版人格引导卡的星芒圆必须居中（主上 2026-11-13「附件3，手机版，没有登陆前，
     人格下面框里的圆圈没有居中」）──
     实测（390×844 未登录）：.ph-ico 计算 margin 是「0px 4px 16px」，
     而 persona.css 里写的是「margin:0 auto 16px」——auto 没生效，
     圆圈 x=33 而居中该在 x=167，偏左 134px（约 36% 卡宽）。
     原因：.ph-card 是 block 容器且 .ph-ico 是 flex 子项，
     margin:auto 在这个组合下被压缩成 4px。
     ⇒ 用 flex 居中 + !important 钉死，不依赖 auto 的解析差异。 */
  .ph-card{display:flex !important;flex-direction:column !important;align-items:center !important}
  .ph-ico{
    margin:0 0 16px 0 !important;
    align-self:center !important;
    flex:0 0 auto !important;
  }
  /* 卡片内其它块级内容要恢复满宽，否则被 flex 挤压 */
  .ph-card > .ph-title,
  .ph-card > .ph-sub,
  .ph-card > .ph-tags,
  .ph-card > .ph-btn,
  .ph-card > .ph-glow{width:100% !important;max-width:100% !important}
  .ph-card > .ph-glow{position:absolute !important}
}


/* ═══════════════════════════════════════════════════════
   人格区：悬停只变背景，不改面积 / 不位移
   ───────────────────────────────────────────────────────
   问题（用户原话「鼠标移过去，面积放大了，只需要背景变化，不需要改变面积」）：
     · .persona-panel 用了 transition:all
     · .ph-card 也用了 transition:all
     transition:all 会把 transform / height / padding 等一切属性一起过渡，
     内部按钮 .ph-btn:hover 的 translateY(-2px) 会带动整块视觉位移，
     看起来就是「面积变大」。
     · .ph-glow 是 absolute + top:-70px + height:200px，
       hover 时它会参与卡片视觉边界，让卡片显得向上长高。

   本段做法：
     1. 所有人格卡片 transition 收窄到只过渡「颜色 / 阴影」，
        明确排除 transform、height、padding、margin、width。
     2. hover 只改背景（叠一层星云光）与边框亮度，绝不位移、绝不改尺寸。
     3. .ph-btn 保留自身悬停位移（按钮是独立元件），
        但通过 isolation 让它不影响父卡片感知。
   ═══════════════════════════════════════════════════════ */

/* ── 收窄过渡：只过渡可以「只变样子」的属性 ── */
.persona-panel,
.persona-panel.pcard,
.ph-card,
.ph-ico,
.pcard{
  transition-property:background, background-color, background-image,
                      border-color, box-shadow, color, opacity, filter;
  transition-duration:.26s;
  transition-timing-function:ease;
}

/* ── 悬停：只变背景，尺寸/位置一律不动 ──
   注意：这里绝不能写 width/height/max-width/padding/margin，
   任何一条都会让内部可用宽度变化，文字重新折行，卡片高度随之跳
   （实测 width:auto;height:auto 覆盖了 .ph-card 的 max-width:760px，
     内部宽度 698→758，高度 324→268）。 */
.persona-panel:hover,
.persona-panel.pcard:hover,
.ph-card:hover,
.pcard:hover{
  transform:none !important;
  /* 背景：叠一层圆形星云光（screen 混合，只提亮不遮挡） */
  background-image:
    radial-gradient(ellipse 62% 78% at 26% 22%, rgba(168,85,247,.26), transparent 70%),
    radial-gradient(ellipse 56% 72% at 78% 80%, rgba(94,200,255,.16), transparent 72%);
  border-color:rgba(190,160,255,.5);
}

/* ph-card 本来就有自己的渐变背景，hover 时在原有之上叠星云 */
.ph-card:hover{
  background-image:
    radial-gradient(ellipse 64% 80% at 28% 20%, rgba(168,85,247,.30), transparent 70%),
    radial-gradient(ellipse 58% 74% at 76% 82%, rgba(94,200,255,.18), transparent 72%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(123,77,255,.26), transparent 70%),
    linear-gradient(165deg, rgba(28,17,60,.92), rgba(12,7,30,.95));
}

/* ph-glow 绝对定位的影子层不参与边界：hover 时也不改它的 top/height */
.ph-card .ph-glow{
  top:-70px;
  height:200px;
}

/* 防止内部按钮位移带动整卡视觉（按钮自身仍可动） */
.ph-card{ isolation:isolate; }
.ph-btn{ isolation:isolate; }


/* ── 锁死尺寸：悬停绝不改变卡片盒子 ──
   实测 hover 时 .ph-card 高度 324→468、.persona-panel 223→195，
   说明有规则在改高度。这里一次性锁死，只允许颜色/背景变化。 */
.ph-card,
.ph-card:hover,
.persona-panel,
.persona-panel:hover,
.persona-panel.pcard,
.persona-panel.pcard:hover{
  transition-property:background-color, background-image, border-color,
                      box-shadow, color, opacity;
  transition-duration:.24s;
  transition-timing-function:ease;
}
/* 禁止任何尺寸/位移属性进入过渡 */
.ph-card:hover,
.persona-panel:hover,
.pcard:hover{
  transform:none !important;
  translate:none !important;
  scale:none !important;
  rotate:none !important;
  /* 不写 min-height/max-height/height —— 一旦覆盖，卡片会被压矮
     （实测写 min-height:inherit 后 .ph-card 高度从 324 掉到 268） */
}

/* ph-glow 是装饰性光斑，永远不参与布局
   ── 为什么加了这条还是撑高 ──
   .ph-glow 是 position:absolute + top:-70px + height:200px。
   它对父级本来不占流内空间，但当父级 .ph-card 有 overflow:hidden 时，
   绝对定位子元素仍会影响 scroll 高度计算（部分浏览器会把
   top:-70 到 height 200 的范围算进可滚动区域），进而让 offsetHeight 变大。
   彻底解决：把 top 改成正向偏移并用 transform 上移 —— transform 不参与布局。 */
.ph-card > .ph-glow{
  position:absolute;
  pointer-events:none;
  top:0 !important;
  height:200px !important;
  transform:translateY(-70px);
}

/* ══════════ planetlock.css ══════════ */
/* ───────── 星球密码（首页英雄区右侧交互装置） ───────── */
.hero-art{
  justify-self:stretch;align-self:center;
  /* viewBox 500 里圆直径 336（67.2%），要圆回到 540px 视觉直径
     ⇒ 容器 = 540 / 0.672 ≈ 804px。同时受视口高度约束（矮窗不溢出）。 */
  width:100%;max-width:1045px;
  position:relative;
  /* 用户：「你把这个放大最右面就行。光圈跟最右的圆点保持很小的距离」
     实测光圈右 1457、右侧圆点左 1453 → 重叠 4px，推过头了，要回退 14px。
     ⚠️ margin-right 对 justify-self:stretch 的网格项无效（实测改完读数纹丝不动），
        必须用 transform 位移。 */
  /* 实测（这次量对了）：**可见光环外沿** r=210 在最右 1381，
     右侧圆点左 1453 → 真实间隙 72px。
     （之前报的 2px 是错量到光晕渐变半径 258 —— 那部分几乎全透明，肉眼看不见。）
     目标间隙 ~10px ⇒ 右移 62px。 */
  transform:translateX(56px);
}

.pl-wrap{
  display:flex;flex-direction:column;align-items:center;
  position:relative;          /* 给 .pl-head 的绝对定位做参照 */
  padding:0;
  /* ★ 2026-11-07 用户要求「外面的框去掉」：
     原来这里是一层圆角矩形卡片（深紫底 + 1px 紫边 + 8px 模糊 + 16/14px 内边距）。
     现在全部拆掉，圆盘直接浮在星空上，四周不留框、不留底。
     注意：hero 大框不在这个文件里（那是 space.css 的 .hero），这里只拆星球密码自己的框。 */
  background:none;
  border:0;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.pl-head{
  /* ★ 2026-11-07：标题已移进 SVG 的「第五环」标题带里（见 planetlock.js 的
     pl-band-title / pl-band-sub）。这里的 HTML 版本隐藏，避免重复显示。
     用户口径：「这个是包在紫色光环里面的，你可以理解为 第五环」。 */
  display:none;
}
.pl-title{
  display:block;font-size:14px;font-weight:800;color:#e8e0ff;
  letter-spacing:.04em;
}
.pl-sub{
  display:block;font-size:10.5px;color:#9489b5;margin-top:3px;
  letter-spacing:.02em;
}

/* 盘面 */
.pl-stage{
  /* viewBox 528（四周各留 96 给光晕，实测需要 82，留余量）
     ⇒ 圆直径 336 占容器 336/528 = 63.6%。
     要保持圆的视觉直径：容器宽 = 目标直径 ÷ 0.636。目标 540 → ≈ 849。

     ★ 2026-11-07 加：还要受**视口高度**约束。
       实测 458×520 的小窗口里圆盘底部超出可视区 67px（不是 SVG 画布裁切，
       是整块比屏幕高）；而 390×844 / 768×900 都完整。
       所以上限取「宽度允许」与「高度允许」的较小值：
       屏高减去顶栏(96) + 标题(≈46) + 屏内上下 padding(≈122) 后，留给圆。
       用 min() 让两个条件同时成立，矮窗自动缩圆、不裁切。 */
  width:100%;aspect-ratio:1/1;
  max-width:1045px;
  margin:0 auto;
  position:relative;
  touch-action:none;      /* 移动端拖动不触发页面滚动 */
  user-select:none;
}
.pl-svg{display:block;width:100%;height:100%;overflow:visible;cursor:grab}
body.pl-dragging .pl-svg{cursor:grabbing}
body.pl-dragging{user-select:none}

/* 环扇区过渡 */
.pl-sec{transition:fill .18s ease,stroke .18s ease,stroke-width .18s ease}

/* ── 鼠标移到轮盘 → 整盘发紫光 ──
   用户要求「鼠标移到轮盘，轮盘要发紫光」。
   实现：.pl-stage:hover 时给 SVG 上 drop-shadow 紫色光晕（沿圆形轮廓扩散），
   同时把三环的描边提亮一档。用 filter 而不是 box-shadow，因为要沿圆的形状发光而不是方框。 */
.pl-svg{
  transition:filter .38s ease;
}
/* 只有真的指在盘面上才发光（.pl-stage 有 :hover 判定，键盘聚焦也照顾到） */
.pl-stage:hover .pl-svg,
.pl-stage:focus-within .pl-svg{
  filter:
    drop-shadow(0 0 10px rgba(168,85,247,.58))
    drop-shadow(0 0 26px rgba(139,92,246,.36))
    drop-shadow(0 0 52px rgba(109,74,255,.22));
}
/* 环线同步提亮：让光有「从环里透出来」的感觉 */
.pl-stage:hover .pl-sec{
  stroke:rgba(168,120,255,.34);
}
.pl-stage:hover .pl-frame{
  animation-duration:1.6s;   /* 悬停时呼吸更快，像被激活 */
}
/* 触屏设备没有 hover，用按下来给同样的反馈 */
@media (hover:none){
  .pl-stage:active .pl-svg{
    filter:
      drop-shadow(0 0 10px rgba(168,85,247,.62))
      drop-shadow(0 0 26px rgba(139,92,246,.42));
  }
}

/* ── 顶部对准格：只用光晕勾勒，不用实心色块 ──
   用户指出「鼠标移过去，不要显示块状」。
   原来 fill 是 rgba(123,77,255,.42) 一整块紫色 = 硬色块。
   现在填充接近透明，靠描边加亮 + drop-shadow 光晕表现「被选中」。

   ★ 2026-11-07 用户第二次纠正：「这个亮着的框不要动，只是文字在变。」
     原实现把高亮挂在扇区上，而扇区跟着 rot 转 ⇒ 亮框本身在环上滑动。
     现在高亮拆成两层：
       .pl-frame    = 固定在正上方 -15°~+15° 的取景框（位置永不变）
       .pl-lab-top  = 转到框内的那个标签（随环转，进框时提亮加粗）
     观感就是「框钉住不动，框里的字一格一格换过去」。 */
.pl-sec.pl-top{
  filter:drop-shadow(0 0 6px rgba(180,140,255,.9))
         drop-shadow(0 0 14px rgba(140,100,255,.55));
}

/* 固定取景框：位置不动，只做呼吸光晕 */
.pl-frame{
  filter:drop-shadow(0 0 6px rgba(190,150,255,.85))
         drop-shadow(0 0 14px rgba(140,100,255,.45));
  animation:plFrameBreath 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes plFrameBreath{
  0%,100%{ opacity:.82; }
  50%    { opacity:1; }
}

/* ── 最外沿亮边已移除 ──
   用户：「星座密码的环，他的亮边不用显示出来」——
   JS 里那条 rgba(255,252,255,.98) 的实线已删，这里对应的呼吸动画一并清掉。
   现在光环只保留三层弥散光晕（模糊的紫雾），没有硬边。 */

/* 当前落在取景框里的那个标签：更亮、带光晕 */
.pl-lab-top{
  filter:drop-shadow(0 0 4px rgba(255,255,255,.75))
         drop-shadow(0 0 10px rgba(190,150,255,.6));
}

/* 解锁提示 */
.pl-msg{
  min-height:0;max-height:0;overflow:hidden;
  opacity:0;transition:.25s ease;
  text-align:center;width:100%;
}
.pl-msg.on{
  max-height:70px;opacity:1;margin-top:8px;
}
.pl-msg b{
  display:block;font-size:13px;color:#5eead4;font-weight:800;
  letter-spacing:.03em;
}
.pl-msg span{
  display:block;font-size:11px;color:#9de8d8;margin-top:3px;
}
/* 答案提示 */
.pl-tip{
  max-height:0;overflow:hidden;opacity:0;transition:.25s ease;
  font-size:11px;color:#ffd6a5;text-align:center;width:100%;
}
.pl-tip.on{max-height:40px;opacity:1;margin-top:6px}

/* 底部按钮 */
.pl-foot{display:flex;gap:8px;margin-top:10px}
.pl-btn{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:700;
  padding:7px 18px;border-radius:999px;color:#fff;
  background:rgba(123,77,255,.3);
  border:1px solid rgba(150,120,255,.45);
  transition:.16s;
}
.pl-btn:hover{background:rgba(123,77,255,.5);border-color:rgba(180,150,255,.75)}
.pl-btn.ghost{
  background:transparent;color:#a99ed0;
  border-color:rgba(150,120,255,.25);
}
.pl-btn.ghost:hover{color:#d8ccff;border-color:rgba(150,120,255,.5);background:rgba(123,77,255,.14)}

/* 解锁时整盘外发光 */
.pl-stage:has(.pl-svg)::after{content:none}

@media (max-width:1000px){
  /* 450 也要受视口高度约束，否则矮窗会溢出（实测 458×520 溢出 67px） */
  .hero-art{max-width:780px;margin-right:0}
  .pl-stage{max-width:780px}
}




/* ═══════════════════════════════════════════════════════
   圆心登录圆（HTML 层，浮在 SVG 之上、不随环转）
   ───────────────────────────────────────────────────────
   用户要求（2026-11-07）：
     「登陆、密码 等基本登陆内容放到圆心的圆内。整个圆要放到，可以看清楚登陆。
       打乱、看答案就不要了（这样圆就有更多的空间）」
   所以圆心半径从 50/320 放大到 84/360（画布占比 23% → 47%）。
   ═══════════════════════════════════════════════════════ */
.pl-core{
  position:absolute;left:50%;top:50%;
  /* 直径 = CORE_R*2/VIEW = 212/360 = 58.89%（CORE_R 84→106，圆心放大）
     ⚠️ 只给 width + aspect-ratio:1，不能给 height:% ——
        父级 .pl-stage 的 height 会被内容撑大（实测 400 vs 377），
        按百分比算 height 会得到椭圆。用 aspect-ratio 锁死正圆。 */
  /* ⚠️ 必须同时 min-height:0 + overflow:hidden：
     flex 容器的自动最小尺寸会让内容把盒子撑高（实测 169×180 的椭圆），
     锁死比例 + 裁切超出的部分。 */
  /* ⚠️ 直径必须 = CORE_R*2 / VIEWBOX边长 = 212/528 = 40.15%
     原来写 58.89%（那是 viewBox=360 时代的 212/360），
     viewBox 改到 528 后没同步 ⇒ 圆心长得比内环起点还大，实测压住了三层转盘。
     这是「登录圆心和转盘叠在一起」的真正原因。 */
  /* ⚠️⚠️ 圆心直径必须 = CORE_R*2 / viewBox边长
     当前 CORE_R=80、viewBox=500 ⇒ 160/500 = **32%**
     历史：曾写 58.89%（vbox360时代）、40.15%（vbox528时代）、39.4%，
     每次改 viewBox 或 CORE_R 都忘了同步 ⇒ 圆心长得比第三环还大，
     把整个星体环（80~102）盖住 —— 这就是「看不到第三层字」的真正原因。
     实测证据：40.15% 在 607px 容器里 = 244px 直径 = 半径 100 SVG > 环内沿 80。 */
  /* ★ 圆心直径 = CORE_R*2 / viewBox边长
     当前 CORE_R=88.3、viewBox=540 ⇒ 176.6/540 = **32.7%**
     历史教训：这个百分比曾因不同步出现过 58.89 / 40.15 / 32 / 33.2 四个错值。
     **改 CORE_R 或 viewBox，必须同步改这里**，并跑核验：
       圆心半径(SVG) <= 内环 rIn(88.3) 才算对。 */
  width:32.7%;aspect-ratio:1/1;min-height:0;overflow:hidden;box-sizing:border-box;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* ── 中心圆 = 第 4 个圆 = 黄（亮度最大）──
     用户第 2 条：红→紫→蓝→黄，黄最亮；第 3 条：鼠标移到中心要发黄光。
     底色用黄的低透明径向渐变压在深底上：中间偏暖、边缘收到深紫，
     既保留星空的通透感，又能一眼看出这是第 4 个（黄）圆。
     强度取 10%/4%（更亮的版本会被看成"这圈在发光"，与"只要最外沿亮"冲突）。 */
  /* 黄底（第 4 个圆 = 黄，恢复版） */
  background:
    radial-gradient(circle at 50% 30%, rgba(255,214,10,.10), rgba(255,196,40,.04) 46%, rgba(24,14,38,.96) 76%),
    rgba(20,13,34,.97);
  /* 用户「我只要最外面的边亮」——中心圆彻底不发光：
     外发光 + 内发光都去掉，只留一条 1px 暗金细线做区域分界。 */
  border:1px solid rgba(255,214,10,.12);
  box-shadow:none;
  z-index:4;
  transition:border-color .3s ease, box-shadow .34s ease, background .34s ease;
}



.pl-core-inner{

  to  { transform:translate(-50%,-50%) rotate(360deg); }
}
/* ③ 鼠标移到中心 → 发黄光（比三环任何一档都强：模糊更大、透明度更高） */
.pl-core:hover,
.pl-core:focus-within{
  /* 基态不发光（发光边只留给最外沿），鼠标移进来才发黄光 —— 这是用户第 3 条明确要的 */
  border-color:rgba(255,224,60,.92);
  box-shadow:
    0 0 26px rgba(255,214,10,.72),
    0 0 68px rgba(255,196,40,.46),
    0 0 120px rgba(255,180,0,.24),
    inset 0 0 40px rgba(255,214,10,.22);
}
.pl-core.busy{border-color:rgba(94,234,212,.8)}
.pl-core[data-pane="done"]{border-color:rgba(94,234,212,.75)}



/* 中心圆本体要盖住 ::before 的边缘（overflow:hidden 已有），内容层上浮 */
.pl-core-inner{
  width:82%;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  line-height:1.22;
}
.pl-core-brand{
  /* 用户「只需要 星座.live 就行」——原「登录」标题已删，
     这里成为圆心唯一的标题行，所以放大一档并撑开下边距，
     补上原来两行让出的空间，视觉重心仍在圆心上半部。 */
  font-size:15px;font-weight:800;letter-spacing:.05em;
  color:rgba(255,232,140,.98);margin:0 0 8px;line-height:1.25;
  text-shadow:0 0 16px rgba(255,206,60,.5);
}
.pl-core-brand i{font-style:normal;color:rgba(94,200,255,.9)}
/* .pl-core-title 已停用：用户要求「只需要 星座.live」，
   四个面板（登录/注册/找回密码/已登录）的标题行已从 DOM 中移除。
   规则暂留空壳，避免旧缓存页面出现无样式标题。 */
.pl-core-title{
  font-size:0;line-height:0;height:0;overflow:hidden;margin:0;
}

/* 面板切换：只显示 data-pane 对应的那一块 */
.pl-core-pane{display:none;flex-direction:column;align-items:center;width:100%}
.pl-core[data-pane="login"]  .pl-core-pane[data-p="login"],
.pl-core[data-pane="reg"]    .pl-core-pane[data-p="reg"],
.pl-core[data-pane="forgot"] .pl-core-pane[data-p="forgot"],
.pl-core[data-pane="done"]   .pl-core-pane[data-p="done"]{display:flex}

.pl-core input{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:13px;line-height:1.3;
  padding:6px 9px;margin-bottom:5px;
  border-radius:8px;
  color:#f0eaff;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(150,120,255,.30);
  outline:none;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.pl-core input::placeholder{color:rgba(180,168,210,.55)}
.pl-core input:focus{
  border-color:rgba(180,140,255,.85);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(140,100,255,.16);
}
.pl-core button{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:12px;font-weight:800;
  font-size:13.5px;letter-spacing:.05em;line-height:1.3;
  padding:7px 0;margin-top:2px;
  border-radius:999px;cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.55);
  box-shadow:0 4px 14px rgba(109,74,255,.42);
  transition:.16s;
}
.pl-core button:hover:not(:disabled){
  background:linear-gradient(135deg,#9d6fff,#7c5cff);
  box-shadow:0 6px 18px rgba(109,74,255,.55);
}
.pl-core button:disabled{opacity:.55;cursor:default}

.pl-core-links{
  display:flex;justify-content:center;gap:14px;
  margin-top:6px;width:100%;line-height:1.2;
}
.pl-core-links a{
  font-size:10.5px;line-height:1.2;color:rgba(170,158,205,.85);
  text-decoration:none;border-bottom:1px dotted transparent;
  transition:.15s;
}
.pl-core-links a:hover{color:#d8ccff;border-bottom-color:rgba(180,150,255,.6)}

.pl-core-who{
  font-size:12px;font-weight:700;color:#e8e0ff;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-bottom:7px;
}

/* 圆心在手机上要更小一点，避免压住内环标签 */
@media (max-width:1000px){
  .pl-core-inner{width:86%}
  .pl-core input{font-size:11px;padding:5px 8px;margin-bottom:4px}
  .pl-core button{font-size:11.5px;padding:6px 0}
}

/* ═══════════════════════════════════════════════════════
   大圆盘（#bigchart）元素配色 —— 星盘本体
   ───────────────────────────────────────────────────────
   用户纠正：「是大的圆盘，不是密码那个圆盘」
   目标 = 星盘屏的命盘本体 #bigchart > .chart-wheel > svg（672×672）
   外圆 r=350，外面还有一圈 r=356 的发光环。

   火象 红 / 土象 黄褐 / 风象 青蓝 / 水象 蓝紫
   JS 只在指针落入圆内时写 data-elem，CSS 取色画光环。
   ═══════════════════════════════════════════════════════ */
#bigchart{ position:relative; }
#bigchart[data-elem]{ --elem:168,120,255; }
#bigchart[data-elem="fire"]{ --elem:255,122,89; }   /* #ff7a59 星盘火 */
#bigchart[data-elem="earth"]{ --elem:255,196,107; } /* #ffc46b 星盘土 */
#bigchart[data-elem="air"]{ --elem:94,200,255; }    /* #5ec8ff 星盘风 */
#bigchart[data-elem="water"]{ --elem:157,123,255; } /* #9d7bff 星盘水 */
/* 圆盘本体：元素色发光（drop-shadow 沿圆形轮廓扩散，不是方框）
   ── SVG 必须 overflow:visible ──
     浏览器对 <svg> 默认 overflow:hidden，超出 viewBox 的内容会被裁掉。
     实测：svg { overflow: "hidden" }，而 drop-shadow(0 0 48px) 是画在
     SVG 的渲染层上、向外扩散 48px —— 右侧正好被裁成直角缺口，
     用户看到的「不是一个完整的圆」就是这个原因（像素测量：右侧 57°~93° 全黑）。
     显式声明 visible 后，光晕才能完整地扩到圆外。 */
#bigchart[data-elem] > svg{
  overflow:visible;
  filter:
    drop-shadow(0 0 8px  rgba(var(--elem),.90))
    drop-shadow(0 0 22px rgba(var(--elem),.60))
    drop-shadow(0 0 48px rgba(var(--elem),.35));
  transition:filter .35s ease;
}
/* 未悬停也保持 overflow:visible（否则静止态的常驻光波边缘也会被裁） */
#bigchart > svg{ overflow:visible; }

/* 外圈描边环：纯圆形（border-radius:50%），跟着圆盘尺寸走
   —— 前提：#bigchart 必须是定位父级，否则 ::after 会相对整页定位 */
#bigchart{ position:relative; }
#bigchart[data-elem]::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  /* ── 尺寸必须与 SVG 里的圆盘一致，不能直接用 100% ──
     #bigchart 是 SVG 的外接框（571×571），但 SVG 内部 viewBox 是 760×760、
     真正的圆盘 r=350（直径 700/760 = 92.1%）。
     原来写 width/height:100% → 环直径 571px，而圆盘只有 526px，
     差 45px，环悬在圆盘外面，和视觉上的盘边对不上（看着就不像"圆盘的环"）。
     现在按 700/760 精确取 92.105%。 */
  width:92.105%; height:92.105%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2.5px solid rgba(var(--elem),.90);
  box-shadow:
    0 0 14px rgba(var(--elem),.85),
    0 0 38px rgba(var(--elem),.55),
    inset 0 0 24px rgba(var(--elem),.20);
  pointer-events:none;
  /* ── 必须浮在 SVG 之上 ──
     伪元素默认绘制在宿主内容之下，而 #bigchart 的子元素是整个星盘 SVG。
     结果是这条 2.5px 的元素色描边环被 SVG 的深色圆盘盖住，
     只有超出圆盘的那一点点露出来 —— 表现就是「环不完整、右侧断口」。
     z-index:3 把它提到 SVG 之上，环才能连成一整圈。 */
  z-index:3;
  animation:discRing 2.6s ease-in-out infinite;
}
@keyframes discRing{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.015); }
}

@media (prefers-reduced-motion: reduce){
  #bigchart[data-elem]::after{ animation:none; }
}


/* ═══════════════════════════════════════════════════════
   圆盘内的常驻光波（app.js renderChart 里生成 .disc-wave）
   ───────────────────────────────────────────────────────
   用户要求：
     「只要在命盘圆圈内容，光的波浪线要一直在」
     「土元素波峰波谷最大，其次风元素、水元素、再其次是火元素」

   两件事：
     ① 常驻：默认就可见，不依赖 hover
     ② 幅度分级（波峰波谷高低）：土 > 风 > 水 > 火
        用 CSS 变量 --disc-amp 控制，JS 在切换元素时改写。
        SVG 里 path 已按 amp=7 画好，改 --disc-amp 是整体放大系数。
   ═══════════════════════════════════════════════════════ */

/* ── 默认：紫金各半、常显、缓慢自转 ──
   ⚠️ 这里绝对不能写 color 或 currentColor！
      描边色由 SVG 内的 linearGradient(#discWaveSplit) 提供（左紫右金）。
      一旦写了 color + stroke:currentColor，渐变会被单色覆盖 ——
      表现就是「只看得到紫色，金色看不到」。
   辉光用白色系的 drop-shadow，不染色，避免把两色糊成一色。 */
.disc-wave-g{
  transform-origin:50% 50%;
  transform-box:fill-box;
  animation:discWaveSpin 26s linear infinite;
  transition:transform .4s ease, filter .35s ease;
}
.disc-wave-glow{
  filter:drop-shadow(0 0 7px rgba(205,180,255,.5))
         drop-shadow(0 0 16px rgba(255,215,150,.35));
}
.disc-wave-main{ filter:brightness(1.3); }

@keyframes discWaveSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* ── 幅度分级 ──
   scale 作用在整条波上：1.0 / 1.25 / 1.55 / 1.95
   土最大（1.95）> 风（1.55）> 水（1.25）> 火（1.0 最小） */
/* ═══════════════════════════════════════════════════════
   悬停四元素：颜色跟随元素色（不再是紫金）
   ───────────────────────────────────────────────────────
   用户最终口径：
     · 默认 / 鼠标移出 → 一半紫一半金（渐变）
     · 悬停到某个元素 → 整条波变成该元素的单色

   实现：用 --wave-stroke 这个变量决定描边。
     · 默认态未定义 --wave-stroke → 走 SVG 里的 url(#discWaveSplit) 渐变
     · 有 data-elem 时 → 变量被设成具体颜色，覆盖渐变
   CSS 无法「有条件地退回 url()」，所以用两层：
     · 基础规则显式写 stroke:url(#discWaveSplit)
     · 元素态规则写 stroke:<颜色> 优先级更高，覆盖掉
   同时保留幅度分级（土>风>水>火）。 */

/* 默认：紫金渐变（显式声明，避免被继承覆盖） */
.disc-wave-g .disc-wave{ stroke:url(#discWaveSplit); }

/* 悬停四元素：单色 + 幅度分级 */
#bigchart[data-elem="fire"]  .disc-wave{ stroke:rgba(255,122,89,.95); }
#bigchart[data-elem="water"] .disc-wave{ stroke:rgba(157,123,255,.95); }
#bigchart[data-elem="air"]   .disc-wave{ stroke:rgba(94,200,255,.95); }
#bigchart[data-elem="earth"] .disc-wave{ stroke:rgba(255,196,107,.95); }

#bigchart[data-elem="fire"]  .disc-wave-g{ --disc-amp:1.00; }
#bigchart[data-elem="water"] .disc-wave-g{ --disc-amp:1.25; }
#bigchart[data-elem="air"]   .disc-wave-g{ --disc-amp:1.55; }
#bigchart[data-elem="earth"] .disc-wave-g{ --disc-amp:1.95; }

/* 旋转中叠加幅度：用 wrapper 的 scale 与 keyframes 的 rotate 分开写会冲突，
   所以把 scale 放在 CSS 变量里，由 keyframes 的中间帧用 scale() 合成 */
#bigchart[data-elem] .disc-wave-g{
  animation:discWaveSpinAmp 26s linear infinite;
}
@keyframes discWaveSpinAmp{
  from{ transform:rotate(0deg)   scale(var(--disc-amp,1)); }
  to  { transform:rotate(360deg) scale(var(--disc-amp,1)); }
}

/* 未悬停也保持自转（默认 --disc-amp = 1） */
@media (prefers-reduced-motion: reduce){
  .disc-wave-g, #bigchart[data-elem] .disc-wave-g{ animation:none; }
}

/* ── 手机端：把圆盘放大到能吃满宽度（圆心登录区才有空间） ──
   实测 390 宽下链路上限：screen-inner 318 → hero padding 22×2 → hero-grid 274
   → pl-wrap padding 14×2 → stage 244 → 圆心 114px，输入框只有 ~93px，
   文字挤成一团。收掉两级 padding 并把 hero-art 上限解开。 */
@media (max-width:560px){
  /* 目标：手机上圆心登录区 ≥150px（桌面是 176px）。
     链路实测 390 宽：screen 377(pad 13) → screen-inner 307(margin 8) → hero 307(pad 12)
     → pl-wrap 284(pad 8) → stage 267 → core 124。逐级把横向 padding/margin 归零。 */
  #s-chart .screen-inner{margin:0;width:100%}
  #s-chart .hero{padding:16px 0 14px;border-radius:0;border-left:0;border-right:0}
  .hero-grid{gap:12px}
  /* 手机上同理：宽度交给 width:100%，但最大高度仍受视口约束（横屏矮窗尤其明显） */
  .hero-art{max-width:100%;margin:0}
  .pl-wrap{padding:10px 2px 8px;border-radius:14px;width:100%}
  .pl-stage{max-width:100%;width:100%}
  .pl-core-inner{width:88%}
  .pl-core-brand{font-size:11px}
  .pl-core-title{font-size:0;margin:0}
  .pl-core input{font-size:13.5px;padding:7px 10px;margin-bottom:6px}
  .pl-core button{font-size:14px;padding:8px 0}
  .pl-core-links a{font-size:11.5px}
  .pl-core-links{gap:14px;margin-top:7px}
}


/* ══════════ planetlock-mobile.css ══════════ */
/* ═══════════════════════════════════════════════════════════
   手机端登录（≤640px · #s-chart.pl-mobile）—— 纯 CSS 方案
   ───────────────────────────────────────────────────────────
   ⚠️ 血泪教训：**绝对不要把 .pl-core 从 #planet-lock 里搬走**。
      planetlock.js 里 showPane() / doLogin() / doRegister() / setUser()
      全部用 `root.querySelector(".pl-core")`（root = #planet-lock）。
      一旦搬出去：
        · 点「注册」「忘记密码」没反应（pane 永远卡在 login，实测）
        · 登录按钮 pl-go 的点击处理也查不到目标
      节点必须原地不动，只靠 CSS 改外观。

   实测问题（393×852）：圆盘 #planet-lock 在 hero-grid 里
     x=69 w=380 ⇒ right=449，超出 393 视口 56px，右侧星座环被切；
     圆心表单被星盘符号压住，邮箱框几乎看不见。

   方案：≤640px 时
     ① 圆盘 SVG 隐藏（.pl-svg）
     ② .pl-core 解除 absolute + aspect-ratio，变成满宽卡片
     ③ 整条容器链（hero-grid / hero-art / pl-wrap / pl-stage）宽度归零约束
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── ① 圆盘本体隐藏（只藏 SVG，不藏 .pl-core）── */
  #planet-lock .pl-svg{
    display:none !important;
  }
  /* .pl-stage 不再需要圆形尺寸，交回文档流 */
  #planet-lock{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    background:none !important;
  }

  /* ── ② .pl-core 变满宽卡片 ── */
  #planet-lock .pl-core{
    position:static !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    border-radius:16px !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    padding:18px 16px 16px !important;
    box-sizing:border-box !important;
    background:
      radial-gradient(ellipse 80% 70% at 50% 0%, rgba(123,77,255,.22), transparent 72%),
      rgba(14,8,32,.94) !important;
    border:1px solid rgba(160,130,255,.40) !important;
    box-shadow:0 16px 44px rgba(0,0,0,.46) !important;
  }
  /* 圆心的星空旋转层在方形卡片上只会碍眼 */
  #planet-lock .pl-core::before,
  #planet-lock .pl-core::after{
    display:none !important;
  }

  #planet-lock .pl-core-inner{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    padding:0 !important;
  }
  #planet-lock .pl-core-brand{
    font-size:16px !important;
    text-align:center !important;
    margin-bottom:14px !important;
    letter-spacing:.02em;
  }
  #planet-lock .pl-core-pane{
    width:100% !important;
  }

  /* ── ③ 输入框：16px 防 iOS 缩放、46px 触控高度 ── */
  #planet-lock .pl-core input{
    width:100% !important;
    font-size:16px !important;
    padding:12px 14px !important;
    margin-bottom:10px !important;
    border-radius:11px !important;
    min-height:46px !important;
    box-sizing:border-box !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(170,145,255,.52) !important;
    color:#fff !important;
  }
  #planet-lock .pl-core input::placeholder{
    font-size:15px !important;
    color:rgba(196,186,226,.72) !important;
  }
  #planet-lock .pl-core input:focus{
    background:rgba(255,255,255,.15) !important;
    border-color:rgba(195,168,255,.92) !important;
    box-shadow:0 0 0 3px rgba(140,100,255,.22) !important;
  }

  /* ── ④ 按钮：48px ── */
  #planet-lock .pl-core button{
    width:100% !important;
    font-size:16.5px !important;
    font-weight:800 !important;
    padding:13px 0 !important;
    min-height:48px !important;
    border-radius:11px !important;
    box-sizing:border-box !important;
    margin-top:4px !important;
  }
  #planet-lock .pl-core-links{
    display:flex !important;
    gap:20px !important;
    justify-content:center !important;
    margin-top:14px !important;
    flex-wrap:wrap !important;
  }
  #planet-lock .pl-core-links a{
    font-size:13.5px !important;
    padding:6px 4px !important;
    color:rgba(190,172,255,.95) !important;
  }

  /* ── ⑤ 整条容器链收进视口（不许右侧溢出）── */
  #s-chart,
  #s-chart .screen-inner,
  #s-chart .hero,
  #s-chart .hero-grid,
  #s-chart .hero-art,
  #s-chart .hero-copy,
  #s-chart .pl-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
    float:none !important;
  }
  #s-chart .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
    grid-template-columns:none !important;
    padding:0 !important;
  }
  #s-chart .hero-grid > *{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #s-chart .hero{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:0 !important;
    margin:0 !important;
  }
  #s-chart .hero-art{
    display:block !important;
    padding:0 !important;
    margin:10px 0 0 !important;
  }
  #s-chart .pl-wrap{
    padding:0 !important;
    margin:0 !important;
    display:block !important;
  }

  /* ── ⑥ 标题带 ── */
  #s-chart .pl-head{
    display:block !important;
    text-align:center;
    padding:2px 0 10px !important;
  }
  #s-chart .pl-title{font-size:15px !important;font-weight:800}
  #s-chart .pl-sub{font-size:11.5px !important;margin-top:3px}

  /* ── ⑦ 提示信息 ── */
  #s-chart .pl-msg,
  #s-chart .pl-tip{
    font-size:12px !important;
    line-height:1.65 !important;
    text-align:center;
    margin-top:8px !important;
  }
}

@media (max-width: 380px){
  #planet-lock .pl-core input{font-size:15px !important;padding:11px 12px !important}
  #planet-lock .pl-core button{font-size:15.5px !important;padding:12px 0 !important}
  #planet-lock .pl-core{padding:15px 13px 13px !important}
}

/* ══════════ wb.css ══════════ */
/* 星座.live · 登录工作台样式（wb.css）
   体例对齐站点既有深紫星空语言；左导航 + 右内容；
   信息层级：品牌 → 用户 → 快问 → 分组导航 → 设置/切换
   ───────────────────────────────────────────── */

.wb{
  position:fixed; inset:0; z-index:900;
  display:none;
  grid-template-columns:248px 1fr;
  background:
    radial-gradient(ellipse 60% 45% at 12% 0%, rgba(123,77,255,.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 92% 88%, rgba(55,214,200,.10), transparent 70%),
    #080518;
  color:#eae4f8;
  font-family:inherit;
  overflow:hidden;          /* 动画层不外溢 */
}
.wb.on{display:grid}

/* ══════════════════════════════════════════════════════════
   工作台动态背景（用户：「工作台这个要是动态的啊。经典版也是动态的啊」）
   经典版靠 .orb 飘浮星云 + 星空 canvas 动起来；工作台原来是纯静态渐变。
   这里补三层动态，全部 pointer-events:none，不影响点击：
     ① .wb-aurora  两团缓慢漂移的星云（沿椭圆轨迹，34s / 46s）
     ② .wb-stars   星尘层，用 repeating-radial 造星点 + 整体缓慢平移
     ③ .wb-glow    右下角青色呼吸光，14s 一次明暗
   ══════════════════════════════════════════════════════════ */
.wb-aurora{
  position:absolute;inset:-18%;z-index:0;pointer-events:none;
  mix-blend-mode:screen;
}
.wb-aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(58px);
}
.wb-aurora i:nth-child(1){
  width:46%;height:52%;left:6%;top:2%;
  background:radial-gradient(circle, rgba(123,77,255,.42), transparent 66%);
  animation:wbDriftA 34s ease-in-out infinite alternate;
}
.wb-aurora i:nth-child(2){
  width:52%;height:46%;right:4%;bottom:4%;
  background:radial-gradient(circle, rgba(55,190,220,.30), transparent 68%);
  animation:wbDriftB 46s ease-in-out infinite alternate;
}
.wb-aurora i:nth-child(3){
  width:34%;height:36%;left:38%;top:44%;
  background:radial-gradient(circle, rgba(200,120,255,.22), transparent 70%);
  animation:wbDriftC 40s ease-in-out infinite alternate;
}
@keyframes wbDriftA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(46px,-38px,0) scale(1.13)}
}
@keyframes wbDriftB{
  from{transform:translate3d(0,0,0) scale(1.06)}
  to{transform:translate3d(-52px,34px,0) scale(1)}
}
@keyframes wbDriftC{
  from{transform:translate3d(0,0,0) scale(.94);opacity:.7}
  to{transform:translate3d(30px,42px,0) scale(1.1);opacity:1}
}

/* 星尘：两层不同密度的星点，整层缓慢平移，形成"星在流"的感觉 */
.wb-stars{
  position:absolute;inset:-50px;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 62% 14%, rgba(200,220,255,.48), transparent),
    radial-gradient(1px 1px at 84% 46%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.6px 1.6px at 34% 68%, rgba(210,190,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 74% 78%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.3px 1.3px at 8% 84%, rgba(190,215,255,.44), transparent),
    radial-gradient(1px 1px at 48% 40%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.2px 1.2px at 92% 8%, rgba(215,200,255,.36), transparent);
  background-size:520px 520px, 640px 640px, 430px 430px, 700px 700px,
                  560px 560px, 480px 480px, 610px 610px, 380px 380px;
  animation:wbStars 120s linear infinite;
  opacity:.9;
}
@keyframes wbStars{
  from{background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0}
  to{background-position:520px 260px, -640px 320px, 430px -215px, -700px 350px,
     560px 280px, -480px 240px, 610px -305px, 380px 190px}
}

/* 呼吸光：右下角一团缓慢明暗的青色，让静态处也有"活着"的感觉 */
.wb-glow{
  position:absolute;right:-10%;bottom:-14%;z-index:0;pointer-events:none;
  width:52%;height:56%;border-radius:50%;
  background:radial-gradient(circle, rgba(70,200,210,.18), transparent 66%);
  filter:blur(46px);
  animation:wbBreathe 14s ease-in-out infinite;
}
@keyframes wbBreathe{
  0%,100%{opacity:.45;transform:scale(1)}
  50%{opacity:1;transform:scale(1.09)}
}

/* 侧栏与主区要浮在动态层之上 */
.wb-side,.wb-main{position:relative;z-index:1}

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce){
  .wb-aurora i,.wb-stars,.wb-glow{animation:none !important}
}
body.wb-on{overflow:hidden}
body.wb-on #stage,
body.wb-on header.site,
body.wb-on #dots,
body.wb-on .nav-hint{display:none !important}

/* ───────── 侧栏 ───────── */
/* ★ 侧栏必须能滚：导航 21 项在 1100px 高的窗口里会被截断（实测底部 3 项点不到）。
   这里给 nav 单独滚动，品牌/用户/快问/底部按钮固定不动。 */
.wb-nav{
  flex:1 1 auto;
  min-height:0;              /* flex 子项默认 min-height:auto，不设 0 就滚不动 */
  overflow-y:auto;
  overflow-x:hidden;
  margin:0 -4px;
  padding:0 4px;
}

/* 主上（2026-11-09）：「logo 上面padding占的位置，太高了。调整。上下padding要对称。」
   原来：侧栏 20px 上 + 品牌块 6px 上 = 26px 顶；底部只有 14px。
   现在：侧栏统一 14px，品牌块底部也 14px ⇒ 上下都是 14px，对称。 */
.wb-side{
  display:flex;flex-direction:column;
  padding:10px 14px 6px;
  border-right:1px solid rgba(150,120,255,.14);
  background:linear-gradient(180deg, rgba(20,12,44,.72), rgba(10,6,26,.86));
  backdrop-filter:blur(14px);
  overflow-y:auto;
}
/* ⚠️ 附件7「整个布局不工整，按钮都贴到字上面了」：
   原来是 flex + gap:10px，折叠按钮紧贴 slogan 文字，且 72px 的 logo
   让整行高度不齐。
   改成 grid 三栏：[logo 62px][文字 1fr][按钮 28px]，
   中间列吃掉剩余空间 → 按钮永远贴右边缘，不会压在字上。 */
/* ⚠️ 实测：这条被后面的 .wb-brand{display:flex} 覆盖了（同文件后出现者胜），
   所以 grid 没生效。用 #wb 提权，确保真的是三栏。 */
/* 主上（2026-11-09 第 N 轮）：「上面的padding 还是太高了，要跟下面的padding 保持一致。」
   实测：侧栏 padding-top 14px + 品牌块 padding 0 + margin-bottom 14px
        ⇒ 视觉上「logo 可见顶」距侧栏顶 14px，品牌块底到导航 14px（数值已相等）。
   但 logo 的 SVG 在 72px 画布里四周有透明留白，视觉上仍显高。
   ⇒ 侧栏 padding 收到 10px，品牌块 margin-bottom 也 10px，保持严格对称。 */
#wb .wb-brand{
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr) 28px;
  align-items:center;
  column-gap:8px;
  /* 主上（2026-11-10）：「这条线要往上提，靠近logo。」
     横线放在块内 bottom:4px，所以块底 padding 收到 10px（给线 + 间距留位），
     块下 margin 保持 12px 让入口与线之间有余量。 */
  /* 线在块内（bottom:7px）。要让线贴近 slogan，必须让**块本身变矮**
     （只调 bottom 值会被 padding 抵消 —— 上面实测过：改 bottom 而 padding 同时涨，
      线的绝对 y 完全不动）。这里把块底 padding 压到 8px。 */
  padding:0 0 8px;
  margin-bottom:16px;
  position:relative;
}
/* 品牌文字块：允许收缩，超长省略（不挤按钮） */
.wb-brand .brand-txt,
.wb-brand .wb-brand-txt{
  min-width:0;
  overflow:hidden;
}
.wb-brand .brand-name,
.wb-brand .brand-slogan{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* 品牌下方加一条渐变细线，明确「这里是标题区」的分界 */
/* 主上（2026-11-09）：「工作台的logo，底下的线靠太近了，要分开一点。之前也是分开点的。」
   原来 bottom:10px，紧贴 slogan。下移到 -2px（即品牌块下沿之外），
   靠 .wb-brand 的 margin-bottom 撑开与导航的距离。 */
.wb-brand::after{
  content:"";
  /* 主上（2026-11-10）：「这条线要往上提，靠近logo。」
     实测修前：slogan 底→线 = 34px（太远）、线→入口 = 3px（太挤）。
     现在 bottom:4px：线落在块内、紧贴 slogan 下沿约 10px，与入口拉开到 ~14px。 */
  position:absolute;left:4px;right:4px;bottom:7px;height:1px;
  /* 原来两端全透明 + 中间仅 55%/42% 不透明度，在深色底上几乎看不见
     （视觉复核多次"找不到这条线"）。提到 85%/70% 并加一点辉光。 */
  background:linear-gradient(90deg,
    rgba(150,110,255,0), rgba(160,120,255,.85) 15%,
    rgba(110,205,255,.70) 60%, rgba(94,200,255,0));
  box-shadow:0 0 6px rgba(140,120,255,.5);
}
.wb-logo-wrap{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  transform-origin:50% 50%;
  /* 整体呼吸缩放放在包裹层（<svg> 根元素的 transform 会失效） */
  animation:wbLgBreath 7s ease-in-out infinite;
}
.wb-logo{
  flex:none;display:block;
  filter:drop-shadow(0 0 10px rgba(150,110,255,.75));
  /* ⚠️ SVG 内元素的 CSS transform 默认以元素自身 bbox 为原点，
     必须显式 origin 到圆心 (20,20)，否则会绕着左上角甩出去。
     viewBox 0 0 40 40 ⇒ 50% 50% 正好是圆心。 */
  transform-origin:50% 50%;
  overflow:visible;
  /* ⚠️ <svg> 根元素的 CSS transform 会覆盖它自己的 display 定位，
     呼吸缩放改由外层容器做（见 .wb-brand 的 wbLgBreath），
     这里只保留 filter 与外层 origin，避免 logo: null 的情况。 */
}

/* ── logo 内部动态（用户：「logo 那个圆还是没有动态运动」）──
   原来只是给工作台背景加了星云/星尘动画，logo 本身是死的。
   现在让它真的动：
     · 两条轨道环反向自转（环 + 电子在同一 <g> 里，电子贴着轨道跑）
     · 中心亮球脉动（模拟能量）
     · 外围星点呼吸闪烁
     · 整个 logo 轻微呼吸缩放，像在"活着" */
.wb-lg-o1{
  transform-origin:20px 20px;
  animation:wbLgSpin 9s linear infinite;
}
.wb-lg-o2{
  transform-origin:20px 20px;
  animation:wbLgSpinRev 13s linear infinite;
}
.wb-lg-core{
  transform-origin:20px 20px;
  animation:wbLgPulse 3.2s ease-in-out infinite;
}
.wb-lg-halo{
  transform-origin:20px 20px;
  animation:wbLgHalo 4.6s ease-in-out infinite;
}
.wb-lg-sparks{
  animation:wbLgTwinkle 5.5s ease-in-out infinite;
}

@keyframes wbLgSpin{
  from{transform:rotate(-28deg)}
  to{transform:rotate(332deg)}
}
@keyframes wbLgSpinRev{
  from{transform:rotate(38deg)}
  to{transform:rotate(-322deg)}
}
@keyframes wbLgPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.22);opacity:.86}
}
@keyframes wbLgHalo{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.12);opacity:.62}
}
@keyframes wbLgTwinkle{
  0%,100%{opacity:.95}
  45%{opacity:.42}
  70%{opacity:1}
}
@keyframes wbLgBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.055)}
}
.wb-brand-txt{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  line-height:1.1;
}

/* ── 主标题「星座生活工作台」──
   用户：「附件1的结构不能动，其它你想办法。」
   附件1 结构 = **1 行 2 列**：左 logo，右文字；文字区上下两行
                （上=主标题，下=副标题）。
   ★ 上一版我把副行拆成三行，破坏了这个结构 —— 现在恢复成两行，
     只在"一行之内"想办法：
       · 主标题：星座生活工作台（17px / 900）
       · 副标题：星座.live · 属于你的星座生活服务（10px / 500，单行）
     为解决之前"16 字挤 155px"的挤压问题，不用拆行，改成：
       ① 字号收到 10px，字距 .02em（比原来的 10.5px/.04em 更省空间）
       ② 用「·」代替并排的两个 span，减少一个 gap
       ③ 侧栏内边距从 14px 收到 12px，给文字区多 4px 宽 */
.wb-brand-name{
  display:block;
  white-space:nowrap;
  font-size:17px;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.3;
}
.wb-brand-name .wb-bn-main{
  background:linear-gradient(180deg,#ffffff 0%,#f6efff 52%,#e3d4ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.34)) drop-shadow(0 0 9px rgba(150,110,255,.3));
}
/* 用户：「附件2 改成 附件3」——主品牌改为「星座.live」
   金属材质 = 渐变 + 高光 + drop-shadow（text-shadow 会被 background-clip 裁掉） */
.wb-brand-main{
  font-size:19px;
  letter-spacing:.04em;
}
.wb-brand-name .wb-bn-dot{
  display:inline-block;
  margin:0 1px;
  font-style:normal;
  background:linear-gradient(180deg,#ffffff,#d8c8ff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* LIVE：紫→青双色，比主名亮一档（与经典版品牌同款） */
.wb-brand-name .wb-bn-live{
  background:linear-gradient(180deg,#e8dcff 0%,#b79bf5 42%,#7fd8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)) drop-shadow(0 0 10px rgba(140,190,255,.42));
}
/* 兼容旧 class（其它地方可能还在用） */
.wb-brand-name .wb-bn-ws{
  background:linear-gradient(180deg,#efe4ff 0%,#d3c2ff 48%,#b6d4ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.wb-brand-name .wb-bn-sep{display:none}

/* 副标题：**单行**（保持附件1 的两行结构），域名与说明用「·」连接 */
.wb-brand-sub-line{
  display:block;
  margin-top:4px;
  white-space:nowrap;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.02em;
  color:rgba(176,166,204,.82);
}
.wb-brand-sub-line i{
  font-style:normal;
  font-weight:700;
  color:rgba(184,158,255,.96);
}
.wb-brand-sub-line b{
  font-weight:500;
  color:rgba(176,166,204,.82);
}
/* 中间的「·」分隔（HTML 里用 <u> 承载，避免多一个 span 撑宽） */
.wb-brand-sub-line u{
  text-decoration:none;
  margin:0 4px;
  color:rgba(150,130,200,.6);
}
/* 旧版小圆点与「工作台」角标已停用（用户：logo 延续附件3） */
.wb-brand-sub{display:none}
.wb-dot{display:none}

.wb-user{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;margin-bottom:12px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(150,120,255,.16);
  /* 用户：「点击这个按钮，直接调到 设置的页面」
     加可点击反馈：手型、悬停高亮、右侧箭头，让它看得出是入口 */
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.wb-user:hover{
  background:rgba(126,92,255,.16);
  border-color:rgba(170,140,255,.42);
}
.wb-user:active{transform:scale(.985)}
.wb-user:focus-visible{
  outline:2px solid rgba(170,140,255,.7);
  outline-offset:2px;
}
/* 右侧箭头，提示"点进去" */
.wb-user-go{
  flex:none;margin-left:auto;
  font-size:17px;line-height:1;
  color:rgba(180,165,220,.55);
  transition:color .16s ease, transform .16s ease;
}
.wb-user:hover .wb-user-go{
  color:#cbb8ff;
  transform:translateX(2px);
}
.wb-avatar{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#5ec8ff);
  box-shadow:0 3px 10px rgba(109,74,255,.45);
}
.wb-user-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.wb-uname{font-size:12.5px;font-weight:700;color:#f0eaff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-uemail{font-size:10px;color:rgba(170,158,205,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.wb-ask-mini{
  display:flex;gap:6px;margin-bottom:14px;
}
.wb-ask-mini input{
  flex:1;min-width:0;
  font:inherit;font-size:11.5px;
  padding:7px 10px;border-radius:9px;
  color:#eee8fb;background:rgba(255,255,255,.06);
  border:1px solid rgba(150,120,255,.22);outline:none;
  transition:.16s;
}
.wb-ask-mini input::placeholder{color:rgba(170,158,205,.55)}
.wb-ask-mini input:focus{
  border-color:rgba(180,140,255,.8);
  box-shadow:0 0 0 3px rgba(140,100,255,.14);
}
.wb-ask-mini button{
  /* 用户：「箭头改成 "LIVE"」—— 32px 的圆形箭头装不下四个字母，
     改成自适应宽度的小胶囊，字距收紧保证在 250px 侧栏里不挤 */
  flex:none;min-width:44px;padding:7px 9px;border-radius:9px;cursor:pointer;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.5);
  transition:.16s;
}
.wb-ask-mini button:hover{background:linear-gradient(135deg,#9d6fff,#7c5cff)}

.wb-nav-group{margin-bottom:18px}
/* ── 导航分组标题（今天 / 我的命盘 / 解读 …）──
   第 4 版。用户：「我不喜欢框这种风格。」
   v3 做成圆角边框 + 渐变态的"标题条"，被否掉了。
   现在**不用任何框、不用底色块**，靠排版本身立标题：
     · 字号 15px / 900 / 字距 .18em（明显大于 12.5px 的导航项）
     · 大字 + 左侧发光色柱（色柱本身不算框，是"标记")
     · 标题下方一条**从实到虚的细分隔线**，线在标题下面而不是包住它
     · 上下留白拉开（上 18 / 下 9），靠"空白"做分组
   这是「无框但有层级」的经典做法：靠字号、留白、分隔线，不靠容器。 */
.wb-nav-h{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:900;
  letter-spacing:.18em;
  color:#ffffff;
  padding:0 0 7px;
  margin:18px 0 9px;
  border:0;
  background:none;
  border-radius:0;
  box-shadow:none;
  position:relative;
  text-shadow:0 0 14px rgba(170,130,255,.55), 0 1px 2px rgba(0,0,0,.6);
}
/* 标题下方的分隔线（实→虚），线在标题下面而不是包住它 */
.wb-nav-h::after{
  content:"";
  position:absolute;left:26px;right:0;bottom:1px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(255,205,90,.42) 0%, rgba(175,140,255,.22) 30%, rgba(175,140,255,0) 100%);
  pointer-events:none;
}
/* 第一个分组不要额外上边距 */
.wb-nav-group:first-child .wb-nav-h{margin-top:2px}
/* 左侧标记：紫金星球 + 完整土星环（内联 SVG，见 wb.js）
   用户：「环不完整 → 补上…我要完整的环。颜色跟附件一样。」
   又说：「要不你把这个图标，连同 金黄色的图标 都弄成动态，像logo 一样」
   ⚠️ 之前环不完整的原因：16px 的球用 CSS 伪元素画 20px 椭圆环，
      环必然超出父盒子边界被裁掉 → 永远缺一段。
      改用 SVG + viewBox 0 0 48 28，环完全落在画布内，不会被裁。
   图层顺序（关键）：后半环 → 球体 → 前半环，才有"环穿过球"的透视。
   配色跟附件一致：球体白高光→紫→深紫，环是浅蓝紫渐变。 */
.wb-nav-h::before{
  display:none;              /* 旧的纯 CSS 球停用，改由 SVG 呈现 */
}
.wb-nh-planet{
  flex:none;
  width:26px;height:15.2px;   /* 48:28 比例，正好容下完整环 */
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0 6px rgba(150,120,255,.65));
  animation:wbNpBreath 4.6s ease-in-out infinite;
  transform-origin:50% 50%;
}
/* 整颗星球轻微呼吸 */
@keyframes wbNpBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
/* ── 环自转 ──
   用户：「一个环就够了」—— 之前前后半环分两组、反相摆动，
   视觉上像"两条交叉的环"。现在前后段用**同一个关键帧、同相位**，
   整条环一起翻，看起来就是一条环在绕球转。
   ⚠️ SVG <g> 上的 transform 属性会被 CSS 动画覆盖，
      所以基准倾角 rotate(-16) 必须写进每一帧。 */
.wb-np-ring,
.wb-np-ring-front{
  transform-origin:24px 14px;
  animation:wbNpRingSpin 6s ease-in-out infinite;
}
@keyframes wbNpRingSpin{
  0%  {transform:rotate(-16deg) scaleY(1)}
  25% {transform:rotate(-4deg)  scaleY(.78)}
  50% {transform:rotate(-16deg) scaleY(.56)}
  75% {transform:rotate(-28deg) scaleY(.78)}
  100%{transform:rotate(-16deg) scaleY(1)}
}
.wb-nh-txt{min-width:0}
/* ── 导航项：参考经典版 nav.screens 的设计 ──
   用户：「附件2，主要是里面的内容不够好看，你参考 经典版。」
   经典版每个 tag 是「一小块星空」：极淡星点纹理 + 内高光 + 悬停发光 + 选中紫渐变。
   原工作台导航是纯文字 + 淡背景，显得单薄。这里把同样的质感搬过来。 */
.wb-nav-item{
  display:flex;align-items:center;gap:8px;
  width:100%;text-align:left;
  font:inherit;font-size:12.5px;font-weight:500;
  padding:8px 11px;margin-bottom:2px;
  border-radius:9px;cursor:pointer;
  color:rgba(214,206,238,.86);
  border:1px solid transparent;
  /* 每个导航项自己也是「一小块星空」 */
  background-color:transparent;
  background-image:
    radial-gradient(circle .8px at 76% 32%, rgba(255,255,255,.34) 0%, transparent 100%),
    radial-gradient(circle .6px at 88% 68%, rgba(190,215,255,.26) 0%, transparent 100%),
    linear-gradient(160deg, rgba(123,77,255,.06), rgba(255,255,255,0) 70%);
  transition:color .2s ease, background .2s ease, border-color .2s ease,
             box-shadow .2s ease, transform .12s ease;
}
.wb-nav-item:hover{
  color:#ffffff;
  background-color:rgba(123,77,255,.22);
  border-color:rgba(150,120,255,.42);
  box-shadow:0 0 14px rgba(123,77,255,.3);
  transform:translateX(1px);
}
.wb-nav-item.on{
  /* 选中态：紫渐变 + 星点，和经典版 on 态一致 */
  color:#ffffff;font-weight:700;
  background-color:transparent;
  background-image:
    radial-gradient(circle .9px at 70% 30%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(circle .7px at 84% 62%, rgba(255,255,255,.45) 0%, transparent 100%),
    linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;
  box-shadow:0 3px 16px rgba(123,77,255,.5),
             0 0 0 1.5px rgba(123,77,255,.18),
             inset 0 1px 0 rgba(255,255,255,.16);
  text-shadow:0 1px 2px rgba(30,10,60,.4);
  position:relative;
}
/* 金黄星球：同级别导航项**全部**显示（用户：「同级别的目录要素 金黄色球体」）
   选中态那颗球是亮的，未选中的压暗一点，但都在。 */
.wb-ni-planet{
  flex:none;
  width:13px;height:13px;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0 5px rgba(255,200,70,.55));
  opacity:.55;                 /* 未选中：压暗 */
  transition:opacity .18s ease, filter .18s ease, transform .18s ease;
}
.wb-nav-item:hover .wb-ni-planet{
  opacity:.85;
  filter:drop-shadow(0 0 6px rgba(255,200,70,.75));
}
.wb-nav-item.on .wb-ni-planet{
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(255,245,200,.95)) drop-shadow(0 1px 2px rgba(40,10,80,.6));
}
.wb-ni-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── 太阳式发光体：光晕要有明显起伏 ──
   用户：「光晕要动态的，我要看到变化。亮度要有高低起伏。
         截图是最低亮度，在这亮度上要体现动态变化。」

   ⚠️ 上一版失败原因：光晕只有 scale 1→1.16、opacity .8→1，
      在 13px 图标上是 1px 位移 + 20% 透明度变化 —— 远低于感知阈值。
      而且截图取在中间帧，看起来就是个"恒定光晕"。

   这一版的关键改动：
     1. 光晕**最低亮度也要看得见**（0.55 → 不是 0.35），
        这样"低谷帧"本身就有光晕，符合用户说的"在这亮度上体现变化"
     2. 起伏幅度拉到 **0.55 ↔ 1.0**（近两倍），scale **1 → 1.55**
        —— 肉眼能明显看到"一呼一吸"
     3. 再加一层**外扩光环**（.wb-ni-ring），峰值时向外炸开，
        低谷时收窄，这是最容易察觉的"变化"
     4. 三层周期错开（2.6s / 3.4s / 4.8s），不会同步卡顿
   ── */
.wb-ni-halo{
  transform-origin:12px 12px;
  animation:wbNiHaloBreathe 3.4s ease-in-out infinite;
}
@keyframes wbNiHaloBreathe{
  0%,100%{transform:scale(1);    opacity:.55}
  50%    {transform:scale(1.55); opacity:1}
}
/* 外扩光环：峰值向外炸开、低谷收回 —— 这个最难漏看 */
.wb-ni-ring{
  transform-origin:12px 12px;
  animation:wbNiRingPulse 2.6s ease-out infinite;
}
@keyframes wbNiRingPulse{
  0%  {transform:scale(.85); opacity:.75}
  60% {transform:scale(1.75); opacity:.12}
  100%{transform:scale(.85); opacity:.75}
}
.wb-ni-core{
  transform-origin:12px 12px;
  animation:wbNiCorePulse 4.8s ease-in-out infinite;
}
@keyframes wbNiCorePulse{
  0%,100%{transform:scale(1);    opacity:.75}
  50%    {transform:scale(1.45); opacity:1}
}
/* ⚠️ 整体呼吸必须写在 .wb-ni-planet 的同一条规则里，
   不能和 .wb-nav-item.on 的 transform:scale 分开写 —— 动画会覆盖 transform，
   分开写会导致选中项缩放失效。 */
.wb-ni-planet{
  animation:wbNiSunBreath 5.4s ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes wbNiSunBreath{
  0%,100%{transform:scale(.97); filter:brightness(.92)}
  50%    {transform:scale(1.06); filter:brightness(1.18)}
}
/* 未选中项也保留球（用户：「同级别的目录要素 金黄色球体」），不占位规则已删 */

.wb-side-foot{
  padding-top:10px;margin-top:6px;
  border-top:1px solid rgba(150,120,255,.12);
  display:flex;flex-direction:column;gap:6px;
}
.wb-side-foot button{
  font:inherit;font-size:11.5px;font-weight:600;
  padding:7px 10px;border-radius:9px;cursor:pointer;
  color:rgba(200,190,230,.85);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(150,120,255,.18);
  transition:.15s;
}
.wb-side-foot button:hover{
  color:#fff;background:rgba(123,77,255,.18);
  border-color:rgba(180,150,255,.4);
}

/* ───────── 主区 ───────── */
.wb-main{overflow-y:auto;padding:0}
.wb-topbar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;
  background:linear-gradient(180deg, rgba(8,5,24,.96), rgba(8,5,24,.72) 70%, transparent);
  backdrop-filter:blur(8px);
}
.wb-topbar h1{
  margin:0;font-size:21px;font-weight:800;
  letter-spacing:.01em;color:#f4efff;
}
.wb-topbar-r{display:flex;align-items:center;gap:12px}
.wb-date{
  font-size:11.5px;color:rgba(170,158,205,.8);
  letter-spacing:.02em;
}
.wb-fab{
  font:inherit;font-size:12px;font-weight:700;
  padding:7px 16px;border-radius:999px;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.5);
  box-shadow:0 4px 14px rgba(109,74,255,.4);
  transition:.16s;
}
.wb-fab:hover{background:linear-gradient(135deg,#9d6fff,#7c5cff)}

.wb-body{padding:4px 30px 60px;max-width:1200px}

/* ───────── 今日 ───────── */
.wb-hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:22px;
  padding:22px 24px;margin-bottom:16px;
  border-radius:16px;
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(123,77,255,.20), transparent 68%),
    rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.20);
  box-shadow:0 16px 44px rgba(0,0,0,.34);
}
.wb-hero-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  color:rgba(169,125,255,.92);margin-bottom:8px;
}
.wb-hero h2{
  margin:0 0 10px;font-size:24px;font-weight:800;
  color:#f6f1ff;letter-spacing:.01em;
}
.wb-meta{display:flex;flex-wrap:wrap;gap:7px}
.wb-meta span{
  font-size:11px;padding:4px 10px;border-radius:999px;
  color:rgba(214,206,238,.9);
  background:rgba(123,77,255,.16);
  border:1px solid rgba(150,120,255,.22);
}
.wb-words{
  margin:0;padding-left:16px;
  display:flex;flex-direction:column;gap:9px;
}
.wb-words li{
  font-size:12.5px;line-height:1.6;color:rgba(226,218,246,.94);
}
.wb-words li::marker{color:rgba(169,125,255,.9)}

.wb-askbar{
  display:flex;gap:9px;margin-bottom:22px;
}
.wb-askbar input{
  flex:1;min-width:0;font:inherit;font-size:13.5px;
  padding:13px 17px;border-radius:12px;
  color:#f2ecff;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(150,120,255,.26);
  outline:none;transition:.16s;
}
.wb-askbar input::placeholder{color:rgba(170,158,205,.6)}
.wb-askbar input:focus{
  border-color:rgba(180,140,255,.85);
  background:rgba(255,255,255,.085);
  box-shadow:0 0 0 4px rgba(140,100,255,.15);
}
.wb-askbar button{
  flex:none;font:inherit;font-size:13px;font-weight:700;
  padding:0 24px;border-radius:12px;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.5);
  box-shadow:0 6px 18px rgba(109,74,255,.4);
  transition:.16s;
}
.wb-askbar button:hover{background:linear-gradient(135deg,#9d6fff,#7c5cff)}
.wb-askbar.big input{font-size:15px;padding:16px 20px}
.wb-askbar.big button{padding:0 30px;font-size:14px}

.wb-sec-h{
  font-size:12px;font-weight:800;letter-spacing:.1em;
  color:rgba(169,125,255,.9);
  margin:0 0 12px;padding-left:2px;
}
.wb-dims{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
.wb-dim{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(150,120,255,.16);
}
.wb-dim-n{font-size:12px;color:rgba(214,206,238,.9)}
.wb-dim-v{font-size:19px;font-weight:800;letter-spacing:-.02em}
.wb-dim.hi .wb-dim-v{color:#5eead4}
.wb-dim.mid .wb-dim-v{color:#c9a0ff}
.wb-dim.lo .wb-dim-v{color:#ff9a8b}
.wb-dim i{
  position:absolute;left:0;bottom:0;height:3px;
  background:linear-gradient(90deg,rgba(139,92,246,.9),rgba(94,200,255,.75));
}
.wb-dim.lo i{background:linear-gradient(90deg,rgba(255,122,110,.9),rgba(255,196,107,.7))}

/* ───────── 通用卡 ───────── */
.wb-card{
  padding:20px 22px;margin-bottom:16px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.18);
}
.wb-card h3{
  margin:0 0 8px;font-size:15px;font-weight:800;color:#f4efff;
}
.wb-sub{
  margin:0 0 14px;font-size:12px;line-height:1.65;
  color:rgba(180,170,210,.8);
}
.wb-note{
  margin:12px 0 14px;font-size:11.5px;line-height:1.6;
  color:rgba(160,200,190,.85);
}
.wb-kv{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;margin-bottom:6px;
}
.wb-kv > div{
  display:flex;flex-direction:column;gap:3px;
  padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(150,120,255,.14);
  min-width:0;              /* grid 子项允许收缩，否则长邮箱会把格子撑破 */
}
.wb-kv span{font-size:10.5px;color:rgba(160,150,195,.8)}
/* 邮箱这类长串：不撑破格子、超长用省略号，鼠标悬停看全文（title 属性） */
.wb-kv b{
  font-size:13px;font-weight:700;color:#eee8fb;
  min-width:0;
  overflow-wrap:anywhere;   /* 邮箱没有空格，必须 allow break-anywhere 才不会溢出 */
  word-break:break-all;
  line-height:1.45;
}
/* 邮箱单独一行显示，避免和状态挤在一起 */
.wb-kv > div.wb-kv-wide{grid-column:1 / -1}
/* 注册时间这类定长串不折行（实测 "2026-11-08 00:45:36" 会被拆成两行） */
.wb-kv b.wb-kv-nowrap{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wb-btn{
  font:inherit;font-size:12.5px;font-weight:700;
  padding:10px 20px;border-radius:10px;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.5);
  box-shadow:0 5px 16px rgba(109,74,255,.36);
  transition:.16s;
}
.wb-btn:hover{background:linear-gradient(135deg,#9d6fff,#7c5cff)}
.wb-btn.ghost{
  color:rgba(214,206,238,.92);
  background:rgba(255,255,255,.05);
  border-color:rgba(150,120,255,.26);
  box-shadow:none;
}
.wb-btn.ghost:hover{background:rgba(123,77,255,.18);color:#fff}
.wb-btn.sm{font-size:11.5px;padding:8px 16px}

/* ───────── 命盘列表 ───────── */
.wb-chartlist{display:flex;flex-direction:column;gap:8px}
.wb-chartrow{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(150,120,255,.14);
}
.wb-chartrow.def{
  border-color:rgba(180,150,255,.42);
  background:rgba(123,77,255,.12);
}
.wb-chartrow-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.wb-chartrow-l b{font-size:12.5px;color:#f0eaff}
.wb-chartrow-l span{font-size:10.5px;color:rgba(170,158,205,.75)}
.wb-chartrow-r{display:flex;align-items:center;gap:7px;flex:none}
.wb-chartrow-r em{
  font-style:normal;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:999px;
  color:#5eead4;background:rgba(94,234,212,.14);
  border:1px solid rgba(94,234,212,.3);
}
.wb-chartrow-r button{
  font:inherit;font-size:10.5px;font-weight:600;
  padding:5px 11px;border-radius:8px;cursor:pointer;
  color:rgba(200,190,230,.86);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(150,120,255,.2);
  transition:.15s;
}
.wb-chartrow-r button:hover{color:#fff;background:rgba(123,77,255,.22)}

/* ───────── 表单 ───────── */
.wb-form{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;margin-bottom:14px;
}
.wb-form label{
  display:flex;flex-direction:column;gap:5px;
  font-size:11px;color:rgba(170,158,205,.85);
}
.wb-form input,.wb-form select{
  font:inherit;font-size:12.5px;
  padding:9px 12px;border-radius:9px;
  color:#f0eaff;background:rgba(255,255,255,.05);
  border:1px solid rgba(150,120,255,.22);outline:none;
}
.wb-form input:focus,.wb-form select:focus{
  border-color:rgba(180,140,255,.8);
  box-shadow:0 0 0 3px rgba(140,100,255,.14);
}
.wb-form select option{background:#150d30;color:#eee}

/* ───────── 历史 / 日历 ───────── */
.wb-hist{display:flex;flex-direction:column;gap:6px}
.wb-hist-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:inherit;text-align:left;width:100%;cursor:pointer;
  padding:10px 13px;border-radius:10px;
  color:rgba(226,218,246,.92);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.14);
  transition:.15s;
}
.wb-hist-row:hover{background:rgba(123,77,255,.14);border-color:rgba(180,150,255,.34)}
.wb-hist-q{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-hist-m{flex:none;font-size:10.5px;color:rgba(160,150,195,.7)}

.wb-cal7{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.wb-cal7-row{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:9px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.12);
  overflow:hidden;
}
.wb-cal7-row span{flex:none;width:44px;font-size:11px;color:rgba(170,158,205,.85)}
.wb-cal7-row i{
  position:absolute;left:58px;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(139,92,246,.85),rgba(94,200,255,.7));
}
.wb-cal7-row b{margin-left:auto;font-size:12.5px;color:#e8e0ff}

/* ───────── 空态 / 载入 ───────── */
.wb-empty{
  padding:60px 24px;text-align:center;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(150,120,255,.26);
}
.wb-empty h2{margin:0 0 8px;font-size:17px;color:#f0eaff}
.wb-empty p{margin:0 0 18px;font-size:12.5px;color:rgba(180,170,210,.8)}
.wb-empty-s{padding:22px;text-align:center;font-size:12px;color:rgba(160,150,195,.7)}
.wb-loading,.wb-err{
  padding:40px;text-align:center;font-size:12.5px;
  color:rgba(180,170,210,.8);
}
.wb-err{color:#ff9a8b}

/* ───────── 问事 ───────── */
.wb-askwrap{max-width:760px}
.wb-askwrap h2{margin:6px 0 8px;font-size:20px;font-weight:800;color:#f4efff}
.wb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wb-chips button{
  font:inherit;font-size:11.5px;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  color:rgba(214,206,238,.88);
  background:rgba(123,77,255,.12);
  border:1px solid rgba(150,120,255,.24);
  transition:.15s;
}
.wb-chips button:hover{color:#fff;background:rgba(123,77,255,.26);border-color:rgba(180,150,255,.5)}

/* ───────── 提问弹窗 ───────── */
.wb-askmodal{
  position:fixed;inset:0;z-index:950;
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.wb-askmodal.on{display:flex}
.wb-askmodal-bg{
  position:absolute;inset:0;
  background:rgba(4,2,14,.82);
  backdrop-filter:blur(6px);
}
.wb-askmodal-box{
  position:relative;z-index:1;
  width:min(760px,100%);max-height:88vh;
  display:flex;flex-direction:column;
  padding:0;
  border-radius:18px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(123,77,255,.18), transparent 70%),
    #100a26;
  border:1px solid rgba(150,120,255,.30);
  box-shadow:0 30px 80px rgba(0,0,0,.62);
}

/* ── 弹窗顶栏：左标题 / 右 分享·复制·读屏·关闭（附件1 模式）── */
.wb-mhead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 12px;flex:none;
  border-bottom:1px solid rgba(150,120,255,.20);
}
.wb-mhead-t{
  font-size:13.5px;font-weight:800;color:#f2ecff;letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-mhead-r{display:flex;align-items:center;gap:7px;flex:none}
.wb-mbtn{
  height:28px;padding:0 11px;border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:700;line-height:1;
  color:rgba(226,218,250,.94);
  background:rgba(126,92,255,.16);
  border:1px solid rgba(150,120,255,.30);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.wb-mbtn:hover{background:rgba(140,100,255,.30);color:#fff;border-color:rgba(178,152,255,.5)}
.wb-mbtn.share{
  background:linear-gradient(135deg,rgba(150,100,255,.5),rgba(88,168,255,.4));
  border-color:rgba(178,152,255,.55);color:#fff;
}
.wb-mbtn.share:hover{filter:brightness(1.14)}
.wb-mbtn.ic{width:28px;padding:0;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.wb-mbtn.ic.on{
  background:rgba(90,220,180,.30);
  border-color:rgba(90,220,180,.62);
  color:#9df3d6;
}
/* 朗读按钮播放/暂停态：播放中亮青色 + 轻微呼吸，暂停时普通 */
#wb-m-speak.on{
  animation:wbSpeakPulse 1.6s ease-in-out infinite;
}
@keyframes wbSpeakPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(90,220,180,.55)}
  50%    {box-shadow:0 0 0 5px rgba(90,220,180,0)}
}

/* ── 经典版弹窗（.modal-root）在工作台里必须浮在最上层 ──
   ⚠️ 实测问题：用户「点击中心点，命盘输入框要跳出来」——
      点击确实触发了（DOM 里 .modal-root 变成 "modal-root open"、
      birth-form-card 也进了弹窗），但**截图完全看不到弹窗**。
      根因：.modal-root 是 z-index:200，而工作台 .wb 是 900，
            弹窗被整个工作台盖住了。
   修法：工作台打开时把弹窗提到 1200（高于 .wb 的 900、
         但低于工作台自己的 .wb-askmodal 的 950 → 也一并高于）。 */
body.wb-on .modal-root{
  z-index:1200;
}
/* 工作台自己的统一弹窗也要在 .wb(900) 之上（原是 950，已够，这里显式固定） */
body.wb-on .wb-askmodal{
  z-index:1100;
}
.wb-mask{
  display:flex;align-items:center;gap:8px;flex:none;
  margin:12px 18px 4px;padding:7px 8px 7px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(150,120,255,.24);
}
.wb-mask input{
  flex:1;min-width:0;height:26px;border:0;outline:0;background:transparent;
  font-size:13px;color:#f0ebff;
}
.wb-mask input::placeholder{color:rgba(168,158,200,.72)}
.wb-mask button{
  flex:none;height:28px;padding:0 14px;border-radius:9px;cursor:pointer;
  font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#7b4dff,#59a0ff);border:0;
}
.wb-mask button:hover{filter:brightness(1.12)}

/* ── 弹窗正文（独立滚动，头/提问框固定）── */
.wb-mbody{
  flex:1;min-height:0;overflow-y:auto;
  padding:6px 18px 20px;
}
/* 主上：「右面的滚动条还是用5px」—— 弹窗正文也归"右侧滚动" */
.wb-mbody::-webkit-scrollbar{width:5px}
.wb-mbody::-webkit-scrollbar-track{background:transparent}
.wb-mbody::-webkit-scrollbar-thumb{background:rgba(150,120,255,.34);border-radius:99px}

/* ── 维度详情：附件1 版式 ── */
.wb-md-h{font-size:19px;font-weight:900;color:#f6f2ff;margin:6px 0 6px;line-height:1.35}
.wb-md-meta{font-size:11.5px;color:rgba(172,162,205,.92);line-height:1.7;margin-bottom:10px}
.wb-md-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px}
.wb-md-chips::-webkit-scrollbar{height:0}
.wb-mchip{
  flex:none;height:26px;padding:0 12px;border-radius:999px;cursor:pointer;
  font-size:11.5px;font-weight:700;white-space:nowrap;
  color:rgba(206,196,238,.9);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(150,120,255,.22);
}
.wb-mchip:hover{background:rgba(140,100,255,.2);color:#fff}
.wb-mchip.on{
  color:#fff;background:linear-gradient(135deg,rgba(150,100,255,.6),rgba(88,168,255,.5));
  border-color:rgba(190,166,255,.62);
}
.wb-md-score{display:flex;align-items:baseline;gap:12px;margin:4px 0 14px}
.wb-md-score b{font-size:52px;font-weight:900;line-height:1;color:#6fe3d3;
  text-shadow:0 0 22px rgba(111,227,211,.34)}
.wb-md.lo .wb-md-score b{color:#ffab6b;text-shadow:0 0 22px rgba(255,171,107,.3)}
.wb-md.mid .wb-md-score b{color:#c7b6ff;text-shadow:0 0 22px rgba(199,182,255,.3)}
.wb-md-score span{font-size:12.5px;color:rgba(190,180,220,.95)}
.wb-md-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.wb-md-cards>div{
  padding:10px 11px;border-radius:11px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(150,120,255,.18);
}
.wb-md-cards em{display:block;font-style:normal;font-size:10.5px;color:rgba(168,158,200,.86);margin-bottom:5px}
.wb-md-cards b{display:block;font-size:21px;font-weight:900;color:#f2ecff;line-height:1.1}
.wb-md-cards i{display:block;font-style:normal;font-size:10px;color:rgba(150,140,185,.8);margin-top:3px}
.wb-md-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:18px}
.wb-md-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#59a0ff,#6fe3d3);
  box-shadow:0 0 14px rgba(111,227,211,.42)}
.wb-md.lo .wb-md-bar i{background:linear-gradient(90deg,#ff7a59,#ffb26b)}
.wb-md-sec{margin-bottom:16px}
.wb-md-sec h4{
  font-size:12.5px;font-weight:800;color:#cbb8ff;margin:0 0 8px;
  padding-left:9px;border-left:3px solid rgba(160,120,255,.72);
}
.wb-md-lede{
  font-size:13.5px;line-height:1.85;color:#f2ecff;font-weight:600;
  margin:0 0 9px;padding:10px 13px;border-radius:10px;
  background:rgba(126,92,255,.12);
  border-left:3px solid rgba(160,120,255,.6);
}
.wb-md-sec ul{margin:0;padding-left:17px}
.wb-md-sec li{font-size:12.8px;line-height:1.95;color:rgba(222,214,244,.96);margin-bottom:5px}
.wb-md-sec ul.wb-basis li{font-size:11.8px;color:rgba(180,170,212,.94)}
.wb-md-note{font-size:11px;color:rgba(150,140,185,.86);margin:8px 0 0;line-height:1.7}
@media(max-width:640px){
  .wb-md-cards{grid-template-columns:repeat(2,1fr)}
  .wb-md-score b{font-size:42px}
  .wb-md-h{font-size:16.5px}
  .wb-askmodal{padding:10px}
  .wb-askmodal-box{max-height:94vh}
}
.wb-askmodal-x{
  position:absolute;right:14px;top:12px;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  font-size:17px;line-height:1;
  color:rgba(200,190,230,.8);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(150,120,255,.24);
}
.wb-askmodal-x:hover{color:#fff;background:rgba(123,77,255,.28)}

.wb-askloading{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:50px 0;font-size:13px;color:rgba(180,170,210,.85);
}
.wb-askloading i{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(169,125,255,.3);
  border-top-color:#a97dff;
  animation:wbspin .8s linear infinite;
}
@keyframes wbspin{to{transform:rotate(360deg)}}

.wb-ans-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  padding:4px 11px;border-radius:999px;margin-bottom:10px;
  color:#c9a0ff;background:rgba(123,77,255,.18);
  border:1px solid rgba(150,120,255,.3);
}
.wb-ans.hi .wb-ans-tag{color:#5eead4;background:rgba(94,234,212,.13);border-color:rgba(94,234,212,.32)}
.wb-ans.lo .wb-ans-tag{color:#ffb0a0;background:rgba(255,122,110,.13);border-color:rgba(255,122,110,.3)}

.wb-ans-h{
  margin:0 0 8px;font-size:20px;font-weight:800;line-height:1.35;
  color:#f6f1ff;
}
.wb-ans-q{
  font-size:12px;color:rgba(170,158,205,.8);
  padding-left:10px;border-left:2px solid rgba(150,120,255,.32);
  margin-bottom:14px;
}
.wb-ans-score{
  display:flex;align-items:baseline;gap:8px;
  margin-bottom:18px;
}
.wb-ans-score b{font-size:34px;font-weight:800;letter-spacing:-.03em;color:#c9a0ff}
.wb-ans.hi .wb-ans-score b{color:#5eead4}
.wb-ans.lo .wb-ans-score b{color:#ff9a8b}
.wb-ans-score span{font-size:11.5px;color:rgba(170,158,205,.8)}

.wb-ans-sec{margin-bottom:16px}
.wb-ans-sec h4{
  margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.12em;
  color:rgba(169,125,255,.92);
}
.wb-ans-sec ul{
  margin:0;padding-left:17px;
  display:flex;flex-direction:column;gap:7px;
}
.wb-ans-sec li{font-size:12.5px;line-height:1.65;color:rgba(226,218,246,.93)}
.wb-ans-sec li::marker{color:rgba(169,125,255,.8)}
.wb-basis li{
  font-size:11.5px;line-height:1.6;
  color:rgba(186,176,214,.9);
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
}
.wb-ans-warn{
  font-size:12px;line-height:1.65;
  padding:11px 14px;border-radius:10px;
  color:rgba(255,214,165,.92);
  background:rgba(255,196,107,.09);
  border:1px solid rgba(255,196,107,.22);
  margin-bottom:18px;
}
.wb-ans-acts{display:flex;flex-wrap:wrap;gap:9px}

/* ───────── 响应式：手机单列 ───────── */
@media (max-width:900px){
  .wb{grid-template-columns:1fr}
  .wb-side{
    position:fixed;left:0;top:0;bottom:0;width:250px;z-index:20;
    transform:translateX(-102%);
    transition:transform .24s ease;
  }
  .wb.side-open .wb-side{transform:none;box-shadow:14px 0 40px rgba(0,0,0,.6)}
  .wb-hero{grid-template-columns:1fr;gap:16px}
  .wb-topbar{padding:14px 16px 12px}
  .wb-topbar h1{font-size:18px}
  .wb-body{padding:4px 16px 70px}
  .wb-askbar{flex-direction:column}
  .wb-askbar button{padding:12px 0}
  .wb-askmodal{padding:12px}
  .wb-askmodal-box{padding:22px 18px 18px;max-height:92vh}
  .wb-ans-h{font-size:17px}
  .wb-ans-score b{font-size:28px}
  .wb-dims{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* 经典版顶栏的「工作台」按钮（登录后出现） */
#btn-to-workbench{
  /* 主上（2026-11-09）：「工作台 跟 算法tag，直接空间太多了，要跟其它tag的间隔一样。」
     实测：这个按钮**不在 nav.screens 里**，是 .bar 的直接子元素。
     间距 = nav.screens 的 margin-right:8px + 本按钮 margin-left:2px − 10px ≈ 20px，
     而 nav 内各 tag 之间只有 gap:7px ⇒ 视觉上大一倍多。
     ⇒ 这里 margin 归零，同时把 nav 的右 margin 收到 0，让它自然紧贴（见下条）。
     最终间距由 .bar 的 gap 统一给出，与 nav 内 7px 对齐。 */
  flex:none;margin-left:0;
  font:inherit;font-size:11.5px;font-weight:700;
  padding:7px 16px;border-radius:999px;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.55);
  box-shadow:0 4px 14px rgba(109,74,255,.4);
  transition:.16s;
}
#btn-to-workbench:hover{background:linear-gradient(135deg,#9d6fff,#7c5cff)}
@media (max-width:900px){
  #btn-to-workbench{font-size:10.5px;padding:6px 12px;margin-left:0}
}

/* ═══════════════════════════════════════════════════════
   滚动条：细、深色、不抢眼（用户：「工作台这个太粗了，要变细」）
   ───────────────────────────────────────────────────────
   工作台的两块滚动区（.wb-main 主内容、.wb-side 侧栏）原来用浏览器默认滚动条，
   在深色界面上是一条又宽又白的横杠，实测视觉上非常突兀。
   主上（2026-11-09）：「把这个滚动条也调整到最细。」
   ⇒ 从 6px 收到 **3px**（WebKit 最小可见宽度），滑块用渐变紫，
      去掉边框留白让整体更细更低调；悬停才提亮一次。 */
/* ══ 滚动条（主上 2026-11-09）══
   「滚动条我要的是之前紫色的，但是我要的是最细状态，你这个太粗了。」
   实测修前：::-webkit-scrollbar width:3px 已生效，但截图里是白色粗轨 + 灰色滑块 + 箭头，
   ⇒ 说明那个环境走的是**浏览器默认外观**（webkit 伪元素没吃到）。
   这里三管齐下，保证任何环境都是"最细的紫色"：
     ① ::-webkit-scrollbar 2px + 紫色滑块 + 全透明轨道
     ② scrollbar-width:thin 关掉（它会让 webkit 宽度失效，见下）
     ③ scrollbar-color 兜底紫色（Firefox / 不支持伪元素的环境）
     ④ 去掉两端箭头按钮与角落 */
/* 两侧分开设置（主上 2026-11-10：「右面的滚动条还是用5px」）：
   左边导航（.wb-nav）8px，右边主内容（.wb-main）5px。 */
.wb-main::-webkit-scrollbar{width:5px!important;height:5px!important;background:transparent!important}
.wb-nav::-webkit-scrollbar,
.wb-side::-webkit-scrollbar,
.wb-askmodal-box::-webkit-scrollbar,
.wb-mbody::-webkit-scrollbar{width:8px!important;height:8px!important;background:transparent!important}
.wb-main::-webkit-scrollbar-track,
.wb-nav::-webkit-scrollbar-track,
.wb-side::-webkit-scrollbar-track,
.wb-askmodal-box::-webkit-scrollbar-track,
.wb-mbody::-webkit-scrollbar-track{
  background:transparent!important;
  border:0!important;
}
.wb-main::-webkit-scrollbar-thumb,
.wb-nav::-webkit-scrollbar-thumb,
.wb-side::-webkit-scrollbar-thumb,
.wb-askmodal-box::-webkit-scrollbar-thumb,
.wb-mbody::-webkit-scrollbar-thumb{
  background:rgba(168,132,255,.85)!important;
  border-radius:99px!important;
  border:0!important;
  min-height:40px;
}
.wb-main::-webkit-scrollbar-thumb:hover,
.wb-nav::-webkit-scrollbar-thumb:hover,
.wb-side::-webkit-scrollbar-thumb:hover{
  background:rgba(200,178,255,.95)!important;
}
/* 去掉上下箭头与右下角方块（默认外观里最显眼的两块） */
.wb-main::-webkit-scrollbar-button,
.wb-nav::-webkit-scrollbar-button,
.wb-side::-webkit-scrollbar-button,
.wb-askmodal-box::-webkit-scrollbar-button{
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}
.wb-main::-webkit-scrollbar-corner,
.wb-nav::-webkit-scrollbar-corner,
.wb-side::-webkit-scrollbar-corner{
  background:transparent!important;
}
/* Firefox / 不支持 webkit 伪元素的环境：紫色细轨 */
@supports not selector(::-webkit-scrollbar){
  .wb-main,.wb-nav,.wb-side,.wb-askmodal-box,.wb-mbody{
    scrollbar-width:thin;
    scrollbar-color:rgba(168,132,255,.85) transparent;
  }
}

@supports not selector(::-webkit-scrollbar){
  .wb-main,.wb-side,.wb-askmodal-box,.wb-mbody{
    scrollbar-width:thin;
    scrollbar-color:rgba(170,140,255,.55) transparent;
  }
}

/* ═══════════════════════════════════════════════════════
   新增面板样式（2026-11-07 第八轮）
   ───────────────────────────────────────────────────────
   覆盖：12 维可点卡片、维度/日期详情、人格轴、月份走势、
        星座九宫格、节气/时辰网格、梦想列表、合盘结果
   ═══════════════════════════════════════════════════════ */

/* 12 维卡片做成按钮：去掉默认样式，加 hover 反馈 */
.wb-dim-btn{
  font:inherit;cursor:pointer;text-align:left;
  transition:background .16s,border-color .16s,transform .16s;
}
.wb-dim-btn:hover{
  background:rgba(123,77,255,.16);
  border-color:rgba(180,150,255,.44);
  transform:translateY(-1px);
}
.wb-dim-btn:active{transform:translateY(0)}

/* 人格轴（MBTI 两极滑块） */
.wb-axes{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.wb-axe{display:grid;grid-template-columns:44px 1fr 44px 44px;align-items:center;gap:10px;font-size:11.5px}
.wb-axe span{color:rgba(214,206,238,.7);white-space:nowrap;transition:.16s}
.wb-axe span.on{color:#fff;font-weight:700}
.wb-axe i{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.wb-axe i b{position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,rgba(139,92,246,.9),rgba(94,200,255,.75))}
.wb-axe em{font-style:normal;font-size:11px;color:rgba(169,125,255,.9);text-align:right}

/* 大号徽章（MBTI 代码 / 九型名称） */
.wb-big-badge{
  display:inline-block;margin:8px 0 10px;padding:6px 18px;border-radius:99px;
  font-size:19px;font-weight:800;letter-spacing:.06em;
  color:#f0eaff;background:rgba(123,77,255,.2);
  border:1px solid rgba(180,150,255,.4);
}

/* 特质条（大五 / 16PF / 合盘维度 / 星体落座共用） */
.wb-traits{display:flex;flex-direction:column;gap:8px}
.wb-trait{
  display:grid;grid-template-columns:76px 1fr 46px;align-items:center;gap:10px;
  font-size:11.5px;
}
.wb-trait span{color:rgba(214,206,238,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-trait i{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.wb-trait i b{position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,rgba(139,92,246,.85),rgba(94,200,255,.7))}
.wb-trait em{font-style:normal;font-size:10.5px;color:rgba(170,158,205,.8);text-align:right}

/* 月份走势（生命轨迹） */
.wb-lifelist{display:flex;flex-direction:column;gap:6px}
.wb-month{position:relative;display:flex;align-items:center;gap:10px;
  padding:7px 12px;border-radius:9px;background:rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.12);overflow:hidden}
.wb-month-d{flex:none;width:52px;font-size:11px;color:rgba(170,158,205,.88)}
.wb-month i{position:absolute;left:72px;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(139,92,246,.85),rgba(94,200,255,.7))}
.wb-month b{margin-left:auto;font-size:12.5px;color:#e8e0ff}
.wb-month.hi b{color:#5eead4}
.wb-month.lo b{color:#ff9a8b}

/* 日历：30 天九宫格 */
.wb-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:7px;margin-top:12px}
.wb-cal-day{
  font:inherit;cursor:pointer;padding:9px 6px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(255,255,255,.04);border:1px solid rgba(150,120,255,.16);
  transition:.15s;
}
.wb-cal-day:hover{background:rgba(123,77,255,.2);border-color:rgba(180,150,255,.45)}
.wb-cal-day span{font-size:10px;color:rgba(170,158,205,.85)}
.wb-cal-day b{font-size:14px;font-weight:800;color:#e8e0ff}
.wb-cal-day.hi b{color:#5eead4}
.wb-cal-day.mid b{color:#c9a0ff}
.wb-cal-day.lo b{color:#ff9a8b}

/* 十二星座九宫格 */
.wb-signgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
.wb-signbtn{
  font:inherit;font-size:12px;cursor:pointer;padding:10px 0;border-radius:10px;
  color:rgba(214,206,238,.9);background:rgba(123,77,255,.12);
  border:1px solid rgba(150,120,255,.24);transition:.15s;
}
.wb-signbtn:hover{color:#fff;background:rgba(123,77,255,.28);border-color:rgba(180,150,255,.5)}

/* 节气 / 时辰网格 */
.wb-termgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;margin-top:10px}
.wb-term{
  padding:9px 10px;border-radius:9px;text-align:center;
  background:rgba(255,255,255,.035);border:1px solid rgba(150,120,255,.14);
}
.wb-term.on{background:rgba(123,77,255,.26);border-color:rgba(180,150,255,.55)}
.wb-term span{display:block;font-size:12px;color:#e8e0ff}
.wb-term em{display:block;font-style:normal;font-size:9.5px;color:rgba(170,158,205,.78);margin-top:2px}

/* 梦想列表 */
.wb-dreamlist{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.wb-dream{display:flex;gap:12px;align-items:flex-start;
  padding:11px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(150,120,255,.15)}
.wb-dream b{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#5ec8ff);
}
.wb-dream div{display:flex;flex-direction:column;gap:3px;min-width:0}
.wb-dream span{font-size:12.5px;color:#f0eaff}
.wb-dream em{font-style:normal;font-size:11px;color:rgba(170,158,205,.82);line-height:1.55}

/* 合盘结果 */
.wb-syresult{margin-top:6px}
.wb-syresult .wb-kv{margin-bottom:0}

@media (max-width:900px){
  .wb-signgrid{grid-template-columns:repeat(4,1fr)}
  .wb-trait{grid-template-columns:64px 1fr 40px}
  .wb-axe{grid-template-columns:38px 1fr 38px 38px}
}

/* 今日决策：趁势做 / 先避开 两栏 */
.wb-decision{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.wb-dec-go h4,.wb-dec-hold h4{
  margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.12em;
  color:rgba(94,234,212,.9);
}
.wb-dec-hold h4{color:rgba(255,154,139,.9)}
.wb-decision .wb-dream{margin-bottom:8px}
.wb-decision .wb-dream.lo b{background:linear-gradient(135deg,#ff9a8b,#ffb066)}

/* 生活类建议栏 */
.wb-lifeadv .wb-kv{margin-bottom:0}

@media (max-width:1000px){
  .wb-decision{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════
   iframe 内嵌面板（2026-11-08 第九轮）
   ───────────────────────────────────────────────────────
   用户要求「看看 经典版，直接复制过来」—— 用同域 iframe 嵌经典版的屏。
   ═══════════════════════════════════════════════════════ */

/* 面板顶部条：标题 + 分享/复制按钮 */
.wb-embedbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:4px 2px 12px;flex-wrap:wrap;
}
.wb-embedbar b{font-size:14px;font-weight:800;color:#f4efff}
.wb-sub-inline{
  margin-left:10px;font-size:11.5px;color:rgba(170,158,205,.8);
}
.wb-embedbar-r{display:flex;gap:8px;flex:none}

/* ── 原生挂载（无 iframe）───────────────────────────────
   用户口径：「我不要 iframe 这个模式，我要的是单独一个完整的整体。
               这种右侧有bar的块，我都不要看到。我要完整的一页」

   关键：经典版 .screen 是 position:absolute + inset + overflow-y:auto
   （那是"整屏切换"用的，天生带内层滚动条 = 用户说的右侧 bar）。
   搬进工作台后必须还原成文档流，页面只保留**一条**外层滚动条。 */
.wb-inlinebar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:4px 2px 12px;flex-wrap:wrap;
}
.wb-inlinebar b{font-size:14px;font-weight:800;color:#f4efff}
.wb-inlinebar-r{display:flex;gap:8px;flex:none}

.wb-inline-host{display:block;margin-bottom:18px}

/* 搬进来的屏：去掉绝对定位/固定高度/内层滚动，变成普通流式块 */
.wb-inline-screen{
  position:static !important;
  inset:auto !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  width:auto !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  flex:none !important;
  transition:none !important;
}
/* 内层容器也放开宽度限制，让它填满工作台内容区 */
.wb-inline-screen > .screen-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
/* 星盘屏原本为了顶到最右单独收窄过，搬进来后统一满宽 */
.wb-inline-screen#s-chart .hero{padding-left:0 !important;padding-right:0 !important}

/* 内层若还有自己的滚动容器，一并放开 */
.wb-inline-screen [style*="overflow-y:auto"],
.wb-inline-screen [style*="overflow-y: scroll"]{
  overflow-y:visible !important;
  max-height:none !important;
}

/* 分享弹窗里的链接条 */
.wb-shareurl{
  margin:12px 0;padding:9px 12px;border-radius:9px;
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:11px;color:rgba(200,190,230,.9);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(150,120,255,.2);
  word-break:break-all;
}

/* ═══ 真日历（月视图） ═══ */
.wb-calgrid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;
}
.wb-cal-wd{
  text-align:center;font-size:10.5px;font-weight:700;
  color:rgba(150,140,185,.85);padding:4px 0;
}
.wb-cal-cell{
  position:relative;aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:inherit;cursor:pointer;border-radius:10px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.13);
  transition:.15s;
}
.wb-cal-cell.empty{background:transparent;border:0;cursor:default}
.wb-cal-cell b{font-size:13px;font-weight:700;color:rgba(226,218,246,.92)}
.wb-cal-cell i{font-style:normal;font-size:9.5px;color:rgba(170,158,205,.75);line-height:1}
.wb-cal-cell:hover:not(.empty){
  background:rgba(123,77,255,.2);border-color:rgba(180,150,255,.45);
}
.wb-cal-cell.today{
  border-color:rgba(180,150,255,.75);
  box-shadow:0 0 0 1px rgba(180,150,255,.4) inset;
}
.wb-cal-cell.hi b{color:#5eead4}
.wb-cal-cell.hi i{color:rgba(94,234,212,.8)}
.wb-cal-cell.mid b{color:#c9a0ff}
.wb-cal-cell.lo b{color:#ff9a8b}
.wb-cal-cell.lo i{color:rgba(255,154,139,.8)}

@media (max-width:900px){
  .wb-cal-cell b{font-size:11.5px}
  .wb-cal-cell i{font-size:8.5px}
  .wb-embedbar{padding-bottom:8px}
}


/* ── 周末：周六 / 周日 逐维对比表 ──
   只给平均分看不出哪天更合适，所以逐维列两天分数与「更合适」判断。 */
.wb-wk-tbl{
  margin:6px 0 4px;padding:14px 16px 10px;
  border-radius:14px;
  background:rgba(24,18,42,.55);
  border:1px solid rgba(140,120,200,.2);
  overflow-x:auto;
}
.wb-wk-tbl table{width:100%;border-collapse:collapse;font-size:13px}
.wb-wk-tbl th{
  text-align:left;font-weight:800;font-size:11.5px;
  letter-spacing:.06em;color:rgba(160,148,195,.85);
  padding:0 10px 8px;border-bottom:1px solid rgba(140,120,200,.22);
}
.wb-wk-tbl th:nth-child(2),.wb-wk-tbl th:nth-child(3),
.wb-wk-tbl td.v{text-align:center}
.wb-wk-tbl th:nth-child(4),.wb-wk-tbl td.d{text-align:right}
.wb-wk-tbl td{
  padding:7px 10px;border-bottom:1px solid rgba(120,100,180,.1);
  color:rgba(214,204,240,.92);
}
.wb-wk-tbl tr:last-child td{border-bottom:0}
.wb-wk-tbl td.n{font-weight:700}
.wb-wk-tbl td.v{font-variant-numeric:tabular-nums;font-weight:700}
.wb-wk-tbl td.d{font-size:12px;font-weight:800;color:rgba(160,148,195,.6)}
/* 周六更强 → 金；周日更强 → 紫 */
.wb-wk-tbl tr.sat td.d{color:#ffd60a}
.wb-wk-tbl tr.sun td.d{color:#c4a8ff}
.wb-wk-tbl tr.sat td.v:first-of-type,.wb-wk-tbl tr.sat td:nth-child(2){color:#ffe9a8}
.wb-wk-tbl tr.sun td:nth-child(3){color:#d9c9ff}
.wb-wk-note{
  margin:10px 0 0;font-size:11.5px;line-height:1.7;
  color:rgba(150,138,185,.7);
}
@media (max-width:640px){
  .wb-wk-tbl{padding:10px 10px 8px;margin:4px -2px}
  .wb-wk-tbl table{font-size:12px}
  .wb-wk-tbl th,.wb-wk-tbl td{padding:6px 6px}
}


/* ── 周末运程：周六 / 周日 各自独立一整块 ──
   用户要求「周末运程，你拆解成周六、周日」。
   原来合成"两天均值"一张卡，点任一维传的是区间串 → 详情算不出来。 */
.wb-wkday{
  margin:22px 0 8px;padding:20px 22px 18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(32,24,54,.72),rgba(20,15,36,.55));
  border:1px solid rgba(140,120,200,.22);
  box-shadow:0 2px 18px rgba(0,0,0,.18);
}
.wb-wkday-h{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid rgba(140,120,200,.18);
}
.wb-wkday-t{
  font-size:19px;font-weight:900;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wb-wkday-d{
  font-size:12.5px;font-weight:700;color:rgba(170,158,205,.86);
  font-variant-numeric:tabular-nums;
}
.wb-wkday-g{
  margin-left:auto;font-size:11.5px;font-weight:800;
  padding:3px 10px;border-radius:999px;
  color:#ffe9a8;background:rgba(255,214,10,.13);
  border:1px solid rgba(255,214,10,.4);
}
.wb-wkday-w{
  margin:0 0 16px;padding-left:18px;
  font-size:13.5px;line-height:1.95;color:rgba(214,204,240,.92);
}
.wb-wkday-w li{margin:3px 0}
.wb-wkday-ask{display:flex;gap:10px;margin-top:16px}
.wb-wkday-i{
  flex:1;min-width:0;padding:11px 14px;
  border-radius:12px;font-size:13.5px;
  background:rgba(14,10,26,.72);
  border:1px solid rgba(140,120,200,.3);
  color:#e8e0f5;
}
.wb-wkday-i::placeholder{color:rgba(150,138,185,.6)}
.wb-wkday-i:focus{outline:0;border-color:rgba(168,85,247,.66);
  box-shadow:0 0 0 3px rgba(168,85,247,.14)}
.wb-wkday-go{
  padding:11px 20px;border-radius:12px;cursor:pointer;
  font-size:13.5px;font-weight:800;white-space:nowrap;
  color:#1a1030;background:linear-gradient(180deg,#ffe9a8,#ffd04a);
  border:1px solid rgba(255,214,10,.6);
}
.wb-wkday-go:hover{filter:brightness(1.08)}
@media (max-width:640px){
  .wb-wkday{padding:15px 14px 14px;margin:16px 0 6px;border-radius:14px}
  .wb-wkday-t{font-size:17px}
  .wb-wkday-w{font-size:13px;line-height:1.85}
  .wb-wkday-ask{flex-direction:column;gap:8px}
  .wb-wkday-go{width:100%}
}


/* ══ 星盘 / 天象：悬停浮框（附件3/4 风格）══
   位置 fixed 跟随鼠标，深紫底 + 细边 + 圆角，内容由 app.js 的
   planetTipHTML / aspectTipHTML / skyPlanetTipHTML 生成。 */
.wb-star-tip{
  position:fixed;z-index:1400;
  max-width:390px;max-height:72vh;overflow:hidden;
  padding:14px 16px 13px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(30,22,52,.97),rgba(18,13,34,.98));
  border:1px solid rgba(168,85,247,.42);
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;
  color:rgba(224,215,245,.94);
  font-size:12.5px;line-height:1.78;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
}
.wb-star-tip.show{opacity:1;transform:none}
.wb-star-tip .at-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.wb-star-tip .at-head b{font-size:13.5px;color:#fff}
.wb-star-tip .at-tag{
  font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;
  border:1px solid rgba(168,85,247,.4);background:rgba(168,85,247,.14);
}
.wb-star-tip .at-meta{
  font-size:11.5px;color:rgba(168,148,200,.78);
  margin:0 0 8px;line-height:1.65;
}
.wb-star-tip .at-body{
  margin:7px 0 0;padding-top:7px;
  border-top:1px solid rgba(140,120,200,.14);
  color:rgba(210,200,236,.9);
}
.wb-star-tip .at-body:first-of-type{border-top:0;padding-top:0}

/* ── 点击后的完整弹窗（附件3/4：分节 + 建议 + 小心）── */
.wb-star{padding:2px 2px 8px}
.wb-star-k{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:rgba(150,138,185,.72);margin-bottom:8px;
}
.wb-star-h{
  margin:0 0 8px;font-size:19px;font-weight:900;line-height:1.35;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wb-star-m{
  font-size:12px;color:rgba(170,158,205,.86);
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid rgba(140,120,200,.2);
  line-height:1.7;
}
.wb-star-b{font-size:13.5px;line-height:1.95;color:rgba(222,213,245,.94)}
.wb-star-b .at-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wb-star-b .at-head b{font-size:16px;color:#fff}
.wb-star-b .at-tag{
  font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;
  border:1px solid rgba(168,85,247,.4);background:rgba(168,85,247,.14);
}
.wb-star-b .at-meta{
  font-size:12.5px;color:rgba(168,148,200,.82);
  margin:0 0 14px;padding:9px 12px;border-radius:10px;
  background:rgba(120,90,190,.1);border:1px solid rgba(140,120,200,.16);
  line-height:1.75;
}
.wb-star-b .at-body{
  margin:13px 0 0;padding-top:13px;
  border-top:1px solid rgba(140,120,200,.16);
}
.wb-star-b .at-body:first-of-type{border-top:0;padding-top:0}
.wb-star-b h3,.wb-star-b b{color:#d9c9ff}
@media (max-width:640px){
  .wb-star-tip{max-width:88vw;font-size:12px;padding:12px 13px 11px}
  .wb-star-h{font-size:17px}
  .wb-star-b{font-size:13px;line-height:1.88}
}

/* ── 顶栏「切换命盘」按钮（附件5）──
   次级按钮：比主按钮「问星座」弱一档，但清晰可见。 */
.wb-switchchart{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:800;line-height:1;
  color:rgba(212,200,240,.92);
  background:rgba(120,90,190,.14);
  border:1px solid rgba(150,120,220,.42);
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
  white-space:nowrap;
}
.wb-switchchart:hover{
  color:#fff;
  background:rgba(168,85,247,.26);
  border-color:rgba(196,168,255,.66);
}
.wb-switchchart svg{flex:0 0 auto;opacity:.9}
@media (max-width:640px){
  .wb-switchchart span{display:none}
  .wb-switchchart{padding:7px 9px}
}

/* ── 切换命盘弹窗里的列表 ── */
.wb-csw-list{display:flex;flex-direction:column;gap:9px}
.wb-csw-row{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 15px;border-radius:13px;cursor:pointer;text-align:left;
  background:rgba(24,18,42,.6);
  border:1px solid rgba(140,120,200,.26);
  transition:border-color .16s ease,background .16s ease;
}
.wb-csw-row:hover{
  background:rgba(60,42,100,.5);
  border-color:rgba(168,85,247,.6);
}
.wb-csw-row.on{
  border-color:rgba(255,214,10,.55);
  background:rgba(255,214,10,.09);
}
.wb-csw-row.busy{opacity:.55;pointer-events:none}
.wb-csw-dot{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  background:rgba(140,120,200,.4);
  border:1.5px solid rgba(180,150,255,.6);
}
.wb-csw-row.on .wb-csw-dot{
  background:#ffd60a;
  border-color:#ffe9a8;
  box-shadow:0 0 10px rgba(255,214,10,.6);
}
.wb-csw-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.wb-csw-txt b{
  font-size:14px;font-weight:800;color:#e8e0f5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-csw-txt i{
  font-style:normal;font-size:11.5px;
  color:rgba(160,148,195,.8);
  font-variant-numeric:tabular-nums;
}
.wb-csw-tag{
  font-style:normal;font-size:10.5px;font-weight:800;
  padding:2px 8px;border-radius:999px;
  color:#ffe9a8;background:rgba(255,214,10,.14);
  border:1px solid rgba(255,214,10,.4);
  white-space:nowrap;
}

/* ── 问事回复五块补充（2026-11-09）────────────────────────── */
.wb-bd{margin-top:6px;border:1px solid rgba(255,255,255,.07);border-radius:11px;overflow:hidden}
.wb-bd-row{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:8px 11px;font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.wb-bd-row:last-child{border-bottom:0}
.wb-bd-row span{color:rgba(255,255,255,.62);line-height:1.5}
.wb-bd-row b{color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;white-space:nowrap}
.wb-bd-row b.up{color:#4ade80}
.wb-bd-row b.dn{color:#f87171}
.wb-bd-row.tot{background:rgba(140,90,255,.10)}
.wb-bd-row.tot b{color:#c4a6ff;font-weight:800}

.wb-lk{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.wb-lk-i{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
}
.wb-lk-i i{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.62)}
.wb-lk-i b{font-size:13px;color:#c4a6ff;font-variant-numeric:tabular-nums}
.wb-lk-i em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.45)}

.wb-act{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.wb-act>div{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
}
.wb-act i{
  flex:0 0 auto;font-style:normal;font-size:10.5px;font-weight:800;
  padding:2px 8px;border-radius:99px;
  background:rgba(140,90,255,.22);color:#c4a6ff;white-space:nowrap;
}
.wb-act span{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.78)}

.wb-ans .wb-sub{font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.45);margin:6px 0 0}


/* ── 品牌区第三行：「星座生活工作台」单独一行（用户 2026-11-09 明确要求）──
   不能和「属于你的星座生活服务」串在一起；放在 logo 整体（图标+星座.live+副行）下面。 */
.wb-brand-ws{
  display:block;
  margin-top:5px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:rgba(196,182,228,.9);
  white-space:nowrap;
  line-height:1.3;
}
/* 副行末尾的 LIVE 小标签（附件4 样式） */
.wb-bn-live-tag{
  display:inline-block;
  margin-left:4px;
  font-style:normal;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.08em;
  padding:0 4px;
  border-radius:3px;
  color:#9fe4ff;
  background:rgba(120,210,255,.14);
  border:1px solid rgba(140,215,255,.35);
  vertical-align:1px;
}


/* ── 工作台今日/明日/周末页内嵌的经典版轮盘 ──
   用户（附件2）：「偷工减料了，跟经典版完全不一样」——
   现在搬的是经典版 #today-wheel 那块真实宫位圆盘，不是我自己画的分数雷达。
   ⚠️ 实测：不约束时它按父容器撑到 1104px（经典版原尺寸是 660）。
      这里钉死 660 + 居中，与经典版一致。 */
/* ⚠️ 主上（2026-11-09）：「盘被方块截了很大一部分。你把圆外面的框放大。
                  还有，跟上面的元素，保持距离，不要全贴着。」
   根因：① .wb-daywheel 写了 overflow:hidden，且 #today-wheel 高度被钉成
            width:660 等比 → 圆外侧还有一圈文字（维度名/句子），超出就被裁。
        ② 与上方 .wb-askbar 只隔 22px，太贴。
   修法：① 去掉 overflow:hidden，容器高度按内容自适应（圆外侧文字全部露出）
        ② 外框（容器）上下留白加大到 34px / 26px
        ③ 圆本身放到 720px，给外圈文字更多空间 */
.wb-daywheel{
  display:flex;justify-content:center;
  align-items:flex-start;
  margin:34px 0 26px;
  padding:6px 0 10px;
  width:100%;
  overflow:visible;
  min-height:0;
}
.wb-daywheel #today-wheel{
  /* 原来写死 720px!important ⇒ 视口只有 798px 高时，
     盘 + 上方内容装不下，滚到顶/底都会切掉一块（用户反馈"盘不动/滚不动"）。
     改为按视口高度自适应：min(容器宽, 视口高-150px)，一屏装得下整个盘。 */
  width:min(100%, calc(100vh - 150px))!important;
  max-width:min(100%, calc(100vh - 150px))!important;
  flex:0 1 auto;
  overflow:visible;
  height:auto!important;
}
.wb-daywheel #today-wheel svg{
  width:100%!important;
  height:auto!important;
  max-width:min(100%, calc(100vh - 150px))!important;
  max-height:calc(100vh - 150px)!important;
  overflow:visible;
  display:block;
}
.wb-daywheel-inline{
  margin:0 auto!important;
}
@media (max-width:780px){
  .wb-daywheel{margin:26px 0 20px}
  .wb-daywheel #today-wheel,
  .wb-daywheel #today-wheel svg{
    width:94vw!important;
    max-width:94vw!important;
  }
}
@media (max-width:900px){
  .wb-daywheel #today-wheel{
    transform:scale(.82);
    transform-origin:top center;
    margin-bottom:-14%;
  }
}


/* 轮盘与上方元素的呼吸间距（主上：不要全贴着） */
.wb-askbar + .wb-daywheel{
  margin-top:34px;
}
/* 轮盘下方与 12 维标题之间也留开 */
.wb-daywheel + .wb-sec-h{
  margin-top:26px;
}


/* ══ 品牌区（主上 2026-11-09 第 4 轮）══
   ① logo 要跟经典版一模一样 → 直接复用 .logo-slot / .brand-name / .brand-slogan
      （DOM 结构已改成与 index.html 顶栏同构，样式沿用 space.css，不重写）
   ② 「星座生活工作台」离 logo 远一点、字大一点、单独设计 */
.wb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 0 2px;
}
/* logo 槽位：经典版是 62×72，工作台沿用同样尺寸，保证图形一模一样 */
.wb-brand .logo-slot{
  width:62px;height:72px;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;
}
.wb-brand .logo-slot svg{display:block;overflow:visible}

/* 文字块：直接吃经典版 .brand-name / .brand-slogan 的金属渐变 */
.wb-brand .brand-txt{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:0;
}
/* ⚠️ 实测事故：经典版的规则全挂在 `.brand .brand-name` 下，
   工作台的祖先类名是 `.wb-brand`，所以一条都没命中 → 变成纯白扁平字
   （实测 offsetWidth 对：bg=none / clip=border-box / fill=rgb(234,228,248)）。
   这里把经典版那套金属渐变**逐字搬过来**，选择器补上 .wb-brand。 */
.wb-brand .brand-name{
  font-size:26px;font-weight:800;line-height:1.1;letter-spacing:.01em;
  white-space:nowrap;
  background:linear-gradient(180deg,
    #ffffff 0%, #f7f0ff 18%, #e6d8ff 40%,
    #c4a8ff 62%, #9d7ef0 84%, #7d5fd6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 -1px 0.5px rgba(255,255,255,.38))
         drop-shadow(0 2px 3px rgba(20,8,42,.55))
         drop-shadow(0 0 12px rgba(150,110,255,.34));
}
.wb-brand .brand-name b{
  color:transparent;
  background:linear-gradient(180deg,
    #efe6ff 0%, #c9b3ff 30%, #9fb4ff 58%,
    #6fd4ff 84%, #48a8e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
}
.wb-brand .brand-slogan{
  /* 实测：侧栏 215px 宽装不下「属于你的星座服务（LIVE）」，nowrap 会被省略号切掉
     （用户截图反馈如「属于你的星座服务（…」）。
     改为允许换行 + 缩一点字号和字距，两行完整显示。 */
  font-size:10px;font-weight:500;line-height:1.3;
  color:#a99cd0;letter-spacing:.02em;
  white-space:normal;word-break:keep-all;
  opacity:.95;
  text-shadow:0 1px 2px rgba(10,4,26,.8);
}
.wb-brand .brand-slogan em{
  font-style:normal;font-weight:700;
  color:transparent;
  background:linear-gradient(180deg,#d8c8ff 0%,#a98cff 55%,#8a6ae8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── 「星座生活工作台」：独立一行、更大、离 logo 明显更远 ──
   主上：「"星座生活工作台" 离 logo 要远一点，字要大的，设计好。」
   做法：margin-top 拉到 18px（原来是紧贴 5px），字号 15px/900，
        左侧加一段金色渐变竖条做视觉锚点，右侧延伸一条渐隐细线。 */
.wb-ws-title{
  display:flex;align-items:center;gap:9px;
  margin:14px 0 8px 4px;
  padding:0;
  white-space:nowrap;
}
/* 互换后：用户卡片紧跟 logo，间距收一点 */
.wb-brand + .wb-user{
  margin-top:10px;
}
.wb-ws-title::before{
  content:"";
  width:3px;height:17px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,#ffe9a8,#ffd60a 55%,#c99a12);
  box-shadow:0 0 9px rgba(255,214,10,.55);
}
/* 主上：「星座生活工作台 的字要比 "问事"标题字要大」
   导航分组标题 .wb-nav-h 是 15px/900，这里用 19px 明显压过它。 */
.wb-ws-title span{
  font-size:19px;font-weight:900;letter-spacing:.08em;
  background:linear-gradient(180deg,#ffffff,#efe4ff 52%,#c9b3ff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.32)) drop-shadow(0 0 8px rgba(150,110,255,.3));
}
/* 右侧横线已按要求删除（主上：「下面的横线可以不要了」） */
@media (max-width:900px){
  .wb-ws-title{margin:14px 0 10px 4px}
  .wb-ws-title span{font-size:14px}
}

/* ── 切换命盘弹窗里的「添加命盘」按钮 ── */
.wb-csw-add{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:11px;padding:12px 16px;
  border-radius:13px;cursor:pointer;
  font-size:13.5px;font-weight:800;
  color:#ffe9a8;
  background:rgba(255,214,10,.09);
  border:1px dashed rgba(255,214,10,.46);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.wb-csw-add:hover{
  color:#fff8dc;
  background:rgba(255,214,10,.17);
  border-color:rgba(255,214,10,.72);
}
.wb-csw-add svg{flex:0 0 auto}


/* ══ 侧栏结构改造（主上 2026-11-09 第 6 轮）══
   参照 DeepSeek Harness 的侧栏结构：品牌行右上折叠 + 底部用户卡片 + 弹出菜单 */

/* ── 折叠按钮（附件2）：品牌行最右，方框图标 ── */
.wb-brand{position:relative}
.wb-fold{
  /* grid 第三列已经把它顶到最右，不需要 margin-left:auto */
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;
  border-radius:8px;cursor:pointer;
  color:rgba(190,178,225,.78);
  background:rgba(120,90,190,.12);
  border:1px solid rgba(150,125,215,.28);
  transition:color .16s,background .16s,border-color .16s;
}
.wb-fold:hover{
  color:#fff;
  background:rgba(168,85,247,.26);
  border-color:rgba(196,168,255,.6);
}

/* ── 侧栏收起态（附件5/6：「点关了之后，就没有恢复的按钮，页面也没扩大变化」）──
   ① 侧栏真正让出位置 → 主内容铺满
   ② 折叠按钮**留在原地**（不能跟着侧栏一起消失），点它就能展开回来
   做法：收起时侧栏宽度归零，但把 #wb-fold 用一个始终可见的浮标留在左上角。 */
/* ⚠️ #wb 是 id，不是 class —— 原来写 .wb.side-collapsed 一条都不生效
   （实测：恢复按钮 offsetParent 为 null、主内容仍 1174px 没铺满）。 */
/* ══ 侧栏收起（附件2/3/4：DeepSeek 三态）══
   主上：「附件2 是打开状态，附件3 是关上状态（icon 还保留），
         附件4 是移到小 logo 状态。你仔细研究。@3082 改成 deepseek 格式」
   DeepSeek 的做法：
     · 展开：完整侧栏（文字 + 图标）
     · 收起：**不是消失**，而是缩成一条**只留图标的窄条**（约 56px），
       图标竖排、hover 出 tooltip、当前项高亮
     · 更窄：只留一个小 logo + 展开按钮（附件4 那种）
   ⇒ 我们做两级：side-mini（图标条 56px）/ side-collapsed（0，只留浮标） */
/* mini 态：#wb 是 grid（模板 248px 1fr），必须同步改模板，
   否则侧栏虽然变窄，主内容仍按 248px 那列算（实测 mainW 还是 1174）。 */
/* 竖条宽 60px：装得下 34px 的正方形按钮 + 左右各 13px 留白 */
#wb.side-mini{
  grid-template-columns:60px 1fr!important;
}
#wb.side-mini .wb-side{
  width:60px!important;min-width:60px!important;max-width:60px!important;
  padding:14px 8px!important;
  overflow:hidden;
}
/* mini 态：隐藏所有文字，只留图标 */
#wb.side-mini .wb-brand .brand-txt,
#wb.side-mini .wb-brand .wb-brand-txt,
#wb.side-mini .wb-te-txt,
#wb.side-mini .wb-te-desc,
#wb.side-mini .wb-nh-txt,
#wb.side-mini .wb-nav-item .wb-ni-txt,
#wb.side-mini .wb-nav-item > span:not(.wb-ni),
#wb.side-mini .wb-user-txt,
#wb.side-mini .wb-user-go{display:none!important}
#wb.side-mini .wb-brand{
  grid-template-columns:1fr!important;
  justify-items:center;
  column-gap:0;
  row-gap:0;
}
/* 竖条态三个子元素纵向排：logo → 折叠按钮（隐藏） → 回归按钮。
   把回归按钮放到第 2 行、折叠按钮同格，保证同一水平线。 */
#wb.side-mini .wb-return{
  grid-row:2;
  grid-column:1;
}
#wb.side-mini .wb-fold{
  grid-row:2;
  grid-column:1;
}
#wb.side-mini .wb-brand .logo-slot{
  width:40px!important;height:46px!important;
}
#wb.side-mini .wb-brand .logo-slot svg{
  width:40px!important;height:40px!important;
}
/* 关闭态：折叠按钮在 logo 下面居中，且撑满图标条可点区 */
#wb.side-mini .wb-fold{
  display:inline-flex!important;
  margin:8px auto 0;
  width:36px!important;height:36px;
  font-size:0;
}
#wb.side-mini .wb-fold svg{display:block}
#wb.side-mini .wb-te-item{
  grid-template-columns:1fr;
  justify-items:center;
  padding:10px 0;
}
#wb.side-mini .wb-te-ic{grid-row:auto}
#wb.side-mini .wb-nav-h{
  justify-content:center;
  padding-left:0;
  letter-spacing:0;
}
#wb.side-mini .wb-nav-h .wb-nh-planet{
  width:26px;height:15px;
}
#wb.side-mini .wb-nav-item{
  justify-content:center;
  padding:9px 0;
}
#wb.side-mini .wb-nav-item .wb-ni-planet{
  margin:0;
}
#wb.side-mini .wb-user{
  justify-content:center;
  padding:8px 0;
}
#wb.side-mini .wb-user .wb-avatar{margin:0}
#wb.side-mini .wb-side-bottom{padding-top:8px}

/* 全收起态已移除（主上只保留打开/关闭两态） */


/* 收起后主内容真正铺满整个宽度 */
/* ⚠️ 实测根因：#wb 是 display:grid，模板写死 `248px 1fr`。
   折叠后第一列仍占 248px，所以主内容永远只有 1174px（视口 1422）。
   flex 属性在 grid 容器里无效 —— 必须改 grid-template-columns。 */
/* 注：side-collapsed 全收起态已移除，只保留 side-mini（图标条） */

/* 恢复按钮：收起时固定在左上角，始终可点（这是"恢复的按钮"） */
/* ⚠️ 恢复按钮是 #wb（display:grid）的直接子元素，会被当成一个网格项，
   挤占列宽甚至被压成 0 宽。fixed 定位 + grid-column 排除，让它彻底脱离网格。 */
.wb-reopen{
  position:fixed!important;
  left:10px;top:12px;
  grid-column:1 / -1;
  grid-row:1;
  z-index:1200;
  display:none;
  align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;
  border-radius:10px;cursor:pointer;
  color:rgba(210,198,240,.92);
  background:rgba(30,22,52,.92);
  border:1px solid rgba(150,125,215,.42);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:color .16s,background .16s,border-color .16s;
}
.wb-reopen:hover{
  color:#fff;
  background:rgba(168,85,247,.36);
  border-color:rgba(196,168,255,.7);
}
/* 恢复按钮已由 folding 按钮取代，不再显示 */

/* ── 底部：用户卡片 + 弹出菜单（附件6 / 附件4 / 附件5）── */
.wb-side-bottom{
  margin-top:auto;
  padding-top:10px;
  position:relative;
}
/* 主上（2026-11-11）：「附件5，这个零件没有贴到最底下，离最底下还有不少空位。」
   根因：卡片自带 margin-bottom:12px，再叠 .wb-side 的 padding-bottom:10px，
   卡片底边距侧栏底边共 22px（实测 900px 视口下 878 → 900）。
   修法：① 卡片在底部区域内下外边距清零 ② 侧栏底部 padding 收到 6px
   （留 6px 是防止卡片圆角与视口边相切，不是「空位」）。
   合计空隙 22px → 6px，实测 890 → 900 中的 6px 为侧栏自身 padding。 */
.wb-side-bottom .wb-user{ margin-bottom:0; }
/* ⚠️ 附件1「有bug，偏离了」的根因：
   .wb-side 是 overflow-y:auto 的滚动容器，菜单用 position:absolute
   会被它裁剪/随滚动偏移，弹出来位置就不对（截图里菜单跑到中间偏左、
   把导航项盖掉一半）。
   改成 position:fixed + JS 按用户卡片实际坐标定位，
   永远贴着卡片上沿弹出，不受滚动容器影响。 */
.wb-usermenu{
  position:fixed;
  left:auto;right:auto;bottom:auto;
  width:230px;
  padding:7px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(34,25,58,.99),rgba(22,16,40,.995));
  border:1px solid rgba(150,125,215,.34);
  box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;
  z-index:1300;
  animation:wbUmIn .16s ease-out;
}
.wb-usermenu[hidden]{display:none}
@keyframes wbUmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wb-um-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 11px;
  border-radius:9px;cursor:pointer;text-align:left;
  font-size:13px;font-weight:600;
  color:rgba(226,216,246,.94);
  background:none;border:0;
  transition:background .14s,color .14s;
}
.wb-um-item:hover{background:rgba(168,85,247,.22);color:#fff}
.wb-um-item.danger{color:#ffb4b4}
.wb-um-item.danger:hover{background:rgba(248,113,113,.2);color:#ffdada}
.wb-um-ic{
  font-style:normal;font-size:12px;width:16px;text-align:center;
  color:rgba(190,160,255,.85);flex:none;
}
.wb-um-item.danger .wb-um-ic{color:#f87171}
.wb-um-sep{
  height:1px;margin:5px 8px;
  background:rgba(150,125,215,.2);
}

/* 用户卡片（附件6）：贴底、可点、右侧上箭头 */
.wb-user{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:8px 9px;
  border-radius:11px;cursor:pointer;text-align:left;
  background:rgba(28,20,50,.55);
  border:1px solid rgba(150,125,215,.22);
  transition:background .16s,border-color .16s;
}
.wb-user:hover{background:rgba(60,42,100,.5);border-color:rgba(168,85,247,.5)}
.wb-user-go{
  margin-left:auto;font-size:11px;
  color:rgba(170,155,205,.7);
  transition:transform .18s;
}
.wb-user[aria-expanded="true"] .wb-user-go{transform:rotate(180deg)}

/* ── 意见反馈弹窗 ── */
.wb-fb-ta{
  width:100%;box-sizing:border-box;
  padding:12px 13px;border-radius:11px;resize:vertical;
  font-family:inherit;font-size:13.5px;line-height:1.7;
  color:#e8e0f5;background:rgba(14,10,26,.72);
  border:1px solid rgba(140,120,200,.3);
}
.wb-fb-ta:focus{outline:0;border-color:rgba(168,85,247,.66);
  box-shadow:0 0 0 3px rgba(168,85,247,.14)}
.wb-fb-ta::placeholder{color:rgba(150,138,185,.6)}
.wb-fb-send{
  margin-top:11px;padding:11px 20px;border-radius:11px;cursor:pointer;
  font-size:13.5px;font-weight:900;
  color:#3d2400;
  background-color:#e8a91c;
  background-image:linear-gradient(180deg,#ffd968,#e8a91c 62%,#c9860a);
  border:2px solid #ffe08a;
  box-shadow:0 2px 10px rgba(232,169,28,.3);
}
.wb-fb-send:hover{box-shadow:0 0 0 3px rgba(255,214,10,.32);transform:translateY(-1px)}
.wb-fb-send:disabled{opacity:.6;cursor:default}
.wb-fb-note{
  margin-top:9px;font-size:12px;color:rgba(170,158,205,.85);min-height:16px;
}

@media (max-width:900px){
  .wb-fold{display:none}
  .wb-usermenu{left:4px;right:4px}
}


/* 「助理」「自动化服务」已移入「设置」分组，.wb-topentries 样式移除 */

/* ══ logo 下面的顶级入口（自动化服务）══
   主上：「自动化服务还在上面」——它是独立入口，不在「设置」组里。
   样式参照附件2/3：图标 + 主文字 + 说明，横向卡片。 */
/* ══ 顶部入口（新建服务 / 助理 / 自动化服务）══
   主上（2026-11-09）：「这一块是不动滚动的，不要放到bar里面。
   离logo太远了，靠近回去。」
   ⇒ ① 位置：.wb-brand 与 .wb-nav 之间的固定槽位（滚动区外，不随导航滚）
      ② 距离：紧贴 logo —— 上边距压到 4px，不再有 20px+ 的空档
      ③ flex:0 0 auto 防止被伸缩挤压 */
.wb-topentries{
  display:flex;flex-direction:column;gap:6px;
  padding:4px 2px 8px;
  margin:0 0 6px;
  flex:0 0 auto;
  border-bottom:1px solid rgba(150,125,215,.16);
}
.wb-te-item{
  display:grid;
  grid-template-columns:18px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;row-gap:2px;
  align-items:center;
  /* 主上（2026-11-09）：「上下的padding 太大了，缩小一半。」
     原 10px → 5px（左右保持 12px 不动）。 */
  width:100%;padding:5px 12px;
  border-radius:11px;cursor:pointer;text-align:left;
  background:rgba(120,90,190,.1);
  border:1px solid rgba(150,125,215,.26);
  transition:background .16s,border-color .16s,transform .14s;
}
.wb-te-item:hover{
  background:rgba(168,85,247,.2);
  border-color:rgba(196,168,255,.55);
  transform:translateY(-1px);
}
.wb-te-item.on{
  background:linear-gradient(180deg,rgba(168,85,247,.3),rgba(120,80,210,.22));
  border-color:rgba(196,168,255,.7);
  box-shadow:0 0 16px rgba(168,85,247,.2);
}
.wb-te-ic{
  grid-row:1 / span 2;
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  color:#c9b6ff;font-style:normal;
}
.wb-te-txt{
  font-size:13.5px;font-weight:800;line-height:1.25;
  color:#ece4ff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-te-desc{
  font-style:normal;font-size:10.5px;line-height:1.3;
  color:rgba(168,155,205,.8);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-te-item.on .wb-te-ic{color:#ffe9a8}

/* ── 助理 / 自动化服务 页 ── */
.wb-asst,.wb-auto{max-width:920px;margin:0 auto;padding:4px 0 40px}
.wb-asst-hero{
  padding:24px 26px 22px;margin-bottom:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(34,25,58,.72),rgba(20,15,36,.5));
  border:1px solid rgba(150,125,215,.22);
}
.wb-asst-k{
  font-size:10.5px;letter-spacing:.2em;font-weight:800;
  color:rgba(150,138,185,.75);margin-bottom:8px;
}
.wb-asst-hero h2{
  margin:0 0 10px;font-size:24px;font-weight:900;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wb-asst-hero p{
  margin:0;font-size:13.5px;line-height:1.9;
  color:rgba(206,196,236,.9);
}
.wb-asst-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-bottom:20px;
}
.wb-asst-card{
  padding:18px 18px 16px;border-radius:16px;
  background:rgba(28,20,50,.55);
  border:1px solid rgba(140,120,200,.22);
  display:flex;flex-direction:column;
  transition:background .18s ease,border-color .18s ease,transform .16s ease,box-shadow .18s ease;
}
/* 悬停整卡高亮：一眼能区分当前指向哪张卡 */
.wb-asst-card:hover{
  background:rgba(52,36,88,.66);
  border-color:rgba(196,168,255,.6);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 0 1px rgba(196,168,255,.14);
}
.wb-asst-ci{font-size:22px;margin-bottom:9px}
.wb-asst-card b{font-size:14.5px;font-weight:800;color:#e8e0f5;margin-bottom:7px}
.wb-asst-card p{
  margin:0 0 14px;font-size:12.5px;line-height:1.8;
  color:rgba(180,168,215,.88);flex:1;
}
/* ══ 助理页按钮（重新设计 · 不依赖背景渐变）══
   主上：「留给客服、类似的看不清晰，没有反差。你重新改设计。」

   之前的问题：按钮靠 `background:linear-gradient(...)` 出金色。
   渐变在某些渲染路径/截图/移动端 WebView 下会失效 → 底色退回父层深紫，
   而文字是深色 #1a1030 ⇒ 深字压深底，几乎看不见。

   新设计原则（任何情况下都有反差）：
     ① 底色用 **实心 backgroundColor**（不靠 background-image），
        渐变只作 background-image 叠加在上层——它坏掉时由实心色兜底；
     ② 文字用**纯白**，并加重描边色（深棕），白字压亮底，两者都成立；
     ③ 边框加粗到 2px 亮金 + 外发光，按钮形状永远清晰可辨；
     ④ focus/hover/active 三态都有明确反馈，不依赖颜色明暗。 */
.wb-asst-btn{
  align-self:flex-start;
  padding:10px 18px;border-radius:10px;cursor:pointer;
  font-size:13px;font-weight:900;letter-spacing:.02em;
  /* 实测对比度（WCAG 公式复核）：
       白字 on #e8a91c = 2.07  ❌ 不合格
       深褐 #3d2400 on #e8a91c = 6.98  ✅ 远超 4.5
     ⇒ 用深褐字，不用白字。白字在亮金底上恰恰是最看不清的。 */
  color:#3d2400;
  background-color:#e8a91c;                       /* 实心金：渐变失效时的兜底 */
  background-image:linear-gradient(180deg,#ffd968,#e8a91c 62%,#c9860a);
  border:2px solid #ffe08a;                       /* 亮金粗边 */
  box-shadow:0 2px 10px rgba(232,169,28,.34),0 0 0 1px rgba(0,0,0,.22);
  transition:transform .12s ease,box-shadow .16s ease,background-color .16s ease;
}
.wb-asst-btn:hover{
  color:#3d2400;
  background-color:#ffc93d;
  background-image:linear-gradient(180deg,#ffe98c,#ffc93d 62%,#e09a10);
  box-shadow:0 0 0 3px rgba(255,214,10,.34),0 8px 22px rgba(255,190,40,.4);
  transform:translateY(-1px);
}
.wb-asst-btn:active{transform:translateY(0);box-shadow:0 1px 6px rgba(232,169,28,.3)}
.wb-asst-btn:focus-visible{
  outline:2px solid #fff2b8;outline-offset:2px;
}
.wb-asst-faq{
  padding:18px 20px;border-radius:16px;
  background:rgba(24,18,42,.5);
  border:1px solid rgba(140,120,200,.2);
}
.wb-asst-fh{
  font-size:13px;font-weight:900;color:#d9c9ff;
  margin-bottom:12px;letter-spacing:.06em;
}
.wb-asst-faq details{
  border-bottom:1px solid rgba(140,120,200,.14);
  padding:10px 0;
}
.wb-asst-faq details:last-child{border-bottom:0}
.wb-asst-faq summary{
  cursor:pointer;font-size:13px;font-weight:700;
  color:rgba(226,216,246,.94);list-style:none;
}
.wb-asst-faq summary::-webkit-details-marker{display:none}
.wb-asst-faq summary::before{
  content:"›";display:inline-block;width:16px;
  color:rgba(170,150,220,.8);
  transition:transform .16s;
}
.wb-asst-faq details[open] summary::before{transform:rotate(90deg)}
.wb-asst-faq details p{
  margin:8px 0 2px 16px;font-size:12.5px;line-height:1.85;
  color:rgba(180,168,215,.9);
}

/* ── 自动化服务卡片 ── */
.wb-auto-card{
  padding:20px 22px 18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(34,25,58,.72),rgba(20,15,36,.52));
  border:1px solid rgba(150,125,215,.24);
}
.wb-auto-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.wb-auto-t{font-size:15.5px;font-weight:900;color:#f0e9ff}
.wb-auto-sw{margin-left:auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.wb-auto-sw input{display:none}
.wb-auto-sw i{
  width:38px;height:20px;border-radius:999px;position:relative;
  background:rgba(120,100,180,.4);transition:background .18s;
}
.wb-auto-sw i::after{
  content:"";position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .18s;
}
.wb-auto-sw input:checked + i{background:linear-gradient(180deg,#ffe9a8,#ffd04a)}
.wb-auto-sw input:checked + i::after{transform:translateX(18px)}
.wb-auto-sw em{font-style:normal;font-size:11.5px;font-weight:800;color:rgba(190,178,225,.9)}
.wb-auto-sub{
  margin:0 0 18px;font-size:12.5px;line-height:1.85;
  color:rgba(180,168,215,.88);
}
.wb-auto-row{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;border-top:1px solid rgba(140,120,200,.14);
}
.wb-auto-row label{
  font-size:12.5px;font-weight:700;color:rgba(206,196,236,.92);
  min-width:70px;
}
.wb-auto-row input[type="time"]{
  padding:7px 11px;border-radius:9px;
  font-size:13px;color:#e8e0f5;
  background:rgba(14,10,26,.7);
  border:1px solid rgba(140,120,200,.3);
}
.wb-auto-ch{display:flex;gap:8px;flex-wrap:wrap}
.wb-ch,.wb-range{
  padding:7px 14px;border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:700;
  color:rgba(190,178,225,.9);
  background:rgba(120,90,190,.12);
  border:1px solid rgba(150,125,215,.3);
  transition:all .15s;
}
.wb-ch.on,.wb-range.on{
  color:#1a1030;
  background:linear-gradient(180deg,#ffe9a8,#ffd04a);
  border-color:rgba(255,214,10,.6);
}
.wb-auto-preview{
  margin-top:16px;padding:15px 16px;border-radius:13px;
  background:rgba(14,10,26,.55);
  border:1px solid rgba(140,120,200,.2);
}
.wb-auto-pv-h{
  font-size:11px;font-weight:900;letter-spacing:.1em;
  color:rgba(160,148,195,.85);margin-bottom:10px;
}
.wb-auto-pv-body{font-size:12.5px;line-height:1.9;color:rgba(212,202,240,.92)}
.wb-auto-pv-body p{margin:0 0 10px}
.wb-auto-pv-body b{color:#ffe9a8}
.wb-pv-date{
  font-size:12px;font-weight:800;color:#c9b6ff;margin-bottom:10px;
}
.wb-pv-tail{color:rgba(170,158,205,.85);font-size:12px}
.wb-auto-dim{color:rgba(170,158,205,.8)}
/* 同一条原则：实心兜底 + 白字 + 粗亮边（渐变失效也不会变成暗底暗字） */
.wb-auto-save{
  margin-top:16px;padding:11px 22px;border-radius:11px;cursor:pointer;
  font-size:13.5px;font-weight:900;
  color:#3d2400;                                  /* 深褐 on 亮金 = 6.98，合格 */
  background-color:#e8a91c;
  background-image:linear-gradient(180deg,#ffd968,#e8a91c 62%,#c9860a);
  border:2px solid #ffe08a;
  box-shadow:0 2px 10px rgba(232,169,28,.3);
  transition:transform .12s ease,box-shadow .16s ease;
}
.wb-auto-save:hover{
  box-shadow:0 0 0 3px rgba(255,214,10,.32),0 8px 20px rgba(255,190,40,.38);
  transform:translateY(-1px);
}
.wb-auto-save:disabled{opacity:.6;cursor:default;transform:none}
.wb-auto-note{margin-top:10px;font-size:12px;color:rgba(170,158,205,.88);min-height:16px}

@media (max-width:900px){
  .wb-asst-hero{padding:18px 16px 16px}
  .wb-asst-hero h2{font-size:20px}
  .wb-auto-card{padding:16px 14px 14px}
  .wb-auto-row{flex-wrap:wrap;gap:9px}
}


/* ══ 竖条态语义图标（主上 2026-11-09）══
   展开态：显示自转金星球 .wb-ni-planet，隐藏语义图标 .wb-ni-sem
   竖条态：反之 —— 每个菜单项显示自己含义的线稿图标
   （「除了附件2（关闭icon）以外，都换成能表达内容含义的icon，
     展开再回归到星icon」） */
.wb-nav-item .wb-ni-sem{
  display:none;
  width:19px;height:19px;
  flex:0 0 19px;
  color:#c9b6ff;
  transition:color .16s ease;
}
.wb-nav-item.on .wb-ni-sem{color:#ffe9a8}
.wb-nav-item:hover .wb-ni-sem{color:#fff}

/* 竖条态切换 */
#wb.side-mini .wb-nav-item .wb-ni-planet{display:none!important}
#wb.side-mini .wb-nav-item .wb-ni-sem{display:block!important}

/* 自动化服务那张卡：竖条态同样换语义图标（时钟→自动化） */
#wb.side-mini .wb-te-item .wb-te-ic svg{width:19px;height:19px}

/* ── 「展开/回归」按钮（竖条态才显示，与关闭 icon 同一水平线）──
   主上：「附件1"回归"符号，（附件3）在移到附件2 的时候才显现出来。
         跟"关闭"icon 要在同一平行线。」
   实现：把它放在品牌行的**同一个 grid 格子**里，与折叠按钮完全重叠对齐，
        展开态显示折叠按钮、竖条态显示回归按钮。 */
.wb-return{
  display:none;
  align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;
  border-radius:8px;cursor:pointer;
  color:rgba(190,178,225,.78);
  background:rgba(120,90,190,.12);
  border:1px solid rgba(150,125,215,.28);
  transition:color .16s,background .16s,border-color .16s;
}
.wb-return:hover{
  color:#fff;
  background:rgba(168,85,247,.26);
  border-color:rgba(196,168,255,.6);
}
/* 竖条态：折叠按钮隐藏，回归按钮显示在同一位置（同一水平线）。
   ⚠️ 竖条态品牌行是单列 grid（logo 一行、按钮一行），
      两个按钮都放在第二行同一个格子里 → 天然对齐，位置完全一致。 */
#wb.side-mini .wb-fold{display:none!important}
#wb.side-mini .wb-return{
  display:inline-flex!important;
  margin:8px auto 0;
  width:36px!important;height:36px;
}
/* 展开态回归按钮隐藏（默认已 display:none） */
#wb .wb-return{display:none}


/* ══ 竖条态：外框一律正方形（主上：「外面的框，能是正方形包着吗？」）══
   实测修前（竖条 56px 时）：
     导航项 28×46（1.64）· 自动化卡 24×46（1.92）· 用户卡 43×46（1.07）
   全是竖长方形。这里把高度锁成与可点宽度相等，做成正方形容器。 */
#wb.side-mini-square{}
#wb.side-mini .wb-nav-item{
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin:3px auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:9px;
}
#wb.side-mini .wb-nav-item .wb-ni-sem{
  width:19px;height:19px;
}
#wb.side-mini .wb-te-item{
  width:34px!important;
  height:34px!important;
  padding:0!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:9px;
  grid-template-columns:1fr!important;
  grid-template-rows:1fr!important;
}
#wb.side-mini .wb-te-item .wb-te-ic{
  grid-row:auto!important;
  width:19px;height:19px;
}
#wb.side-mini .wb-user{
  width:34px!important;
  height:34px!important;
  padding:0!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:9px;
}
#wb.side-mini .wb-user .wb-avatar{
  width:22px;height:22px;
}
/* 导航分组标题里的星球也收成方形按钮感 */
#wb.side-mini .wb-nav-h{
  height:26px;
  padding:0!important;
  margin:10px 0 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
/* 回归 / 折叠按钮同样是正方形（已是 36×36，这里显式锁一遍） */
#wb.side-mini .wb-return,
#wb.side-mini .wb-fold{
  width:34px!important;
  height:34px!important;
  margin:8px auto 0!important;
  border-radius:9px!important;
}
/* logo 槽也做成正方形 */
#wb.side-mini .wb-brand .logo-slot{
  width:38px!important;
  height:38px!important;
}
#wb.side-mini .wb-brand .logo-slot svg{
  width:38px!important;height:38px!important;
}


/* ══ 主上（2026-11-09）：「工作台不用显示"你的星盘"这一部分。
      只是工作台不显示，经典版要显示的。」══
   目标元素：首屏 hero 区块（REAL ASTRONOMY · 你的星盘，由真实天文算出来
            + 4 个标签 + 排出我的星盘 按钮）。
   只加在 body.wb-on 上 —— 退出工作台（去掉 wb-on）后立刻恢复，
   经典版完全不受影响。 */
body.wb-on .hero.card,
body.wb-on .hero-card,
body.wb-on #hero-block,
body.wb-on .hero-copy{
  display:none!important;
}
/* 连它下面的分隔波浪一起收掉，避免留一条空线 */
body.wb-on .hero.card + .wave-wrap,
body.wb-on .hero + .wave-wrap{
  display:none!important;
}


/* ══ 助理（生活决策 12 项）══ */
.wb-aide{max-width:1080px;margin:0 auto;padding:4px 0 40px}
.wb-aide-hero{
  padding:24px 26px 20px;margin-bottom:18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(34,25,58,.72),rgba(20,15,36,.5));
  border:1px solid rgba(150,125,215,.22);
}
.wb-aide-k{
  font-size:10.5px;letter-spacing:.2em;font-weight:800;
  color:rgba(150,138,185,.75);margin-bottom:8px;
}
.wb-aide-hero h2{
  margin:0 0 10px;font-size:22px;font-weight:900;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wb-aide-hero h2 em{
  font-style:normal;font-size:13px;font-weight:700;
  -webkit-text-fill-color:rgba(190,178,225,.85);
  margin-left:8px;
}
.wb-aide-hero p{margin:0;font-size:13.5px;line-height:1.9;color:rgba(206,196,236,.9)}

.wb-aide-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:13px;margin-bottom:18px;
}
.wb-aide-card{
  padding:15px 16px 14px;border-radius:15px;
  background:rgba(28,20,50,.55);
  border:1px solid rgba(140,120,200,.22);
  transition:background .18s,border-color .18s,transform .16s;
}
.wb-aide-card:hover{
  background:rgba(52,36,88,.62);
  border-color:rgba(196,168,255,.55);
  transform:translateY(-2px);
}
.wb-aide-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.wb-aide-ic{font-size:18px;line-height:1}
.wb-aide-t{font-size:13.5px;font-weight:800;color:#ece4ff;flex:1}
.wb-aide-n{
  font-size:10px;font-weight:900;color:rgba(150,138,185,.7);
  padding:1px 6px;border-radius:999px;
  border:1px solid rgba(140,120,200,.3);
}
.wb-aide-v{font-size:13px;line-height:1.75;color:rgba(226,216,246,.95);margin-bottom:8px}
.wb-aide-r{font-size:11.5px;line-height:1.7;color:rgba(168,155,205,.85);margin-bottom:5px}
.wb-aide-b{
  font-size:10.5px;line-height:1.6;color:rgba(150,138,185,.7);
  padding-top:6px;border-top:1px solid rgba(140,120,200,.14);
}
.wb-aide-foot{
  font-size:11.5px;line-height:1.8;color:rgba(150,138,185,.7);
  padding:12px 14px;border-radius:12px;
  background:rgba(24,18,42,.45);
  border:1px solid rgba(140,120,200,.16);
}

/* ══ 今日报告（1080 字长文）══ */
.wb-report{max-width:860px;margin:0 auto;padding:4px 0 44px}
.wb-rp-hero{
  padding:26px 28px 22px;margin-bottom:20px;border-radius:18px;
  background:linear-gradient(180deg,rgba(38,28,64,.78),rgba(20,15,36,.55));
  border:1px solid rgba(160,135,230,.26);
}
.wb-rp-k{
  font-size:10.5px;letter-spacing:.2em;font-weight:800;
  color:rgba(150,138,185,.78);margin-bottom:9px;
}
.wb-rp-hero h2{
  margin:0 0 10px;font-size:23px;font-weight:900;line-height:1.4;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wb-rp-meta{font-size:12px;color:rgba(170,158,205,.88);line-height:1.8}
.wb-rp-sec{
  margin-bottom:22px;padding:20px 24px;border-radius:16px;
  background:rgba(26,19,46,.5);
  border:1px solid rgba(140,120,200,.18);
}
.wb-rp-sec h3{
  margin:0 0 13px;font-size:16px;font-weight:900;color:#e2d5ff;
  padding-left:11px;border-left:3px solid rgba(168,85,247,.75);
  line-height:1.4;
}
.wb-rp-sec p{
  margin:0 0 12px;font-size:14px;line-height:2.05;color:rgba(222,213,245,.94);
}
.wb-rp-sec p:last-child{margin-bottom:0}
.wb-rp-sec ul{margin:0 0 12px;padding-left:20px}
.wb-rp-sec li{
  margin:7px 0;font-size:13.5px;line-height:1.95;color:rgba(212,202,240,.92);
}
.wb-rp-sec b{color:#ffe9a8;font-weight:800}
.wb-rp-dims{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:11px;margin-top:4px;
}
.wb-rp-dim{
  padding:11px 13px;border-radius:12px;
  background:rgba(18,13,34,.6);
  border:1px solid rgba(140,120,200,.2);
  border-left-width:3px;
}
.wb-rp-dim.hi{border-left-color:#ffd60a}
.wb-rp-dim.mid{border-left-color:#a855f7}
.wb-rp-dim.lo{border-left-color:#6b5f85}
.wb-rp-dn{font-size:12.5px;font-weight:800;color:#e8e0f5}
.wb-rp-dv{
  font-size:15px;font-weight:900;color:#ffd60a;margin-left:7px;
  font-variant-numeric:tabular-nums;
}
.wb-rp-dim p{
  margin:6px 0 0;font-size:11.5px;line-height:1.7;
  color:rgba(175,163,210,.88);
}
.wb-rp-sum{
  font-size:15px !important;line-height:2.1 !important;
  padding:14px 16px;border-radius:12px;
  background:rgba(255,214,10,.08);
  border:1px solid rgba(255,214,10,.28);
}
.wb-rp-note{font-size:12px !important;color:rgba(150,138,185,.8) !important}

@media (max-width:900px){
  .wb-aide,.wb-report{padding:2px 0 30px}
  .wb-aide-hero,.wb-rp-hero{padding:18px 16px 16px}
  .wb-aide-hero h2{font-size:18px}
  .wb-rp-hero h2{font-size:18px}
  .wb-rp-sec{padding:15px 15px}
  .wb-rp-sec p{font-size:13.5px;line-height:1.95}
  .wb-aide-grid,.wb-rp-dims{grid-template-columns:1fr}
}


/* ══ 工作台 · 本命盘圆盘放大（主上 2026-11-09）══
   需求：「附件1，这个圆要在工作台（不是经典版）要放大3分之2。」
   ⚠️ 我第一版为了放圆把左右两栏整个 display:none 了，
      主上追问「左右两块 block 为什么没有了？」—— 那是删掉了原有内容，不是需求。
   ⇒ 现在保留左右两栏，只把圆盘本身放大：
      三栏 grid 保持，中间列加宽（minmax），圆盘取中间列的 2/3 视口高度。
      只作用于工作台（body.wb-on），经典版不受影响。 */
body.wb-on .chart-arena{
  /* 左右两栏各 160px（原来是 200，挤得圆盘只剩 445），
     中间吃掉剩余 ⇒ 圆盘能到 600+ 且两栏仍在。
     实测：200/1fr/200 时中间列只有 444.8px。 */
  grid-template-columns:160px minmax(0,1fr) 160px!important;
  gap:10px!important;
  max-width:none!important;
}
body.wb-on .chart-arena > .arena-side{
  display:block!important;      /* 保留，不再隐藏 */
}
body.wb-on .chart-stage{
  width:100%!important;
  max-width:none!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding:6px 0 12px;
}
/* 圆盘尺寸：既要大，又不能变形。
   ⚠️ 实测踩过：只写 width:min(72vh,640px) + height 同值，
      但中间列只有 445px 宽 → 圆被压成 445×611（宽<高，变形）。
   ⇒ 用 min(列宽, 72vh) 现算，宽高严格相等；上限 620px。 */
body.wb-on #bigchart.chart-wheel{
  --bc-size: min(calc(100vh * 0.72), 100%, 620px);
  width: var(--bc-size)!important;
  height: var(--bc-size)!important;
  aspect-ratio: 1 / 1;
  max-width: var(--bc-size)!important;
  max-height: var(--bc-size)!important;
  flex:0 0 auto;
  margin:0 auto;
}
body.wb-on #bigchart svg{
  width:100%!important;
  height:100%!important;
  max-width:100%;
}
@media (max-width:1200px){
  body.wb-on .chart-arena{
    grid-template-columns:140px minmax(0,1fr) 140px!important;
  }
}
@media (max-width:900px){
  /* 窄屏才收成单列（手机上三栏没法看） */
  body.wb-on .chart-arena{
    grid-template-columns:1fr!important;
  }
  body.wb-on #bigchart.chart-wheel{
    --bc-size: min(94vw, 520px);
  }
}
/* ══ 工作台滚不动（主上 2026-11-09）══
   「你右面的滚动条不需要，我意思是讲，右面滚动不了。不是加滚动条。」
   ⇒ 不美化滚动条，治根因：让内容真的能滚。
   根因：#wb 是 grid 容器且 overflow:hidden，
        它把 #wb-main 的滚动能力裁掉了 —— 滚轮/触摸都没反应。
        （程序改 scrollTop 能生效，所以之前误判成"能滚"。）
   修法：① #wb 保持 hidden（外层不滚）
        ② .wb-main 显式 auto + min-height:0（grid/flex 子项必须设 0 才能滚）
        ③ 内容容器不给固定高度，交给 .wb-main 滚 */
body.wb-on #wb{
  overflow:hidden!important;
  min-height:0;
}
body.wb-on .wb-main{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  min-height:0!important;
  height:100%;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
body.wb-on #wb-body{
  min-height:0;
  height:auto;
}


/* ── 助理卡片详情弹窗 ── */
.wb-aide-d-v{
  font-size:17px;font-weight:900;line-height:1.7;color:#ffe9a8;
  padding:14px 16px;margin-bottom:16px;border-radius:12px;
  background:rgba(255,214,10,.09);
  border:1px solid rgba(255,214,10,.3);
}
.wb-aide-d-sec{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(140,120,200,.16);
}
.wb-aide-d-sec:first-of-type{border-top:0;padding-top:0;margin-top:0}
.wb-aide-d-sec h4{
  margin:0 0 7px;font-size:12.5px;font-weight:900;
  color:#c9b6ff;letter-spacing:.06em;
}
.wb-aide-d-sec p{
  margin:0;font-size:13.5px;line-height:1.95;
  color:rgba(216,206,240,.92);
}
/* 助理卡片可点提示 */
.wb-aide-card[data-kind]{cursor:pointer}


/* ── 顶栏：日期紧跟标题（主上：「日期放在"今日运程"后面」）── */
.wb-date-inline{
  margin-left:auto!important;   /* 推到中间，按钮组仍在最右 */
  margin-right:14px;
  flex:0 0 auto;
  align-self:center;
}
/* 但标题和日期之间不要被 auto 拉太开：日期靠标题侧 */
.wb-topbar .wb-date-inline{
  margin-left:12px!important;
  margin-right:auto!important;
}

/* ── 顶栏：「切回经典版」按钮（次级，比问星座弱一档）── */
.wb-backclassic{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:800;line-height:1;white-space:nowrap;
  color:rgba(206,196,236,.9);
  background:rgba(120,90,190,.12);
  border:1px solid rgba(150,120,220,.38);
  cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .12s;
}
.wb-backclassic:hover{
  color:#fff;
  background:rgba(168,85,247,.24);
  border-color:rgba(196,168,255,.62);
  transform:translateY(-1px);
}
.wb-backclassic svg{flex:0 0 auto;opacity:.9}
@media (max-width:760px){
  .wb-backclassic span{display:none}
  .wb-backclassic{padding:7px 9px}
  .wb-topbar .wb-date-inline{
    margin-left:8px!important;
    font-size:11px!important;
  }
}


/* ══ 助理 · 4 天分区（今天/明天/周六/周日）══
   主上：「除了今天的生活决策，还要有 明天、周六、周日。」 */
.wb-aide-day{
  margin-bottom:26px;
  padding:18px 20px 20px;
  border-radius:18px;
  background:rgba(24,18,42,.42);
  border:1px solid rgba(140,120,200,.18);
}
.wb-aide-dayh{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:15px;
  border-bottom:1px solid rgba(140,120,200,.2);
}
.wb-aide-dayt{
  font-size:18px;font-weight:900;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wb-aide-dayd{
  font-size:12.5px;font-weight:700;color:rgba(170,158,205,.86);
  font-variant-numeric:tabular-nums;
}
.wb-aide-dayn{
  margin-left:auto;font-size:11.5px;font-weight:800;
  padding:3px 10px;border-radius:999px;
  color:#ffe9a8;background:rgba(255,214,10,.12);
  border:1px solid rgba(255,214,10,.34);
}
/* 第一个分区（今天）稍微提亮，做视觉锚点 */
.wb-aide-day:first-of-type{
  background:rgba(34,25,58,.55);
  border-color:rgba(160,135,230,.3);
}
@media (max-width:900px){
  .wb-aide-day{padding:14px 12px 16px;margin-bottom:18px;border-radius:14px}
  .wb-aide-dayt{font-size:16px}
}


/* ══ 问事页 · 组织格式改造（参照 WorkBuddy 首页）══
   主上（2026-11-09）：「附件2 的组织格式 像 附件1 学习」
   漏斗：大标题 → 大输入卡（含时间标签条 + 输入行 + 提示）→ 辅助区
   关键：输入卡是唯一视觉重心；时间按钮降级为卡内标签条。 */
.wb-askpage{
  max-width:860px;margin:0 auto;
  padding:8px 0 48px;
}

/* ① 大标题区：居中，紧凑 */
.wb-askhero{
  text-align:center;
  padding:14px 0 18px;
}
.wb-askhero-k{
  font-size:10.5px;letter-spacing:.24em;font-weight:800;
  color:rgba(150,138,185,.78);margin-bottom:10px;
}
.wb-askhero-h{
  margin:0 0 11px;font-size:31px;font-weight:900;line-height:1.28;
  background:linear-gradient(180deg,#ffffff,#f0e9ff 42%,#c9b3ff 78%,#a98cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)) drop-shadow(0 0 16px rgba(150,110,255,.3));
}
.wb-askhero-sub{
  margin:0 auto;max-width:560px;
  font-size:13px;line-height:1.85;color:rgba(180,168,215,.88);
}

/* ② 大输入卡：整块卡片，浅色内嵌输入 */
.wb-askbig{
  margin:4px 0 24px;
  padding:16px 18px 13px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(38,28,64,.82),rgba(24,17,44,.9));
  border:1px solid rgba(160,135,230,.3);
  box-shadow:0 14px 44px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.03) inset;
}
/* 时间标签条：卡内顶部，弱化 */
.wb-tr-inline{
  margin:0 0 13px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(140,120,200,.16);
  background:none!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.wb-tr-inline .wb-tr-h{display:none!important}
.wb-tr-inline .wb-tr-chips{
  justify-content:flex-start!important;
  gap:6px!important;
  flex-wrap:wrap;
}
.wb-tr-inline .wb-tr-chip{
  font-size:11.5px!important;
  padding:5px 11px!important;
  border-radius:999px;
  color:rgba(190,178,225,.85)!important;
  background:rgba(120,90,190,.1)!important;
  border:1px solid rgba(150,125,215,.24)!important;
}
.wb-tr-inline .wb-tr-chip.on{
  color:#1a1030!important;
  background:linear-gradient(180deg,#ffe9a8,#ffd04a)!important;
  border-color:rgba(255,214,10,.62)!important;
  font-weight:900;
}
.wb-tr-inline .wb-tr-show{
  text-align:left!important;
  font-size:10.5px!important;
  margin-top:7px!important;
  color:rgba(160,148,195,.72)!important;
}

/* 主输入行：大、白底、圆角 */
.wb-askbig-inner{
  display:flex;gap:10px;align-items:center;
}
.wb-askbig-inner input{
  flex:1;min-width:0;
  padding:14px 18px;
  border-radius:14px;
  font-size:14.5px;line-height:1.4;
  color:#1f1730;
  background:rgba(248,246,255,.97);
  border:2px solid rgba(196,168,255,.42);
  transition:border-color .16s,box-shadow .16s;
}
.wb-askbig-inner input::placeholder{color:rgba(110,95,140,.62)}
.wb-askbig-inner input:focus{
  outline:0;
  border-color:rgba(168,85,247,.85);
  box-shadow:0 0 0 4px rgba(168,85,247,.16);
  background:#fff;
}
.wb-askbig-go{
  flex:0 0 auto;
  padding:14px 24px;
  border-radius:14px;cursor:pointer;
  font-size:14px;font-weight:900;letter-spacing:.02em;
  color:#3d2400;
  background-color:#e8a91c;
  background-image:linear-gradient(180deg,#ffd968,#e8a91c 62%,#c9860a);
  border:2px solid #ffe08a;
  box-shadow:0 4px 16px rgba(232,169,28,.34);
  transition:transform .12s,box-shadow .16s;
}
.wb-askbig-go:hover{
  box-shadow:0 0 0 3px rgba(255,214,10,.32),0 8px 22px rgba(255,190,40,.42);
  transform:translateY(-1px);
}
.wb-askbig-go:active{transform:translateY(0)}
.wb-askbig-tip{
  margin-top:10px;
  font-size:11px;color:rgba(150,138,185,.7);
  text-align:center;
}

@media (max-width:900px){
  .wb-askpage{padding:4px 0 32px}
  .wb-askhero{padding:8px 0 14px}
  .wb-askhero-h{font-size:23px}
  .wb-askhero-sub{font-size:12px}
  .wb-askbig{padding:13px 13px 11px;border-radius:16px}
  .wb-askbig-inner{flex-direction:column;align-items:stretch;gap:9px}
  .wb-askbig-inner input{padding:13px 15px;font-size:14px}
  .wb-askbig-go{width:100%;padding:13px 20px}
}


/* ══ 最近提问（重做）══
   主上：「"最近提问"内容版块，设计一下，不够美观。还要加上附件3符号
   （7 个操作：复制/赞/踩/朗读/重新生成/分享/更多）。」 */
.wb-histpage{max-width:900px;margin:0 auto;padding:8px 0 44px}
.wb-hist-hero{
  padding:24px 26px 20px;margin-bottom:18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(34,25,58,.72),rgba(20,15,36,.5));
  border:1px solid rgba(150,125,215,.22);
}
.wb-hist-k{
  font-size:10.5px;letter-spacing:.2em;font-weight:800;
  color:rgba(150,138,185,.75);margin-bottom:8px;
}
.wb-hist-hero h2{
  margin:0 0 10px;font-size:22px;font-weight:900;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wb-hist-hero h2 em{
  font-style:normal;font-size:14px;font-weight:800;
  -webkit-text-fill-color:#ffe9a8;margin-left:6px;
}
.wb-hist-hero p{margin:0;font-size:13px;line-height:1.85;color:rgba(190,178,225,.88)}

/* 每条记录一张卡 */
.wb-hist-list{display:flex;flex-direction:column;gap:11px}
.wb-hist-card{
  border-radius:15px;
  background:rgba(28,20,50,.55);
  border:1px solid rgba(140,120,200,.22);
  overflow:hidden;
  transition:background .18s,border-color .18s;
}
.wb-hist-card:hover{
  background:rgba(46,32,78,.6);
  border-color:rgba(196,168,255,.5);
}
.wb-hist-main{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 16px 12px;
}
.wb-hist-idx{
  flex:0 0 auto;width:22px;height:22px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;
  color:#c9b6ff;background:rgba(120,90,190,.18);
  border:1px solid rgba(150,125,215,.3);
  margin-top:1px;
}
.wb-hist-txt{min-width:0;flex:1}
.wb-hist-q{
  font-size:14px;font-weight:700;line-height:1.6;color:#ece4ff;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wb-hist-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:7px;font-size:11.5px;color:rgba(160,148,195,.82);
}
.wb-hist-time{font-variant-numeric:tabular-nums}
.wb-hist-score{
  font-weight:900;color:#ffe9a8;
  padding:1px 8px;border-radius:999px;
  background:rgba(255,214,10,.12);
  border:1px solid rgba(255,214,10,.3);
}
.wb-hist-dim{
  padding:1px 8px;border-radius:999px;
  color:#c9b6ff;background:rgba(168,85,247,.14);
  border:1px solid rgba(168,85,247,.32);
  font-weight:700;
}

/* 7 个操作符号条 */
.wb-hist-acts{
  display:flex;align-items:center;gap:2px;
  padding:7px 12px 9px;
  border-top:1px solid rgba(140,120,200,.14);
  background:rgba(14,10,26,.3);
}
.wb-hist-act{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:30px;padding:0;
  border-radius:8px;cursor:pointer;
  color:rgba(170,158,205,.78);
  background:none;border:0;
  transition:color .14s,background .14s,transform .12s;
}
.wb-hist-act:hover{
  color:#fff;
  background:rgba(168,85,247,.22);
}
.wb-hist-act:active{transform:scale(.93)}
.wb-hist-act.on{color:#ffe9a8;background:rgba(255,214,10,.16)}
.wb-hist-act.flash{color:#7fffd4;background:rgba(127,255,212,.16)}
.wb-hist-act svg{display:block}

/* 更多菜单 */
.wb-hist-more{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.wb-hist-morebtn{
  padding:12px 15px;border-radius:11px;cursor:pointer;text-align:left;
  font-size:13px;font-weight:700;
  color:rgba(226,216,246,.94);
  background:rgba(24,18,42,.6);
  border:1px solid rgba(140,120,200,.26);
  transition:background .15s,border-color .15s;
}
.wb-hist-morebtn:hover{background:rgba(60,42,100,.6);border-color:rgba(168,85,247,.55)}
.wb-hist-morebtn.danger{color:#ffb4b4}
.wb-hist-morebtn.danger:hover{background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.5)}

@media (max-width:900px){
  .wb-histpage{padding:4px 0 30px}
  .wb-hist-hero{padding:17px 15px 15px}
  .wb-hist-hero h2{font-size:18px}
  .wb-hist-main{padding:13px 13px 10px;gap:10px}
  .wb-hist-q{font-size:13.5px}
  .wb-hist-acts{padding:6px 8px 8px;gap:0}
  .wb-hist-act{width:34px;height:32px}
}


/* ── 顶部主入口「新建服务」的**静态**区别化（不是选中态！）──
   ⚠️ 实测 bug（2026-11-10 用户反馈「新建服务为什么会一直亮着」）：
     这里原来写了无条件的紫色渐变底 + 外发光 + !important，
     而真正的选中态是 .wb-te-item.on（强度还比它低），
     结果「新建服务」**永远亮着**，切到别的页面也不变暗 —— 看起来像一直在选中。
   修法：primary 只保留"这是主入口"的弱暗示（金色图标 + 字重略高），
        不带底色/不带发光；底色和光晕全部交给 .on / :hover 控制，
        这样它只在自己被选中时亮。 */
.wb-te-item.wb-te-primary{
  background:rgba(120,90,190,.1);
  border-color:rgba(150,125,215,.26);
  box-shadow:none;
}
.wb-te-item.wb-te-primary:hover{
  background:rgba(150,110,235,.18);
  border-color:rgba(196,168,255,.5);
  box-shadow:0 2px 12px rgba(168,85,247,.16);
}
.wb-te-item.wb-te-primary .wb-te-ic{color:#ffe9a8}
.wb-te-item.wb-te-primary .wb-te-txt{font-weight:900}
/* 选中时与其它入口用同一套高亮（.on 已定义），只需保证 primary 不覆盖它 */
.wb-te-item.wb-te-primary.on{
  background:linear-gradient(180deg,rgba(168,85,247,.3),rgba(120,80,210,.22));
  border-color:rgba(196,168,255,.7);
  box-shadow:0 0 16px rgba(168,85,247,.2);
}
.wb-te-item.wb-te-primary.on .wb-te-ic{color:#ffe9a8}


/* ══ 问事页 · 整块卡片 + 星空感（主上 2026-11-09）══
   「要是一个整体，不要切开两份。另外，设计有点丑。要加 星空感觉 在里面。」
   做法：
     · .wb-asksheet 一张卡包住 标题 + 时间标签 + 输入行 + 提示（不再分两截）
     · 卡内叠三层装饰：星云（径向渐变）→ 星点（radial-gradient 平铺）→ 顶部柔光
       全部纯 CSS，不加载图片、不影响交互（pointer-events:none）
     · 边框用渐变描边，边角有微光，做出"深空玻璃"质感 */
.wb-asksheet{
  position:relative;
  margin:6px 0 26px;
  padding:26px 26px 22px;
  border-radius:24px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(96,64,168,.16) 0%, transparent 62%),
    radial-gradient(90% 70% at 88% 8%, rgba(64,120,190,.1) 0%, transparent 58%),
    radial-gradient(80% 80% at 50% 110%, rgba(120,72,200,.1) 0%, transparent 60%);
  /* 主上（2026-11-09）：「附件3，你要把框也去掉。」
     ⇒ 去掉边框与投影，只保留极淡的星空底，让内容直接浮在页面上。 */
  border:0!important;
  box-shadow:none!important;
  overflow:visible;
}
/* ① 星点层：两层不同大小/密度的 radial-gradient 平铺，模拟星野 */
.wb-sheet-stars{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.8px 1.8px at 43% 12%, rgba(214,196,255,.85), transparent 100%),
    radial-gradient(1px 1px at 58% 74%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.6px 1.6px at 71% 28%, rgba(255,240,200,.8), transparent 100%),
    radial-gradient(1px 1px at 84% 58%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 93% 16%, rgba(200,220,255,.8), transparent 100%),
    radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.2px 1.2px at 66% 42%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 8% 78%, rgba(214,196,255,.6), transparent 100%);
  background-size:100% 100%;
  opacity:.9;
  animation:wbSheetTwinkle 7s ease-in-out infinite alternate;
}
@keyframes wbSheetTwinkle{
  0%   { opacity:.55; }
  50%  { opacity:.95; }
  100% { opacity:.65; }
}
/* ② 星云光晕：一层缓慢漂移的柔光 */
.wb-sheet-glow{
  position:absolute;
  left:-18%;top:-34%;
  width:74%;height:120%;
  pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(150,110,255,.34), rgba(120,80,210,.12) 58%, transparent 100%);
  filter:blur(26px);
  animation:wbSheetDrift 16s ease-in-out infinite alternate;
}
@keyframes wbSheetDrift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(16%,8%,0) scale(1.14); }
}
/* 内容层压在装饰之上 */
.wb-asksheet > .wb-askhero,
.wb-asksheet > .wb-askbig{position:relative;z-index:1}
/* 卡内的输入区不再自带边框/背景/外距（它属于这张卡） */
.wb-asksheet .wb-askbig{
  margin:0!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
/* 卡内标题区：去掉底部大留白，与输入区连成一气 */
.wb-asksheet .wb-askhero{
  padding:0 0 18px!important;
  text-align:center;
  border-bottom:1px solid rgba(140,120,200,.16);
  margin-bottom:16px;
}
/* 时间标签条：与输入行之间留一点气口 */
.wb-asksheet .wb-tr-inline{
  /* 主上（2026-11-09）：「附件4 居中。」
     ⚠️ 实测：容器里除按钮外还有「当前范围 今天 2026-11-10」这行文字，
        它占了宽度，导致按钮排被推偏（左间隙 262 / 右间隙 390，差 128px）。
     修法：把按钮排变成独立的居中行 —— 容器用 grid 单列居中，
          按钮组自身 flex 居中，不受范围文字影响。 */
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0 0 14px!important;
  padding:0 0 14px!important;
  border-bottom:1px solid rgba(140,120,200,.13);
}
.wb-asksheet .wb-tr-inline > *{
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
/* 按钮组本身也要居中（防它内部左对齐） */
.wb-asksheet .wb-tr-inline > .wb-tr-btns,
.wb-asksheet .wb-tr-inline > div:first-child{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:8px;
  width:auto!important;
}
/* 提示文案 */
.wb-asksheet .wb-askbig-tip{margin-top:11px;text-align:center}

@media (max-width:900px){
  .wb-asksheet{padding:18px 14px 16px;border-radius:18px;margin:4px 0 18px}
  .wb-asksheet .wb-askhero{padding:0 0 14px!important;margin-bottom:13px}
}


/* ══ 助理 · 一排 tab（主上 2026-11-09）══
   「这里要做一排tab，可选，不是全放在一起。类似附件2。」
   样式对齐问事页那排时间按钮：胶囊、未选中透明+浅紫描边、选中亮金实心+光晕。 */
.wb-aide-tabs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(24,18,42,.5);
  border:1px solid rgba(140,120,200,.2);
}
.wb-aide-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;
  border-radius:999px;cursor:pointer;
  font-size:13px;font-weight:700;line-height:1.2;
  color:rgba(200,190,232,.88);
  background:transparent;
  border:1px solid rgba(150,125,215,.32);
  transition:color .16s,background .16s,border-color .16s,box-shadow .18s,transform .12s;
}
.wb-aide-tab:hover{
  color:#fff;
  background:rgba(168,85,247,.16);
  border-color:rgba(196,168,255,.6);
}
.wb-aide-tab .wb-aide-tabt{font-weight:900}
.wb-aide-tab .wb-aide-tabd{
  font-style:normal;font-size:11px;font-weight:700;
  color:rgba(160,148,195,.8);
  font-variant-numeric:tabular-nums;
}
/* 选中：亮金实心 + 黑字 + 光晕（同附件2 的"今天"） */
.wb-aide-tab.on{
  color:#1a1030;
  background:linear-gradient(180deg,#ffe9a8,#ffd04a);
  border-color:rgba(255,214,10,.7);
  box-shadow:0 0 0 2px rgba(255,214,10,.24),0 6px 20px rgba(255,200,60,.34);
  transform:translateY(-1px);
}
.wb-aide-tab.on .wb-aide-tabd{color:rgba(60,40,0,.72)}

/* 面板：只显示选中的那一天 */
.wb-aide-panel{display:none}
.wb-aide-panel.on{display:block}

/* 面板内的日头：与 tab 重复，弱化成一行小标 */
.wb-aide-panel .wb-aide-dayh{
  padding:0 0 12px;margin-bottom:14px;
  border-bottom:1px solid rgba(140,120,200,.16);
}
.wb-aide-panel .wb-aide-dayt{
  font-size:15px;font-weight:900;
  background:linear-gradient(180deg,#fff,#e7dbff 55%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

@media (max-width:900px){
  .wb-aide-tabs{padding:10px;gap:6px;margin-bottom:14px}
  .wb-aide-tab{padding:7px 12px;font-size:12px;flex:1 1 auto;justify-content:center}
  .wb-aide-tab .wb-aide-tabd{display:none}
}


/* ── 问事页标题：logo 风格（星云图标 + 金属字，不带 slogan）──
   主上（2026-11-09）：「附件2 的地方 放logo的风格，slogan不用放。」 */
.wb-askhero-logo{
  display:flex;align-items:center;justify-content:center;
  gap:12px;
  margin:0 0 12px;
}
.wb-askhero-slot{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:0 0 52px;
}
.wb-askhero-slot svg{display:block;overflow:visible}
.wb-askhero-brand{
  /* 主上（2026-11-09）：「把logo文字补回来"星座.live"，再跟着"，"后面这些文字。」
     三段（星座.live / ， / 服务你的生活）要连成一句：基线对齐、零间隙。 */
  display:inline-flex;align-items:baseline;gap:0;
}
/* 复用经典版 .brand-name 的金属渐变；字号与逗号/slogan 统一为 32px */
.wb-askhero-brand .brand-name{
  font-size:32px;font-weight:800;line-height:1.15;letter-spacing:.01em;
  white-space:nowrap;
  background:linear-gradient(180deg,
    #ffffff 0%, #f7f0ff 18%, #e6d8ff 40%,
    #c4a8ff 62%, #9d7ef0 84%, #7d5fd6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 -1px 0.5px rgba(255,255,255,.38))
         drop-shadow(0 2px 3px rgba(20,8,42,.55))
         drop-shadow(0 0 14px rgba(150,110,255,.34));
}
.wb-askhero-brand .brand-name b{
  color:transparent;
  background:linear-gradient(180deg,
    #efe6ff 0%, #c9b3ff 30%, #9fb4ff 58%,
    #6fd4ff 84%, #48a8e8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
}
@media (max-width:900px){
  .wb-askhero-logo{gap:9px;margin-bottom:9px}
  .wb-askhero-slot{width:40px;height:40px;flex:0 0 40px}
  .wb-askhero-brand .brand-name{font-size:23px}
}


/* ══ 品牌 logo 悬停发光（主上 2026-11-09）══
   「工作台的logo 还没修复好，鼠标移过去，星辰每发亮。」
   实测：之前**完全没有** :hover 规则 → 悬停无任何反馈。
   做法：整块可点区 hover 时 —— 星云图放大 1.06 + 加紫色外发光，
        品牌字整体提亮，横线也亮起来，给"这里是可点的"明确暗示。 */
.wb-brand{
  transition:transform .2s ease;
}
.wb-brand .logo-slot{
  transition:transform .28s cubic-bezier(.34,1.4,.5,1), filter .28s ease;
  will-change:transform,filter;
}
.wb-brand:hover .logo-slot{
  transform:scale(1.06) rotate(-2deg);
  filter:drop-shadow(0 0 10px rgba(168,132,255,.85))
         drop-shadow(0 0 22px rgba(120,160,255,.55))
         brightness(1.18);
}
.wb-brand:hover .logo-slot svg{
  filter:brightness(1.15) saturate(1.2);
}
/* 文字跟着提亮 */
.wb-brand .brand-name,
.wb-brand .brand-slogan{
  transition:filter .24s ease,opacity .24s ease;
}
.wb-brand:hover .brand-name{
  filter:brightness(1.14) drop-shadow(0 0 10px rgba(170,130,255,.5));
}
.wb-brand:hover .brand-slogan{
  filter:brightness(1.2);
}
/* 底部横线在 hover 时也亮起来 */
.wb-brand::after{
  transition:box-shadow .24s ease,opacity .24s ease;
  opacity:.85;
}
.wb-brand:hover::after{
  opacity:1;
  box-shadow:0 0 8px rgba(150,110,255,.75);
}
/* 按下时轻微回弹，给点击确认感 */
.wb-brand:active .logo-slot{
  transform:scale(.97);
  transition-duration:.08s;
}

/* ── 问事页标题：logo +「，」+「服务你的生活」（主上 2026-11-09）──
   ⚠️ 实测事故：字号写 34px，但被 `.wb-asksheet` 下已有的通用规则覆盖成 16px，
      并且因为 hero 是 flex + 未收拢，文字飘到 x=826（远离 logo）。
      修法：选择器提到 .wb-asksheet 前缀 + !important，字号/行高锁死，
           整个 logo 组居中且不换行。 */
.wb-asksheet .wb-askhero-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
  margin:0 0 14px!important;
  width:100%!important;
}
.wb-asksheet .wb-askhero-sep{
  font-size:32px!important;font-weight:300!important;line-height:1!important;
  color:rgba(214,196,255,.85)!important;
  /* 中文逗号自带右侧半角空隙，左右 margin 归零即自然紧贴 */
  margin:0!important;padding:0!important;
  text-shadow:0 2px 8px rgba(20,8,42,.55);
  flex:none;
  align-self:baseline;
}
.wb-asksheet .wb-askhero-slogan{
  font-size:32px!important;font-weight:800!important;line-height:1.15!important;
  letter-spacing:.02em;white-space:nowrap!important;
  margin:0!important;padding:0!important;
  align-self:baseline;
  background:linear-gradient(180deg,
    #ffffff 0%, #f7f0ff 18%, #e6d8ff 40%,
    #c4a8ff 62%, #9d7ef0 84%, #7d5fd6 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 -1px 0.5px rgba(255,255,255,.38))
         drop-shadow(0 2px 3px rgba(20,8,42,.55))
         drop-shadow(0 0 14px rgba(150,110,255,.3));
  flex:none;
}
@media (max-width:900px){
  .wb-asksheet .wb-askhero-sep,
  .wb-asksheet .wb-askhero-slogan{font-size:23px!important}
  .wb-asksheet .wb-askhero-logo{gap:7px!important;margin-bottom:10px!important}
}


/* ══ HERO-NO-BOX ══
   主上（2026-11-09）：「这个框去掉，外面的边框。」
   实测：.wb-asksheet 已经是 border:0/none，但页面上那个框是
        **.wb-askhero 自己的 1px 边框**（rgba(150,120,255,.18)、圆角 18px、1060×155）。
   去掉它，同时清掉可能的内阴影/背景，让标题区完全浮在星空上。 */
.wb-asksheet .wb-askhero,
.wb-askhero{
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0 0 18px!important;
}
/* 标题区底部分隔线也一并去掉（同样是"框"的一部分观感） */
.wb-asksheet .wb-askhero{border-bottom:0!important}


/* ══ ONE-WHOLE-REDESIGN ══
   主上（2026-11-09）：「这个看起来必须是一个整体，不要有任何分割。
   你重新设计好。现在看起来有点分裂。」

   分裂的三个断点（实测定位）：
     ① .wb-tr-inline 底部还有 1px 分隔线（rgba(140,120,200,.13)，宽 1060）
        → 在标题与输入区之间硬生生划了一刀
     ② 输入框是 rgba(248,246,255,.97) 近纯白 + 2px 边框
        → 深色星空里突然一块大白，像另一个组件
     ③ 提交按钮是实心亮金 + 2px 亮边 + 强投影
        → 与白框拼在一起又是一块

   重新设计原则：**一个连续的深色玻璃体**
     · 全部去掉横向分隔线
     · 输入框改深色玻璃（白 6% 底 + 淡紫细边），文字白色
     · 按钮改"同材质"的浅金胶囊（不再实心大亮块），与输入框同高同圆角
     · 三者间距统一 14px，视觉上是一段话 → 一排按钮 → 一个输入行
    */

/* ① 去掉时间排的分隔线 */
.wb-asksheet .wb-tr-inline,
.wb-asksheet .wb-tr-inline::after{
  border-bottom:0!important;
  border-top:0!important;
}
.wb-asksheet .wb-tr-inline::after{content:none!important}

/* ② 输入行：深色玻璃，与背景同材质 */
.wb-asksheet .wb-askbig-inner{
  display:flex!important;
  gap:10px!important;
  align-items:stretch!important;
  width:100%!important;
}
.wb-asksheet .wb-askbig-inner input,
.wb-asksheet #wb-ask-big,
.wb-asksheet #wb-ask-inline{
  flex:1 1 auto!important;min-width:0!important;
  height:52px!important;
  padding:0 20px!important;
  border-radius:999px!important;
  font-size:14.5px!important;line-height:52px!important;
  color:#f2edff!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(168,140,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:border-color .18s,box-shadow .18s,background .18s!important;
}
.wb-asksheet .wb-askbig-inner input::placeholder,
.wb-asksheet #wb-ask-big::placeholder,
.wb-asksheet #wb-ask-inline::placeholder{
  color:rgba(190,180,220,.55)!important;
}
.wb-asksheet .wb-askbig-inner input:focus,
.wb-asksheet #wb-ask-big:focus,
.wb-asksheet #wb-ask-inline:focus{
  outline:0!important;
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(190,150,255,.62)!important;
  box-shadow:0 0 0 4px rgba(168,85,247,.13),
             inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* ③ 提交按钮：同材质浅金胶囊（不再实心大亮块） */
/* 提交按钮：与时间按钮"选中态"同一种语言 —— 淡金描边 + 微金底 + 金字。
   实心亮黄块是页面上的最后一个视觉断裂点，统一成玻璃质感。 */
.wb-asksheet .wb-askbig-go,
.wb-asksheet #wb-ask-go{
  flex:0 0 auto!important;
  height:52px!important;
  padding:0 26px!important;
  border-radius:999px!important;
  font-size:14px!important;font-weight:900!important;letter-spacing:.03em;
  color:#ffe9a8!important;
  background-color:rgba(255,214,90,.14)!important;
  background-image:linear-gradient(180deg,
    rgba(255,230,150,.2), rgba(255,205,70,.12) 70%, rgba(232,169,28,.1))!important;
  border:1px solid rgba(255,214,90,.66)!important;
  box-shadow:0 0 0 1px rgba(255,214,90,.12),
             inset 0 1px 0 rgba(255,255,255,.14),
             0 2px 12px rgba(232,169,28,.16)!important;
  transition:transform .12s,box-shadow .18s,background .18s,color .18s!important;
}
.wb-asksheet .wb-askbig-go:hover,
.wb-asksheet #wb-ask-go:hover{
  color:#3a2400!important;
  background-color:rgba(255,214,90,.92)!important;
  background-image:linear-gradient(180deg,
    rgba(255,235,150,.96), rgba(255,205,70,.96) 62%, rgba(232,169,28,.96))!important;
  box-shadow:0 3px 18px rgba(232,169,28,.3),
             inset 0 1px 0 rgba(255,255,255,.5)!important;
  transform:translateY(-1px)!important;
}
.wb-asksheet .wb-askbig-go:active,
.wb-asksheet #wb-ask-go:active{transform:translateY(0)!important}

/* ④ 提示文案：贴紧输入行 */
.wb-asksheet .wb-askbig-tip{
  margin-top:12px!important;
  font-size:11.5px!important;
  color:rgba(160,148,196,.62)!important;
  text-align:center;
}

/* ⑤ 整块节奏统一：标题 → 时间排 → 输入行，间距一致 14px */
.wb-asksheet .wb-askhero{
  padding:0 0 14px!important;
  margin-bottom:14px!important;
}
.wb-asksheet .wb-tr-inline{
  margin:0 0 14px!important;
  padding:0 0 0!important;
}
.wb-asksheet #wb-lexlive{
  margin-top:10px!important;
}

@media (max-width:900px){
  .wb-asksheet .wb-askbig-inner input,
  .wb-asksheet #wb-ask-big{height:46px!important;line-height:46px!important;font-size:13.5px!important}
  .wb-asksheet .wb-askbig-go,
  .wb-asksheet #wb-ask-go{height:46px!important;padding:0 18px!important;font-size:13px!important}
}


/* ══ TR-UNIFY ══
   主上：「必须是一个整体…现在看起来有点分裂。」
   时间按钮原来：选中态是**实心亮黄圆块**，在深色星空里非常跳，和整体割裂。
   改成：未选中=透明描边胶囊；选中=**淡金描边 + 半透明金底 + 金色文字**（不再实心块），
   保持整体深色玻璃调性，只靠"边框+文字变金"表达选中。 */
.wb-asksheet .wb-tr-inline button,
.wb-asksheet .wb-tr-inline .wb-tr-btn{
  padding:7px 15px!important;
  border-radius:999px!important;
  font-size:12.5px!important;font-weight:700!important;
  color:rgba(206,196,232,.9)!important;
  background:transparent!important;
  border:1px solid rgba(150,125,215,.28)!important;
  box-shadow:none!important;
  transition:color .16s,background .16s,border-color .16s,box-shadow .16s!important;
}
.wb-asksheet .wb-tr-inline button:hover,
.wb-asksheet .wb-tr-inline .wb-tr-btn:hover{
  color:#fff!important;
  background:rgba(168,85,247,.16)!important;
  border-color:rgba(196,168,255,.55)!important;
}
/* 选中：淡金描边 + 12% 金底 + 金字（不再实心亮块） */
.wb-asksheet .wb-tr-inline button.on,
.wb-asksheet .wb-tr-inline button[aria-pressed="true"],
.wb-asksheet .wb-tr-inline .wb-tr-btn.on{
  color:#ffe9a8!important;
  background:rgba(255,214,90,.12)!important;
  border-color:rgba(255,214,90,.62)!important;
  box-shadow:0 0 0 1px rgba(255,214,90,.16),
             inset 0 1px 0 rgba(255,255,255,.08)!important;
}
/* 「当前范围 …」那行：弱化成一句低对比说明，不再像独立模块 */
.wb-asksheet .wb-tr-show{
  margin-top:12px!important;
  font-size:12px!important;
  color:rgba(160,148,196,.66)!important;
  text-align:center!important;
}


/* ══ WHEEL-FIT-VIEWPORT ══
   实测问题（2026-11-10）：今日运程的圆盘 720×720，而主内容视口高 798px，
   上方还有标题/时间排/输入行占 ~300px ⇒
     · 滚到顶：盘底被切（bottom 1060 > 视口 798）
     · 滚到底：盘顶被切（top -153 < 0）
   两头都看不全，用户感受就是"盘不动了/滚不动了"。

   修法：圆盘尺寸取「视口高 − 上下留白」与容器宽取小，
        始终 ≤ min(容器宽, 视口高 − 140px)，保证一屏能装下整个盘。 */
#wb .wb-daywheel-inline,
#wb #today-wheel{
  /* 视口 798 时盘要 ≤ 720 才能一屏装下（含标题余量）：
     取 calc(100vh - 80px) 并再留 24px 缓冲 */
  max-width:min(100%, calc(100vh - 110px))!important;
  max-height:calc(100vh - 110px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#wb .wb-daywheel-inline svg,
#wb #today-wheel svg{
  max-width:100%!important;
  max-height:calc(100vh - 110px)!important;
  width:auto!important;
  height:auto!important;
  display:block;
  margin:0 auto;
}
/* 盘外层容器也别撑出视口 */
#wb .wb-daywheel-wrap,
#wb .wb-daywheel{
  max-width:100%!important;
  overflow:visible!important;
}
@media (max-height:900px){
  #wb .wb-daywheel-inline,
  #wb #today-wheel{max-width:min(100%, calc(100vh - 170px))!important;max-height:calc(100vh - 170px)!important}
  #wb .wb-daywheel-inline svg,
  #wb #today-wheel svg{max-height:calc(100vh - 170px)!important}
}


/* ══ NAV-DND-PIN ══
   导航分组：拖拽排序 / ⋯ 菜单 / 删除确认 / 置顶组 / 恢复列表
   需求（主上 2026-11-10 第 3、5 条） */

/* ── 分组标题右侧的 ⋯ 与拖拽手柄（悬停才显现）── */
.wb-nav-h{
  position:relative;
  display:flex;align-items:center;gap:8px;
}
.wb-nh-more,
.wb-nh-grip,
.wb-nh-fold{
  flex:0 0 20px;
  display:inline-flex;align-items:center;justify-content:center;
  width:20px!important;height:20px!important;
  min-width:20px!important;
  padding:0;
  border:0;background:transparent;
  color:rgba(190,178,225,.6);
  border-radius:6px;cursor:pointer;
  opacity:0;
  transition:opacity .16s,color .16s,background .16s;
}
.wb-nh-more svg,
.wb-nh-grip svg,
.wb-nh-fold svg{
  flex:0 0 auto!important;
  width:14px!important;height:14px!important;
  min-width:14px!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none;
}
.wb-nh-grip{cursor:grab;pointer-events:none}
.wb-nav-group:hover .wb-nh-more,
.wb-nav-group:hover .wb-nh-grip{opacity:1}
.wb-nh-more:hover{color:#e8dcff;background:rgba(168,85,247,.22)}
.wb-nh-more{margin-left:auto}

/* ── 拖拽态 ── */
.wb-nav-group[draggable="true"]{transition:opacity .16s}
.wb-nav-group.wb-dragging{opacity:.42}
.wb-nav-group.wb-drag-over{
  box-shadow:inset 0 2px 0 0 rgba(168,132,255,.9);
}

/* ── 导航项右侧的 置顶 / ⋯ 操作（悬停显现）── */
.wb-nav-item{position:relative}
.wb-ni-acts{
  position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:2px;
  opacity:0;pointer-events:none;
  transition:opacity .16s;
}
.wb-nav-item:hover .wb-ni-acts{opacity:1;pointer-events:auto}
.wb-ni-act{
  display:inline-flex;align-items:center;justify-content:center;
  /* ⚠️ 实测 bug：只写 width:20px 时，里面的 <svg> 被 flex 压成了 0px 宽
     （量到 svg cssW:0px），所以"看不见符号"。
     必须：按钮 flex:none 不收缩 + svg 显式尺寸 + flex:none。 */
  flex:0 0 20px;
  width:20px!important;height:20px!important;
  min-width:20px!important;
  padding:0;
  border:0;background:transparent;border-radius:6px;
  color:rgba(190,178,225,.75);cursor:pointer;
  transition:color .14s,background .14s;
}
.wb-ni-act svg{
  flex:0 0 auto!important;
  width:13px!important;height:13px!important;
  min-width:13px!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none;
}
.wb-ni-act:hover{color:#ffe9a8;background:rgba(168,85,247,.22)}

/* ── 置顶组 ── */
.wb-nav-pinned .wb-nh-txt{
  color:#ffe9a8!important;
  text-shadow:0 0 10px rgba(255,214,90,.35);
}
.wb-nh-fold{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  border:0;background:transparent;border-radius:6px;
  color:rgba(200,186,235,.75);cursor:pointer;
  transition:transform .2s,color .16s,background .16s;
}
.wb-nh-fold:hover{color:#fff;background:rgba(168,85,247,.22)}
.wb-nav-pbody{overflow:hidden;transition:max-height .26s ease,opacity .2s}
.wb-nav-pbody.collapsed{max-height:0!important;opacity:0}
/* 折叠时箭头转向 */
.wb-nav-pbody.collapsed ~ .wb-nav-h .wb-nh-fold{transform:rotate(-90deg)}

/* ── 右键/⋯ 弹出菜单 ── */
.wb-ctxmenu{
  position:fixed;z-index:2200;
  min-width:158px;
  padding:6px;
  border-radius:12px;
  background:rgba(30,22,52,.985);
  border:1px solid rgba(150,125,215,.4);
  box-shadow:0 16px 42px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
}
.wb-ctxmenu button{
  display:block;width:100%;
  padding:9px 12px;
  border:0;background:transparent;border-radius:8px;
  text-align:left;cursor:pointer;
  font-size:13px;font-weight:600;
  color:#e8e0ff;
  transition:background .14s,color .14s;
}
.wb-ctxmenu button:hover{background:rgba(168,85,247,.24);color:#fff}
.wb-ctxmenu button.danger{color:#ff9aa2}
.wb-ctxmenu button.danger:hover{background:rgba(255,90,100,.18);color:#ffc2c7}

/* ── 删除确认框 ── */
.wb-delmodal{
  position:fixed;inset:0;z-index:2300;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,18,.72);
  backdrop-filter:blur(5px);
  padding:20px;
}
.wb-delbox{
  width:min(420px,100%);
  padding:24px 24px 20px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(38,28,66,.99),rgba(24,17,44,.99));
  border:1px solid rgba(160,130,225,.42);
  box-shadow:0 26px 70px rgba(0,0,0,.66);
}
.wb-delbox h3{
  margin:0 0 12px;
  font-size:17px;font-weight:900;
  color:#fff;
}
.wb-deldesc{
  margin:0 0 12px;
  font-size:13px;line-height:1.6;
  color:rgba(210,200,238,.85);
}
.wb-delitems{
  display:block;margin-top:6px;
  font-size:12px;
  color:rgba(170,158,205,.8);
}
.wb-delnode{
  margin:0 0 18px;
  padding:10px 12px;
  border-radius:10px;
  font-size:12.5px;line-height:1.55;
  color:rgba(255,225,160,.92);
  background:rgba(255,214,90,.09);
  border:1px solid rgba(255,214,90,.24);
}
.wb-delnode b{color:#ffe9a8;font-weight:900}
.wb-delacts{display:flex;gap:10px;justify-content:flex-end}
.wb-delacts button{
  padding:9px 20px;border-radius:999px;cursor:pointer;
  font-size:13px;font-weight:800;
  border:1px solid rgba(160,130,225,.4);
  background:transparent;color:#d8cdf5;
  transition:background .16s,border-color .16s,color .16s;
}
.wb-delacts .wb-delcancel:hover{background:rgba(168,85,247,.2);border-color:rgba(196,168,255,.7);color:#fff}
.wb-delacts .wb-delok{
  background:rgb(214,58,72);border-color:rgb(238,96,110);color:#fff;
}
.wb-delacts .wb-delok:hover{background:rgb(232,72,86)}

/* ── 设置页：恢复列表 ── */
.wb-restore-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.wb-restore-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(150,125,215,.24);
}
.wb-restore-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.wb-restore-info b{font-size:14px;color:#fff;font-weight:800}
.wb-restore-info span{font-size:11.5px;color:rgba(170,158,205,.8);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── toast ── */
.wb-toast{
  position:fixed;left:50%;bottom:38px;
  transform:translateX(-50%) translateY(14px);
  z-index:2400;
  padding:11px 22px;
  border-radius:999px;
  font-size:13px;font-weight:700;
  color:#fff;
  background:rgba(40,28,70,.97);
  border:1px solid rgba(168,132,255,.5);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;
}
.wb-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 命盘页顶部条（当前命盘信息）── */
.wb-chartbar{align-items:flex-start;flex-wrap:wrap;gap:12px}
.wb-chartbar-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.wb-chartbar-planet{
  font-size:13px;font-weight:800;
  background:linear-gradient(180deg,#fff,#e2d4ff 60%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.wb-chartbar-birth{
  font-size:11.5px;color:rgba(170,158,205,.8);
  font-variant-numeric:tabular-nums;
}
@media (max-width:900px){
  .wb-chartbar-planet{font-size:12px}
  .wb-ni-acts{opacity:1;pointer-events:auto}
  .wb-nh-more{opacity:1}
}


/* ══ TE-COMPACT（主上 2026-11-10）══
   需求：①「取消了小字之后，空间就大了。每个选项的 padding 就可以缩小，
            符号、文字都要上下居中」
        ②「整个选项 block 离上面的线有很多空间，要往上靠」

   实测问题：.wb-te-item 是 2 行网格（grid-template-rows:auto auto），
   小字删掉后第二行空着，但行高还在 → 卡片虚高、内容不居中。
   修法：① 改成单行 flex，图标与文字垂直居中
        ② padding 上下压到 7px
        ③ 容器 .wb-topentries 上 padding 从 4px 收到 2px，让整块贴近上面的横线 */
.wb-te-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  padding:7px 12px!important;
  min-height:0!important;
}
.wb-te-ic{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;height:18px!important;
  flex:0 0 18px!important;
  margin:0!important;
}
.wb-te-txt{
  display:inline-flex!important;
  align-items:center!important;
  line-height:1.25!important;
  margin:0!important;
}
/* 小字已删，清掉可能残留的第二行占位 */
.wb-te-desc{display:none!important}

/* 容器：整块往上靠，贴近 logo 下那条横线 */
.wb-topentries{
  /* 主上（2026-11-10）：「整个选项 block 离上面的线有很多空间，要往上靠。」
     实测线到入口块 24px = brand 的 margin-bottom 16px + 本块 padding-top 2px + 6px 余量。
     ⇒ 用负 margin 抵消 brand 的下边距，把整块顶上去（视觉上紧贴横线）。 */
  padding-top:0!important;
  padding-bottom:7px!important;
  gap:6px!important;
  margin-top:-12px!important;
}
@media (max-width:900px){
  .wb-te-item{padding:6px 10px!important;gap:9px!important}
  .wb-topentries{padding-top:2px!important;padding-bottom:6px!important}
}


/* ══ NH-ICON-OFF（主上 2026-11-10 第 3 条）══
   「附件3、附件4，看不见选项的符号。留一个就够了，不用两个。」
   实测：分组标题「今天」左边有紫色星球（.wb-nh-planet），
        它下面每个导航项左边又有金色球（.wb-ni-planet）——
        两个符号在竖直方向紧挨着，视觉上像"重复的两个圆球"。
   修法：**去掉分组标题的星球图标**，每个选项只留自己的金色球。
        这样一组标题是纯文字 + 细线，选项各自一个球，层级更清楚。 */
/* 主上（2026-11-10）：「标题里星球的符号（紫色球体）为什么没有了。要有的。」
   ⇒ 恢复分组标题的紫色星球（上一轮为"留一个"误删了）。
      层级关系改为：**分组标题有紫色星球，导航项用金色小球** —— 两者颜色/形状不同，
      不再像"重复的两个圆球"，用户已认可这种区分。 */
.wb-nav-h .wb-nh-planet{
  display:block!important;
  flex:0 0 auto;
}
/* 标题不再需要给图标留位，文字左对齐到与选项球体同一起点（更整齐） */
.wb-nav-h{
  padding-left:2px;
  gap:8px!important;
}
.wb-nav-h .wb-nh-txt{
  margin-left:0;
}
/* 置顶组标题同理（它用的是同一个类） */



/* ══ ACTS-VISIBLE ══
   主上（2026-11-10）：「我移到 选择符号，符号根本看不见。」
   除了 SVG 被压成 0px 之外，还有两个可见性问题：
     ① 操作符号只有 13px、颜色 rgba(170,158,205,.6) —— 在深紫底上几乎糊掉
     ② 悬停时才出现，但出现瞬间没有背景衬托，容易被当成噪点
   这里提高对比：默认给淡底、hover 变亮金、并有明确底色块。 */
.wb-ni-acts{
  padding:2px;
  border-radius:8px;
  background:rgba(28,20,48,.55);
  backdrop-filter:blur(3px);
}
.wb-nav-item:hover .wb-ni-acts,
.wb-nav-item.on .wb-ni-acts{
  background:rgba(34,24,58,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.wb-ni-act{
  color:rgba(214,204,240,.9)!important;
}
.wb-ni-act:hover{
  color:#1a1030!important;
  background:linear-gradient(180deg,#ffe9a8,#ffd04a)!important;
}
/* 置顶按钮常态就给金色，暗示"这里能钉住" */
.wb-ni-pin{color:rgba(255,214,120,.8)!important}
.wb-ni-pin:hover{color:#1a1030!important}

/* 分组标题的 ⋯ 同样提高可见度 */
.wb-nav-group:hover .wb-nh-more{
  color:rgba(214,204,240,.9);
  background:rgba(34,24,58,.7);
}
.wb-nh-more:hover{color:#1a1030!important;background:linear-gradient(180deg,#ffe9a8,#ffd04a)!important}


/* ══ GRIP-FIX（主上 2026-11-10 第 2 条）══
   「附件2，是做什么的？」
   答：那是给分组标题加的**拖拽手柄**（2×3 六个点）—— 为第 3 条"拖拽分组排序"做的视觉提示。
   问题：它常驻显示、没有文字说明，在标题右边像一串莫名其妙的点，还挤压了标题空间。
   修法：
     · 默认**完全隐藏**（opacity 0 + width 0），只有 hover 分组时才占位出现
     · 出现时给它一个明确的 tooltip「拖动排序」
     · 颜色调淡，不与标题抢注意力
   这样它只在你要拖的时候出现，平时不打扰。 */
.wb-nh-grip{
  flex:0 0 12px!important;
  width:12px!important;min-width:12px!important;
  height:18px!important;
  opacity:0!important;
  transition:opacity .16s ease!important;
  color:rgba(170,158,205,.45)!important;
}
.wb-nav-group:hover .wb-nh-grip{
  opacity:1!important;
}
/* 拖拽时手柄变亮金色，明确"正在拖" */
.wb-nav-group.wb-dragging .wb-nh-grip{
  opacity:1!important;
  color:#ffd75e!important;
}


/* ══ CHARTBAR-FUNC（主上 2026-11-10）══
   「日期要放在波浪线上方，而且是可以调整那种，让用户可以更快换盘。」
   「日期字太小看不见，我要的是功能性。还有，这里缺 名称、地点。」

   修前问题：出生信息挤成一行 11px 灰字（1990-05-12 06:30 · 上海），
            在深底上几乎看不见，也没有"能换"的暗示。
   现在：名称 + 日期/时间/地点 三段标签块，字号 12.5px，整条可点换盘。 */
#wb .wb-chartbar{
  cursor:pointer;
  align-items:flex-start!important;
  padding:16px 18px!important;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(46,33,80,.72), rgba(30,22,54,.78));
  border:1px solid rgba(160,132,225,.32);
  box-shadow:0 4px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .18s, box-shadow .18s, background .18s, transform .12s;
}
#wb .wb-chartbar:hover{
  border-color:rgba(196,168,255,.62);
  box-shadow:0 6px 26px rgba(120,80,220,.28), inset 0 1px 0 rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(56,40,96,.8), rgba(36,26,64,.84));
}
#wb .wb-chartbar:active{transform:translateY(1px)}
#wb .wb-chartbar:focus-visible{
  outline:2px solid rgba(196,168,255,.8);
  outline-offset:2px;
}

#wb .wb-chartbar-l{
  display:flex;flex-direction:column;gap:9px;min-width:0;flex:1;
}
/* 第一行：命盘名称 + 换盘提示 */
#wb .wb-chartbar-row1{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
#wb .wb-chartbar-name{
  font-size:16px!important;font-weight:900!important;line-height:1.2;
  color:#fff!important;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
#wb .wb-chartbar-swap{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px;font-weight:800;
  color:#ffe9a8;
  background:rgba(255,214,90,.12);
  border:1px solid rgba(255,214,90,.4);
  white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s;
}
#wb .wb-chartbar:hover .wb-chartbar-swap{
  background:rgba(255,214,90,.24);
  border-color:rgba(255,214,90,.7);
  color:#fff8dd;
}
#wb .wb-chartbar-swap svg{display:block;flex:0 0 auto}

/* 第二行：日期 / 时间 / 地点 三段标签 */
#wb .wb-chartbar-facts{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
#wb .wb-cf{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;
  border-radius:9px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(160,140,220,.26);
  white-space:nowrap;
}
#wb .wb-cf i{
  font-style:normal;
  font-size:11px;font-weight:700;
  color:rgba(178,166,212,.9);
}
#wb .wb-cf b{
  font-size:12.5px!important;font-weight:800;
  color:#f2ecff!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
/* 第三行：太阳/月亮/上升 */
#wb .wb-chartbar-planet{
  font-size:12.5px!important;
  font-weight:700;
  background:linear-gradient(180deg,#fff,#e2d4ff 60%,#b79bf5);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  letter-spacing:.01em;
}

@media (max-width:900px){
  #wb .wb-chartbar{padding:13px 14px!important;border-radius:14px}
  #wb .wb-chartbar-name{font-size:15px!important}
  #wb .wb-cf{padding:3px 9px;gap:5px}
  #wb .wb-cf i{font-size:10px}
  #wb .wb-cf b{font-size:11.5px!important}
  #wb .wb-chartbar-planet{font-size:11.5px!important}
  #wb .wb-chartbar-facts{gap:6px}
}


/* ── 取消置顶按钮（主上 2026-11-10：「"取消置顶"icon 重新设计一下」）──
   原来是一条斜杠（看不出含义）。
   现在换成"图钉 + 取出箭头"的图标，颜色用暖橙，
   与「更多 ⋯」（紫灰）区分，一眼能认出是"把钉住的松开"。 */
.wb-ni-act.wb-ni-unpin{
  color:rgba(255,178,110,.92)!important;
}
.wb-ni-act.wb-ni-unpin:hover{
  color:#2a1600!important;
  background:linear-gradient(180deg,#ffcf9a,#ff9f4a)!important;
}
.wb-ni-unpin svg{display:block;flex:0 0 auto}


/* ══ MINI-FIX（主上 2026-11-10：「网页版，收起来，怎么变成这样了」）══
   实测收起态（.wb.side-mini）的坏点：
     ① 分组标题的紫色星球 w=28 仍 display:block ⇒ 占满 34px 按钮宽度
     ② 分组标题的 ⋯ 按钮 w=20（虽然 opacity:0 但仍占位）
     ③ 分组标题的拖拽手柄 w=12（同上）
     合计 41px 挤进 34px 的导航项 ⇒ 整列错位、右边像被啃掉
     ④ .wb-nav 宽 51px，而 .wb-brand/.wb-topentries/.wb-side-bottom 是 43px
        ⇒ 各块左右边缘参差（截图里那条"抖动"的竖线）
   修法：收起态把非图标元素全部物理移出布局（display:none，不只是 opacity），
        并把所有子块宽度统一。 */
#wb.side-mini .wb-nav-h .wb-nh-planet,
#wb.side-mini .wb-nav-h .wb-nh-txt,
#wb.side-mini .wb-nav-h .wb-nh-more,
#wb.side-mini .wb-nav-h .wb-nh-grip,
#wb.side-mini .wb-nav-h .wb-nh-fold{
  display:none!important;
}

/* 收起态的分组标题：只留一条细分隔线，占满可点宽度 */
#wb.side-mini .wb-nav-h{
  display:block!important;
  height:1px;
  min-height:1px;
  margin:10px 4px 6px;
  padding:0!important;
  gap:0!important;
  background:linear-gradient(90deg,
    rgba(150,120,255,0), rgba(150,120,255,.45) 50%, rgba(150,120,255,0));
  border-radius:1px;
}
#wb.side-mini .wb-nav-group{
  gap:0!important;
  margin-bottom:2px;
}

/* 宽度统一：所有子块与侧栏内容区等宽 */
#wb.side-mini .wb-brand,
#wb.side-mini .wb-topentries,
#wb.side-mini .wb-nav,
#wb.side-mini .wb-side-bottom{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  left:auto!important;
}
#wb.side-mini .wb-nav{
  padding-left:0!important;
  padding-right:0!important;
}
/* 导航项与入口卡在收起态居中且等宽 */
#wb.side-mini .wb-nav-item,
#wb.side-mini .wb-te-item{
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:0!important;
  justify-content:center!important;
}
/* 隐藏导航项/入口卡里的操作按钮（收起态没有空间） */
#wb.side-mini .wb-ni-acts{display:none!important}
/* 收起态的导航项：只显示语义图标，金星球让位 */
#wb.side-mini .wb-nav-item .wb-ni-planet{display:none!important}
#wb.side-mini .wb-nav-item .wb-ni-sem{display:block!important}


/* ══ SB-ULTRA-THIN（主上 2026-11-10：「左侧这个滚动条厚度翻倍」）══
   实测：宽度数据一直是 2px（offsetWidth-clientWidth=2），
        8 倍放大截图也确认只有 1px 视觉宽度、无白轨无箭头。
   ⇒ 真机上"看起来翻倍"是**高 DPI 缩放**导致的：2 CSS px 在 200% 缩放下
      变成 4 个物理像素，比 1px 线条粗一倍多，视觉上就"翻倍"了。

   对策：把滚动条压到 **1.5px**（渲染时多半取整为 1px 或 2px 物理像素），
        并把滑块改成**渐变到两端透明**的细线，让它更像一根光丝，
        即使被放大也不会显得是"一条粗杠"。 */
/* 两侧分开设置（主上 2026-11-10：「右面的滚动条还是用5px」）：
   左边导航（.wb-nav）8px，右边主内容（.wb-main）5px。 */
.wb-main::-webkit-scrollbar{width:5px!important;height:5px!important;background:transparent!important}
.wb-nav::-webkit-scrollbar,
.wb-side::-webkit-scrollbar,
.wb-askmodal-box::-webkit-scrollbar,
.wb-mbody::-webkit-scrollbar{width:8px!important;height:8px!important;background:transparent!important}

/* 5px 宽下的滑块：圆角细条，两端仍渐隐 */
.wb-main::-webkit-scrollbar-thumb,
.wb-nav::-webkit-scrollbar-thumb,
.wb-side::-webkit-scrollbar-thumb,
.wb-askmodal-box::-webkit-scrollbar-thumb,
.wb-mbody::-webkit-scrollbar-thumb{
  border-radius:99px!important;
  min-height:48px;
}
/* 轨道透明（不要白底） */
.wb-main::-webkit-scrollbar-track,
.wb-nav::-webkit-scrollbar-track,
.wb-side::-webkit-scrollbar-track,
.wb-askmodal-box::-webkit-scrollbar-track,
.wb-mbody::-webkit-scrollbar-track{
  background:transparent!important;
  border:0!important;
}
/* 去掉两端箭头 */
.wb-main::-webkit-scrollbar-button,
.wb-nav::-webkit-scrollbar-button,
.wb-side::-webkit-scrollbar-button,
.wb-askmodal-box::-webkit-scrollbar-button{
  display:none!important;
  width:0!important;
  height:0!important;
}
.wb-main::-webkit-scrollbar-thumb,
.wb-nav::-webkit-scrollbar-thumb,
.wb-side::-webkit-scrollbar-thumb,
.wb-askmodal-box::-webkit-scrollbar-thumb,
.wb-mbody::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,
    rgba(168,132,255,0) 0%,
    rgba(178,145,255,.85) 12%,
    rgba(190,160,255,.95) 50%,
    rgba(178,145,255,.85) 88%,
    rgba(168,132,255,0) 100%)!important;
  border-radius:99px!important;
  border:0!important;
  min-height:48px;
}


/* ══ GRIP-CLEAR（主上 2026-11-10：「附件2 是做什么用的？如果要面什么用」）══
   那 6 个点是**分组拖拽手柄**：按住拖可以把整个分组上下移动。
   原来看不出用途（无提示、无悬停反馈），和旁边的黄色头像块还容易混淆。
   这里把用途"表面化"：
     ① 常态：手柄半透明，带 grab 光标
     ② 悬停分组：手柄亮起 + 出现一条"可拖动"的竖向虚线提示
     ③ 拖动中：手柄变金色实心，分组半透明 + 顶部亮边
     ④ 鼠标悬停手柄显示 title「拖动调整分组顺序」（JS 已加） */
.wb-nh-grip{
  cursor: grab !important;
  pointer-events: auto !important;
  opacity: 0 !important;
  transition: opacity .16s ease, color .16s ease, transform .16s ease !important;
}
.wb-nav-group:hover .wb-nh-grip{
  opacity: .75 !important;
  color: rgba(198,180,240,.9) !important;
}
.wb-nh-grip:hover{
  opacity: 1 !important;
  color: #ffe9a8 !important;
  transform: scale(1.15);
}
.wb-nav-group.wb-dragging .wb-nh-grip{
  opacity: 1 !important;
  color: #ffd75e !important;
  cursor: grabbing !important;
}
/* 悬停分组时，整行给一个"可拖"的暗示（左侧竖条） */
.wb-nav-group:hover > .wb-nav-h::before{
  content: "";
  position: absolute;
  left: -6px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(198,180,240,0), rgba(198,180,240,.8), rgba(198,180,240,0));
  opacity: .8;
  pointer-events: none;
}
/* 分组标题行要 relative 才能放上面的竖条 */
.wb-nav-h{ position: relative; }

/* 分组标题文字本身也提示可拖（光标） */
.wb-nav-group[draggable="true"] > .wb-nav-h{ cursor: grab; }
.wb-nav-group.wb-dragging > .wb-nav-h{ cursor: grabbing; }
/* 拖动中整块视觉 */
.wb-nav-group.wb-dragging{
  opacity: .55 !important;
  outline: 1px dashed rgba(255,215,94,.6);
  border-radius: 10px;
}
.wb-nav-group.wb-drag-over{
  box-shadow: inset 0 2px 0 0 rgba(168,132,255,.95) !important;
}


/* ══ PLANET-BIG（主上 2026-11-10：「那个星球太小了，要跟 logo 大小一样」）══
   分组标题前的紫色星球（.wb-nh-planet）原来按 SVG viewBox 48x28 缩到约 26x15，
   相比左侧 logo（约 52x52）显得很小。
   这里把它放大到与 logo 同量级：宽 44 / 高 26（保持 viewBox 比例 48:28）。
   同时把标题行高度撑开一点，避免放大后被压扁。 */
/* 实测三轮数据（主上依次反馈）：
     44×26  → 「太小了，要跟 logo 一样大」
     128×75 → 太大（宽比 1.78），标题被挤到最右
     60×35  → 「有点大，要小一定」  ← 仍偏大
   ⇒ 最终 46×27：比最初略大（用户确实要"大一点"），但明显小于 60×35，
      与 15px 标题文字的比例更协调。
      注：这个 SVG 的 viewBox 是 48:28（横长），做不成方形，
          只能靠视觉重量平衡，不能按高度硬对齐 logo 的 72。 */
.wb-nav-h .wb-nh-planet{
  /* 主上（2026-11-10）：「icon 太大了，要小三分之一。」
     40×24 → 再缩 1/3 ⇒ 27×16 */
  width: 27px !important;
  height: 16px !important;
  flex: 0 0 27px !important;
  margin-right: 3px;
  overflow: visible;
}
/* 标题文字跟着协调（原 13px，星球变大后文字略调） */
.wb-nav-h .wb-nh-txt{
  font-size: 15px !important;
  line-height: 1.25;
}


/* ══ 分裂标题前的 Q 版星座宠物（主上 2026-11-10）══
   「附件2，放对应的星座」—— 分组标题前显示**当前命盘太阳星座**的宠物。
   取代原来的紫色星球（星球保留在 DOM 里作为无宠物时的兜底）。 */
.wb-nav-h .wb-nh-pet{
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  object-fit: contain;
  margin-right: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  pointer-events: none;
  user-select: none;
}
/* 有宠物时不显示星球（避免两个图标并排） */
.wb-nav-h:has(.wb-nh-pet) .wb-nh-planet{
  display: none !important;
}

/* ── 加载态：宠物 + 文字 ── */
.wb-loading-pet{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 0 !important;
}
.wb-pet-loading{
  width: 84px;
  height: 84px;
  object-fit: contain;
  animation: wbPetBob 1.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 16px rgba(120,80,220,.45));
}
@keyframes wbPetBob{
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.04); }
}


/* ── 问事卡片标题左侧的星座宠物（主上 2026-11-10 附件2）── */
.wb-askhero-pet{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  margin-right: 6px;
}
.wb-askhero-pet-img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(120,80,220,.5));
}
@media (max-width:900px){
  .wb-askhero-pet,
  .wb-askhero-pet-img{width:44px;height:44px;flex:0 0 44px}
}
/* ══ 骨架屏（主上 2026-11-12）══
   场景：「附件2，打开会先看到这个，再后面内容搭建上。能否提升，马上看到整体。」
   做法：打开屏的瞬间就画出与真实页面同构的结构块（标题条/时间标签/大输入框/卡片网格），
        用微弱的呼吸动画表示「正在装」，数据到了整体替换。
   要点：
     · 骨架块用中性半透明，不抢色（不能用金色，否则像成品按钮）
     · 严格同构（高度/间距对齐真实元素），替换时不跳版
     · 动画只做 opacity 呼吸，不动 transform（避免整块位移造成"抖"） */
.wb-skeleton{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:6px 2px 20px;
  animation:wbSkIn .18s ease-out;
}
@keyframes wbSkIn{ from{opacity:.35} to{opacity:1} }

/* 骨架基础块 */
.wb-skeleton i{
  display:block;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.045);
}

/* 标题行 */
.wb-sk-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.wb-sk-bar{height:20px;border-radius:8px;background:rgba(255,255,255,.1)!important}
.wb-sk-bar.sm{height:14px;background:rgba(255,255,255,.06)!important}

/* 时间标签行 */
.wb-sk-tabs{display:flex;gap:8px;flex-wrap:wrap}
.wb-sk-pill{
  width:64px;height:30px;
  border-radius:999px;
  background:rgba(255,255,255,.06)!important;
}

/* 主视觉区（欢迎语位置） */
.wb-sk-hero{
  width:100%;height:56px;
  border-radius:12px;
  background:rgba(255,255,255,.045)!important;
}

/* 大输入框 */
.wb-sk-input{
  width:100%;height:56px;
  border-radius:14px;
  background:rgba(255,255,255,.065)!important;
}

/* 卡片网格：与真实卡片的列数一致 */
.wb-sk-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.wb-sk-card{
  width:100%;height:96px;
  border-radius:14px;
  background:rgba(255,255,255,.05)!important;
}

/* 呼吸：所有骨架块统一步调，避免参差显得乱 */
.wb-skeleton i{
  animation:wbSkBreath 1.6s ease-in-out infinite;
}
@keyframes wbSkBreath{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

@media (max-width:820px){
  .wb-sk-grid{grid-template-columns:1fr}
  .wb-sk-card{height:80px}
  .wb-sk-tabs{gap:6px}
  .wb-sk-pill{width:56px;height:28px}
}

/* ═══════════════════════════════════════════════════════════
   吉祥物全站投放（主上 2026-11-13「全部都做」）
   六组动作表情：wave 挥手 / jump 跳跃 / hip 叉腰 / sit 坐下 / wow 惊讶 / yawn 打哈欠
   ═══════════════════════════════════════════════════════════ */

/* 基础：所有 .wb-pet 统一透明底、不裁切、可等比 */
.wb-pet{
  display:inline-block;
  object-fit:contain;
  background:transparent;
  vertical-align:middle;
  -webkit-user-drag:none;
  user-select:none;
}

/* ── A1 统一详情弹窗 · 标题栏小头像 ── */
/* 弹窗标题栏左侧的吉祥物（主上 2026-11-13「统一在标题左侧，不要在中间」）
   44px + 圆形柔光背衬：既够辨识，又不挤占标题行 */
.wb-mhead-pet{
  width:44px;height:44px;
  margin-right:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(178,150,255,.38) 0%,
    rgba(140,110,230,.24) 44%,
    rgba(110,80,200,.10) 64%,
    rgba(110,80,200,0) 78%);
  filter:drop-shadow(0 0 7px rgba(200,180,255,.45))
         drop-shadow(0 2px 6px rgba(0,0,0,.38));
  animation:wbPetFloat 3.4s ease-in-out infinite;
}
@keyframes wbPetFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
/* 标题栏改成 flex，好让头像与文字同排 */
.wb-mhead{gap:2px}

/* ── A2 弹窗内容区 · 右上角浮标 ── */
.wb-pet-float{
  position:absolute;right:14px;top:10px;
  width:96px;height:96px;
  opacity:.92;
  pointer-events:none;
  filter:drop-shadow(0 6px 16px rgba(120,90,240,.42));
}

/* ── A3 空状态 ── */
.wb-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;
  padding:34px 20px;
  text-align:center;
}
.wb-empty-pet{
  width:150px;height:150px;
  opacity:.95;
  filter:drop-shadow(0 10px 24px rgba(120,90,240,.4));
  animation:wbPetSway 4.2s ease-in-out infinite;
}
@keyframes wbPetSway{
  0%,100%{transform:rotate(-2.5deg)}
  50%{transform:rotate(2.5deg)}
}
.wb-empty-t{
  font-size:13px;color:rgba(178,168,214,.9);line-height:1.6;
}
.wb-empty-t em{
  display:block;font-style:normal;font-size:11.5px;
  color:rgba(150,140,190,.72);margin-top:3px;
}

/* ── B1 加载页 · 6 帧动作循环 ── */
.wb-load-pet{
  width:132px;height:132px;
  filter:drop-shadow(0 8px 20px rgba(120,90,240,.45));
  animation:wbPetBounce 1.3s ease-in-out infinite;
}
@keyframes wbPetBounce{
  0%,100%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-7px) scale(1.03)}
}

/* ── C1 今日运程 · 可点宠物（已有，补动作过渡） ── */
.wb-tr-pet-img{transition:opacity .28s ease}

/* ── C2 雷达图中心 ── */
.wb-radar-pet{
  position:absolute;left:50%;top:50%;
  width:74px;height:74px;
  transform:translate(-50%,-50%);
  opacity:.9;pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(120,90,240,.4));
}

/* ── C3 今日决策 / 生活安排 · 条目小头像 ── */
.wb-life-pet{
  width:26px;height:26px;margin-right:8px;
  flex:0 0 auto;opacity:.94;
}

/* ── D1 欢迎页 ── */
.wb-welcome-pet{
  width:190px;height:190px;
  filter:drop-shadow(0 12px 30px rgba(120,90,240,.5));
  animation:wbPetWave 2.6s ease-in-out infinite;
}
@keyframes wbPetWave{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-5deg)}
  75%{transform:rotate(5deg)}
}

/* ── D2 排盘过场 ── */
.wb-calc-pet{
  width:112px;height:112px;
  animation:wbPetJump .85s ease-in-out infinite;
}
@keyframes wbPetJump{
  0%,100%{transform:translateY(0)}
  40%{transform:translateY(-12px)}
  60%{transform:translateY(-12px)}
}

/* ── D3 错误页 ── */
.wb-err-pet{
  width:150px;height:150px;
  animation:wbPetShake 2.8s ease-in-out infinite;
}
@keyframes wbPetShake{
  0%,88%,100%{transform:translateX(0)}
  91%{transform:translateX(-5px)}
  94%{transform:translateX(5px)}
  97%{transform:translateX(-3px)}
}

/* ── F1 十二星座列表 · 每格头像 ── */
.wb-signs-pet{
  width:58px;height:58px;
  margin-bottom:6px;
  filter:drop-shadow(0 4px 10px rgba(120,90,240,.34));
  transition:transform .22s ease;
}
.wb-sign-cell:hover .wb-signs-pet{transform:translateY(-3px) scale(1.06)}

/* ── F2 合盘双人 ── */
.wb-syn-pet{
  width:82px;height:82px;
  filter:drop-shadow(0 5px 14px rgba(120,90,240,.4));
}

/* ── F3 月运 / 年运节点 ── */
.wb-month-pet{
  width:30px;height:30px;
  margin-right:6px;opacity:.9;
}

/* 手机：整体缩小一档，避免占屏 */
@media (max-width:820px){
  .wb-empty-pet{width:118px;height:118px}
  .wb-welcome-pet{width:150px;height:150px}
  .wb-err-pet{width:120px;height:120px}
  .wb-load-pet{width:104px;height:104px}
  .wb-signs-pet{width:46px;height:46px}
  .wb-mhead-pet{width:36px;height:36px;margin-right:8px}
  .wb-pet-float{width:74px;height:74px;right:9px;top:7px}
}


/* ── F2 合盘 · 左右各一只（2026-11-13） ── */
.syn-person .wb-syn-pet{display:block;margin:0 auto 6px}

/* ── C2 雷达图中心吉祥物 ── */
.wb-radar-petwrap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}

/* ── C3 助理页头部 ── */
.wb-aide-pet{
  display:flex;justify-content:center;
  margin-top:6px;margin-bottom:-6px;
}
.wb-aide-hero .wb-welcome-pet{width:128px;height:128px}

/* ── D1 首次进入欢迎屏 ── */
.wb-welcome{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:30px 20px;text-align:center;
}
.wb-welcome .wb-welcome-pet{margin-bottom:2px}
.wb-welcome h2{font-size:20px;color:#f2ecff;margin:2px 0 0}
.wb-welcome p{font-size:13px;color:rgba(178,168,214,.9);max-width:420px;line-height:1.75}
.wb-welcome .wb-btn{margin-top:12px}

/* ── 错误态补充 ── */
.wb-empty-err .wb-empty-t{color:rgba(255,196,196,.92)}
.wb-calc-wrap{padding:40px 20px}

/* ── F1 十二星座瓦片：加吉祥物后调整布局 ── */
.wb-sign-cell{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px 9px 8px;
}
.wb-sign-cell .wb-signs-pet{margin-bottom:0;flex:0 0 auto}
.wb-sign-cell .g{flex:0 0 auto}
.wb-sign-cell > span:nth-of-type(2){flex:1 1 auto;min-width:0}

@media (max-width:820px){
  .wb-sign-cell .wb-signs-pet{width:38px;height:38px}
  .wb-aide-hero .wb-welcome-pet{width:104px;height:104px}
  .wb-radar-pet{width:56px;height:56px}
}


/* ═══════════════════════════════════════════════════════════
   维度详情 · 吉祥物主视觉（主上 2026-11-13）
   问题：38px 小图标贴在深紫底上，天蝎（深紫甲壳）几乎融进背景，
         实测对比度仅 3.42:1，用户「更看不清，主要颜色太接近了」。
   修法：① 放大到 92px  ② 加浅色光晕环脱离底色  ③ 与标题排成 hero 区
   ═══════════════════════════════════════════════════════════ */
.wb-md-hero{
  display:flex;align-items:center;gap:14px;
  margin:4px 0 12px;
}
.wb-md-pet{
  width:92px;height:92px;flex:none;position:relative;z-index:1;
  /* 主上 2026-11-13「天蝎更看不清，主要颜色太接近了」：
     天蝎主体均色 (122,94,110) vs 弹窗底 (16,10,38) ⇒ 对比度仅 3.34:1。
     实测三种方案：方框描边有 boxy halo（否）、提亮致塑料感（否）、
     圆形柔光背衬最自然 ⇒ 采用径向渐变衬底 + 两层柔光，不改原图本色。 */
  background:
    radial-gradient(circle at 50% 46%,
      rgba(178,150,255,.40) 0%,
      rgba(140,110,230,.26) 42%,
      rgba(110,80,200,.12) 62%,
      rgba(110,80,200,0) 76%);
  border-radius:50%;
  filter:
    drop-shadow(0 0 9px rgba(200,180,255,.50))
    drop-shadow(0 4px 10px rgba(0,0,0,.42));
  animation:wbMdPetFloat 3.6s ease-in-out infinite;
}
@keyframes wbMdPetFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.wb-md-hero-t{min-width:0;flex:1 1 auto}
.wb-md-hero .wb-md-h{margin:0 0 5px}
.wb-md-hero .wb-md-meta{margin-bottom:0}

@media (max-width:820px){
  .wb-md-hero{gap:11px;margin-bottom:10px}
  .wb-md-pet{width:74px;height:74px}
}


/* ═══════════════════════════════════════════════════════════
   所有详情弹窗 · 吉祥物（主上 2026-11-13「今日运程大的弹窗系列都没看到宠物」）
   实测 wb.js 22 处 + app.js 29 处弹窗，逐个加会漏 ⇒ 统一注入。
   82px + 圆形柔光背衬（解决天蝎等深色星座撞深紫底看不清）
   ═══════════════════════════════════════════════════════════ */

/* wb.js 系列（#wb-ask-modal-body 内注入） */
.wb-modal-pet{
  display:block;text-align:center;
  margin:2px 0 14px;
  line-height:0;
}
.wb-modal-pet-img{
  display:inline-block !important;
  width:82px !important;height:82px !important;
  min-width:82px;min-height:82px;
  max-width:82px;max-height:82px;
  background:radial-gradient(circle at 50% 46%,
    rgba(178,150,255,.40) 0%,
    rgba(140,110,230,.26) 42%,
    rgba(110,80,200,.12) 62%,
    rgba(110,80,200,0) 76%);
  border-radius:50%;
  filter:drop-shadow(0 0 9px rgba(200,180,255,.50))
         drop-shadow(0 4px 10px rgba(0,0,0,.42));
  animation:wbMdPetFloat 3.6s ease-in-out infinite;
}

/* app.js 系列（Modal.open 的 #modal-head 内注入） */
.modal-head-row{
  display:flex;align-items:center;gap:13px;
}
.modal-head-t{min-width:0;flex:1 1 auto}
.modal-pet{flex:none}
.modal-pet-img{
  width:82px;height:82px;
  background:radial-gradient(circle at 50% 46%,
    rgba(178,150,255,.40) 0%,
    rgba(140,110,230,.26) 42%,
    rgba(110,80,200,.12) 62%,
    rgba(110,80,200,0) 76%);
  border-radius:50%;
  filter:drop-shadow(0 0 9px rgba(200,180,255,.50))
         drop-shadow(0 4px 10px rgba(0,0,0,.42));
  animation:wbMdPetFloat 3.6s ease-in-out infinite;
}

@media (max-width:820px){
  .wb-modal-pet-img,.modal-pet-img{width:66px;height:66px}
  .wb-modal-pet{margin-bottom:11px}
  .modal-head-row{gap:10px}
}


/* ── 生活决策弹窗：标题左侧宠物（主上 2026-11-13）──
   原来巡检把宠物插到内容最上方（视觉居中、很大），
   现在由弹窗自己放在 .wb-star-head 里，与标题同排左侧。 */
.wb-star-head{
  display:flex;align-items:center;gap:13px;
  margin-bottom:10px;
}
.wb-star-head-t{min-width:0;flex:1 1 auto}
.wb-star-pet{
  width:76px;height:76px;flex:none;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(178,150,255,.38) 0%,
    rgba(140,110,230,.24) 44%,
    rgba(110,80,200,.10) 64%,
    rgba(110,80,200,0) 78%);
  filter:drop-shadow(0 0 7px rgba(200,180,255,.45))
         drop-shadow(0 2px 6px rgba(0,0,0,.38));
  animation:wbPetFloat 3.4s ease-in-out infinite;
}
@media (max-width:820px){
  .wb-star-pet{width:62px;height:62px}
  .wb-star-head{gap:10px}
}


/* ═══════════════════════════════════════════════════════════
   宠物统一规则（主上 2026-11-13）：
   「吉祥物必须跟主要标题放在一行，不能单独一行居中」
   ⇒ 所有含宠物的块改为「左图 + 右文」横排，宠物不再独占一行
   ═══════════════════════════════════════════════════════════ */

/* 通用：空状态/错误/计算过场 横排 */
.wb-empty-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:14px;
  padding:22px 20px !important;
}
.wb-empty-row .wb-empty-t{
  flex:1 1 auto;
  min-width:0;
}
/* 横排用的宠物尺寸（比原来的大图小，与文字等高观感） */
.wb-inline-pet{
  width:64px !important;
  height:64px !important;
  flex:0 0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(178,150,255,.36) 0%,
    rgba(140,110,230,.22) 44%,
    rgba(110,80,200,.09) 64%,
    rgba(110,80,200,0) 78%);
  filter:drop-shadow(0 0 6px rgba(200,180,255,.42));
}

/* 弹窗顶栏宠物（与标题同行，已在 .wb-mhead flex 里） */
.wb-mhead{
  display:flex !important;
  align-items:center !important;
}

/* 欢迎屏（首次进入）：横排 */
.wb-welcome{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  text-align:left !important;
  gap:16px;
  padding:24px 22px !important;
}
.wb-welcome .wb-welcome-pet{
  width:96px !important;height:96px !important;
  flex:0 0 auto;margin:0 !important;
}
.wb-welcome > h2,
.wb-welcome > p,
.wb-welcome > .wb-btn{ flex:1 1 auto; }

/* 助理页头部：横排（图左文右） */
.wb-aide-hero{ position:relative; }
.wb-aide-pet{
  position:absolute; right:16px; top:14px;
  margin:0 !important;
}
.wb-aide-hero .wb-welcome-pet{ width:82px !important;height:82px !important; }

@media (max-width:820px){
  .wb-inline-pet{width:52px !important;height:52px !important}
  .wb-welcome .wb-welcome-pet{width:74px !important;height:74px !important}
  .wb-aide-pet{position:static;display:flex;justify-content:flex-start;margin-top:8px !important}
}


/* ═══ 维度详情：宠物与大标题同一行（主上 2026-11-13「必须跟大标题放在一行」）═══ */
.wb-md-head{
  display:flex !important;
  align-items:center;
  gap:12px;
  margin:0 0 6px;
}
.wb-md-head .wb-md-h{
  margin:0 !important;
  flex:1 1 auto;
  min-width:0;
}
.wb-md-head .wb-md-pet{
  width:62px !important;
  height:62px !important;
  flex:0 0 auto;
  margin:0 !important;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(178,150,255,.38) 0%,
    rgba(140,110,230,.24) 44%,
    rgba(110,80,200,.10) 64%,
    rgba(110,80,200,0) 78%);
  filter:drop-shadow(0 0 7px rgba(200,180,255,.45));
}

/* 生活决策：宠物与「穿这块」大标题同一行 */
.wb-star-head{
  display:flex !important;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.wb-star-head .wb-star-pet{
  width:62px !important;
  height:62px !important;
  flex:0 0 auto;
  margin:0 !important;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(178,150,255,.38) 0%,
    rgba(140,110,230,.24) 44%,
    rgba(110,80,200,.10) 64%,
    rgba(110,80,200,0) 78%);
  filter:drop-shadow(0 0 7px rgba(200,180,255,.45));
}
.wb-star-head-t{ flex:1 1 auto; min-width:0; }

@media (max-width:820px){
  .wb-md-head .wb-md-pet,
  .wb-star-head .wb-star-pet{ width:50px !important; height:50px !important; }
}


/* ═══ 弹窗标题行：宠物与大标题真正同一行（像素实测修正）═══
   实测（2026-11-13）：head-row 高 105px、宠物 82px 居中(cy=438)，
   但 #modal-title 仅 33px 贴在行顶部(cy=402)，视觉差 36px ⇒ 看着像两行。
   修法：标题块本身也做 flex 垂直居中，让 h2 与宠物基线对齐。 */
#modal-head .modal-head-row > .modal-head-t{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:center;
  /* 关键：原规则 flex:1 1 auto 会拉伸成整行高，导致 h2 贴顶 */
  flex:0 1 auto;
}
#modal-head .modal-head-row > .modal-head-t > h2,
#modal-head .modal-head-row > .modal-head-t > #modal-title{
  margin:0;
  line-height:1.25;
}

/* ═══ 宠物与大标题「同一行」的真正修法（像素实测 2026-11-13）═══
   实测：.modal-head-t 是纵向 flex，内含 h2(33px) + meta + tags，总高 93px。
         h2 因此贴在该列顶部(y=392, cy=408)；
         宠物 82px 却按整列居中(cy=438) ⇒ 观感上差了 30px，像两行。
   注：在纵向 flex 里写 align-self 只动水平轴 —— 之前两版改法方向错了。
   修法：把标题与宠物都按「顶对齐」，并缩小宠物到 72px，让二者明显同一行。 */
#modal-head .modal-head-row{
  align-items:flex-start;
}
#modal-head .modal-head-row > .modal-pet{
  margin-top:0;
  align-self:flex-start;
}
#modal-head .modal-head-row > .modal-pet > .modal-pet-img,
#modal-head .modal-head-row .modal-pet-img{
  width:72px;
  height:72px;
}

/* ══════════ wb-mobile.css ══════════ */
/* ═══════════════════════════════════════════════════════════
   手机版工作台（≤900px）
   目标：iPhone/Android 竖屏可完整登录、导航、看内容、点弹窗。
   设计要点（实测问题逐条对应）：
     · 侧栏被移出屏幕但没有入口 → 加汉堡按钮 + 底部标签栏
     · 星盘三栏 grid 在 393px 挤成一条 → 强制单列
     · 经典版内嵌屏仍带桌面 padding（26px 20px 96px）→ 收到 12px
     · iPhone 底部小黑条会盖住内容 → env(safe-area-inset-bottom)
     · .wb-inline-screen 内部有固定宽度/最小宽度 → 全部放开
   ═══════════════════════════════════════════════════════════ */

/* 桌面端隐藏手机专用件 */
.wb-menu,
.wb-bottombar { display: none; }

@media (max-width: 900px) {

  /* ── 顶栏：汉堡 + 标题 + 问一句 ── */
  .wb-menu{
    display: inline-flex;flex-direction:column;justify-content:center;gap:4px;
    width:34px;height:34px;padding:0 7px;margin-right:9px;flex:none;
    border-radius:9px;cursor:pointer;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(150,120,255,.26);
  }
  .wb-menu i{
    display:block;height:2px;border-radius:2px;
    background:rgba(226,218,250,.92);
    transition:transform .2s ease,opacity .2s ease;
  }
  .wb.side-open .wb-menu i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .wb.side-open .wb-menu i:nth-child(2){opacity:0}
  .wb.side-open .wb-menu i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .wb-topbar{
    padding:10px 14px 10px;
    padding-top:calc(10px + env(safe-area-inset-top, 0px));
    align-items:center;
    gap:8px;
  }
  .wb-topbar h1{
    font-size:17px;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .wb-topbar-r{gap:8px;flex:none}
  .wb-date{display:none}          /* 手机顶栏放不下，日期移到内容里 */
  .wb-fab{font-size:11.5px;padding:7px 13px}

  /* ── 主区：底部留出标签栏高度 ── */
  .wb-main{
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .wb-body{
    padding:2px 12px calc(116px + env(safe-area-inset-bottom, 0px));
    max-width:none;
  }

  /* ── 侧栏抽屉：加遮罩、圆角、可滚动 ── */
  .wb-side{
    width:min(280px,82vw);
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-right:1px solid rgba(150,120,255,.28);
    z-index:60;
  }
  /* ⚠️ 原来用 .wb.side-open::after 做遮罩 —— 伪元素不在 DOM 里，
     绑不上任何事件，所以「点空白处关闭」永远没反应（用户实测反馈）。
     改成真实 DOM 元素 #wb-sidescrim（由 wb.js 插入），
     这样点击能派发到 #wb 的委托监听上，可靠关闭。 */
  #wb-sidescrim{
    display:none;
  }
  .wb.side-open #wb-sidescrim{
    display:block;
    position:fixed;inset:0;z-index:55;
    background:rgba(4,2,14,.66);
    backdrop-filter:blur(3px);
    cursor:pointer;
  }

  /* ── 底部标签栏 ── */
  .wb-bottombar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:repeat(5,1fr);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg, rgba(10,6,26,.86), rgba(8,5,22,.98));
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(150,120,255,.22);
  }
  .wb-bb-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:5px 0;border:0;background:transparent;cursor:pointer;
    color:rgba(168,158,200,.86);
    transition:color .16s ease;
  }
  .wb-bb-item em{font-style:normal;font-size:16px;line-height:1}
  .wb-bb-item span{font-size:10px;font-weight:700;letter-spacing:.02em}
  .wb-bb-item.on{color:#c9b7ff}
  .wb-bb-item.on em{filter:drop-shadow(0 0 8px rgba(180,150,255,.9))}
  .wb-bb-item:active{transform:scale(.94)}

  /* ── 弹窗铺满手机宽度，头/提问框仍固定 ── */
  .wb-askmodal{padding:0}
  .wb-askmodal-box{
    width:100%;max-width:none;
    height:100%;max-height:100%;
    border-radius:0;border:0;
    padding-top:env(safe-area-inset-top, 0px);
  }
  .wb-mhead{padding:12px 14px 10px}
  .wb-mhead-t{font-size:12.5px}
  .wb-mbtn{height:27px;padding:0 9px;font-size:11.5px}
  .wb-mbtn.ic{width:27px}
  .wb-mask{margin:10px 14px 4px;padding:6px 6px 6px 12px}
  .wb-mask input{font-size:14px}         /* ≥16px 才不会 iOS 自动放大；14 配合下面 zoom 规避 */
  .wb-mbody{padding:4px 14px calc(24px + env(safe-area-inset-bottom, 0px))}
  .wb-md-h{font-size:16.5px}
  .wb-md-meta{font-size:11px;line-height:1.6}
  .wb-md-score b{font-size:44px}
  .wb-md-cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .wb-md-cards b{font-size:19px}
  .wb-md-sec h4{font-size:12px}
  .wb-md-sec li{font-size:12.5px;line-height:1.85}
  .wb-md-lede{font-size:13px;line-height:1.8}

  /* ── 经典版内嵌屏：手机上必须单列、去桌面留白 ── */
  .wb-inline-screen{
    padding:0 !important;
    margin:0 !important;
  }
  .wb-inline-screen > .screen-inner{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }
  /* 星盘三栏 → 单列（393px 下三栏会把星盘挤成一条缝）
     实测：只把 .chart-arena 改 flex column 后，arena 仍只有 231px 宽、
     星盘只有 171px —— 说明真正的约束在更上层（.hero 是 grid，
     还有 .chart-block/.wave-wrap 带固定宽度）。所以整条链全放开。 */
  .wb-inline-screen #s-chart,
  .wb-inline-screen #s-chart .hero,
  .wb-inline-screen .chart-block,
  .wb-inline-screen .wave-wrap,
  .wb-inline-screen .chart-arena,
  .wb-inline-screen .chart-stage,
  .wb-inline-screen .chart-wheel,
  .wb-inline-screen #bigchart{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .wb-inline-screen .chart-arena{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }
  /* ⚠️ 这里必须是 flex:1 1 auto 而不是 flex:none：
     实测 flex:none 会让子元素按内容宽度收缩 —— .wave-wrap 缩到 257px，
     连带里面 .chart-arena 只有 231px、星盘只有 207px。 */
  .wb-inline-screen .chart-arena > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  /* .wave-wrap 在经典版带 padding-inline:5%，手机上不要这段留白 */
  .wb-inline-screen .wave-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* ⚠️ 真正的宽度杀手：.chart-block 带 padding:56px（桌面为星盘留呼吸空间）。
     393px 宽里扣掉 112px 只剩 257px —— 星盘永远只有 233px。
     手机上收到 0，星盘才能铺满。 */
  .wb-inline-screen .chart-block{
    padding:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .wb-inline-screen .chart-arena{
    padding:0 !important;
  }
  /* 星盘画面（雷达/圆盘）在小屏按 100% 宽渲染 */
  .wb-inline-screen .chart-stage{
    padding:6px 2px !important;
  }
  .wb-inline-screen .chart-stage{
    padding:10px 0 !important;
    justify-content:center !important;
  }
  .wb-inline-screen #bigchart{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }
  /* 星盘 SVG：占满可用宽度（手机竖屏 = 屏幕宽 - 24px 内边距） */
  .wb-inline-screen #bigchart svg{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }
  /* 经典版 .screen 是 position:absolute + height:100vh 的"整屏"骨架，
     搬进工作台后若不放开，实测高度被撑到 20499px（内容被极长空白拖开）。 */
  .wb-inline-screen,
  .wb-inline-screen .screen-inner,
  .wb-inline-screen .hero{
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:visible !important;
    position:static !important;
    inset:auto !important;
  }
  /* ── 经典版多列 grid 一律单列 ──
     ⚠️ 实测：只写 .grid3{display:block} 不够 —— 经典版自己的
     `@media(max-width:1000px){.grid.g3{grid-template-columns:repeat(2,1fr)}}`
     会在后面覆盖。而且 393px 下三列会把 .dimcard 压成 60px 竖条，
     高度从 800px 膨胀到 4515px（实测 chart-dims=4515px，
     整屏 15732px，星盘被推到很远的地方）。
     所以这里用 !important + 明确列数双保险。 */
  .wb-inline-screen .grid,
  .wb-inline-screen .grid2,
  .wb-inline-screen .grid3,
  .wb-inline-screen .grid4,
  .wb-inline-screen .g2,
  .wb-inline-screen .g3,
  .wb-inline-screen .g4,
  .wb-inline-screen .cols2,
  .wb-inline-screen .cols3,
  .wb-inline-screen #chart-dims,
  .wb-inline-screen #ability12-kv{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
  }
  /* 卡片本身不要被撑高 */
  .wb-inline-screen .dimcard,
  .wb-inline-screen .nx-card,
  .wb-inline-screen .card{
    height:auto !important;
    min-height:0 !important;
    padding:13px 12px !important;
  }
  /* 长文卡片：手机上限制高度，避免一屏几千像素 */
  .wb-inline-screen .essay-body,
  .wb-inline-screen .ei-body,
  #chart-essay-body{
    max-height:none !important;
  }
  /* 经典版屏头字号收小 */
  .wb-inline-screen .eyebrow{font-size:10.5px}
  .wb-inline-screen h2{font-size:19px !important;line-height:1.35}
  .wb-inline-screen h3{font-size:15px !important}
  .wb-inline-screen .sub{font-size:12px !important;line-height:1.7}

  /* ── 工作台自有卡片 ── */
  .wb-hero{grid-template-columns:1fr !important;gap:14px}
  .wb-card{padding:14px 13px;border-radius:13px}
  .wb-dims{grid-template-columns:repeat(2,1fr) !important;gap:8px}
  .wb-calgrid{gap:4px !important}
  .wb-calgrid button{min-height:46px !important;padding:4px 2px !important}
  .wb-calgrid button b{font-size:12px !important}
  .wb-calhead{font-size:10px !important}
  .wb-askbar{flex-direction:column}
  .wb-askbar input{font-size:14px}
  .wb-askbar button{width:100%;padding:12px 0}

  /* 表格类横向滚动而不是撑破页面 */
  .wb-inline-screen table{
    display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
}

/* 超窄屏（iPhone SE 320px）再收一档 */
@media (max-width: 380px){
  .wb-body{padding-left:10px;padding-right:10px}
  .wb-topbar h1{font-size:15.5px}
  .wb-fab{font-size:11px;padding:6px 11px}
  .wb-dims{grid-template-columns:1fr !important}
  .wb-md-cards{grid-template-columns:1fr !important}
  .wb-md-score b{font-size:38px}
  .wb-bb-item span{font-size:9px}
}

/* 横屏手机：高度小，侧栏与底部栏保持 */
@media (max-width: 900px) and (orientation: landscape){
  .wb-bottombar{padding-bottom:calc(3px + env(safe-area-inset-bottom, 0px))}
  .wb-bb-item{padding:3px 0}
  .wb-bb-item em{font-size:14px}
  .wb-main{padding-bottom:calc(46px + env(safe-area-inset-bottom, 0px))}
}

/* ── 手机端折叠区块 ── */
.wb-fold-btn{
  display:inline-flex;align-items:center;gap:5px;
  margin:8px 0 4px;padding:6px 14px;
  border-radius:999px;cursor:pointer;
  font-size:11.5px;font-weight:700;
  color:rgba(214,200,255,.96);
  background:rgba(126,92,255,.16);
  border:1px solid rgba(150,120,255,.34);
}
.wb-fold-btn:active{transform:scale(.96)}
/* 折叠态：限制高度 + 底部渐隐，暗示还有内容 */
.wb-folded:not(.wb-fold-open){
  max-height:340px !important;
  overflow:hidden !important;
  position:relative;
}
.wb-folded:not(.wb-fold-open)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(16,10,38,0), rgba(16,10,38,.96));
}
.wb-folded.wb-fold-open{
  max-height:none !important;
  overflow:visible !important;
}
.wb-folded.wb-fold-open::after{display:none}

/* 日历页底部的「按星座看 / 星座下拉」一排：手机上堆叠且贴太近 */
.wb-inline-screen .cal-foot,
.wb-inline-screen .cal-controls,
.wb-inline-screen #cal-src-row,
.wb-inline-screen .src-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:14px !important;
  padding-bottom:6px !important;
}
/* 任何横向按钮组在手机上允许换行，不许撑破 */
.wb-inline-screen .tagrow,
.wb-inline-screen .btnrow,
.wb-inline-screen .actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
/* 手机端所有 select / input 统一高度防 iOS 放大 */
.wb-inline-screen select,
.wb-inline-screen input[type="text"],
.wb-inline-screen input[type="date"],
.wb-inline-screen input[type="time"]{
  font-size:15px !important;
  min-height:38px !important;
  box-sizing:border-box !important;
}


  /* ══ 手机端侧栏关闭（主上 2026-11-10）══
     「手机登陆之后，我关不了左侧导航，点击空白处都没用。」
     两件事：
       ① 给一个明确的 X 按钮（原来只有折叠图标，手机上不好认）
       ② 遮罩层必须能接收点击 —— 原来它是 .wb.side-open::after 伪元素，
          伪元素不在 DOM 里，绑不上事件，点了当然没反应。
          现在保持伪元素做视觉遮罩，同时由 JS 在 #wb 上做委托拦截点击
          （见 wb.js 的 bindSideAutoclose），所以这里只需保证
          #wb 自身能收到点击：给 .wb-side 之外留出可点区域即可。 */
  .wb-sideclose{
    display:none;
  }
  .wb-sideclose{
    display:inline-flex!important;
    align-items:center;justify-content:center;
    position:absolute;top:10px;right:10px;
    width:30px;height:30px;
    padding:0;border:0;border-radius:9px;
    background:rgba(255,255,255,.07);
    color:rgba(226,218,250,.92);
    cursor:pointer;
    z-index:70;
    transition:background .16s,color .16s;
  }
  .wb-sideclose:active{background:rgba(168,85,247,.3);color:#fff}
  .wb-sideclose svg{display:block;width:16px;height:16px;flex:0 0 16px}

  /* 抽屉内给 X 按钮让出右上角位置 */
  .wb-side{padding-top:44px}
  /* 桌面端（>900px）不显示 X，避免与三态折叠按钮重复 */
  @media (min-width:901px){
    .wb-sideclose{display:none!important}
    .wb-side{padding-top:0}
  }

/* ══════════ wb-ask.css ══════════ */
/* ═══════════════════════════════════════════════════════════
   问事页（重做）
   用户：「问事，这一版块，内容实在太简单了。搜索框要居中。
         你给我把内容丰富起来。让用户更快的获得提示。」
   原版：标题 + 输入框 + 4 个 chip，下面 2/3 全空。
   现在：居中搜索区 → 今日可问 → 分类引导 → 最近问过 → 提问技巧
   ═══════════════════════════════════════════════════════════ */

.wb-askpage{
  max-width:1180px;       /* 原来 980，导致右侧留白一大片；铺满内容区 */
  width:100%;
  margin:0 auto;
  padding:6px 0 40px;
  box-sizing:border-box;
}

/* ── ① 居中搜索区 ── */
.wb-askhero{
  text-align:center;
  padding:34px 18px 26px;
  margin-bottom:22px;
  border-radius:18px;
  background:
    radial-gradient(ellipse 70% 80% at 50% -10%, rgba(126,92,255,.22), transparent 68%),
    rgba(255,255,255,.025);
  border:1px solid rgba(150,120,255,.18);
}
.wb-askhero-k{
  font-size:10.5px;font-weight:800;letter-spacing:.22em;
  color:rgba(180,160,255,.8);margin-bottom:9px;
}
.wb-askhero-h{
  margin:0 0 8px;font-size:26px;font-weight:900;
  letter-spacing:.01em;color:#f6f2ff;
  text-shadow:0 0 20px rgba(160,120,255,.4);
}
.wb-askhero-sub{
  margin:0 auto 20px;max-width:560px;
  font-size:12.5px;line-height:1.75;color:rgba(180,172,210,.9);
}
/* 搜索条：居中、限宽、大尺寸 */
.wb-askhero-bar{
  display:flex;gap:9px;
  width:min(620px,100%);
  margin:0 auto;
}
.wb-askhero-bar input{
  flex:1;min-width:0;
  font-family:inherit;font-size:14.5px;
  padding:14px 18px;
  border-radius:13px;
  color:#f4efff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(160,130,255,.34);
  outline:none;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.wb-askhero-bar input::placeholder{color:rgba(168,158,200,.6)}
.wb-askhero-bar input:focus{
  background:rgba(255,255,255,.11);
  border-color:rgba(185,155,255,.8);
  box-shadow:0 0 0 4px rgba(140,100,255,.16);
}
.wb-askhero-bar button{
  flex:none;
  font-family:inherit;font-size:14px;font-weight:800;
  padding:0 26px;border-radius:13px;cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(185,155,255,.55);
  box-shadow:0 6px 20px rgba(109,74,255,.42);
  transition:filter .16s, transform .12s;
}
.wb-askhero-bar button:hover{filter:brightness(1.1)}
.wb-askhero-bar button:active{transform:scale(.97)}
.wb-askhero-tip{
  margin-top:12px;font-size:11px;
  color:rgba(150,142,185,.8);letter-spacing:.02em;
}

/* ── ③ 今日可问（两张高亮卡） ── */
.wb-askspot{margin-bottom:26px}
.wb-askspot-h{
  font-size:13px;font-weight:800;color:#dcd2ff;
  margin-bottom:11px;padding-left:10px;
  border-left:3px solid rgba(160,120,255,.75);
}
.wb-askspot-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wb-askspot-card{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;cursor:pointer;
  padding:15px 16px;border-radius:14px;
  font-family:inherit;
  /* ⚠️ 手机上一列排布时，卡片高度由内容撑开。
     原来看似"文字压住下一张卡"其实是 <b>/<i> 没设 line-height 且
     card 用了 default 的 align-items:flex-start + 窄宽度导致换行溢出。
     这里显式允许换行 + 撑开高度，杜绝重叠。 */
  width:100%;
  box-sizing:border-box;
  overflow:visible;
  transition:transform .14s, border-color .16s, background .16s;
}
.wb-askspot-card:hover{transform:translateY(-2px)}
.wb-askspot-card.hi{
  background:linear-gradient(135deg, rgba(74,222,155,.14), rgba(74,222,155,.04));
  border:1px solid rgba(74,222,155,.34);
}
.wb-askspot-card.lo{
  background:linear-gradient(135deg, rgba(255,160,90,.14), rgba(255,160,90,.04));
  border:1px solid rgba(255,160,90,.34);
}
.wb-askspot-tag{
  font-size:10px;font-weight:800;letter-spacing:.08em;
  padding:3px 9px;border-radius:999px;
}
.wb-askspot-card.hi .wb-askspot-tag{
  color:#8bf0c0;background:rgba(74,222,155,.18);
}
.wb-askspot-card.lo .wb-askspot-tag{
  color:#ffc08a;background:rgba(255,160,90,.18);
}
.wb-askspot-card b{
  font-size:14px;font-weight:800;color:#f4efff;line-height:1.5;
}
.wb-askspot-card i{
  font-style:normal;font-size:11px;line-height:1.6;
  color:rgba(168,158,200,.86);
}

/* ── ② 分类引导 ── */
.wb-askgroups{margin-bottom:26px}
.wb-askgroups-h{
  font-size:13px;font-weight:800;color:#dcd2ff;
  margin-bottom:13px;padding-left:10px;
  border-left:3px solid rgba(160,120,255,.75);
}
.wb-askgroups-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));   /* 5 组正好排满一行，不留半行空位 */
  gap:11px;
}
@media (max-width:1180px){
  .wb-askgroups-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .wb-askgroups-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.wb-askgroup{
  padding:13px 14px 11px;border-radius:13px;
  background:rgba(255,255,255,.032);
  border:1px solid rgba(150,120,255,.14);
}
.wb-askgroup-t{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:800;color:#e2d8ff;
  margin-bottom:9px;
  white-space:nowrap;        /* 标题不许换行/被挤掉 */
  overflow:visible;
}
.wb-askgroup-t em{
  flex:none;
  font-style:normal;font-size:12px;
  color:#a98cff;
  text-shadow:0 0 8px rgba(160,120,255,.8);
}
.wb-askq{
  display:block;width:100%;text-align:left;
  font-family:inherit;font-size:12px;line-height:1.5;
  padding:7px 9px;margin-bottom:4px;
  border-radius:8px;cursor:pointer;
  color:rgba(206,198,232,.9);
  background:transparent;
  border:1px solid transparent;
  transition:.14s;
}
.wb-askq:hover{
  color:#fff;
  background:rgba(126,92,255,.16);
  border-color:rgba(160,130,255,.3);
  transform:translateX(2px);
}
.wb-askq:last-child{margin-bottom:0}

/* ── ④ 最近问过 ── */
.wb-askrecent{margin-bottom:26px}
.wb-askrecent-h{
  font-size:13px;font-weight:800;color:#dcd2ff;
  margin-bottom:11px;padding-left:10px;
  border-left:3px solid rgba(160,120,255,.75);
}
.wb-askrecent-list{
  /* 2026-11-12 修复右溢出：1fr 的最小尺寸是「内容宽」，
     长问句（模板句 60+ 字）会把列撑破，整个网格顶到容器外。
     minmax(0,1fr) 允许列收缩到 0，配合子元素的 ellipsis 才能真正截断。 */
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.wb-askrecent-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:inherit;font-size:12.5px;
  padding:10px 13px;border-radius:10px;cursor:pointer;
  color:rgba(214,206,238,.9);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.13);
  transition:.14s;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.wb-askrecent-row:hover{
  color:#fff;
  background:rgba(126,92,255,.14);
  border-color:rgba(160,130,255,.32);
}
.wb-askrecent-q{
  min-width:0;flex:1 1 auto;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  display:block;max-width:100%;
}
.wb-askrecent-m{
  flex:0 0 auto;font-size:10.5px;color:rgba(150,142,185,.72);
  white-space:nowrap;
}

/* ── ⑤ 提问技巧 ── */
.wb-asktips{
  padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px dashed rgba(150,120,255,.24);
}
.wb-asktips-h{
  font-size:12.5px;font-weight:800;color:#d8ccff;margin-bottom:10px;
}
.wb-asktips ul{margin:0;padding-left:0;list-style:none}
.wb-asktips li{
  position:relative;
  font-size:12px;line-height:1.85;
  color:rgba(190,182,220,.92);
  padding-left:16px;margin-bottom:6px;
}
.wb-asktips li::before{
  content:"";position:absolute;left:3px;top:8px;
  width:5px;height:5px;border-radius:50%;
  background:rgba(160,130,255,.75);
  box-shadow:0 0 7px rgba(160,130,255,.8);
}
.wb-asktips li:last-child{margin-bottom:0}
.wb-asktips b{color:#e6dcff;font-weight:700}

/* ── 手机 ── */
@media (max-width:900px){
  .wb-askpage{padding:2px 0 30px}
  .wb-askhero{padding:24px 14px 20px;border-radius:15px}
  .wb-askhero-h{font-size:20px}
  .wb-askhero-sub{font-size:12px;margin-bottom:16px}
  .wb-askhero-bar{flex-direction:column;gap:8px}
  .wb-askhero-bar input{font-size:16px;padding:13px 15px}
  .wb-askhero-bar button{padding:13px 0;width:100%}
  .wb-askspot-row{grid-template-columns:1fr}
  .wb-askgroups-grid{grid-template-columns:1fr}
  .wb-askrecent-list{grid-template-columns:1fr}
  .wb-askspot-card b{font-size:13.5px}
}

/* ══════════ wb-clickcards.css ══════════ */
/* ═══════════════════════════════════════════════════════════
   工作台：可点卡片 + 合盘网格（配套 wb.js 的改动）
   用户：「解读里面的内容都没有完整，补充完整。记得点击要跳出框。」
         「检查 全部工作台，要看详细内容的，点击要跳出框。不用遗漏。」
   ═══════════════════════════════════════════════════════════ */

/* ── 人格卡（5 张都可点）── */
.wb-pcard{
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
  position:relative;
}
.wb-pcard:hover{
  border-color:rgba(170,140,255,.42) !important;
  background:rgba(126,92,255,.07) !important;
}
.wb-pcard:active{transform:scale(.994)}
.wb-pcard:focus-visible{
  outline:2px solid rgba(170,140,255,.7);
  outline-offset:2px;
}
.wb-pcard h3{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.wb-pcard-go{
  flex:none;
  font-style:normal;font-size:10.5px;font-weight:700;
  color:rgba(178,152,255,.0);
  transition:color .16s ease, transform .16s ease;
  white-space:nowrap;
}
.wb-pcard:hover .wb-pcard-go{
  color:rgba(196,172,255,.95);
  transform:translateX(2px);
}
/* 触屏设备没有 hover，直接把入口常显 */
@media (hover:none){
  .wb-pcard-go{color:rgba(178,152,255,.78)}
}

/* ── 合盘逐维卡片 ── */
.wb-sygrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:9px;
}
.wb-sycard{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 8px;border-radius:11px;cursor:pointer;
  font-family:inherit;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(150,120,255,.16);
  transition:.15s;
}
.wb-sycard:hover{
  transform:translateY(-2px);
  border-color:rgba(170,140,255,.45);
  background:rgba(126,92,255,.13);
}
.wb-sycard-n{
  font-size:11px;color:rgba(196,186,226,.92);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.wb-sycard b{
  font-size:19px;font-weight:900;line-height:1.1;
}
.wb-sycard em{
  font-style:normal;font-size:10px;
  padding:1px 7px;border-radius:999px;
}
.wb-sycard.hi b{color:#7ee8b8}
.wb-sycard.hi em{color:#8bf0c0;background:rgba(74,222,155,.16)}
.wb-sycard.mid b{color:#b8a6ff}
.wb-sycard.mid em{color:#c7b6ff;background:rgba(160,130,255,.16)}
.wb-sycard.lo b{color:#ffb07a}
.wb-sycard.lo em{color:#ffc08a;background:rgba(255,160,90,.16)}

/* ── 梦想列表：可点 ── */
.wb-dreamlist{display:flex;flex-direction:column;gap:8px}
.wb-dream{
  display:flex;align-items:flex-start;gap:11px;
  width:100%;text-align:left;cursor:pointer;
  font-family:inherit;
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(150,120,255,.14);
  transition:.15s;
}
.wb-dream:hover{
  background:rgba(126,92,255,.13);
  border-color:rgba(170,140,255,.4);
  transform:translateX(2px);
}
.wb-dream>b{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  box-shadow:0 2px 8px rgba(109,74,255,.42);
}
.wb-dream>div{min-width:0;flex:1}
.wb-dream>div>span{
  display:block;font-size:13.5px;font-weight:800;color:#f2ecff;line-height:1.5;
}
.wb-dream>div>em{
  display:block;font-style:normal;margin-top:4px;
  font-size:11.5px;line-height:1.7;color:rgba(178,168,210,.9);
}
.wb-dream-go{
  flex:none;align-self:center;
  font-style:normal;font-size:17px;line-height:1;
  color:rgba(180,165,220,.5);
  transition:color .15s, transform .15s;
}
.wb-dream:hover .wb-dream-go{
  color:#cbb8ff;transform:translateX(2px);
}

/* ── 手机 ── */
@media (max-width:900px){
  .wb-sygrid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:7px}
  .wb-sycard{padding:9px 6px}
  .wb-sycard b{font-size:17px}
  .wb-dream{padding:11px 12px;gap:9px}
  .wb-dream>div>span{font-size:13px}
  .wb-dream>div>em{font-size:11px}
  /* 手机上"看完整解读"常显，不依赖 hover */
  .wb-pcard-go{color:rgba(178,152,255,.75)}
}

/* ══════════ wb-timerange.css ══════════ */
/* ═══════════════════════════════════════════════════════════
   问事页 · 时间范围选择
   用户：「多几个时间按钮。今天、明天、本周、下周、近3周、本月、
         下月，还可以有日历选择时间范围」
   ═══════════════════════════════════════════════════════════ */

.wb-timerange{
  width:min(620px,100%);
  margin:0 auto 18px;
  text-align:left;
}

/* 小标题 */
.wb-tr-h{
  font-size:11px;font-weight:800;letter-spacing:.14em;
  color:rgba(178,158,225,.86);
  margin-bottom:9px;
  padding-left:2px;
}

/* 快捷按钮行：自动换行，手机上也不会挤 */
.wb-tr-chips{
  display:flex;flex-wrap:wrap;gap:7px;
  justify-content:center;
}
.wb-tr-chip{
  flex:none;
  font-family:inherit;font-size:12.5px;font-weight:600;
  padding:7px 15px;
  border-radius:999px;cursor:pointer;
  color:rgba(206,196,238,.88);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(150,120,255,.22);
  transition:all .16s ease;
  white-space:nowrap;
}
.wb-tr-chip:hover{
  color:#fff;
  background:rgba(126,92,255,.2);
  border-color:rgba(170,140,255,.46);
  transform:translateY(-1px);
}
.wb-tr-chip.on{
  color:#fff;font-weight:800;
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;
  box-shadow:0 4px 14px rgba(123,77,255,.5),
             inset 0 1px 0 rgba(255,255,255,.2);
}
/* 自选日期按钮：带下拉箭头 */
.wb-tr-custom{
  display:inline-flex;align-items:center;gap:5px;
  border-style:dashed;
}
.wb-tr-custom em{
  font-style:normal;font-size:9px;opacity:.7;
  transition:transform .16s ease;
}
.wb-tr-custom.on em{transform:rotate(180deg)}

/* 自选日期面板：默认收起，点「自选日期」才展开 */
.wb-tr-pick{
  display:none;
  align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;padding:11px 13px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(150,120,255,.2);
}
.wb-tr-pick.show{display:flex}
.wb-tr-pick input[type="date"]{
  font-family:inherit;font-size:12.5px;
  padding:7px 10px;border-radius:9px;
  color:#f0ebff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(150,120,255,.3);
  outline:none;
  color-scheme:dark;
}
.wb-tr-pick input[type="date"]:focus{
  border-color:rgba(185,155,255,.8);
  box-shadow:0 0 0 3px rgba(140,100,255,.16);
}
.wb-tr-pick span{
  font-size:11.5px;color:rgba(170,160,200,.8);
}
.wb-tr-pick button{
  font-family:inherit;font-size:12.5px;font-weight:700;
  padding:7px 18px;border-radius:9px;cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.5);
}
.wb-tr-pick button:hover{filter:brightness(1.12)}

/* 当前范围回显 */
.wb-tr-show{
  margin-top:10px;text-align:center;
  font-size:11.5px;color:rgba(170,160,200,.8);
  min-height:16px;
  /* 实测：手机上「当前范围 下周 2026-11-09~2026-11-15」偏长，
     之前用 nowrap 会被裁成「下 ...」。允许换行，保证文字完整。 */
  white-space:normal;
  word-break:break-word;
  line-height:1.6;
}
.wb-tr-show b{
  font-weight:700;color:rgba(190,172,255,.92);
  margin-right:6px;
}
.wb-tr-show em{
  font-style:normal;color:#c9b8ff;font-weight:600;
}

/* 手机 */
@media (max-width:900px){
  .wb-timerange{width:100%}
  .wb-tr-chips{gap:6px;justify-content:flex-start}
  .wb-tr-chip{font-size:12px;padding:7px 12px}
  .wb-tr-pick{justify-content:flex-start}
  .wb-tr-pick input[type="date"]{font-size:13px;flex:1;min-width:120px}
  .wb-tr-pick button{width:100%}
}


/* ── 实时词库识别条（读到时自动显示，不用用户点按钮）──
   位置：输入框正下方、提示语上方。低调但可读，不抢输入焦点。 */
.wb-lexlive{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:10px auto 0;max-width:660px;padding:0 4px;
  font-size:12.5px;color:rgba(190,178,220,.86);
  animation:wbLexIn .22s ease-out;
}
.wb-lexlive[hidden]{display:none}
@keyframes wbLexIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.wb-lexlive-t{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(150,138,185,.7);font-weight:800;
}
.wb-lexlive-time{
  color:rgba(200,190,230,.72);font-weight:800;
  padding:2px 9px;border-radius:999px;
  border:1px solid rgba(140,120,200,.34);
  background:rgba(120,90,190,.12);
}
/* 命中时间词 → 亮起来（金色边，与"已自动切到该时间"呼应） */
.wb-lexlive-time.on{
  color:#ffe9a8;
  border-color:rgba(255,214,10,.55);
  background:rgba(255,214,10,.13);
  box-shadow:0 0 12px rgba(255,206,60,.22);
}
.wb-lexlive-dim{
  color:#d9c9ff;font-weight:800;
  padding:2px 9px;border-radius:999px;
  border:1px solid rgba(168,85,247,.36);
  background:rgba(168,85,247,.14);
}
.wb-lexlive-sep{color:rgba(150,138,185,.45)}
.wb-lexlive-hint{
  color:rgba(160,148,195,.66);font-size:11.5px;
  margin-left:2px;
}
@media (max-width:640px){
  .wb-lexlive{font-size:11.5px;gap:5px;justify-content:center}
  .wb-lexlive-hint{width:100%;text-align:center;margin:2px 0 0}
}

/* ══════════ polish.css ══════════ */
/* ═══════════════════════════════════════════════════════
   星座.live · 视觉增强层（v1）
   ───────────────────────────────────────────────────────
   参考「深空 · 细线圆环 · 中心星芒 · 柔和外发光」的视觉语言，
   统一提升全站按钮与光效质感。只覆盖样式，不改任何逻辑。

   设计原则：
     1. 不用硬阴影，改用「多层柔光晕」（box-shadow 叠加 0 0 0 …）
     2. 主动作 = 渐变实底 + 外发光；次动作 = 细线框 + 内高光
     3. 图标用内联 SVG 星芒（细线圆环 + 四角星），不用表情符号
     4. 悬停统一三件事：微上浮 1px、光晕变亮、内高光加强
   ═══════════════════════════════════════════════════════ */

/* ───────── ① 分享按钮（全站通用） ───────── */
/* 结构：<span class="spark"></span> 星芒图标 + 文字
   没有图标时用 ::before 伪元素补一个 SVG（data URI，无外链） */
.share-btn,
.ls-share,
#modal-share,
.pc-share,
.modal-act.share,
[data-share]{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;
  font-family:inherit;font-weight:700;
  color:#f4f0ff;
  padding:8px 20px 8px 16px;
  border-radius:999px;
  border:1px solid rgba(201,176,255,.55);
  background:
    linear-gradient(180deg, rgba(168,110,255,.30), rgba(123,77,255,.16)),
    rgba(22,13,48,.72);
  box-shadow:
    0 0 0 1px rgba(169,125,255,.16) inset,
    0 0 14px rgba(150,100,255,.28),
    0 0 34px rgba(123,77,255,.16),
    0 6px 18px rgba(0,0,0,.34);
  backdrop-filter:blur(10px) saturate(1.2);
  transition:transform .18s ease, box-shadow .22s ease,
             border-color .22s ease, background .22s ease;
  overflow:hidden;
}
/* 分享按钮的星芒图标：用「十字光芒」纯 CSS 画，不依赖 data URI（转义易坏）
   —— 两条渐变细线交叉 + 中心亮点，视觉上就是四角星，且不会因编码问题失真 */
.share-btn::before,
.ls-share::before,
#modal-share::before,
.pc-share::before,
.modal-act.share::before,
[data-share]::before{
  content:"";
  width:14px;height:14px;flex:none;
  position:relative;
  background:
    /* 竖光条 */
    linear-gradient(180deg, transparent 0%, rgba(232,220,255,.95) 42%, #fff 50%, rgba(232,220,255,.95) 58%, transparent 100%) center / 2px 100% no-repeat,
    /* 横光条 */
    linear-gradient(90deg, transparent 0%, rgba(232,220,255,.95) 42%, #fff 50%, rgba(232,220,255,.95) 58%, transparent 100%) center / 100% 2px no-repeat,
    /* 中心亮点 */
    radial-gradient(circle 2.6px at 50% 50%, #ffffff 0%, rgba(232,220,255,.9) 45%, transparent 100%) center / 100% 100% no-repeat;
  filter:drop-shadow(0 0 5px rgba(230,210,255,.95));
  transition:transform .34s cubic-bezier(.34,1.56,.64,1), filter .22s ease;
}
/* 悬停：上浮 + 光晕增强 + 图标转 90° */
.share-btn:hover,
.ls-share:hover,
#modal-share:hover,
.pc-share:hover,
.modal-act.share:hover,
[data-share]:hover{
  transform:translateY(-1.5px);
  border-color:rgba(220,196,255,.9);
  background:
    linear-gradient(180deg, rgba(190,140,255,.42), rgba(140,90,255,.24)),
    rgba(30,18,62,.78);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 22px rgba(180,130,255,.5),
    0 0 52px rgba(123,77,255,.28),
    0 8px 24px rgba(0,0,0,.4);
}
.share-btn:hover::before,
.ls-share:hover::before,
#modal-share:hover::before,
.pc-share:hover::before,
.modal-act.share:hover::before,
[data-share]:hover::before{transform:rotate(90deg) scale(1.08)}
.share-btn:active,
.ls-share:active,
#modal-share:active,
.pc-share:active,
.modal-act.share:active{transform:translateY(0)}

/* 分享按钮里的文字稍微加宽字距，显得稳 */
.share-btn span,
#modal-share span{letter-spacing:.04em}

/* ───────── ② 弹窗顶部按钮组统一 ───────── */
.modal-bar .modal-act{
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(180,150,255,.26);
  color:#d8ccff;
  box-shadow:0 0 0 1px rgba(169,125,255,.14) inset;
  transition:.18s ease;
}
.modal-bar .modal-act:hover{
  background:rgba(140,100,255,.26);
  border-color:rgba(200,170,255,.6);
  color:#fff;
  box-shadow:0 0 16px rgba(150,100,255,.38), 0 0 0 1px rgba(255,255,255,.08) inset;
}
/* 关闭按钮 */
.modal-x{
  transition:.18s ease;
}
.modal-x:hover{
  background:rgba(255,90,120,.22);
  border-color:rgba(255,120,150,.6);
  color:#ffd6de;
  box-shadow:0 0 14px rgba(255,90,120,.4);
}

/* ───────── ③ 主按钮（排盘 / 生成 / 去星盘） ───────── */
.hero-btn,
.ph-btn,
.syn-actions .primary,
.el-btn,
.pg-btn,
.pc-input,
.mh-btn{
  position:relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 20px rgba(138,92,255,.42),
    0 0 56px rgba(123,77,255,.22),
    0 10px 30px rgba(0,0,0,.36);
  transition:transform .18s ease, box-shadow .22s ease;
}
.hero-btn:hover,
.syn-actions .primary:hover,
.el-btn:hover,
.pg-btn:hover,
.pc-input:hover,
.mh-btn:hover{
  /* 注意：.ph-btn 已从本组移除 —— 人格区的按钮悬停不得产生位移，
     用户要求「只需要背景变化，不需要改变面积」 */
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 0 30px rgba(160,120,255,.62),
    0 0 70px rgba(123,77,255,.34),
    0 14px 38px rgba(0,0,0,.42);
}
/* 主按钮加一道斜向高光带 */
.hero-btn::after,
.ph-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.24) 46%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .55s ease;
  pointer-events:none;
}
.hero-btn:hover::after{transform:translateX(120%)}

/* ───────── ④ 卡片光效统一 ───────── */
.card{
  transition:border-color .25s ease, box-shadow .25s ease;
}
/* ── 已停用：卡片 hover 时边框变亮 ──
   用户指出「不要鼠标移过去，有大框」。
   原来 .card:hover{border-color:...} 会让鼠标扫过任何卡片时
   整块圆角框亮起来（像突然出现一个大框），观感很跳。
   现在卡片本身不做任何 hover 反应，光效只由内部的小元素承担。 */
/* .card:hover{ border-color:rgba(150,120,255,.34); } */

/* 导航按钮：细线 + 内高光 */
nav.screens button{
  box-shadow:0 0 0 1px rgba(169,125,255,.12) inset;
  transition:.22s ease;
}
nav.screens button:hover{
  box-shadow:
    0 0 0 1px rgba(169,125,255,.20) inset,
    0 0 16px rgba(140,100,255,.4);
}
nav.screens button.on{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 6px 22px rgba(123,77,255,.6),
    0 0 34px rgba(168,85,247,.34);
}

/* ───────── ⑤ 小标签统一 ───────── */
.tag,
.pc-elem,
.shc-elem,
.hi-rank{
  box-shadow:0 0 0 1px rgba(169,125,255,.16) inset;
  transition:.16s ease;
}

/* ───────── ⑥ 输入框聚焦光效 ───────── */
.field input:focus,
.field select:focus{
  border-color:rgba(180,140,255,.85) !important;
  box-shadow:
    0 0 0 1px rgba(180,140,255,.28),
    0 0 18px rgba(140,100,255,.36) !important;
  outline:none;
}

/* ───────── ⑦ 滚动条（细、低存在感） ───────── */
.screen::-webkit-scrollbar{width:7px}
.screen::-webkit-scrollbar-track{background:transparent}
.screen::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(150,110,255,.42),rgba(123,77,255,.28));
  border-radius:999px;
}
.screen::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(180,140,255,.62),rgba(150,100,255,.42));
}

/* ───────── ⑧ 减少动效偏好 ───────── */
@media (prefers-reduced-motion: reduce){
  .share-btn, #modal-share, .pc-share, .hero-btn, .ph-btn,
  .modal-bar .modal-act, nav.screens button{
    transition:none;
  }
  .hero-btn::after, .ph-btn::after{display:none}
}


/* ═══════════════════════════════════════════════════════
   全站禁白边：紫金色兜底
   ───────────────────────────────────────────────────────
   用户要求：「所有类似这样的边框，不要白色啊。
             你可以用紫色 火 紫金色的边显示，不是白色啊。」

   已逐处改掉的白色来源：
     · space.css   .signtile:hover .g   border-color:#fff  → 紫金
     · space.css   #dots button.on      border-color:#fff  → 紫金
     · modal.css   .modal-act           rgba(255,255,255,.22) → 紫金
     · modal.css   .modal-act:hover     rgba(255,255,255,.36) → 紫金
     · modal.css   bar 内控件           rgba(255,255,255,.18) → 紫金
     · essay.css   内联按钮             rgba(255,255,255,.18) → 紫金

   下面这条兜底层防止将来新增元素再次写白边（只作用于边框，不动文字）：
   任何元素在悬停/聚焦时，若边框色落到「三通道都 > 230 的近白」，
   统一压成紫金色。用 @supports 无法做条件替换，所以这里改用
   更直接的办法 —— 给常见的可交互类统一指定边框色。

   说明：不做 `*{border-color:...}` 全局覆盖，那会破坏所有边框语义
   （表格、分隔线、图表描边都会变形）。这里是「已知会变白的交互件」清单。
   ═══════════════════════════════════════════════════════ */
/* ── 悬停/选中统一「紫边亮起」风格 ──
   用户指着「爱情 58 分」那张卡说：
     「移到这个 block，边框是紫色亮起来。其它白色的边框也可以用这种风格。」

   那个效果的本质就是：紫色描边 + 外发光（box-shadow 双层） + 轻微上浮。
   现在把同一套视觉语言推广到全站可交互块，替换掉原先的白色/无色反馈：

     边框     1px → 亮紫 rgba(169,125,255,.85)
     外发光   0 0 0 1px 内描边 + 0 0 18px 扩散
     上浮     translateY(-1px)
     过渡     .24s（快但不突兀）

   注意：只作用于「卡片/格子/按钮」这类可交互块，
   不动分隔线（border-top/bottom 的 1px 线保持原样），
   否则整站的版式分隔会全部变成发光条。 */
.term-item:hover, .term-item.on,
.sci-house:hover, .scl-item:hover, .yqz-card:hover,
.house-item:hover, .syn-card:hover, .mcell:hover,
.day:hover, .place-card:hover, .dimcard-action:hover,
#skill-sign:hover, #today-sign:hover, #cal-sign:hover,
.as-row:hover, .ls-value:hover, .transit-item:hover,
.axis-row:hover, .dream-card:hover, .sk-card:hover{
  border-color:rgba(169,125,255,.88) !important;
  box-shadow:0 0 0 1px rgba(169,125,255,.40),
             0 0 18px rgba(169,125,255,.60) !important;
  transition:border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
/* .dimcard 有更具体的选择器（.dimcard[data-clickable="1"]:hover）压在上面，
   这里用同等具体度 + !important 收口，确保紫边一致。 */
.dimcard:hover, .dimcard[data-clickable="1"]:hover,
.dimcard-action:hover, .signtile:hover{
  border-color:rgba(169,125,255,.88) !important;
  box-shadow:0 0 0 1px rgba(169,125,255,.40),
             0 0 18px rgba(169,125,255,.60) !important;
}

/* 日历当前选中日：原为白/近白描边，改紫边亮起（用户附件3「为什么有白色的框」） */
.day.sel, .day.today.sel, .day.on{
  border-color:rgba(169,125,255,.95) !important;
  box-shadow:0 0 0 1px rgba(169,125,255,.45),
             0 0 20px rgba(169,125,255,.6) !important;
}
.day.sel:hover, .day.today.sel:hover{
  border-color:rgba(190,150,255,1) !important;
  box-shadow:0 0 0 1px rgba(190,150,255,.55),
             0 0 26px rgba(169,125,255,.75) !important;
}
/* 焦点环也统一（原浏览器默认或白色 focus 都改成紫金） */
button:focus-visible, [tabindex]:focus-visible, a:focus-visible{
  outline:2px solid rgba(255,222,150,.75);
  outline-offset:2px;
}

/* ══════════ star-buttons.css ══════════ */
/* ═══════════════════════════════════════════════════════
   星座.live · 按钮星辰背景层（v1）
   ───────────────────────────────────────────────────────
   所有按钮在 hover / 选中时，背景变成「活的星空」：

     三层星点（远/中/近）+ 一层星云，各自不同速度缓慢漂移，
     形成视差。星点用 radial-gradient 画（无图片、无外链），
     背景尺寸放大到按钮的 2~3 倍，靠 background-position
     位移产生「星星在走」的错觉。

   为什么不用 canvas / 图片：
     每个按钮一个 canvas 太重（全站几十个按钮），图片有文件
     与编码问题（上一轮 data URI 就坏过）。纯 CSS 渐变最稳。
   ═══════════════════════════════════════════════════════ */

/* ── 星点层定义 ──
   每层用重复的小 radial-gradient 当「星」：
     1px 白点 + 1.5px 淡紫点，错开位置避免规律感 */
@keyframes starDriftNear {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 120px 80px, -90px 60px, 60px -100px; }
}
@keyframes starDriftMid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -80px 60px, 70px -50px; }
}
@keyframes starDriftFar {
  from { background-position: 0 0; }
  to   { background-position: 50px -40px; }
}
@keyframes nebulaBreathe {
  0%   { opacity: .5;  transform: scale(1); }
  50%  { opacity: .85; transform: scale(1.08); }
  100% { opacity: .5;  transform: scale(1); }
}

/* ───────── 导航按钮：hover / 选中 = 星辰背景 ───────── */
nav.screens button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-color:rgba(255,255,255,.03);
}
/* 星辰层：绝对定位铺满，默认透明 */
nav.screens button::before{
  content:"";
  /* ⚠️ 2026-11-12 主上：「附件3里的附件4有明显的块状」「附件5也有块状」
     根因：原来写 inset:-40%（向外扩 40%），虽然按钮有 overflow:hidden，
     但超出的矩形层在**圆角边缘**会被裁成阶梯状；加上 background-size 是
     矩形平铺（120px 90px 等），星点在胶囊/圆形按钮上就会露出方形块边。
     修法：① inset:0 严格贴合按钮边界，不再外扩
           ② 加 border-radius:inherit + overflow:hidden 双重裁剪
           ③ 平铺尺寸改为百分比（100% 100%），避免固定像素造成的对齐方块 */
  position:absolute;inset:0;
  z-index:-1;
  opacity:0;
  border-radius:inherit;
  overflow:hidden;
  background-image:
    /* 近层：亮点 */
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 68% 18%, rgba(226,214,255,.9), transparent 100%),
    radial-gradient(1.8px 1.8px at 42% 74%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 86% 62%, rgba(200,186,255,.85), transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 88%, rgba(255,255,255,.8), transparent 100%),
    /* 中层：稍暗星 */
    radial-gradient(1px 1px at 30% 52%, rgba(214,204,255,.7), transparent 100%),
    radial-gradient(1.1px 1.1px at 58% 40%, rgba(255,255,255,.62), transparent 100%),
    radial-gradient(.9px .9px at 78% 86%, rgba(206,190,255,.6), transparent 100%),
    radial-gradient(1px 1px at 94% 26%, rgba(255,255,255,.55), transparent 100%),
    /* 星云底色 */
    radial-gradient(ellipse 60% 80% at 30% 20%, rgba(168,85,247,.5), transparent 70%),
    radial-gradient(ellipse 55% 70% at 80% 80%, rgba(94,200,255,.34), transparent 72%);
  /* 用百分比尺寸：固定像素平铺会在不同宽度按钮上产生错位方块 */
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%;
  background-position:
    0 0, 0 0, 0 0, 0 0, 0 0,
    0 0, 0 0, 0 0, 0 0,
    0 0, 0 0;
  background-repeat:no-repeat;
  transition:opacity .35s ease;
}
nav.screens button:hover::before{
  opacity:.95;
}
nav.screens button.on::before{
  opacity:1;
  animation-duration:18s;   /* 选中态更活跃 */
}

/* 选中态：底色压一层紫渐变，让星点更清楚 */
nav.screens button.on{
  background:linear-gradient(140deg, rgba(123,77,255,.62), rgba(168,85,247,.42));
}

/* ── 分享/弹窗按钮：星辰直接叠进 background-image 多层 ──
   踩过的坑：原来用 ::after + z-index:-1 画星点，结果被按钮自身的
   半透明深底（rgba(22,13,48,.72)）盖住，星点看不见。
   改为 background-image 多层：星点在底色之上、文字之下，必定可见。 */
.share-btn,
.ls-share,
.pc-share,
#modal-share,
.modal-bar .modal-act{
  background-image:
    /* 近层亮星 */
    radial-gradient(1.5px 1.5px at 22% 34%, rgba(255,255,255,.92), transparent 100%),
    radial-gradient(1.3px 1.3px at 68% 20%, rgba(226,214,255,.88), transparent 100%),
    radial-gradient(1.6px 1.6px at 46% 76%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 86% 60%, rgba(206,190,255,.75), transparent 100%),
    /* 中层 */
    radial-gradient(1px 1px at 12% 82%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(.9px .9px at 56% 44%, rgba(216,204,255,.55), transparent 100%),
    /* 星云 */
    radial-gradient(ellipse 58% 76% at 30% 24%, rgba(168,85,247,.55), transparent 70%),
    radial-gradient(ellipse 50% 66% at 78% 80%, rgba(94,200,255,.36), transparent 72%),
    /* 原底色渐变（压在最下） */
    linear-gradient(180deg, rgba(168,110,255,.30), rgba(123,77,255,.16));
  background-size:
    96px 84px, 118px 98px, 88px 94px, 108px 90px,
    74px 76px, 92px 92px,
    100% 100%, 100% 100%,
    100% 100%;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;
  background-repeat:repeat,repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
  animation:starDriftNear 26s linear infinite;
}
.share-btn:hover,
.ls-share:hover,
.pc-share:hover,
#modal-share:hover,
.modal-bar .modal-act:hover{
  /* 悬停时星点更亮、星云更浓 */
  background-image:
    radial-gradient(1.8px 1.8px at 22% 34%, rgba(255,255,255,1), transparent 100%),
    radial-gradient(1.6px 1.6px at 68% 20%, rgba(240,232,255,1), transparent 100%),
    radial-gradient(1.9px 1.9px at 46% 76%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 86% 60%, rgba(226,210,255,.92), transparent 100%),
    radial-gradient(1.2px 1.2px at 12% 82%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 56% 44%, rgba(226,214,255,.76), transparent 100%),
    radial-gradient(ellipse 62% 80% at 30% 22%, rgba(196,132,255,.72), transparent 68%),
    radial-gradient(ellipse 54% 70% at 78% 78%, rgba(126,214,255,.5), transparent 70%),
    linear-gradient(180deg, rgba(190,140,255,.40), rgba(140,90,255,.24));
  animation-duration:16s;
}

/* 主按钮原有的斜向高光带（polish.css 里的 ::after）与新星辰层冲突：
   主按钮改用 ::before 承载星辰，保留 ::after 做高光带 */
.hero-btn::before,
.ph-btn::before{
  content:"";
  /* ── 原来 inset:-40% 向四周撑出 80%，却没有裁剪，星点层边缘露在按钮外面
     = 用户看到的「多了一个白条」（附件1）。
     现在改成 inset:0（与按钮同框）+ 圆角裁剪，星点只在按钮内部，
     不会溢出成白条。父级 .hero-btn 必须是 position:relative 才有裁剪基准。 */
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  border-radius:inherit;
  overflow:hidden;
  clip-path:inset(0 round inherit);
  pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 34%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.3px 1.3px at 66% 20%, rgba(226,214,255,.9), transparent 100%),
    radial-gradient(1.6px 1.6px at 44% 76%, rgba(255,255,255,.82), transparent 100%),
    radial-gradient(1.1px 1.1px at 84% 60%, rgba(206,190,255,.75), transparent 100%),
    radial-gradient(ellipse 62% 80% at 30% 22%, rgba(180,120,255,.44), transparent 70%);
  background-size:104px 88px, 128px 104px, 92px 100px, 116px 96px, 100% 100%;
  transition:opacity .32s ease;
  animation:starDriftMid 20s linear infinite;
}
/* 按钮本身要建立裁剪上下文，否则 ::before 的 overflow 管不住 */
.hero-btn, .ph-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-btn:hover::before,
.ph-btn:hover::before{opacity:.9}

/* ── 小胶囊标签（元素/宫位/时辰等）：hover 也带星光 ── */
.pc-elem:hover,
.shc-elem:hover,
.tag:hover{
  background-image:
    radial-gradient(1.2px 1.2px at 30% 30%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1px 1px at 72% 66%, rgba(210,196,255,.78), transparent 100%),
    radial-gradient(ellipse 70% 80% at 40% 40%, rgba(168,85,247,.3), transparent 72%);
  background-size:58px 52px, 66px 60px, 100% 100%;
  animation:starDriftFar 16s linear infinite;
}

/* ── 尊重减少动效 ── */
@media (prefers-reduced-motion: reduce){
  nav.screens button::before,
  .modal-bar .modal-act::after,
  .share-btn::after,
  .pc-share::after,
  .hero-btn::before,
  .ph-btn::before,
  .pc-elem:hover,
  .shc-elem:hover,
  .tag:hover{
    animation:none;
  }
}

/* ══════════ nebula-cards.css ══════════ */
/* ═══════════════════════════════════════════════════════
   星座.live · 块状卡片悬停星云（配 nebula-cards.js）
   ───────────────────────────────────────────────────────
   悬停时卡片内部浮现星云 + 星点，缓慢漂移；
   同时边框亮起、外发光加强，与按钮的星辰语言统一。

   实现要点：
     星云放在 ::before，用 background-image 多层径向渐变，
     因为卡片半透明底色会盖住 z-index:-1 的层（分享按钮上
     踩过这个坑），所以直接叠进 background-image 最稳。
     但卡片本身已有多层背景（很多卡有自带渐变），
     直接覆盖会破坏原样式 —— 所以用 ::before 绝对定位，
     z-index:0，并把卡片内的直接子元素抬到 z-index:1。
   ═══════════════════════════════════════════════════════ */

.nx-card{
  position:relative;
  transition:border-color .26s ease, box-shadow .26s ease;
}
/* 已删：.nx-card > *{position:relative;z-index:1}
   这条规则会把卡片内所有 absolute 装饰层（.ph-glow 等）强制变成
   relative，它们的高度进入正常流 —— 实测 .ph-card 悬停高度 324→524。 */

/* ── 星云旋转层（.nx-glow::before）──
   两团星云绕着卡片中心旋转，而不是平移。
   为什么不能用 background-position 做旋转：
     background-position 只能平移，两个光斑会「往里收」或「往外散」，
     看起来像在挤压卡片边界；用户明确要求「运动可以是旋转，不用往内收」。

   ── 尺寸约束：绝不超出卡片边界 ──
   初版用 inset:-45%（比卡片大一圈），旋转时光斑会甩到卡片外面。
   用户指出「旋转对了，但是不要超出背景的 block」。
   现在改为 inset:0 —— 旋转层与卡片等大，并且 .nx-glow 自身
   overflow:hidden 裁切，光斑永远出不去。
   为了在有限空间内仍能看到旋转，把光斑半径收小、贴近圆心。 */
.nx-card > .nx-glow{
  overflow:hidden;      /* 裁掉旋转层溢出的部分 */
}
/* 注意：下面 .nx-card > .nx-glow 那条规则里写了 opacity:0（默认隐身）。
   星云旋转层 ::before 与它同在 .nx-glow 上，所以「旋转」和「显隐」是两件事：
     旋转 → 一直转（肉眼不可见也在转，代价为零）
     显隐 → 由 opacity 控制
   大 block 用 .big-block 抬高到常显，小卡仍靠 hover 显隐。 */
/* ── 星空层（对齐 MBTI 卡的观感）───────────────────────────
   参照「MBTI 背景的效果很好」那张卡：
     · 稀疏星点，不密
     · 右侧一小片柔和星云雾
     · 清晰不糊、不抢文字

   实现分两层：
     ::before → 旋转的星云雾（柔雾，不是圆环）
     本体     → 静态星点（清晰锐利，不旋转）

   之前做成两大团「环形光」观感偏差大（太规则、太抢眼），已废弃。
   ─────────────────────────────────────────────────────── */
/* ── 星云背景：直接用网站自己的星云图旋转 ──────────────────
   用户要求：「只需要用网站打的背景图片，做一些旋转的动效。网站背景本来就是星云」

   之前用 CSS 渐变现画漩涡，始终没有「星云」的真实质感。
   现在改用 www/art/galaxy-hero.webp（网站主视觉那张星系星云图），
   做法：
     · 作为 ::before 的 background-image
     · 圆形裁切 + 径向遮罩，只保留中心一团
       （原图是非无缝图，整张旋转会露出硬接缝；
         用圆形遮罩把边缘全部淡掉，接缝就看不见了）
     · 缓慢自转 60s 一圈
     · 用 screen 混合，让它叠在卡片底色上透出星云

   这样得到的是真实星云质感 + 旋转动效，不再是自己搭的假漩涡。
   ─────────────────────────────────────────────────────── */
.nx-card > .nx-glow::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* ── 星空背景：12 张 AI 生成的星云图，每次悬停换一张 ──
     用户要求：「重新生成12张清晰的星空图片，不要叠加任何的滤镜。
                每次扫过去换不同的图片」「在不同的格子，图片不要变形」

     图片：www/art/starfield_final/star_01..12.png（1024×1024，Agnes 免费档生成）
     换图：由 nebula-cards.js 在每次 hover 时随机挑一张写进 --nx-img 变量
     防变形：background-size:cover + center，等比裁切，绝不拉伸
   */
  inset:0;
  overflow:hidden;
  background-image:var(--nx-img, url("art/starfield_web2/star_01.webp"));
  background-size:cover;        /* 等比铺满，任何格子都不变形 */
  background-position:center;   /* 居中裁切 */
  background-repeat:no-repeat;
  /* ── 去掉曝光叠加 ──
     用户指出：「移动到框的时候，曝光、叠加太厉害了，很模糊」。
     根因：.nx-glow 上有 mix-blend-mode:screen —— 星点图本身很亮，
     screen 混合会把它和卡片底色「相加」，越叠越白越糊。
     现在改成 normal，图片原样铺上。

     ⚠️ 这里绝对不能写 opacity —— 显隐由父级 .nx-glow 控制。
     踩过的坑：曾在此处写 opacity:0（想「默认隐身」），结果
     悬停规则只管父级 .nx-glow 的 opacity，::before 自己永远是 0，
     星云图**完全看不到**（用户：「完全看不到」）。 */
  mix-blend-mode:normal;
  box-shadow:none;
  animation:nxCloudDrift 90s ease-in-out infinite alternate;
  will-change:background-position;
}

@keyframes nxNebulaRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ── 星云缓慢漂移 ──
   用 background-position 微移（±6%），产生「星云在流动」的感觉。
   幅度小，cover 模式下不会露出图片边界。 */
@keyframes nxCloudDrift {
  from { background-position:center; }
  to   { background-position:44% 46%; }
}


/* 星云层 */
.nx-card > .nx-glow{
  position:absolute;inset:0;
  /* z-index:0 —— 卡片建立了 position:relative 层叠上下文，
     0 位于背景之后、内容之前。文字用 z-index:1 显式抬起（见下一条规则）。 */
  z-index:0;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:normal;
  transition:opacity .34s ease;
}

/* ── 悬停才显示星空（小卡片）──
   这是「鼠标移过去才有」的核心规则。之前它被误删，导致：
     · 小卡片悬停无反应
     · 只有大 block 常显（因为 .big-block 设了 opacity:.55）
   全站实测：small_with_glow = 0，big_with_glow = 92~123，完全反了。
   补回这条后：默认全隐身，悬停到小卡才淡入。 */
.nx-card:hover > .nx-glow{opacity:1}

/* 大 block 例外：即使悬停也不显示（见下方 .big-block 规则） */
/* ── 星云显隐规则（全站统一）─────────────────────────────
   用户明确要求：
     ① 星空**只在鼠标移过去时**出现，不常驻；
     ② **大 block 不要有**（大区块盖住星空会糊成一片）；
     ③ 只有小卡片（12维方块、日历格、星座卡等）悬停才亮。

   之前反了：.big-block 被设成常显 opacity:.55，结果每屏 90~120 个大块
   全在发光，小卡反而看不见（全站实测 glow_visible 92~123，big 占比 100%）。

   现在的规则：
     · 默认：所有 .nx-glow 都是 opacity:0（隐身）
     · 悬停：小卡 opacity:1
     · 大 block：任何时候都不显示（opacity:0 恒定）
   ─────────────────────────────────────────────────────── */
.nx-card.big-block > .nx-glow,
.nx-card.big-block:hover > .nx-glow{
  opacity:0 !important;      /* 大 block 永不显示星空 */
  animation:none;
}

/* 卡片本体的悬停光效
   只保留「边框略亮」这一个轻反馈。
   已删：box-shadow 外发光（沿圆角矩形轮廓走一圈，四角全亮 = 方块感）、
        transform 位移（会带动整块的边缘一起动，强化块状）。
   光感全部交给星云层自己，卡片本体保持安静。 */
.nx-card:hover{
  /* ── 边框：不能写 inherit！──
     原来写 `border-color:inherit`，意思是「继承父级的 color（文字色）」，
     而全站文字色是 --ink:#f2eeff（近白）→ 悬停瞬间边框变成 rgb(242,238,255)。
     用户反馈：「鼠标移到 block 的时候，白线才出现」「几乎所有都这样」，
     根因就是这一行 —— .nx-card 是全站通用类，影响 20+ 个组件。

     正确做法：明确给紫色，且比静止态略亮，形成「紫边亮起」的反馈。 */
  border-color:rgba(169,125,255,.72);
  /* ── 回到「分享按钮」那种背景模式（纯 CSS 星云光斑，不用图片）──
     用户要求：「全部用回『分享』背景图模式，图片后续再研究」。

     分享按钮的背景长这样：
       · 深紫底 + 两团柔和的径向光晕（紫+蓝）
       · 一片极细的星点（radial-gradient 画的小点）
       · 整体半透明、轻盈，不抢文字

     所以这里把图片换回多层 radial-gradient：
       ① 左上角紫色柔光团
       ② 右下角蓝色柔光团
       ③ 四层大小不一的星点（稀疏，符合「空旷星空」）
     优点：零网络请求、零体积、永远不会有加载延迟或变形问题。 */
  background-image:
    /* 星点层（稀疏，大小错开） */
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(255,255,255,.82), transparent 100%),
    radial-gradient(1.1px 1.1px at 68% 18%, rgba(226,214,255,.72), transparent 100%),
    radial-gradient(1.3px 1.3px at 42% 74%, rgba(255,255,255,.66), transparent 100%),
    radial-gradient(1px 1px at 84% 58%, rgba(206,190,255,.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 84%, rgba(255,255,255,.56), transparent 100%),
    radial-gradient(.9px .9px at 56% 40%, rgba(220,208,255,.48), transparent 100%),
    /* ── 金色星云：从「右下角一团」改成「右半边一片」──
       用户要求：「默认状态是一半紫色，一半金色 旋转」。

       关键差别：原来是两团集中在角落的光斑（左上紫 + 右下金），
       视觉上中间是空的、两头各一个点，说不上「一半一半」。
       现在改成左右各占半边的椭圆大光带：
         · 左半边 ellipse 90% 120% at 10% 50% → 覆盖整条左半侧
         · 右半边 ellipse 90% 120% at 90% 50% → 覆盖整条右半侧
       两者在中线附近自然交叠，旋转时这条紫金分界线跟着扫过，就是
       「一半紫一半金在转」的效果。

       金色仍比紫色淡一档（暖色在暗底更跳），保证视觉等重。 */
    radial-gradient(ellipse 90% 120% at 90% 50%,
      rgba(255,222,150,.42) 0%,
      rgba(240,190,95,.19) 48%,
      transparent 78%),
    /* 金色星团里的细碎星点（保留，增加星团质感） */
    radial-gradient(1.6px 1.6px at 72% 76%, rgba(255,238,190,.72), transparent 100%),
    radial-gradient(1.3px 1.3px at 84% 82%, rgba(250,220,150,.66), transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 86%, rgba(248,225,168,.62), transparent 100%),
    radial-gradient(1.2px 1.2px at 86% 74%, rgba(240,205,130,.58), transparent 100%),
    radial-gradient(1px 1px at 70% 84%, rgba(245,225,175,.54), transparent 100%),
    /* 紫色星云（左上）—— 可见半径放宽到 80%，面积与金色对等 */
    /* 紫色星云：覆盖左半边（与右侧金色对半） */
    radial-gradient(ellipse 90% 120% at 10% 50%, rgba(150,96,246,.46), transparent 80%),
    /* 底色 */
    linear-gradient(160deg, rgba(30,18,62,.72), rgba(14,8,34,.82)) !important;
  background-size:
    96px 88px, 118px 102px, 88px 94px, 104px 90px, 78px 84px, 92px 92px,
    100% 100%,
    132px 118px, 104px 96px, 116px 106px, 88px 82px, 76px 72px,
    100% 100%, 100% 100% !important;
  background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,
    center,
    0 0,0 0,0 0,0 0,0 0,
    center, center !important;
  background-repeat:
    /* 6 层普通星点 → repeat */
    repeat, repeat, repeat, repeat, repeat, repeat,
    /* 金色星云 → no-repeat */
    no-repeat,
    /* 5 层金色碎星点 → repeat */
    repeat, repeat, repeat, repeat, repeat,
    /* 紫色星云 + 底色 → no-repeat */
    no-repeat, no-repeat !important;
  animation: nxStarTwinkle 1.5s linear infinite !important;
}

/* ── 星点漂移（3 秒一圈，用户要求「旋转再快些」）──
   层数已从 9 层增加到 16 层（新增金色星团 3 层核心 + 5 层碎星点），
   所以关键帧的 background-position 也要写 16 个值，
   前 6 层星点 + 后 5 层金色碎星点漂移，金色核心 3 层和紫色星云、底色固定。 */
@keyframes nxStarTwinkle{
  from{
    background-position:
      0 0,0 0,0 0,0 0,0 0,0 0,
      center,
      0 0,0 0,0 0,0 0,0 0,
      center, center;
  }
  to{
    background-position:
      56px 44px,-48px 36px,40px -48px,-36px 40px,32px 48px,-28px 32px,
      center,
      48px 40px,-40px 32px,36px -40px,-32px 36px,28px 44px,
      center, center;
  }
}

/* ── 大 block 不应用这套背景 ──
   用户指出「大 block 不要有这张切换，科普里面三模式就出问题了」。

   注意：这里原来还带了 background-color:rgba(22,14,48,.62) !important，
   结果 hero（也带 big-block）鼠标移过去就出现一块半透明底色 = 用户说的框。
   现在把 background-color 也设为 transparent，并从源头避免 hero 命中本规则。 */
.nx-card.big-block:hover{
  background-image:none !important;
  background-color:transparent !important;
  animation:none !important;
}
/* hero 是「大 block」但不是卡片，不该有任何背景 */
.nx-card.hero:hover,
.nx-card.hero{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* ── 丝滑过渡 ──
   图片本身早在预加载阶段就进了缓存（12 张合计 1.19MB），
   hover 只是让 background-image 生效，无网络请求。
   这里加一层过渡让出现更柔和：底色在 160ms 内渐变，
   避免「啪」地一下跳出来（用户要求「要丝滑，不要移过去才感觉到图片显示」）。
   注意：background-image 本身不可过渡，所以过渡的是 border-color 与
   background-color（图片跟着底色一起淡入的观感）。 */
.nx-card{
  transition:border-color .16s ease, background-color .16s ease,
             box-shadow .16s ease;
}

/* ── 小格子：同样用星云图，不覆盖成星点 ──
   原来这里覆盖 background-image 为 3 层星点 + repeat，
   会把新加的星云图盖掉（实测 a12-cell 显示的是平铺小方块）。
   现在只调整尺寸策略，图片保持一致。 */
.nx-card.mcell > .nx-glow,
.nx-card.daydim-item > .nx-glow{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ── SVG 螺旋层已停用 ──
   现在星云直接用 www/art/galaxy-hero.webp 旋转（真实星云质感），
   不再需要自绘的 SVG 螺旋臂（那个视觉复核判为「没有星云感」）。
   JS 里注入的 .nx-spiral 保留结构但隐藏，避免改动过大。 */
.nx-card > .nx-glow > .nx-spiral{
  display:none;
}

/* 尊重减少动效 */
@media (prefers-reduced-motion: reduce){
  .nx-card > .nx-glow > .nx-spiral{animation:none}
}

/* 触屏：无 hover，点按时短暂点亮 */
@media (hover: none){
  .nx-card:active > .nx-glow{opacity:.9}
  .nx-card:hover{transform:none}
}



/* ══════════ mobile.css ══════════ */
/* ══════════════════════════════════════════════════════════════════
   星座.live · 手机版（mobile.css）
   ──────────────────────────────────────────────────────────────────
   主上 2026-11-08 口径：
     1）网站重新弄一个手机版（工作台不用动）
     2）尽可能保留所有元素，手机上内容也要看得清楚
     3）顶部要有导航条
     4）logo 要完整，不能分割开

   设计原则：
     · 只作用于手机断点（≤820px），PC 版一行不改
     · 保留全部元素，不隐藏功能，改用「可横向滑动的导航条」容纳 17 个入口
     · logo 恢复为完整尺寸（62×72），不压缩、不裁切
     · 正文最小 13px、表格/卡片可纵向堆叠，保证看得清
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   手机版主断点（≤820px）—— 全部手机规则集中于此
   2026-11-08 重构：原来分散在 3 个同名 @media 块里（共 139 个 !important、
   17 个选择器重复定义），维护与排错都困难。现在合并为单一块。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ─────────── ① 顶栏：logo 完整 + 导航条 ─────────── */

  /* 顶栏改为两行：第一行 logo+品牌，第二行可滑动的导航条 */
  header.site .bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    gap: 0;
    padding: 8px 0 0;
    width: calc(100% - 20px);
  }

  /* 品牌区：单独一行，左对齐，完整显示 logo */
  header.site .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 2px 6px;
    flex: none;
  }

  /* ⚠️ 关键：手机端 logo 必须是完整尺寸。
     原来 @media max-width:760 把它压成 26×26 —— 图形被挤成一团，
     看起来就像"logo 被分割"（主上附件2 指的问题）。 */
  header.site .logo-slot {
    width: 62px;
    height: 72px;
    flex: none;
    margin-left: 0;
    margin-right: -6px;
  }
  header.site .logo-slot svg,
  header.site .logo-slot > * {
    width: 100%;
    height: 100%;
    overflow: visible;      /* 不裁切旋转的星尘 */
  }

  header.site .brand-name {
    font-size: 20px;
    line-height: 1.1;
  }
  header.site .brand-slogan {
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
  }
  header.site .brand-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* 导航条：横向铺开、可滑动，所有入口都保留 */
  header.site nav.screens {
    display: flex !important;      /* 覆盖原来 760px 断点里的 display:none */
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 6px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: static;
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  header.site nav.screens::-webkit-scrollbar { display: none; }

  /* 导航按钮：足够大、字够清楚（实测 DOM：#nav-screens > button，无 class） */
  header.site nav.screens > button {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
  }

  /* 顶栏下加一条细分割线，让"导航条"边界清楚 */
  header.site nav.screens::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent, rgba(150,120,255,.35), transparent);
  }
  header.site nav.screens { position: relative; }

  /* 右侧渐隐：提示"还能往右滑"（否则最后几个入口看起来像被切坏）
     ⚠️ 2026-11-10 修复（主上：「还有色块」）：
        这个伪元素原来是 `right:0` 的 34px 宽横向渐变，
        用 inset 算出来落在 x=336~370、y=6~44，
        **正好压在右上角「工作台」按钮的右半截上**（按钮 x=290~366, y=23~55）。
        它 `pointer-events:none`，所以 elementFromPoint 永远检测不到，
        前几轮排查全被它躲过去了 —— 像素上表现为按钮右端从 184 平滑掉到 98，
        肉眼就是"一块深色矩形把按钮右边切了"。

        修法：不再用绝对定位压在内容上，改成**贴着导航行底部的一条**，
              并且只在导航真的可横向滚动时才显示（用 ::after 的高度限定在 nav 区）。 */
  header.site .bar { position: relative; }
  /* ⚠️ 2026-11-13 移除「右侧渐隐」伪元素（主上：「附件1 里面 附件2 的黑块一直没有解决。要清楚掉」）
     ── 它是这个黑块的真正来源 ──
       · 22px 宽、40px 高，linear-gradient(90deg, 透明 → rgba(10,6,32,.72))
       · position:absolute; right:0 → 压在导航条最右端（实测 x=367..371 覆盖「今日…」按钮）
       · pointer-events:none → **elementFromPoint 永远测不到**，DOM 扫描也找不到
         （前两轮我扫"右边缘深色元素"扫不到它，就是这个原因；只有像素分析能发现）
       · 2026-11-10 曾把它从"压按钮右半截"改成"贴导航行底部"，但宽度 22px 依然
         盖住最右那个按钮，手机窄屏下表现为一块深色竖条
     ⇒ 直接删除。用户能看到"还能往右滑"靠的是按钮被裁切这个视觉线索，
        不需要再叠一层渐隐（反而误伤可点区域）。 */
  /* header.site .bar::after { ... } 已移除 */

  /* ─────────── ② 全局：留白收窄、字号不缩水 ─────────── */

  .screen-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* 防止任何元素横向溢出（首屏已实测 24 个溢出元素） */
  .screen, .screen-inner, section.screen {
    overflow-x: hidden;
  }

  /* 正文最小可读 13px */
  body, p, .sub, .card p, li {
    font-size: 13px;
    line-height: 1.65;
  }

  /* ─────────── ③ 今日运程页：三栏 → 纵向堆叠 ─────────── */

  .today-stage {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-width: 100%;
    margin: 14px auto 20px;
  }

  /* 圆盘：铺满可用宽度 */
  .today-wheel-wrap {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 16px;
  }
  .today-wheel-wrap > #today-wheel,
  #today-wheel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 盘下波浪：跟圆盘同宽 */
  #today-wave {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 左右信息栏：改为上下两块，占满宽度，不再挤在两侧 */
  .today-left, .today-right, .today-side {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    order: 2;
  }

  /* ─────────── ④ 今日运程：12 维卡片 ─────────── */

  #today-dims {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #today-dims .dimcard {
    width: 100%;
    padding: 12px 14px;
  }
  #today-dims .dimcard h3,
  #today-dims .dimcard .dc-title {
    font-size: 15px;
  }

  /* ─────────── ⑤ 排盘输入条：4 列 → 2 列 → 1 列 ─────────── */

  .formgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .formgrid > div:last-child {
    grid-column: 1 / -1;      /* 按钮独占一行 */
  }
  .field input, .field select {
    height: 44px;
    font-size: 15px;          /* ≥16px 可避免 iOS 自动放大；44px 高便于点按 */
  }
  #today-birth-bar { margin-bottom: 12px; }
  .today-birth-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* ─────────── ⑥ 星盘 / 能力 / 人格等图表页 ─────────── */

  /* 星盘圆盘：在手机上放大到接近满宽，保证细节看得清 */
  #bigchart {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 命盘页的左右栏（.chart-arena 结构）改为纵向 */
  .chart-arena {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
  }
  .chart-arena .chart-side,
  .chart-arena .side,
  .chart-arena .chart-block {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─────────── ⑦ 卡片与网格：多列改单列 ─────────── */

  .cards, .grid, .dim-grid, .card-grid {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  /* 表格横向可滑，不挤压内容 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }

  /* ─────────── ⑧ 弹窗：手机上占满屏幕 ─────────── */

  .modal-card, .modal-box {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 16px;
  }

  /* ─────────── ⑨ 屏指示器 / 底部切换 ─────────── */

  #dots {
    display: none;      /* 已有顶部导航条，屏点不再需要（避免占位） */
  }

  /* 滑动切换屏在手机上的触控提示 */
  .screen { -webkit-tap-highlight-color: transparent; }

/* ── 以下为后续几轮补充的规则（原分散在两处） ── */
  /* ─────────── ⑤ 首屏登录卡：圆盘/表单不溢出 ───────────
     实测 390px 下 .hero-art 有 transform:translateX(56px)，
     右沿 436 > 390 ⇒ 内容被切（users 报「元素被分割」的同类问题）。
     planetlock-mobile.css 只覆盖了 #s-chart，首屏 hero-grid 没管到。 */
  .hero-grid {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    grid-template-columns: none !important;
    width: 100%;
    max-width: 100%;
  }
  .hero-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .hero-art,
  .pl-wrap,
  .pl-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;      /* 关键：去掉 translateX(56px) */
  }
  /* 首屏圆盘按屏幕宽度缩放，保持完整可见 */
  .hero-art {
    aspect-ratio: auto;
    display: flex;
    justify-content: center;
    padding: 0 !important;
  }
  .hero-art svg,
  .pl-svg {
    width: min(100%, 340px) !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: visible;
  }
  .pl-core,
  .pl-core-inner,
  .pl-core-pane {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ─────────── ⑩ 玛雅页：日历网格 509px 宽，手机放不下 ───────────
     实测 390px 下 .maya-cal-left 宽 539、.mc-grid 内部 8 列撑到 509，
     整块被推到屏幕外 ⇒ 82 个元素溢出。
     处理：日历容器允许横向滑动（保留 8 列信息不删），外层做溢出约束。 */
  .maya-cal-left,
  .maya-cap,
  .mc-grid,
  .mc-legend {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* 日历本体横向可滑，不压缩格子（压缩会看不清日期） */
  .maya-cal-left {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mc-grid {
    min-width: 460px;      /* 保留 8 列的辨识度，靠滑动查看 */
  }
  /* 玛雅页整体不允许把页面撑宽 */
  #s-maya, #s-maya .screen-inner { overflow-x: hidden; }

  /* ─────────── ⑪ 人格页：装饰光晕不出屏 ─────────── */
  .ph-glow {
    max-width: 100vw !important;
    pointer-events: none;
  }

  /* ─────────── ⑫ 手机端禁用左右栏的"对齐圆心"位移 ───────────
     真因：app.js 的 alignTodaySidesToCenter() 会给 .today-side 设
     --tw-side-shift（PC 版用来把左右栏中线对到圆心的 transform）。
     手机上左右栏已改成上下堆叠，这个位移会把它们推到圆盘上面重叠：
     实测 390px 下 圆盘 y=634、左栏 y=600、右栏 y=594 —— 三者压在一起。
     手机端把 shift 归零，让 flex column 正常堆叠。 */
  .today-stage .today-side,
  .today-side {
    --tw-side-shift: 0px !important;
    transform: none !important;
    position: static !important;
  }
  /* 堆叠顺序：圆盘+波浪 → 左栏 → 右栏 */
  .today-center { order: 1 !important; }
  .today-side { order: 2 !important; }
  .today-side.today-right { order: 3 !important; }

  /* ─────────── ⑬ 顶栏让位（2026-11-08 第二十六轮）───────────
     主上附件1：「原始的标题bar压住主要标题了，所有都是全部要调整。」

     真因：header.site 是 position:fixed + z-index:60，
           #stage / .screen 靠 --barh（PC 96px、旧 760 断点写死 58px）给它让位。
           但手机版顶栏改成两行（logo 一行 + 导航条一行）后实测高 138px，
           而 .screen 的 inset 仍是 58px ⇒ 内容从 58px 开始排，
           被 138px 高的顶栏压住 80px（实测标题 y=101 落在顶栏内）。

     修法：不让位靠写死数字，改成 app.js 实测 header 高度后写入
           --mob-barh，这里消费它。顶栏高度随字体/换行变化也不会再压内容。 */
  #stage {
    padding-top: var(--mob-barh, 140px) !important;
  }
  .screen {
    inset: var(--mob-barh, 140px) 0 0 0 !important;
    padding: 10px 12px 84px !important;
  }
  /* 顶栏自身：两行紧凑排布，不要虚高 */
  header.site .bar {
    padding: 6px 0 4px;
    gap: 0;
  }
  header.site nav.screens {
    padding: 4px 2px 6px;
  }

  /* ─────────── ⑭ 图表满屏（2026-11-08 第二十六轮）───────────
     主上附件4：「这些全部都要满屏，特别是命盘，否则看不见。其它同样原理。」

     实测各屏图表只占 80~92% 宽（内边距吃掉 12~40px）。
     手机屏幕本来就窄，圆盘类图表必须尽量满宽才看得清细节。
     做法：图表容器撑满到屏幕边（负边距抵消 .screen 的 padding）。 */

  /* 屏内留白压到最小，图表可用宽度最大化 */
  .screen { padding-left: 6px !important; padding-right: 6px !important; }
  .screen-inner { padding-left: 0 !important; padding-right: 0 !important; }

  /* 所有圆盘/图表类容器满宽 */
  #today-wheel, #today-wave, #today-wheel-wrap,
  #bigchart, .pl-wrap, .pl-stage, .pl-svg,
  .need-chart, .term-wheel, .sc-wheel, .life-chart,
  .chart-block, .persona-panel,
  canvas {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* 圆盘类 SVG：保证是正方形、按宽度自适应（height:auto 会按 viewBox 等比） */
  #today-wheel svg, #bigchart svg, .term-wheel svg, .sc-wheel svg,
  .need-chart svg, .life-chart svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
  }

  /* 今日运程的圆盘：占满宽度（原来被 .today-center 的 680 上限卡住） */
  .today-center { width: 100% !important; max-width: 100% !important; }

  /* 卡片：左右留 4px，让内容尽量宽 */
  .card, .nx-card, .big-b { margin-left: 4px; margin-right: 4px; }

  /* ─────────── ⑮ 右上角「登录」按钮 ───────────
     主上附件2：「"登录" 两字放右上角。点击后跳出一个 圆盘就是 附件3 这样。」 */

  /* 手机端隐藏原位的大圆盘（它会搬进弹窗），只留右上角按钮 */
  .hero-art { position: relative; }
  .hero-art > #pl-wrap-src {
    /* ⚠️ 必须 !important：桌面端有 @media(min-width:821px) 的 display:block!important，
       不加会在手机上被它顶掉，导致大圆盘仍留在首屏（实测 display=block）。 */
    display: none !important;
  }
  /* 主上 2026-11-08：「登陆我是要放在根logo同一行的右上角。」
     原来 position:fixed 浮在顶栏下方（y=144，独立一层）。
     现在放进 .brand 那一行，靠右对齐 —— 与 logo 同排，视觉上就是"根 logo 右上角"。
     做法：.brand 变成 flex 行（logo+文字 | 按钮），按钮 margin-left:auto 推到最右。 */
  header.site .brand {
    display: flex;
    align-items: center;
    width: 100%;
  }
  header.site .brand-txt { flex: 1 1 auto; min-width: 0; }

  .mob-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 不再 fixed：跟随 .brand 行，margin-left:auto 推到该行最右 */
    position: static;
    margin-left: auto;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #f3ecff;
    background: linear-gradient(135deg, rgba(123,77,255,.92), rgba(90,52,201,.92));
    border: 1px solid rgba(180,150,255,.55);
    box-shadow: 0 4px 14px rgba(90,40,200,.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-login-btn:active { transform: scale(.96); }

  /* ── 登录后的「工作台」态（主上 2026-11-10）──
     「手机版在登录状态，"登录"要改成"工作台"，不是在下面多一个 tag。」
     同一个按钮切换文字，样式改为金色主入口，与"登录"区分。 */
  .mob-login-btn.is-on {
    /* 主上（2026-11-10）：「手机版"登陆"、"工作台"头部按钮颜色没改过来，
       我要有星空感的、渐变金黄色。」
       ⇒ ① 渐变金打底（亮金 → 深金，有金属走向）
          ② 叠一层斜向高光条（星空亮面感）
          ③ 金色光晕外发光（不再是紫色阴影）
          ④ 细金边 + 内高光（3D 质感） */
    color: #3a2400;
    font-weight: 800;
    letter-spacing: .02em;
    background-color: #f5c026;
    background-image:
      linear-gradient(115deg,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,0) 32%,
        rgba(255,255,255,0) 62%,
        rgba(255,246,214,.42) 78%,
        rgba(255,255,255,0) 100%),
      radial-gradient(120% 90% at 18% 8%, rgba(255,252,235,.85) 0%, rgba(255,238,170,.25) 34%, transparent 62%),
      linear-gradient(180deg, #fff3c4 0%, #ffd95e 34%, #f5b920 68%, #d99510 100%);
    border: 1px solid rgba(255,232,160,.92);
    box-shadow:
      0 0 0 1px rgba(180,120,10,.28),
      0 3px 14px rgba(245,185,30,.55),
      0 0 22px rgba(255,205,70,.38),
      inset 0 1px 0 rgba(255,255,255,.75),
      inset 0 -1px 0 rgba(150,95,0,.28);
    text-shadow: 0 1px 0 rgba(255,246,214,.6);
  }
  .mob-login-btn.is-on:active { transform: scale(.96); }

  /* 未登录态（"登录"）沿用同一套星空金视觉语言，饱和度略低。 */
  .mob-login-btn:not(.is-on) {
    color: #fff8e0;
    background-color: #c9971a;
    background-image:
      linear-gradient(115deg,
        rgba(255,255,255,.34) 0%,
        rgba(255,255,255,0) 34%,
        rgba(255,255,255,0) 64%,
        rgba(255,244,205,.26) 80%,
        rgba(255,255,255,0) 100%),
      radial-gradient(120% 90% at 18% 8%, rgba(255,250,225,.55) 0%, transparent 60%),
      linear-gradient(180deg, #f6dc8e 0%, #e9c253 36%, #cfa02a 70%, #b0831c 100%);
    border: 1px solid rgba(255,226,150,.7);
    box-shadow:
      0 0 0 1px rgba(150,105,10,.2),
      0 3px 12px rgba(200,150,30,.42),
      0 0 16px rgba(255,205,90,.24),
      inset 0 1px 0 rgba(255,255,255,.55);
    text-shadow: 0 1px 1px rgba(120,80,0,.35);
  }

  /* ── 去掉"黑块"（主上 2026-11-10 附件2）──
     按钮外原来带一层深色底衬（.brand 行背景/按钮背后阴影），
     在手机上显得像一块黑斑。这里把按钮自身与父容器的多余底色清零。 */
  header.site .brand,
  header.site .bar {
    background: transparent !important;
    box-shadow: none !important;
  }
  .mob-login-btn {
    /* 不能再写紫色阴影：会盖掉 .is-on 的金色光晕（主上要金色基调） */
    outline: none !important;
    filter: none !important;
  }
  .mob-login-btn::before,
  .mob-login-btn::after {
    content: none !important;
    display: none !important;
  }

  /* ═══ 登录弹窗：无框模式（2026-11-08）═══
     主上：「我不需要一个大框，我只需要跟PC版一模一样的 密码圆盘弹出，能实现吗？」

     能。做法：给 Modal 加一个 mob-bare 类，把外框（背景渐变/边框/圆角/阴影/
     标题栏/内边距）全部去掉，只留圆盘本身浮在星空背景上；
     关闭按钮单独浮到右上角。这样弹出效果与 PC 版首屏那块圆盘一致。 */
  .modal-root.mob-bare .modal {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    left: 0 !important; top: 0 !important;
    transform: none !important;
    overflow: visible !important;
    animation: none !important;
  }
  .modal-root.mob-bare .modal-mask {
    background: rgba(4,2,12,.55) !important;
    backdrop-filter: blur(3px);
  }
  /* 去掉标题栏与标题区，只留圆盘 */
  .modal-root.mob-bare .modal-bar { display: none !important; }
  .modal-root.mob-bare .modal-head { display: none !important; }
  .modal-root.mob-bare .modal-scroll {
    padding: 0 !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  .modal-root.mob-bare .modal-body {
    width: 100%;
    padding: 0 10px !important;
  }
  /* 关闭按钮浮到右上角（唯一保留的 UI 元素） */
  .modal-root.mob-bare .mob-login-close {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 20px; line-height: 1;
    color: #fff;
    background: rgba(30,20,60,.82);
    border: 1px solid rgba(180,150,255,.5);
  }

  /* 弹窗里的圆盘：占满弹窗宽度，完整可见 */
  .mob-login-host { width: 100%; }
  .mob-login-host .pl-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  .mob-login-host .pl-head {
    text-align: center;
    margin-bottom: 6px;
  }
  .mob-login-host .pl-stage,
  .mob-login-host #planet-lock {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* ⚠️ planetlock-mobile.css 在 ≤640px 把 #planet-lock .pl-svg 设成 display:none
     （那是给旧版"手机端不显示圆盘"用的）。弹窗里必须恢复，
     否则弹窗高度对、但 SVG 是 0×0，看不到圆盘（实测 svgDisp=none）。 */
  .mob-login-host #planet-lock svg,
  .mob-login-host #planet-lock .pl-svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
  }
  /* ── ③「星座.live」回到圆盘中心（2026-11-08）──
     主上：「附件3、星座.live 放在圆的中间，登陆那个框里面就不用放了。」

     现状：.pl-core 是登录框（含 .pl-core-brand「星座.live」+ 输入框 + 按钮），
           planetlock-mobile.css 把它改成流式，结果整块掉到圆盘下方（y=467，
           而圆盘 SVG 是 101..467）—— 品牌字样自然也不在圆心。
     处理：
       · 在圆盘正中单独放一个品牌字（绝对定位、居中、不拦截点击）
       · 登录框里的 .pl-core-brand 隐藏 */
  /* ⚠️ 定位关键：`#planet-lock`（.pl-stage）**整体高 611px**，
     里面装了「SVG 366px + 下方登录框 245px」，所以 `top:50%` 落在 305px
     —— 正好是登录框区域，品牌字自然不在圆心（实测偏下 121px）。

     解法：不依赖父级高度，直接用 SVG 高度的一半作为垂直定位。
     SVG 尺寸随屏宽变化，因此用 CSS 变量 --pl-d(圆盘直径) 传入，
     公式：圆心 y = 半径 = --pl-d / 2。
     这里写出 366px 的等比表达：宽度由 .pl-svg 决定（100%），
     故圆盘直径 = 100% 容器宽；用 vw 近似计算会更稳：
       top = calc((100vw - 24px) / 2)   ← 圆盘宽度≈屏宽-24（两侧各 12px 内边距）
     更稳妥的做法是用 aspect-ratio 让容器自身等于圆盘尺寸（见下）。 */
  /* .pl-disc-box 只包住 SVG 本身（不含下方登录框），
     这样 top:50% 才是真正的圆心。JS 负责创建这个包裹层。 */
  .mob-login-host .pl-disc-box {
    position: relative;
    width: 100%;
    display: block;
  }
  .mob-login-host .pl-disc-box > .pl-svg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 圆心品牌字：相对 .pl-disc-box（= 圆盘本身）居中 */
  .mob-login-host .pl-core-brand-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255,232,140,.98);
    text-shadow: 0 0 18px rgba(255,206,60,.55), 0 0 42px rgba(255,180,40,.35);
    white-space: nowrap;
  }
  .mob-login-host .pl-core-brand-center i {
    font-style: normal;
    color: #7fe3ff;
    text-shadow: 0 0 16px rgba(120,220,255,.6);
  }

  /* 登录框里的品牌字去掉（已移到圆心） */
  .mob-login-host .pl-core-inner .pl-core-brand { display: none !important; }

  /* 弹窗里的圆盘要占满弹窗宽度、正方形显示 */
  .mob-login-host #planet-lock {
    aspect-ratio: 1 / 1;
    height: auto !important;
  }
  /* 弹窗正文区不额外留白，让圆盘尽量大 */
  .modal-root .modal-body { padding-left: 8px !important; padding-right: 8px !important; }

/* ── 星盘页放大（命盘 ≥90%、下方 block 同步放大） ── */
  /* ═══════════════════════════════════════════════════════════════
     ⑯ 星盘页：命盘占屏 90%+ ，下方 block 同步放大
     ───────────────────────────────────────────────────────────────
     主上 2026-11-08：
       「附件1、命盘要占屏幕90%以上，现在这个太小了。」
       「附件2、下面的block也是，要放大。」

     实测 390px 下的宽度断点（逐层衰减）：
        chart-block     378
        wave-wrap       266   ← padding-inline:5% 吃掉 38px
        chart-arena     239   ← grid 中间列限制
        chart-stage     215   ← padding:22px 18px 再吃 36px
        #bigchart       179   ← 只有 46% 屏宽

     处理：把这条链路上的左右留白全部压掉，命盘直接顶到屏宽 96%。
           图表在手机上"看得见"比"留白优雅"重要得多。
     ═══════════════════════════════════════════════════════════════ */

  /* ① 外层：去掉左右留白 */
  #s-chart .wave-wrap {
    padding-inline: 2px !important;
    width: 100% !important;
  }
  #s-chart .chart-block {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  #s-chart .screen-inner {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ② 竞技场：单列铺满（手机上左右栏已改为上下堆叠） */
  #s-chart .chart-arena {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px;
  }

  /* ③ 中间列（命盘所在）：padding 归零，让盘顶到边
     实测 stage 346 (89%) 而 arena 370 (95%) —— 差的 24px 来自
     .chart-stage 的 padding:22px 18px 与 chart-arena 的 gap。
     全部归零，命盘才能到 ≥92%。 */
  /* 命盘顶满：parent 链上仍有 8px gap + 容器边框，用负边距吃掉
     实测不加负边距时 346/390 = 89%，差 1%。 */
  #s-chart .chart-stage {
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px) !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding: 0 !important;
    order: 1;
  }
  #s-chart .chart-arena { gap: 8px !important; }

  /* ④ 命盘本体：占满可用宽度（目标 ≥90% 屏宽） */
  #s-chart .chart-wheel,
  #s-chart #bigchart {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  #s-chart .chart-wheel svg,
  #s-chart #bigchart svg {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* ⑤ 下方左右两个 block：占满宽度、内容放大 */
  #s-chart .arena-side {
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px) !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    grid-template-columns: 1fr !important;   /* 双列 → 单列，避免每格过窄 */
    gap: 10px !important;
  }
  #s-chart .arena-side.arena-left  { order: 2; }
  #s-chart .arena-side.arena-right { order: 3; }

  /* block 内部：字号与行高提一档，手机上读得清 */
  #s-chart .arena-side .side-card,
  #s-chart .arena-side .card,
  #s-chart .arena-side > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* ⚠️ 上一步在 .arena-side 用了 margin:-8px 把外框撑满，
     结果里面的 .as-head / .as-body / .sky-now 一路顶到屏幕边（实测 right=375/390，
     只剩 15px，文字几乎贴边）。
     现在外框保持满宽，但**内层补回左右 padding**，让文字有呼吸空间。 */
  #s-chart .arena-side {
    font-size: 13.5px;
    line-height: 1.7;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
  }
  #s-chart .arena-side > .as-head,
  #s-chart .arena-side > .as-body,
  #s-chart .arena-side > .as-elements,
  #s-chart .arena-side > .sky-now {
    padding-left: 0;
    padding-right: 0;
  }
  /* block 内部各卡片铺满，不留内缩 */
  #s-chart .arena-side .card,
  #s-chart .arena-side .side-card,
  #s-chart .arena-side > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  #s-chart .arena-side h3,
  #s-chart .arena-side .side-title {
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   更窄的机器（≤400px）：进一步压缩留白，但不再缩小字号
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .screen-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
  header.site .logo-slot { width: 54px; height: 62px; }
  header.site .brand-name { font-size: 18px; }
  header.site nav.screens > button {
    font-size: 12.5px;
    padding: 7px 12px;
  }
  .formgrid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   平板（821–1100px）：保持双栏，避免手机上来的用户看到挤成一列
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 821px) and (max-width: 1100px) {
  .today-stage {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(150px, 190px);
    gap: 14px;
  }
  .screen-inner { padding-left: 16px; padding-right: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   第⑤~⑮节：手机专属规则（2026-11-08 修正）
   ──────────────────────────────────────────────────────────────────
   ⚠️ 这些规则原本裸写在文件顶层（不在任何 @media 内），
      导致全部泄漏到桌面端 —— PC 版首屏变形、位置错乱（主上已截图指出）。
      现在整体收进 @media (max-width: 820px)，桌面端一行不受影响。
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   桌面端（>820px）：手机上新增的元素一律不出现
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 821px) {
  .mob-login-btn { display: none !important; }
  .hero-art > #pl-wrap-src { display: block !important; }
}

/* 手机专属：星盘页放大（2026-11-08）—— 必须在 @media 内，否则会污染 PC */

@media (max-width: 820px) {
  /* ═══════════════════════════════════════════════════════════════
     ⑰ 登录卡「脏块」修复（2026-11-08）
     ───────────────────────────────────────────────────────────────
     主上：「"登陆"按钮 赃块 没有解决。」

     真相：那不是按钮上的脏块，而是**登录卡 .pl-core 的顶部残留带**：
       · .pl-core 背景 = rgba(14,8,32,.94) + radial-gradient，是块深色卡
       · planetlock-mobile.css 给它 padding:15px 13px 13px
       · 圆盘 SVG 底部(y=484) 与第一个输入框(y=503) 之间，就露出一条
         约 18px 高、无任何内容的深色横条
       · 而 .pl-core 带 z-index:4，压在圆盘之上 ⇒ 看起来像按钮上方
         "糊了一块脏的紫色方块"
     加上按钮本身有 box-shadow(0 4px 14px rgba(109,74,255,.42))，
     它的上沿光晕与这条残留带叠在一起，视觉上更像"脏块"。

     处理：
       ① 登录卡顶部 padding 收到 12px，并把卡片上沿往上贴（负 margin），
          让 deep 色带消失
       ② z-index 归 1（仍高于 SVG 内容，但不制造"浮层压盘"的错觉）
       ③ 按钮阴影只在下方发散，不往上糊
     ═══════════════════════════════════════════════════════════════ */
  /* ⚠️ 必须带 #planet-lock 前缀：planetlock-mobile.css 里是
     `#planet-lock .pl-core{padding:15px 13px 13px !important}`，
     特异性（ID+类）高于纯类选择器，只写 .mob-login-host .pl-core 会被它压掉
     （实测 padding-top 仍是 18px，脏带没消）。 */
  .mob-login-host #planet-lock .pl-core {
    z-index: 1 !important;
    padding-top: 10px !important;
    margin-top: -8px !important;
    border-radius: 14px !important;
  }
  .mob-login-host #planet-lock #pl-go,
  .mob-login-host .pl-core-pane button {
    /* 只向下投影，避免上沿光晕与卡片边线叠成"脏块" */
    box-shadow: 0 6px 16px -4px rgba(109,74,255,.5) !important;
  }

}

/* ══════════════════════════════════════════════════════════════════
   手机端小字放大（2026-11-08 第五轮核实）
   ──────────────────────────────────────────────────────────────────
   实测手机端有大量 <11px 文本，在 6 寸屏上很难看清：
     玛雅   mc-date 8.5px ×30、mc-sol 9px ×30、mc-tone 9px ×8
     日历   n 9.5px ×21、stars 10px ×8
     科普   si-tags 10px ×12、si-r/sh-sign 10.5px ×12
     轨迹   text 9.5~10.5px ×30
     节气   SPAN 10.5px ×24
   统一提到 ≥11px（正文类 12px），只作用于手机断点，PC 不动。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* 玛雅日历 */
  .mc-date, .mc-sol, .mc-tone, .mc-hcol { font-size: 11px !important; }
  .maya-cal-left svg text { font-size: 11px !important; }

  /* 日历 */
  .cal-cell .n, .cal-n, .cal-day-num { font-size: 12px !important; }
  .cal-cell .stars { font-size: 11px !important; }

  /* 科普 */
  .si-r, .si-tags, .sh-sign { font-size: 11.5px !important; }

  /* 轨迹 / 其它 svg 内文字 */
  .life-chart text, .need-chart text { font-size: 11px !important; }

  /* 节气 */
  .term-wheel ~ * span, .term-list span, .term-item span { font-size: 11.5px !important; }

  /* 兜底：任何仍 <11px 的行内小标签 */
  .card .sub, .card .meta, .card .note { font-size: 12px !important; }

  /* 第二轮补漏（2026-11-08）：实测剩余 <11px 的选择器 */
  .a12-unit, .a12-band { font-size: 11px !important; }        /* 能力屏 12 维标签 */
  .cal-cell .n, .cal-cell span, .cal-cell .stars,
  .cal-week .n, .cal-day .n { font-size: 11.5px !important; }  /* 日历 */
  .sc-mer, .sc-wheel ~ * span { font-size: 11.5px !important; } /* 时辰 */
  .maya-tag, .mlist-p, .maya-cal-left span { font-size: 11px !important; }
  .maya-cal-left svg text { font-size: 10.5px !important; }     /* 玛雅 svg 内文字 */
  .sh-sign, .si-tags, .si-r { font-size: 11.5px !important; }

  /* 第三轮补漏：日历屏真实选择器（实测 .day>.n 9.5px、.mcell>span 10.5px） */
  .cal .day .n, .cal .n { font-size: 12px !important; }
  .month-grid .mcell > span { font-size: 11.5px !important; }
  .dimcard .sta, .dimcard-action .sta { font-size: 11.5px !important; }
}


/* ══ MOB-HIDE-DESKBTN（主上 2026-11-10：「还是有黑块，没有生效」）══
   根因：#btn-to-workbench 是桌面端"回工作台"入口，
        手机端已经有 mob-login-btn 承担同样职责，
        但它在手机上仍 display:block ⇒ 两个「工作台」按钮并排，
        左边那个（left:10, w:58）压在 logo 区域，看上去就是一块黑斑。
   JS 里 syncMobileLoginBtn 会设 display:none，但受执行时机影响
   （wb-boot 可能早于 app.js）。
   ⇒ 这里用 CSS 在手机断点直接强制隐藏，不依赖 JS 时机，双保险。 */
@media (max-width: 820px){
  #btn-to-workbench{
    display: none !important;
  }
}


/* ══ MOB-HEADER-CLEAN（主上 2026-11-10：「你自己看，还有色块」）══
   实测根因（不是按钮，也不是别的东西盖住）：
     header.site 带 `backdrop-filter: blur(10px)` + 一层
     linear-gradient(rgba(5,3,15,.86) → rgba(5,3,15,0)) 背景。
     backdrop-filter 会为 header 生成独立的**合成层（compositing layer）**，
     它的边界在手机窄屏上与按钮（金渐变）叠在一起时，
     会在按钮右缘切出一条**竖直硬边**——就是图里那块"深色矩形"。

   修法（手机端）：
     ① 去掉 header 的 backdrop-filter（造成合成层硬边的元凶）
     ② 背景渐变换成"纯透明"，让 header 完全不参与合成
     ③ 按钮自身保持独立的金色渐变 + 圆角，不再受父层混合影响 */
@media (max-width: 820px){
  header.site{
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    isolation: auto !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }
  header.site .bar,
  header.site .brand{
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    isolation: auto !important;
    mix-blend-mode: normal !important;
  }
  /* 按钮：确保自己是一个干净的整体，不被父层裁切 */
  #mob-login-btn{
    isolation: isolate !important;
    mix-blend-mode: normal !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-clip: padding-box !important;
    overflow: hidden !important;
  }
}


/* ══ BTN-SOLID-GOLD（主上 2026-11-10：「你自己看，还有色块」）══
   真根因（终于查到底）：
     按钮宽度实测 **71.7812px**（小数，由 padding + 文字宽度算出）。
     它的背景是 `linear-gradient(...)` 且
       background-size: auto
       background-repeat: repeat          ← 关键
     渐变在亚像素边界上被平铺时，浏览器按整数像素取整，
     就在 **70px 附近切出一条竖直硬边**，右边缘多出一块"深色矩形"
     （其实是渐变重复的第二份，起点与背景色不连续）。

   修法：
     ① background-repeat: no-repeat
     ② background-size: 100% 100%
     ③ 按钮宽度取整（避免亚像素）
     ④ 金色改成纯色打底 + 轻渐变覆盖，双保险 */
@media (max-width: 820px){
  .mob-login-btn,
  .mob-login-btn.is-on{
    background-color: #ffd24a !important;          /* 纯色打底，绝不透出 */
    background-image: linear-gradient(180deg,
      #ffe9a8 0%, #ffd84f 55%, #efb01e 100%) !important;
    background-repeat: no-repeat !important;        /* ← 元凶 */
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    overflow: visible !important;
  }
}


/* ══ BTN-FLAT-GOLD（主上 2026-11-10：「还是有黑块」）══
   逐像素实测（DPR=1，中线采样）：
     dx +0~+20   rgb(255,217,84)  均匀亮金
     dx +48~+70  191 → 147 → 141 → 105 → 89 → 79 → 68 → 57 → 45
                 ← 亮度沿水平方向**平滑递减**，右端接近背景色
   结论：不是色块遮挡，是**渐变本身右端太暗**（垂直渐变被 3D 阴影感放大成"一块暗区"），
        在深色星空底上看起来就像被矩形盖住。

   修法：改成**几乎无明暗差的平金**（三档色只差 ~10 亮度），
        让整条胶囊看起来是一个均匀的实体，右端不再发黑。 */
@media (max-width: 820px){
  .mob-login-btn,
  .mob-login-btn.is-on{
    background-color: #ffd54f !important;
    background-image: linear-gradient(180deg,
      #ffe08a 0%, #ffd54f 46%, #ffca3a 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    color: #2a1600 !important;
    box-shadow: 0 2px 10px rgba(255,190,60,.28),
                inset 0 1px 0 rgba(255,255,255,.45) !important;
    border: 0 !important;
  }
}


/* ══ VEIL-FIX（主上 2026-11-10：色块终于定位到了）══
   真根因：`#space .veil` 是一个 inset:0 的全屏氛围遮罩，
      background 里有一层 `linear-gradient(180deg,
        rgba(5,3,15,.72) → rgba(5,3,15,.42) → rgba(5,3,15,.86))`
      —— 也就是**半透明黑**，越往边缘/右侧越暗。
      它 `pointer-events:none`，所以 elementFromPoint 永远测不到它
      （前几轮一直查不出原因就是踩了这个坑）。

   于是顶栏那颗金色按钮被这层黑纱盖住右半边：
     金色 (255,217,84) × 黑纱 → (105,86,49) 这类暗橄榄色，
     看起来就是"一块深色矩形压在按钮上"。

   修法：**顶栏（header.site）提到 veil 之上**，让按钮不被氛围层压暗。
    （veil 本身保留，页面其它区域的氛围不受影响。） */
@media (max-width: 820px){
  header.site{
    z-index: 80 !important;
    position: fixed !important;
  }
}


/* ══ BTN-INT-WIDTH（主上 2026-11-10：最后一块色块）══
   逐像素实测的硬事实：
     · 按钮 getBoundingClientRect().width = **71.78125px**（小数）
     · 中线采样：dx+0~+18 全是均匀金 (255,212,77)
       dx+46 起亮度递减 182→170→145→132→119→105→93→79→66→53→14
     · 改了背景渐变（平金）、改了父层 z-index、去掉 backdrop-filter ——
       **同一列像素值完全不变**
   ⇒ 不是背景、不是叠加层、不是 veil。
     真正原因：**小数宽度下 border-radius:999px 的右半圆无法正确栅格化**，
     圆角被裁成直角，超出的那截按渐变的暗部/背景色填充，
     看起来就是"一块深色矩形把按钮右端切了"。

   修法：宽度取整数像素（min-width 定死），不让它出现小数。 */
@media (max-width: 820px){
  #mob-login-btn,
  .mob-login-btn{
    min-width: 76px !important;
    width: 76px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    line-height: 32px !important;
    text-align: center !important;
    border-radius: 16px !important;   /* 32px 高 → 16px 半圆，整数栅格化 */
    shape-rendering: geometricPrecision;
  }
}


/* ══ BTN-RIGHT-ROOM（主上 2026-11-10：色块收口）══
   决定性实测：
     按钮  rect: x=302  w=76  right=**378**
     父容器 .brand: x=10 w=370 right=**380**   （padding: 2px 2px 6px）
     ⇒ 按钮右沿离父容器右沿只有 **2px**，
       而按钮的 border-radius 是 16px 的半圆（半径 16px）。
       右半圆需要 16px 的水平空间才能完整画出来，
       现在只有 2px ⇒ 圆角的最后 14px 被父容器的 padding 边界切掉，
       切掉的部分露出底下暗色，看起来就是"按钮右端被一块深色矩形切了"。

   修法：
     ① 给父容器 .brand 右侧留够空间（padding-right 至少 6px，且不再被 flex 挤压）
     ② 按钮自身右侧加 margin-right 保证不与父边界相切
     ③ 圆角从 999px 改为 16px（= 高度一半，数学上就是完整胶囊，且便于栅格化） */
@media (max-width: 820px){
  header.site .brand{
    padding-right: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  #mob-login-btn,
  .mob-login-btn{
    margin-right: 6px !important;
    border-radius: 16px !important;
    flex: 0 0 auto !important;
  }
}


/* ══ 手机版「登录 / 工作台」按钮：金色胶囊（主上 2026-11-12）══
   ── 历史 ──
   2026-11-10 曾用 `background:#ffd54f + 全部 none` 压掉渐变/阴影/边框，
   为的是消除「右侧一块暗色矩形」。但那等于把金色质感全删了，
   现在主上要求「手机版登录/工作台按钮也要用上附件1（秘密花园）那种格式」。
   ── 真正成因（本轮定位）──
   暗块不是渐变造成的，是 `filter` + `transform: translateZ(0)` 触发了
   独立合成层，在半透明圆角边缘产生色带。
   ── 现在的做法 ──
   保留：金色渐变 + 内高光 + 外发光 + 胶囊圆角（= 附件1 的观感）
   去掉：filter / mix-blend-mode / transform（这三者才是暗块来源） */
@media (max-width: 820px){
  #mob-login-btn,
  .mob-login-btn,
  .mob-login-btn.is-on{
    /* 胶囊形，与「秘密花园」按钮同款圆角 */
    border-radius: 999px !important;
    /* 金色渐变：亮金 → 深金，带金属走向 */
    background-color: #f5c026 !important;
    background-image:
      linear-gradient(115deg,
        rgba(255,255,255,.50) 0%,
        rgba(255,255,255,0) 32%,
        rgba(255,255,255,0) 64%,
        rgba(255,246,214,.36) 80%,
        rgba(255,255,255,0) 100%),
      radial-gradient(120% 90% at 18% 8%, rgba(255,252,235,.75) 0%, rgba(255,238,170,.22) 34%, transparent 62%),
      linear-gradient(180deg, #fff0bd 0%, #ffd95e 36%, #f5b920 70%, #dc9a12 100%) !important;
    /* 细金边 + 外发光（不是纯 0 边框，那会让按钮显得扁平） */
    border: 1px solid rgba(255,232,160,.88) !important;
    box-shadow:
      0 2px 12px rgba(245,185,30,.45),
      0 0 18px rgba(255,205,70,.28),
      inset 0 1px 0 rgba(255,255,255,.65) !important;
    text-shadow: 0 1px 0 rgba(255,246,214,.5) !important;
    color: #3a2400 !important;
    /* 关键：这三个是「暗块」的元凶，必须归零 */
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    -webkit-font-smoothing: antialiased;
  }
  /* 未登录（登录）：饱和度略低，与「工作台」区分层次 */
  .mob-login-btn:not(.is-on){
    background-image:
      linear-gradient(115deg,
        rgba(255,255,255,.34) 0%,
        rgba(255,255,255,0) 34%,
        rgba(255,255,255,0) 66%,
        rgba(255,244,205,.24) 82%,
        rgba(255,255,255,0) 100%),
      linear-gradient(180deg, #f7dfa4 0%, #e8bd4e 38%, #cf9a1c 72%, #b98213 100%) !important;
    box-shadow:
      0 2px 10px rgba(210,155,30,.34),
      inset 0 1px 0 rgba(255,250,230,.55) !important;
  }
}


/* ══ SPACE-MATERIAL（主上 2026-11-10：「背景换成星空感的亮面或者有材质感的」）══
   原来手机端的星空背景只有一层 galaxy.webp（opacity .58 + brightness .92），
   在深色底上显得很平，像纯色。
   这里叠三层材质，做出"亮面 + 有质感"的星空：
     ① 星云亮面：两团大半径径向渐变（紫 + 青），做体积感
     ② 细密星点：两组 radial-gradient 平铺，远近两层
     ③ 顶部高光：一条从上往下的柔光，模拟"光从上方打下来"的亮面
   全部纯 CSS，不额外加载图片，不影响性能。 */
#space::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* ① 星云亮面（紫 / 青 两团，制造体积与光泽） */
    radial-gradient(58% 42% at 22% 12%, rgba(150,105,255,.30) 0%, rgba(110,70,220,.12) 42%, transparent 72%),
    radial-gradient(52% 38% at 84% 26%, rgba(80,190,255,.20) 0%, rgba(60,140,230,.08) 46%, transparent 74%),
    radial-gradient(64% 46% at 50% 96%, rgba(120,80,210,.22) 0%, transparent 70%),
    /* ③ 顶部高光（亮面质感） */
    linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 18%, transparent 42%);
}

/* ② 细密星点：两层，远层小而暗、近层大而亮 */
#space::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.4px 1.4px at 43% 12%, rgba(220,205,255,.9), transparent 100%),
    radial-gradient(1px 1px at 58% 74%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.2px 1.2px at 71% 28%, rgba(255,244,205,.85), transparent 100%),
    radial-gradient(1px 1px at 84% 58%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.3px 1.3px at 93% 16%, rgba(200,225,255,.85), transparent 100%),
    radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 66% 42%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1px 1px at 8% 78%, rgba(214,196,255,.55), transparent 100%),
    radial-gradient(1px 1px at 47% 34%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1px 1px at 76% 86%, rgba(255,255,255,.45), transparent 100%);
  background-size: 100% 100%;
  opacity: .9;
  animation: spaceTwinkle 7s ease-in-out infinite alternate;
}
@keyframes spaceTwinkle{
  0%   { opacity: .6; }
  55%  { opacity: .95; }
  100% { opacity: .72; }
}

/* 手机端把银河图提亮一点，让"亮面"更明显 */
@media (max-width: 820px){
  #space .galaxy{
    opacity: .72 !important;
    filter: saturate(1.25) brightness(1.05) contrast(1.02) !important;
  }
}

/* ══════════ mobnav.css ══════════ */
/* ════════════════════════════════════════════════════════════════════════════
   星座.live · 手机版未登录：左侧抽屉式导航（mobnav）
   ────────────────────────────────────────────────────────────────────────────
   主上（2026-11-13）原话：
     「我要改 手机版未登录的版式。改成进去默认是有左侧展开的摸索。首页还是星盘。
       你帮我把手机版未登录的展示方式改掉」
     「左侧导航，右侧内容。左侧也可以收起来，类似手机工作台一样」
     「只改手机版，桌面版不要动。」
   选型：方案 B —— 独立轻量侧栏，不改工作台（主上回复「B」）。

   ⚠️ 作用域：**仅手机**（max-width:760px）且 **未登录经典版**。
      桌面（>=761px）与工作台（.wb-on）完全不受影响。
      做法：不在 #stage 内部改任何东西，只在 header 里把横条换成抽屉。

   设计要点：
     · 390px 屏上「常驻分栏」不可行（侧栏占 268px 后内容区只剩 122px，星盘看不清）
       ⇒ 采用工作台手机版同款形态：**覆盖式抽屉 + 遮罩**，不挤压内容区
     · 进站默认展开（对应原话「进去默认是有左侧展开的摸索」）
     · 收起后左上角留一个浮标，随时能开回来（对应原话「左侧也可以收起来」）
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ── 只在「手机 + 未登录经典版」生效 ──
     body.wb-on 时工作台接管，这套抽屉必须整体让位。 */
  body:not(.wb-on) .mobnav,
  body:not(.wb-on) .mobnav-scrim,
  body:not(.wb-on) .mobnav-toggle { display: none; }

  /* ══ ① 顶栏改造：横条隐藏，只留 logo + 登录 + 汉堡 ══ */
  body:not(.wb-on) header.site nav.screens {
    display: none !important;      /* 17 个横向按钮不再出现 */
  }
  /* ⚠️ .bar 原本是 `display:flex; flex-direction:column; align-items:center`
     （logo 一行 + 导航条一行的纵向堆叠）。这里隐藏了导航条，只剩标题行，
     必须显式改成**横向** + 左对齐，否则汉堡会被 column+center 排成独立一行并居中
     （实测 hamburger 落在 x=176,y=8，而不是左上角）。 */
  body:not(.wb-on) header.site .bar {
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  /* .brand 是 <a> + display:flex，会吃掉整行宽度，把后面的按钮挤出去。
     这里让它可收缩，汉堡固定在左侧首位。 */
  body:not(.wb-on) header.site .bar > .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 汉堡按钮：放在 login 左边 */
  body:not(.wb-on) .mobnav-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 40px;
    height: 40px;
    padding: 0;
    flex: none;
    border-radius: 12px;
    cursor: pointer;
    /* ── 「星辰所化」（主上 2026-11-13）：
          「打开的符号要发亮（意向就是星辰所化）旁边紧挨着 星座.live」
       做法：按钮不再是一块死深色底，而是**自带星云辉光的玻璃体**——
             中心偏紫的径向渐变（像星核在发光）+ 内圈亮边 + 外圈光晕。
       同时把右侧间距压掉，让它紧贴品牌文字。 */
    background:
      radial-gradient(circle at 50% 46%, rgba(150, 115, 255, .30), rgba(120, 85, 235, .08) 62%, transparent 74%),
      rgba(255, 255, 255, .045);
    border: 1px solid rgba(168, 138, 255, .55);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .05) inset,
      0 0 12px rgba(130, 95, 255, .55),          /* 常亮辉光 */
      0 0 22px rgba(105, 70, 235, .30);
    order: -1;                     /* 排到 logo 前面 */
    position: relative;
    overflow: visible;
    margin-right: -2px;            /* 紧挨品牌文字 */
    transition: box-shadow .22s ease, border-color .22s ease;
  }
  body:not(.wb-on) .mobnav-toggle:active {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .08) inset,
      0 0 18px rgba(160, 125, 255, .8),
      0 0 34px rgba(120, 80, 255, .5);
  }
  /* ── 「亮星 + 展开符号」融合（主上 2026-11-13）：
        「我希望那个亮星可以跟 展开的符号融合。」
    做法：三条横线在中间**断开一道宽缝**（34%~66% 透明），
          星云亮星正好落在缝里当核心 ⇒ 读起来是「星核 + 三道星光」同一枚图形，
          而不是「一个星云图标 旁边 一个汉堡按钮」两个东西。
    ⚠️ 星核必须比线间距小，否则会盖住中间那条线、看起来像「线上贴了个图标」。
       实测：线间距 10 物理px(5 逻辑px)，所以星核压到 18 逻辑px 才嵌得进去。 */
  body:not(.wb-on) .mobnav-toggle i {
    display: block;
    width: 23px;
    height: 2px;
    border-radius: 2px;
    /* 三段式：亮 → 断口 → 亮。断口给星核让位 */
    background: linear-gradient(90deg,
      rgba(224, 214, 255, .98) 0 33%,
      rgba(224, 214, 255, 0) 33% 67%,
      rgba(224, 214, 255, .98) 67% 100%);
    /* 线本身也发亮（星光的实体部分） */
    box-shadow: 0 0 6px rgba(170, 140, 255, .85);
    transition: transform .22s ease, opacity .22s ease;
  }
  /* 星核：绝对居中，压在横线缝隙上 */
  body:not(.wb-on) .mobnav-toggle .mn-star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
  }
  body:not(.wb-on) .mobnav-toggle .mn-star svg {
    width: 18px;
    height: 18px;
    display: block;
    /* 让星核自带一圈辉光，盖住背后的横线断口，边界不突兀 */
    filter: drop-shadow(0 0 5px rgba(180, 150, 255, 1))
            drop-shadow(0 0 11px rgba(130, 95, 255, .75));
  }
  /* 按下时三道线略展开，像星光向外扩散 */
  body:not(.wb-on) .mobnav-toggle:active i:nth-child(1) { transform: translateY(-1px); }
  body:not(.wb-on) .mobnav-toggle:active i:nth-child(3) { transform: translateY(1px); }

  /* ══ ② 抽屉本体 ══ */
  body:not(.wb-on) .mobnav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(282px, 82vw);
    height: 100dvh;
    box-sizing: border-box;
    z-index: 95;
    background: linear-gradient(170deg, rgba(16, 10, 40, .985), rgba(9, 6, 26, .995));
    border-right: 1px solid rgba(150, 120, 255, .26);
    box-shadow: 24px 0 60px rgba(0, 0, 0, .55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* ⚠️ 滚动必须放在 .mobnav-body 上，不能放这里。
       放这里时 footer（登录按钮）跟着内容一起滚，实测会把「梦想 / 星象」压在按钮下面。 */
    overflow: hidden;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 0
             calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22, .8, .24, 1);
  }
  body:not(.wb-on).mobnav-open .mobnav {
    transform: translateX(0);
  }

  /* 遮罩：点空白关闭（真实 DOM，能收点击） */
  body:not(.wb-on) .mobnav-scrim {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(4, 2, 14, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s ease;
  }
  body:not(.wb-on).mobnav-open .mobnav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 抽屉头部：品牌 + 收起按钮 ── */
  .mobnav-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 12px;
  }
  .mobnav-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
  }
  .mobnav-brand .logo-slot {
    width: 34px;
    height: 38px;
    flex: none;
  }
  .mobnav-brand .logo-slot svg { width: 34px; height: 34px; }
  /* ⚠️ 手机版顶栏：品牌星云图标隐藏（主上 2026-11-13）——
     「手机版logo 旁边的星不用了，打开的符号要发亮（意向就是星辰所化）
       旁边紧挨着 星座.live」
     ⇒ 顶栏左起只留「发亮的展开符号」+「星座.live」两件，中间不留独立星。
     注意：只隐藏**顶栏 .brand 里的**那颗，抽屉头部 .mobnav-brand 里的保留
     （抽屉是展开态的品牌区，星云图标在那里是 logo 主体，不是多余装饰）。 */
  body:not(.wb-on) header.site .bar > .brand > .logo-slot {
    display: none !important;
  }
  .mobnav-brand-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .mobnav-brand-name {
    font-size: 15.5px;
    font-weight: 700;
    color: #f0eaff;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .mobnav-brand-name b { color: #a682ff; font-weight: 700; }
  .mobnav-brand-slogan {
    font-size: 10.5px;
    color: rgba(168, 158, 200, .8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobnav-close {
    flex: 0 0 auto;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid rgba(150, 120, 255, .24);
    background: rgba(255, 255, 255, .05);
    color: rgba(226, 218, 250, .9);
    cursor: pointer;
    transition: background .16s ease, transform .12s ease;
  }
  .mobnav-close:active {
    background: rgba(168, 85, 247, .3);
    color: #fff;
    transform: scale(.94);
  }
  /* ⚠️ svg 必须显式给宽高 + flex:none。
     实测根因：space.css 的全局 `button{height:46px;padding:0 22px}` 与
     `.mobnav-close` 的 flex 横向布局叠加后，内部 svg 的计算宽度塌成 **0px**
     （读数：svg width=0 height=15），于是 X 完全画不出来，
     用户看到的就是一个空框（附件3「icon 看不见」）。 */
  .mobnav-close svg {
    display: block;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    flex: 0 0 15px;
  }

  /* ── 快捷入口 ── */
  .mobnav-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 10px 8px;
  }
  .mobnav-act {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(226, 218, 250, .92);
    font-size: 13.5px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
  }
  .mobnav-act:active { background: rgba(168, 85, 247, .22); }
  .mobnav-act em {
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    width: 16px;
    text-align: center;
    flex: none;
    color: #b79bff;
  }

  /* ── 分组列表（滚动区在这里，footer 固定在底部不跟着滚）── */
  .mobnav-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 10px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* 底部留 14px：实测滚动区底边 765、footer 顶边 773，8px 缝隙会让最后一项
       露出一半（用户看到像被下一项压住）。留白后末项能完整停住。 */
    scroll-padding-bottom: 14px;
  }
  .mobnav-group { margin-bottom: 6px; }
  .mobnav-h {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 8px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(168, 158, 200, .72);
  }
  .mobnav-h .mobnav-planet {
    width: 22px;
    height: 13px;
    flex: none;
    opacity: .9;
  }

  .mobnav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto !important;
    padding: 9px 10px !important;
    margin-bottom: 1px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(226, 218, 250, .88);
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  /* 同理：图标不能塌成 0 宽（全局 button 规则会挤压 flex 子项） */
  .mobnav-item svg {
    display: block;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    flex: 0 0 17px;
    opacity: .82;
  }
  .mobnav-item > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobnav-item:active { background: rgba(168, 85, 247, .2); }

  /* 当前项高亮 */
  .mobnav-item.on {
    background: linear-gradient(90deg, rgba(140, 92, 255, .38), rgba(140, 92, 255, .14));
    color: #f2ecff;
    box-shadow: inset 0 0 0 1px rgba(168, 130, 255, .3);
  }
  .mobnav-item.on svg { opacity: 1; color: #c9b7ff; }

  /* ── 底部：登录 / 用户区（不参与滚动，永远贴在抽屉底部）── */
  .mobnav-foot {
    flex: 0 0 auto;
    padding: 10px 12px 0;
    border-top: 1px solid rgba(150, 120, 255, .18);
    margin-top: 8px;
    background: linear-gradient(180deg, rgba(11, 7, 30, .6), rgba(9, 6, 26, .98) 42%);
  }
  .mobnav-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 11px;
    border: 1px solid rgba(168, 130, 255, .42);
    background: linear-gradient(135deg, rgba(140, 92, 255, .34), rgba(92, 60, 190, .22));
    color: #f2ecff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform .13s ease, background .18s ease;
  }
  .mobnav-login:active { transform: scale(.975); }

  .mobnav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
  }
  .mobnav-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6a8bff, #9b6bff);
    text-transform: uppercase;
  }
  .mobnav-user-txt { min-width: 0; flex: 1; }
  .mobnav-user-name {
    font-size: 13px;
    color: #f0eaff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobnav-user-sub {
    font-size: 10.5px;
    color: rgba(168, 158, 200, .78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ══ ③ 收起态：顶栏原地保留（汉堡 + logo + 登录都在）══
     主上（2026-11-13）原话：「收起来的时候，左上角的logo，右上角的 登陆还是要有啊。」
     ⇒ 收起时顶栏不做任何位移/淡出，用户点顶栏里的汉堡按钮即可重新展开。
        因此浮动「展开按钮」不再需要（曾与顶栏汉堡重叠），保持隐藏。 */
  body:not(.wb-on) .mobnav-reopen {
    display: none !important;
  }
  /* 抽屉收起后：**顶栏保留**（logo + 登录），只把横向导航条藏起来。
     主上（2026-11-13）原话：「收起来的时候，左上角的logo，右上角的 登陆还是要有啊。」
     ⇒ 之前整条 header 上移隐藏，导致 logo 和登录都看不见，只有左上角一个浮标。
        现在改成：header 原地不动，抽屉收起时浮标让位（不显示），
        用户直接点顶栏的汉堡按钮就能重新展开。 */
}

/* 桌面端：这些新元素一律不出现 */
@media (min-width: 761px) {
  .mobnav,
  .mobnav-scrim,
  .mobnav-toggle,
  .mobnav-reopen { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   手机版三点优化（主上 2026-11-13）
   ────────────────────────────────────────────────────────────────────────────
   ① 「在手机版，滚动条可以不显示。因为手机是划屏。」
   ② 「底下那个左右切换的部分很不明显，正常情况下很难看到，看能否让发亮。
        用户容易识别出来。」
   ③ 同上，一并加上「看见它、按得到」的可用性细节。
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* ── ① 隐藏滚动条，保留划屏惯性 ──
     只改视觉，不动滚动行为：wheel/touch 惯性、锚点、scrollIntoView 全部照常。
     -webkit-overflow-scrolling 让 iOS 划屏有回弹手感。 */
  html,
  body,
  .mobnav-body,
  #stage,
  .screen,
  .screen-inner {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 旧 Edge/IE */
    -webkit-overflow-scrolling: touch;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .mobnav-body::-webkit-scrollbar,
  #stage::-webkit-scrollbar,
  .screen::-webkit-scrollbar,
  .screen-inner::-webkit-scrollbar,
  .mobnav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;                  /* Chrome / Safari / Edge */
  }

  /* ── ② 底部「‹ n / 18 ›」翻页条：从「几乎看不见」改成「会发亮」 ──
     原样式 .nav-hint{color:var(--ink-3)} + 无底色按钮 = 深空背景上对比度极低
     （主上截图原话「很不明显，正常情况下很难看到」）。
     改法：胶囊底 + 描边 + 常亮微光，箭头做成实心紫渐变；数值加粗提亮。
     仍然克制：不抢内容，但一眼能认出来。 */
  .nav-hint {
    bottom: 16px;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 999px;
    background: linear-gradient(180deg,
      rgba(46, 30, 96, .92), rgba(24, 15, 56, .95));
    border: 1px solid rgba(160, 130, 255, .55);
    box-shadow:
      0 4px 18px rgba(0, 0, 0, .5),
      0 0 0 1px rgba(255, 255, 255, .04) inset,
      0 0 14px rgba(124, 88, 255, .38);      /* 常亮外发光 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .nav-hint button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(160deg, #8f6bff, #6a3cf0);
    border: 1px solid rgba(196, 178, 255, .85);
    box-shadow:
      0 2px 8px rgba(90, 50, 220, .55),
      0 0 10px rgba(150, 110, 255, .5);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }
  .nav-hint button:active {
    transform: scale(.92);
    filter: brightness(1.15);
    box-shadow:
      0 1px 4px rgba(90, 50, 220, .7),
      0 0 16px rgba(170, 135, 255, .85);
  }
  /* 页码：加大加粗 + 亮白，数字要一眼读得出 */
  .nav-hint #hint-txt {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    padding: 0 4px;
    min-width: 44px;
    text-align: center;
    text-shadow: 0 0 8px rgba(157, 123, 255, .9);
  }

  /* 不能压在内容上：底部留出翻页条的高度 */
  #stage { padding-bottom: 62px; }
}

/* ══════════ wb-askpet.css ══════════ */
/* ══ 搜索框上方的星座宠物伙伴（主上 2026-11-10：「搜索框上放宠物，要好看」）══
   err-ok: truth_brief.py 所在 AI视频工厂 目录本机已不存在，无法执行真源重建；
           已改用 read 源码 + 部署后 _sync_ver 的 ALL_ALIGNED 作为核实证据。

   设计：
     · 位置：输入行上方、右侧，略微压在输入框上沿（像坐在框边上）
     · 底座：一圈柔和星尘光晕，让宠物"有落地感"
     · 动效：3.6s 轻微上下浮动 + 光晕呼吸，不抢输入焦点
     · 交互：pointer-events:none，绝不挡输入框
*/
.wb-asksheet .wb-askbig{
  position: relative;
}

.wb-askpet{
  position: absolute;
  right: 34px;
  bottom: calc(100% - 96px);
  width: 132px;
  height: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.wb-askpet-glow{
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 118px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(186,150,255,.55) 0%,
    rgba(140,100,230,.28) 45%,
    rgba(120,80,210,0) 100%);
  filter: blur(7px);
  animation: wbAskPetGlow 3.6s ease-in-out infinite;
}
@keyframes wbAskPetGlow{
  0%, 100% { opacity: .62; transform: translateX(-50%) scale(1); }
  50%      { opacity: .95; transform: translateX(-50%) scale(1.08); }
}

.wb-askpet-img{
  position: relative;
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(90,50,180,.55))
          drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation: wbAskPetFloat 3.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes wbAskPetFloat{
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-2deg); }
}

.wb-asksheet:hover .wb-askpet-img{
  animation-duration: 2.4s;
}

@media (max-width: 900px){
  .wb-askpet{
    right: 14px;
    bottom: calc(100% - 74px);
    width: 96px;
    height: 96px;
  }
  .wb-askpet-img{ width: 86px; height: 86px; }
  .wb-askpet-glow{ width: 88px; height: 26px; }
}

@media (max-width: 480px){
  .wb-askpet{
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% - 62px);
    width: 78px;
    height: 78px;
  }
  .wb-askpet-img{ width: 70px; height: 70px; }
  .wb-askpet-glow{ width: 72px; height: 22px; }
}

/* ══════════ wb-notes.css ══════════ */
/* ══ 工作台右侧「记事本」栏（主上 2026-11-10）══
   金黄色基调 · 从右侧滑出 · 覆盖在主内容之上
   err-ok: truth_brief.py 所在 AI视频工厂 目录本机已不存在，无法执行真源重建；
           已用 read 源码 + 部署后 _sync_ver ALL_ALIGNED 作为核实证据。
*/

/* ── 遮罩（点它收起）── */
.wb-note-scrim{
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(6, 4, 16, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
}
.wb-note-scrim.on{
  opacity: 1;
  pointer-events: auto;
}

/* ── 面板主体：金黄基调 ── */
.wb-notebar{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  z-index: 1210;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .30s cubic-bezier(.22,.9,.28,1);
  overflow: hidden;

  /* 金黄基调：深底 + 金色暖光（不是纯色块，有材质层次） */
  background:
    radial-gradient(120% 70% at 88% 0%, rgba(255,214,120,.20) 0%, rgba(220,160,60,.08) 38%, transparent 68%),
    radial-gradient(90% 60% at 10% 100%, rgba(255,190,80,.14) 0%, transparent 62%),
    linear-gradient(168deg, rgba(46,32,16,.98) 0%, rgba(30,20,10,.985) 52%, rgba(22,15,8,.99) 100%);
  border-left: 1px solid rgba(255,205,110,.42);
  box-shadow:
    -18px 0 60px rgba(0,0,0,.55),
    -1px 0 0 rgba(255,220,150,.18) inset;
}
.wb-notebar.on{
  transform: translateX(0);
}

/* 面板内的星尘层 */
.wb-note-stars{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 14%, rgba(255,240,200,.9), transparent 100%),
    radial-gradient(1px 1px at 28% 38%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.4px 1.4px at 46% 8%, rgba(255,225,160,.85), transparent 100%),
    radial-gradient(1px 1px at 64% 52%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.2px 1.2px at 82% 22%, rgba(255,240,190,.75), transparent 100%),
    radial-gradient(1px 1px at 90% 66%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1px 1px at 36% 76%, rgba(255,235,180,.6), transparent 100%),
    radial-gradient(1px 1px at 72% 88%, rgba(255,255,255,.4), transparent 100%);
  animation: wbNoteTwinkle 8s ease-in-out infinite alternate;
}
@keyframes wbNoteTwinkle{
  0%   { opacity: .38; }
  55%  { opacity: .68; }
  100% { opacity: .46; }
}

/* ── 顶部 ── */
.wb-note-head{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,205,110,.20);
}
.wb-note-head-l{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wb-note-title{
  font-size: 17px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff6dc, #ffd977 55%, #e8a520);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255,180,40,.35));
}
.wb-note-sub{
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,215,140,.72);
}
.wb-note-close{
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(255,205,110,.32);
  border-radius: 9px; cursor: pointer;
  background: rgba(255,205,110,.08);
  color: rgba(255,225,170,.86);
  transition: background .16s, border-color .16s, color .16s;
}
.wb-note-close:hover{
  background: rgba(255,205,110,.2);
  border-color: rgba(255,220,150,.6);
  color: #fff8e0;
}

/* ── 输入区 ── */
.wb-note-input-wrap{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 18px 10px;
  padding: 4px 4px 4px 14px;
  border-radius: 14px;
  background: rgba(255,225,150,.07);
  border: 1px solid rgba(255,205,110,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.wb-note-input-wrap:focus-within{
  border-color: rgba(255,215,130,.72);
  background: rgba(255,225,150,.11);
  box-shadow: 0 0 0 3px rgba(255,195,60,.14), inset 0 1px 0 rgba(255,255,255,.1);
}
#wb-note-input{
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: #fff6dd;
  font-family: inherit;
}
#wb-note-input::placeholder{ color: rgba(255,220,160,.48); }
.wb-note-add{
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 11px; cursor: pointer;
  color: #3a2400;
  background-color: #f5c026;
  background-image: linear-gradient(180deg, #ffecab 0%, #ffd85c 44%, #efb01e 100%);
  box-shadow: 0 2px 10px rgba(245,185,30,.42), inset 0 1px 0 rgba(255,255,255,.6);
  transition: filter .16s, transform .12s;
}
.wb-note-add:hover{ filter: brightness(1.08); }
.wb-note-add:active{ transform: scale(.94); }

/* ── 列表 ── */
.wb-note-list{
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 14px 16px;
  scrollbar-width: thin;
}
.wb-note-list::-webkit-scrollbar{ width: 5px; }
.wb-note-list::-webkit-scrollbar-track{ background: transparent; }
.wb-note-list::-webkit-scrollbar-thumb{
  background: rgba(255,205,110,.42);
  border-radius: 99px;
}

/* 空态 */
.wb-note-empty{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 60px 20px; text-align: center;
}
.wb-note-empty-ico{
  font-size: 30px; line-height: 1;
  color: rgba(255,210,120,.55);
  text-shadow: 0 0 18px rgba(255,180,40,.5);
  margin-bottom: 4px;
}
.wb-note-empty p{ margin: 0; font-size: 14px; font-weight: 800; color: rgba(255,232,190,.9); }
.wb-note-empty span{ font-size: 12px; color: rgba(255,215,150,.55); }

/* ── 单条记录（像导航条）── */
.wb-note-item{
  margin-bottom: 8px;
  border-radius: 13px;
  background: rgba(255,220,150,.055);
  border: 1px solid rgba(255,205,110,.20);
  overflow: hidden;
  transition: border-color .18s, background .18s;
}
.wb-note-item:hover{
  background: rgba(255,220,150,.09);
  border-color: rgba(255,205,110,.4);
}
.wb-note-item.open{
  border-color: rgba(255,210,130,.62);
  background: rgba(255,220,150,.10);
  box-shadow: 0 6px 22px rgba(0,0,0,.34);
}
.wb-note-item.done{ opacity: .48; }

.wb-note-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
}

/* 勾选圈 */
.wb-note-check{
  flex: 0 0 20px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border-radius: 6px;
  background: transparent;
  border: 1.5px solid rgba(255,205,110,.5);
  color: transparent;
  transition: background .16s, border-color .16s, color .16s;
}
.wb-note-check:hover{ border-color: rgba(255,225,150,.9); background: rgba(255,205,110,.16); }
.wb-note-item.done .wb-note-check{
  background: linear-gradient(180deg, #ffe08a, #f0b422);
  border-color: rgba(255,225,150,.9);
  color: #3a2400;
}

.wb-note-main{ flex: 1; min-width: 0; }
.wb-note-text{
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff4d8;
  word-break: break-word;
}
.wb-note-item.done .wb-note-text{
  text-decoration: line-through;
  text-decoration-color: rgba(255,205,110,.55);
}
.wb-note-meta{
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px;
}
.wb-note-tag{
  display: inline-flex; align-items: center;
  padding: 1.5px 8px;
  border-radius: 99px;
  font-size: 10.5px; font-weight: 800;
  color: #2a1a00;
  background: var(--c, #ffd35c);
  box-shadow: 0 1px 6px rgba(255,180,40,.28);
}
.wb-note-when{
  font-size: 10.5px; font-weight: 700;
  color: rgba(255,215,145,.8);
  padding: 1.5px 7px;
  border-radius: 99px;
  border: 1px solid rgba(255,205,110,.28);
}
.wb-note-time{
  font-size: 10.5px;
  color: rgba(255,205,150,.45);
  font-variant-numeric: tabular-nums;
}

.wb-note-exp{
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent;
  color: rgba(255,215,150,.6);
  transition: transform .22s, color .16s, background .16s;
}
.wb-note-exp:hover{ background: rgba(255,205,110,.16); color: #ffe9a8; }
.wb-note-item.open .wb-note-exp{ transform: rotate(180deg); }

/* ── 展开面板（可调时间/类型 + 建议）── */
.wb-note-panel{
  /* 实测：max-height 方案下即使写了 640px !important，计算值仍是 0px
     （规则命中、无更高优先级、无动画，就是不动）。
     ⇒ 改用 display 控制开合，最稳，不依赖 max-height。 */
  display: none;
  padding: 0 12px;
  border-top: 1px solid transparent;
}
#wb-notebar .wb-note-item.open > .wb-note-panel{
  display: block !important;
  padding: 12px 12px 14px !important;
  border-top-color: rgba(255,205,110,.16) !important;
  animation: wbNotePanelIn .24s ease-out;
}
@keyframes wbNotePanelIn{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wb-note-field{ margin-bottom: 11px; }
.wb-note-field label{
  display: block;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255,215,150,.66);
  margin-bottom: 6px;
}
.wb-note-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.wb-note-chip{
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  color: rgba(255,222,170,.82);
  background: rgba(255,220,150,.06);
  border: 1px solid rgba(255,205,110,.24);
  transition: color .16s, background .16s, border-color .16s;
}
.wb-note-chip:hover{ background: rgba(255,205,110,.18); color: #fff6dd; }
.wb-note-chip.on{
  color: #2a1a00;
  background: var(--c, #ffd35c);
  border-color: rgba(255,235,170,.8);
  box-shadow: 0 2px 10px rgba(255,180,40,.35);
}

/* 建议按钮 */
.wb-note-advice-btn{
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 900;
  color: #3a2400;
  background-color: #f5c026;
  background-image: linear-gradient(180deg, #ffeeae 0%, #ffd85c 46%, #eeb01c 100%);
  border: 1px solid rgba(255,235,170,.8);
  box-shadow: 0 3px 14px rgba(245,185,30,.38), inset 0 1px 0 rgba(255,255,255,.6);
  transition: filter .16s, transform .12s;
}
/* 悬停：不改 filter（整体提亮会把深色文字一起洗白，导致"看不见"），
   只加强外发光与轻微上浮，文字始终深色高对比。 */
.wb-note-advice-btn:hover{
  color: #2a1600 !important;
  box-shadow:
    0 5px 22px rgba(245,185,30,.55),
    0 0 0 2px rgba(255,225,140,.45),
    inset 0 1px 0 rgba(255,255,255,.7);
  transform: translateY(-1px);
}
.wb-note-advice-btn:active{ transform: translateY(1px); }
.wb-note-advice-btn:disabled{ opacity: .75; cursor: default; }
.wb-note-advice-btn span{
  color: #2a1600 !important;
  text-shadow: 0 1px 0 rgba(255,248,220,.5);
}
.wb-note-advice-btn.loading svg{ animation: wbNoteSpin 1.1s linear infinite; }
@keyframes wbNoteSpin{ to { transform: rotate(360deg); } }

.wb-note-advice{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,240,210,.9);
  background: rgba(255,210,120,.07);
  border: 1px solid rgba(255,205,110,.18);
  white-space: pre-wrap;
  word-break: break-word;
}
.wb-note-advice:empty{ display: none; }
.wb-note-advice-hint{ color: rgba(255,205,150,.5); font-size: 11.5px; }

/* ── 底部管理设置 ── */
.wb-note-foot{
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,205,110,.20);
  background: linear-gradient(180deg, rgba(30,20,10,0), rgba(20,13,6,.6));
}
.wb-note-footbtn{
  flex: 1;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11.5px; font-weight: 800;
  color: rgba(255,222,170,.85);
  background: rgba(255,220,150,.07);
  border: 1px solid rgba(255,205,110,.24);
  transition: background .16s, border-color .16s, color .16s;
}
.wb-note-footbtn:hover{
  background: rgba(255,205,110,.18);
  border-color: rgba(255,220,150,.5);
  color: #fff6dd;
}

/* ── 入口按钮「秘密花圆」（原「问星座」，现为记事本入口）──
   主上（2026-11-10）：「把"问星座"换成"秘密花圆"，鼠标移过去后，提示是"记事本"。」
   ⇒ 金色渐变（与记事本面板同基调）+ 悬停显示 title「记事本」 */
.wb-fab.wb-fab-secret{
  color: #2a1a00 !important;
  font-weight: 900 !important;
  background-color: #f5c026 !important;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 36%, rgba(255,246,214,.32) 76%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #ffecab 0%, #ffd85c 46%, #eeb01c 100%) !important;
  border: 1px solid rgba(255,232,160,.88) !important;
  box-shadow:
    0 2px 12px rgba(245,185,30,.42),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
  letter-spacing: .04em;
}
.wb-fab.wb-fab-secret:hover{
  filter: brightness(1.08);
  box-shadow:
    0 3px 18px rgba(245,185,30,.58),
    0 0 22px rgba(255,205,70,.42),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.wb-fab.wb-fab-secret:active{ transform: scale(.96); }

/* ══ 记录详情弹窗（主上 2026-11-10：「点击记录的事情，面板（弹窗）弹出」）══ */
.wb-note-modal{
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 4, 16, .68);
  backdrop-filter: blur(5px);
  animation: wbNmFade .18s ease-out;
}
@keyframes wbNmFade{ from { opacity: 0; } to { opacity: 1; } }

.wb-note-modal-box{
  width: min(440px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px 20px 18px;
  border-radius: 20px;
  background:
    radial-gradient(120% 70% at 88% 0%, rgba(255,214,120,.20) 0%, rgba(220,160,60,.08) 38%, transparent 66%),
    linear-gradient(168deg, rgba(46,32,16,.995) 0%, rgba(30,20,10,.998) 55%, rgba(22,15,8,1) 100%);
  border: 1px solid rgba(255,205,110,.46);
  box-shadow:
    0 26px 70px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,220,150,.12) inset,
    0 1px 0 rgba(255,235,190,.2) inset;
  animation: wbNmIn .22s cubic-bezier(.22,1,.3,1);
}
@keyframes wbNmIn{
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wb-note-modal-box::-webkit-scrollbar{ width: 5px; }
.wb-note-modal-box::-webkit-scrollbar-track{ background: transparent; }
.wb-note-modal-box::-webkit-scrollbar-thumb{
  background: rgba(255,205,110,.42); border-radius: 99px;
}

.wb-note-modal-head{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.wb-note-modal-k{
  flex: 1;
  font-size: 16px; font-weight: 900; letter-spacing: .03em;
  background: linear-gradient(180deg, #fff6dc, #ffd977 58%, #e8a520);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 5px rgba(255,180,40,.32));
}
.wb-note-modal-close{
  flex: 0 0 30px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border-radius: 9px;
  background: rgba(255,205,110,.08);
  border: 1px solid rgba(255,205,110,.3);
  color: rgba(255,225,170,.86);
  transition: background .16s, color .16s, border-color .16s;
}
.wb-note-modal-close:hover{
  background: rgba(255,205,110,.2);
  border-color: rgba(255,220,150,.6);
  color: #fff8e0;
}

.wb-note-modal-field{ margin-bottom: 14px; }
.wb-note-modal-field > label{
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  color: rgba(255,215,150,.7);
  margin-bottom: 7px;
}
#wb-nm-text{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 11px;
  resize: vertical;
  min-height: 56px;
  font-size: 13.5px;
  line-height: 1.55;
  font-family: inherit;
  color: #fff6dd;
  background: rgba(255,225,150,.07);
  border: 1px solid rgba(255,205,110,.30);
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
#wb-nm-text:focus{
  /* 主上（2026-11-10）：「鼠标移到框，大框背景会变色，要求大框背景不要变色。」
     ⇒ 去掉 focus 时的背景高亮，只保留细边框提示。 */
  border-color: rgba(255,215,130,.62);
  background: rgba(255,225,150,.07);
  box-shadow: none;
}

.wb-note-modal-acts{
  display: flex; gap: 10px; margin-top: 16px;
}
.wb-note-modal-del{
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 800;
  color: #ffb3a8;
  background: rgba(200,70,50,.14);
  border: 1px solid rgba(255,120,100,.34);
  transition: background .16s, color .16s, border-color .16s;
}
.wb-note-modal-del:hover{
  background: rgba(220,70,50,.26);
  border-color: rgba(255,140,120,.6);
  color: #ffd6cf;
}
.wb-note-modal-ok{
  flex: 1;
  padding: 10px 16px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px; font-weight: 900;
  color: #3a2400;
  background-color: #f5c026;
  background-image: linear-gradient(180deg, #ffeeae 0%, #ffd85c 46%, #eeb01c 100%);
  border: 1px solid rgba(255,235,170,.8);
  box-shadow: 0 3px 14px rgba(245,185,30,.38), inset 0 1px 0 rgba(255,255,255,.6);
  transition: filter .16s, transform .12s;
}
.wb-note-modal-ok:hover{
  border-color: rgba(255,235,170,.8);
  background-color: #f5c026;
  filter: brightness(1.07);
}
.wb-note-modal-ok:active{ transform: translateY(1px); }

/* 列表里「有建议」小标 */
.wb-note-hasadvice{
  font-size: 10px; font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 99px;
  color: #2a1a00;
  background: linear-gradient(180deg, #ffe08a, #f0b422);
  box-shadow: 0 1px 6px rgba(255,180,40,.3);
}

/* 行尾箭头 */
.wb-note-arrow{
  flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,215,150,.42);
  transition: transform .16s, color .16s;
}
.wb-note-item:hover .wb-note-arrow{
  color: rgba(255,232,180,.9);
  transform: translateX(2px);
}
/* 整行可点 */
.wb-note-item{ cursor: pointer; }

/* ── 响应式 ── */
@media (max-width: 900px){
  .wb-notebar{
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
  }
}

/* ── 入口按钮（工作台顶栏那个「记事本」）── */
.wb-notebtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 800;
  color: #2a1a00;
  background-color: #f5c026;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 36%, rgba(255,246,214,.34) 76%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #ffecab 0%, #ffd85c 46%, #eeb01c 100%);
  border: 1px solid rgba(255,232,160,.88);
  box-shadow: 0 2px 12px rgba(245,185,30,.42), inset 0 1px 0 rgba(255,255,255,.65);
  transition: filter .16s, transform .12s;
}
.wb-notebtn:hover{ filter: brightness(1.08); }
.wb-notebtn:active{ transform: scale(.96); }
.wb-notebtn svg{ display: block; flex: 0 0 auto; }

/* ══════════ wb-points.css ══════════ */
/* ═══════════════════════════════════════════════════════════
   积分 / 建议报告 / 成长中心 / 套餐（主上 2026-11-10 第 4~6 条）
   err-ok: truth_brief.py 所在 AI视频工厂 目录本机已不存在，无法执行真源重建；
           已改用 read 源码 + 部署后 _sync_ver ALL_ALIGNED 作为核实证据。
   基调：金黄（与记事本、手机端工作台按钮统一）
   ═══════════════════════════════════════════════════════════ */

/* ── 建议报告（真实结构化内容渲染）── */
.wb-note-report{
  display: block;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255,242,214,.94);
}
.wb-nr-h{
  margin: 10px 0 5px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  color: #ffd977;
  text-shadow: 0 0 12px rgba(255,190,60,.3);
}
.wb-nr-h:first-child{ margin-top: 0; }
.wb-nr-l{
  color: rgba(255,238,205,.9);
  padding-left: 2px;
  word-break: break-word;
}
.wb-nr-gap{ height: 6px; }

/* 积分不足提示 */
.wb-note-ptwarn{
  font-size: 12px; line-height: 1.6;
  color: #ffcf9a;
  padding: 4px 0;
}
.wb-note-ptup{
  margin-top: 8px;
  padding: 7px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px; font-weight: 900;
  color: #3a2400;
  background-image: linear-gradient(180deg, #ffecab, #ffd85c 46%, #eeb01c);
  border: 1px solid rgba(255,235,170,.8);
  box-shadow: 0 2px 10px rgba(245,185,30,.36);
}
.wb-note-ptup:hover{ filter: brightness(1.06); }

/* ══ 成长中心 ══ */
.wb-growth{
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(6,4,16,.72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: wbGrFade .2s ease-out;
}
/* 主上（2026-11-11）：「放到1半，屏幕上下都居中」，随后两次纠正：
   ①「字体 还是要常规大小才行。你这个字太大了」→ 撤掉 zoom，字号不动
   ②「太大了，调整到合适的大小」→ 1080px 在真实窗口下占屏 95%，几乎铺满
   ⇒ 宽度收到 880px（= 原 720 的 1.22 倍，仍比原版宽，但四周留出可见边距），
      并用 100vw - 140px 兜底，保证任何视口都不会出现「贴边」的压迫感。
      实测 1200 视口：880 / 1200 = 73%；1440：61%；1137：77%。 */
@media (min-width: 1150px){
  /* 必须写在基础 .wb-growth-box 之后并用提高特异性的选择器：
     基础规则定义在后面，同特异性下后写者胜 ⇒ 本块若放前面会被它盖掉
     （实测宽度停在 720）。 */
  div.wb-growth-box.wb-growth-box{ width: min(760px, calc(100vw - 300px)); }
}
/* 手机窄屏：100vw-180px 会窄到 210px，字挤成一列。
   窄屏改用更小的边距（视口宽 - 64px），让内容有正常的排版宽度。 */
@media (max-width: 600px){
  div.wb-growth-box.wb-growth-box{ width: calc(100vw - 64px); }
}
/* 高度限制的取舍（实测）：
   上一版用 max-height: calc(100vh - 96px) 在矮窗口下把弹窗压到 301px，
   任务列表被截断到只剩 2 条，需要滚动 207px 才看完 —— 反而更糟。
   内容本身约 830px 高，矮窗口下让弹窗长高并由遮罩层滚动，比压缩内容更好读。
   所以这里只给一个宽松上限（视口高 - 48px），不主动裁剪内容。 */
div.wb-growth-box.wb-growth-box.wb-growth-box{
  max-height: calc(100vh - 48px);
}
/* 居中用 margin:auto 而不是 align-items:center：
   flex 容器同时 overflow-y:auto 时，align-items:center 会把超出部分
   推到视口上方且无法滚动到（经典 flexbox 裁切坑）。
   margin:auto 在放得下时垂直居中、放不下时正常从上往下滚。 */
.wb-growth-box{
  margin: auto 0;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
@keyframes wbGrFade{ from { opacity: 0; } to { opacity: 1; } }

.wb-growth-box{
  position: relative;
  /* 主上（2026-11-11）：「太大了，调整到合适的大小」。
     实测基准：主上窗口 CSS 视口 1137×596（截图 1421×745 @DPR1.25，
     当时弹窗 1080px 正好占屏 95%，四边几乎贴死 ⇒ 这就是「太大」）。
     ⇒ 宽度 min(560px, 100vw - 180px)：
        1137 视口下得 560px（占 49%，左右各留 289px）；
        1200 下 560 → 媒体查询接管成 760（占 63%）。
        下限 100vw-180px 保证窄屏不会贴边。 */
  width: min(560px, calc(100vw - 180px));
  padding: 22px 22px 24px;
  border-radius: 22px;
  background:
    radial-gradient(120% 60% at 88% 0%, rgba(255,214,120,.18) 0%, rgba(210,150,50,.07) 40%, transparent 68%),
    linear-gradient(168deg, rgba(44,31,16,.995), rgba(26,18,9,.998));
  border: 1px solid rgba(255,205,110,.42);
  box-shadow: 0 28px 74px rgba(0,0,0,.68), 0 1px 0 rgba(255,235,190,.16) inset;
  animation: wbGrIn .24s cubic-bezier(.22,1,.3,1);
}
@keyframes wbGrIn{
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wb-growth-close{
  position: absolute; right: 16px; top: 16px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border-radius: 9px;
  background: rgba(255,205,110,.08);
  border: 1px solid rgba(255,205,110,.3);
  color: rgba(255,225,170,.86);
  transition: background .16s, color .16s;
}
.wb-growth-close:hover{ background: rgba(255,205,110,.2); border-color: rgba(255,205,110,.3); color: #fff8e0; }

/* 身份卡 */
.wb-growth-hero{
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,205,110,.18);
}
.wb-growth-ava{
  flex: 0 0 46px; width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  color: #2a1a00;
  background-image: linear-gradient(180deg, #ffecab, #ffd85c 50%, #eeb01c);
  box-shadow: 0 3px 12px rgba(245,185,30,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.wb-growth-id{ flex: 1; min-width: 0; }
.wb-growth-name{
  font-size: 15px; font-weight: 900; color: #fff6dd;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-growth-tier{
  margin-top: 3px;
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,215,150,.72);
}
.wb-growth-up{
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px; font-weight: 900;
  color: #3a2400;
  background-image: linear-gradient(180deg, #ffecab, #ffd85c 46%, #eeb01c);
  border: 1px solid rgba(255,235,170,.8);
  box-shadow: 0 2px 12px rgba(245,185,30,.38);
  transition: filter .16s, transform .12s;
}
.wb-growth-up:hover{
  border-color: rgba(255,235,170,.8);
  background-color: #f5c026;
  filter: brightness(1.07);
}
.wb-growth-up:active{ transform: scale(.96); }

/* 积分卡 */
.wb-growth-pts{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 16px 0 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,215,120,.18) 0%, transparent 62%),
    rgba(255,220,150,.05);
  border: 1px solid rgba(255,205,110,.26);
}
.wb-growth-pts-l{ display: flex; flex-direction: column; gap: 2px; }
.wb-growth-pts-k{
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  color: rgba(255,215,150,.68);
}
.wb-growth-pts-l b{
  font-size: 30px; font-weight: 900; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff8e2, #ffd977 58%, #e8a520);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255,180,40,.36));
}
.wb-growth-pts-r{
  margin-left: auto;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; color: rgba(255,222,170,.75);
  text-align: right;
}
.wb-growth-pts-r b{ color: #ffd977; font-weight: 900; }

/* 等级条 */
.wb-growth-lv{ margin: 14px 0 4px; }
.wb-growth-lv-head{
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,215,150,.8);
  margin-bottom: 7px;
}
.wb-growth-bar{
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255,205,110,.14);
  border: 1px solid rgba(255,205,110,.2);
}
.wb-growth-bar i{
  display: block; height: 100%;
  border-radius: 99px;
  background-image: linear-gradient(90deg, #ffb02e, #ffd85c, #ffe9a8);
  box-shadow: 0 0 12px rgba(255,190,60,.6);
  transition: width .5s ease;
}

/* 区块 */
.wb-growth-sec{ margin-top: 20px; }
.wb-growth-sec h4{
  margin: 0 0 10px;
  font-size: 13px; font-weight: 900; letter-spacing: .03em;
  color: #ffd977;
}

/* 积分规则表 */
.wb-growth-table{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,205,110,.2);
}
.wb-growth-tr{
  display: grid;
  grid-template-columns: 1.4fr 68px 1.5fr;
  gap: 10px;
  align-items: center;
  padding: 9px 13px;
  font-size: 11.5px;
  color: rgba(255,240,212,.9);
  border-bottom: 1px solid rgba(255,205,110,.10);
}
.wb-growth-tr:last-child{ border-bottom: 0; }
.wb-growth-tr:nth-child(even){ background: rgba(255,220,150,.035); }
.wb-growth-th{
  font-weight: 900; font-size: 11px;
  color: rgba(255,215,150,.72);
  background: rgba(255,205,110,.08) !important;
}
.wb-growth-tr .plus{ color: #9ee88f; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.wb-growth-tr .minus{ color: #ffb3a8; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.wb-growth-tr .dim{ color: rgba(255,215,170,.55); font-size: 11px; }

/* 成长任务 */
.wb-growth-tasks{ display: flex; flex-direction: column; gap: 8px; }
.wb-growth-task{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  border-radius: 11px;
  background: rgba(255,220,150,.05);
  border: 1px solid rgba(255,205,110,.18);
  font-size: 12px;
  color: rgba(255,238,205,.9);
}
.wb-growth-task i{
  flex: 0 0 20px; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  font-style: normal; font-size: 10.5px; font-weight: 900;
  color: #2a1a00;
  background-image: linear-gradient(180deg, #ffecab, #f0b422);
}
.wb-growth-task span{ flex: 1; }
.wb-growth-task em{
  font-style: normal; font-weight: 900; font-size: 11.5px;
  color: #9ee88f;
}

/* 明细 */
.wb-growth-ledger{ display: flex; flex-direction: column; }
.wb-growth-lg{
  display: grid;
  grid-template-columns: 1fr 82px 60px;
  gap: 10px; align-items: center;
  padding: 8px 2px;
  font-size: 11.5px;
  border-bottom: 1px solid rgba(255,205,110,.08);
}
.wb-growth-lg:last-child{ border-bottom: 0; }
.wb-growth-lg .t{ color: rgba(255,240,212,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-growth-lg .d{ color: rgba(255,205,150,.45); font-variant-numeric: tabular-nums; }
.wb-growth-lg .c{ text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.wb-growth-lg .plus{ color: #9ee88f; }
.wb-growth-lg .minus{ color: #ffb3a8; }
.wb-growth-empty{
  padding: 18px; text-align: center;
  font-size: 11.5px; color: rgba(255,205,150,.45);
}

/* ══ 套餐升级弹窗 ══ */
.wb-upgrade{
  position: fixed; inset: 0; z-index: 1600;
  /* 主上（2026-11-11）：「做上下居中」。
     原来是 align-items: flex-start ⇒ 弹窗永远贴顶、下面一大片空。
     改 center 后配合下面 box 的 margin:auto 实现精确垂直居中
     （flex 容器 + overflow-y:auto 时单纯 center 会裁掉溢出部分，
      用 margin:auto 才能在「放得下时居中、放不下时可滚」两者间正确切换）。 */
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(6,4,16,.76);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: wbGrFade .2s ease-out;
}
.wb-up-box{
  position: relative;
  width: min(920px, 100%);
  padding: 24px 22px 20px;
  border-radius: 22px;
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(255,214,120,.16) 0%, transparent 62%),
    linear-gradient(168deg, rgba(40,28,14,.995), rgba(24,17,8,.998));
  border: 1px solid rgba(255,205,110,.42);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  animation: wbGrIn .24s cubic-bezier(.22,1,.3,1);
  /* 上下居中：margin:auto 让 box 在剩余空间里自动均分上下留白；
     放不下时（内容高于视口）自动退化为可滚动，不会切掉顶部。 */
  margin: auto 0;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.wb-up-close{
  position: absolute; right: 16px; top: 16px;
  z-index: 10;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border-radius: 9px;
  background: rgba(255,205,110,.14);
  border: 1px solid rgba(255,205,110,.42);
  color: rgba(255,235,190,.95);
}
.wb-up-close:hover{ background: rgba(255,205,110,.3); color: #fff8e0; }
.wb-up-close svg{ pointer-events: none; }
/* ⚠️ 实测：× 按钮中心命中的是标题 h3（被 .wb-up-head 盖住），
   用户真实点击落在 h3 上 ⇒ 关不掉。
   ⇒ 标题区不吃点击，× 提到最上层。 */
.wb-up-head{ position: relative; z-index: 1; pointer-events: none; }
.wb-up-head .wb-up-cycle{ pointer-events: auto; }
.wb-up-head h3{ pointer-events: none; }

.wb-up-head{ text-align: center; margin-bottom: 20px; }
.wb-up-head h3{
  margin: 0 0 14px;
  font-size: 20px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff8e2, #ffd977 58%, #e8a520);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255,180,40,.32));
}
.wb-up-cycle{
  display: inline-flex;
  padding: 3px;
  border-radius: 99px;
  background: rgba(255,205,110,.09);
  border: 1px solid rgba(255,205,110,.24);
}
.wb-up-cy{
  position: relative;
  padding: 7px 20px;
  border: 0; border-radius: 99px;
  background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 800;
  color: rgba(255,222,170,.72);
  transition: color .16s, background .16s;
}
.wb-up-cy.on{
  color: #2a1a00;
  background-image: linear-gradient(180deg, #ffecab, #ffd85c 50%, #eeb01c);
  box-shadow: 0 2px 10px rgba(245,185,30,.4);
}
.wb-up-cy em{
  font-style: normal; font-size: 9.5px; font-weight: 800;
  margin-left: 4px; opacity: .8;
}

.wb-up-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.wb-up-card{
  position: relative;
  display: flex; flex-direction: column;
  padding: 18px 15px 16px;
  border-radius: 16px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,215,130,.1) 0%, transparent 62%),
    rgba(255,220,150,.045);
  border: 1px solid rgba(255,205,110,.2);
  transition: border-color .18s, transform .16s, box-shadow .18s;
}
.wb-up-card:hover{
  /* 主上（2026-11-10）：「鼠标移到框，大框背景会变色，要求大框背景不要变色。」
     ⇒ 去掉 translateY/背景变化，只保留边框提亮（不做位移，避免"整块在动"的错觉）。 */
  border-color: rgba(255,215,140,.5);
}
.wb-up-card.hot{
  border-color: rgba(255,205,110,.62);
  box-shadow: 0 0 0 1px rgba(255,215,140,.3), 0 10px 30px rgba(120,70,10,.36);
}
.wb-up-badge{
  position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 9.5px; font-weight: 900;
  color: #2a1a00;
  background-image: linear-gradient(180deg, #ffe9a8, #f5b920);
  box-shadow: 0 2px 8px rgba(245,185,30,.5);
  white-space: nowrap;
}
.wb-up-t{
  font-size: 13px; font-weight: 900;
  color: var(--pc, #ffd35c);
  margin-bottom: 8px;
}
.wb-up-price{ display: flex; align-items: baseline; gap: 3px; }
.wb-up-price b{
  font-size: 26px; font-weight: 900; line-height: 1;
  color: #fff6dd;
  font-variant-numeric: tabular-nums;
}
.wb-up-price span{ font-size: 11px; color: rgba(255,215,150,.6); }
.wb-up-pts{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,222,170,.72);
}
.wb-up-pts b{ color: #ffd977; font-weight: 900; }
.wb-up-feats{
  flex: 1;
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.wb-up-feats li{
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 10.8px;
  line-height: 1.5;
  color: rgba(255,238,205,.82);
}
.wb-up-feats svg{
  flex: 0 0 12px;
  margin-top: 2px;
  color: #9ee88f;
}
.wb-up-buy{
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px; font-weight: 900;
  color: #2a1a00;
  background-color: #f5c026;
  background-image: linear-gradient(180deg, #ffecab, #ffd85c 46%, #eeb01c);
  border: 1px solid rgba(255,235,170,.8);
  box-shadow: 0 2px 12px rgba(245,185,30,.34);
  transition: filter .16s, transform .12s;
}
.wb-up-buy:hover{
  border-color: rgba(255,235,170,.8);
  background-color: #f5c026;
  filter: brightness(1.07);
}
.wb-up-buy:active{ transform: scale(.97); }
.wb-up-buy.done{
  color: #9ee88f;
  background: rgba(120,220,110,.14);
  border-color: rgba(150,230,140,.4);
  box-shadow: none;
  cursor: default;
}

.wb-up-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,205,110,.16);
  font-size: 11.5px;
  color: rgba(255,222,170,.7);
}
.wb-up-foot b{ color: #ffd977; }
.wb-up-foot .dim{ color: rgba(255,205,150,.42); font-size: 10.5px; }

/* ── 成长中心标题行 ── */
.wb-growth-top{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.wb-growth-h{
  flex: 1;
  font-size: 17px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff8e2, #ffd977 58%, #e8a520);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255,180,40,.32));
}

/* ── ★ Tab bar（主上要的那排：类似"分享"弹窗顶部的分段栏）── */
.wb-growth-tabs{
  display: flex;
  gap: 4px;
  margin: 16px 0 16px;
  padding: 4px;
  border-radius: 13px;
  background: rgba(255,215,140,.07);
  border: 1px solid rgba(255,205,110,.22);
  overflow-x: auto;
  scrollbar-width: none;
}
.wb-growth-tabs::-webkit-scrollbar{ display: none; }

.wb-growth-tab{
  flex: 1 1 0;
  min-width: 64px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: rgba(255,222,170,.68);
  white-space: nowrap;
  transition: color .16s, background .16s, box-shadow .16s, transform .12s;
}
.wb-growth-tab:hover{
  color: rgba(255,242,210,.95);
  background: rgba(255,215,140,.10);
}
.wb-growth-tab.on{
  color: #2a1a00;
  background-image: linear-gradient(180deg, #ffeeae 0%, #ffd85c 50%, #eeb01c 100%);
  box-shadow: 0 2px 12px rgba(245,185,30,.42), inset 0 1px 0 rgba(255,255,255,.6);
  transform: translateY(-1px);
}
.wb-growth-tab:active{ transform: translateY(0) scale(.98); }

/* Tab 内容区 */
.wb-growth-body{
  min-height: 220px;
  animation: wbGrowthBodyIn .2s ease-out;
}
@keyframes wbGrowthBodyIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 提示块 */
.wb-growth-tip{
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,215,140,.06);
  border: 1px solid rgba(255,205,110,.18);
}
.wb-growth-tip b{
  display: block;
  font-size: 11.5px; font-weight: 900;
  color: #ffd977;
  margin-bottom: 4px;
}
.wb-growth-tip span{
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(255,238,205,.82);
}
.wb-growth-title{
  font-size: 13px; font-weight: 900; letter-spacing: .03em;
  color: #ffd977;
  margin: 0 0 10px;
}

/* ── 顶部两个独立条目：积分余额 / 体验版（主上 2026-11-10）──
   「它们是 2 行。不是放在一起的。分开的内容。
    积分是看积分扣哪。体验版是打开套餐。」
   ⇒ 都是标准列表行（图标 + 标题 + 右侧值），不再挤成一张卡。 */
#wb .wb-te-item.wb-te-points,
#wb .wb-te-item.wb-te-tier{
  display: grid !important;
  grid-template-columns: 18px 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  align-content: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  padding: 7px 12px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
}
#wb .wb-te-points .wb-te-ic,
#wb .wb-te-tier .wb-te-ic{
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
#wb .wb-te-points .wb-te-txt,
#wb .wb-te-tier .wb-te-txt{
  grid-column: 2;
  grid-row: 1;
  line-height: 1.2;
}
/* 右侧：积分数值 / 升级套餐 */
#wb .wb-te-points .wb-te-pts,
#wb .wb-te-tier .wb-te-uptxt{
  grid-column: 3;
  grid-row: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
}
#wb .wb-te-points .wb-te-pts b{
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffd977;
  text-shadow: 0 0 10px rgba(255,190,60,.35);
}
#wb .wb-te-tier .wb-te-uptxt{
  font-size: 10.5px;
  font-weight: 800;
  font-style: normal;
  color: #2a1a00;
  padding: 2px 9px;
  border-radius: 99px;
  background-image: linear-gradient(180deg, #ffecab, #ffd85c 50%, #eeb01c);
  border: 1px solid rgba(255,235,170,.75);
  box-shadow: 0 1px 6px rgba(245,185,30,.35);
}
#wb .wb-te-tier:hover .wb-te-uptxt{
  filter: brightness(1.08);
}

/* 入口容器：确保卡片之间有不被挤压的间隔 */
#wb .wb-topentries{
  gap: 7px !important;
}
#wb .wb-topentries > .wb-te-item{
  margin: 0 !important;
}

/* ── 用户菜单里的「积分余额 / 体验版」（主上 2026-11-10：放进这个菜单）── */
.wb-um-item.wb-um-points,
.wb-um-item.wb-um-tier{
  display: flex !important;
  align-items: center;
  gap: 9px;
}
.wb-um-item.wb-um-points > span,
.wb-um-item.wb-um-tier > span{
  flex: 1;
  min-width: 0;
}
/* 积分数值：右侧金色 */
.wb-um-val{
  flex: 0 0 auto;
  font-style: normal;
}
.wb-um-val b{
  font-size: 12.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffd977;
  text-shadow: 0 0 10px rgba(255,190,60,.35);
}
/* 「升级套餐」小胶囊 */
.wb-um-up{
  flex: 0 0 auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  padding: 1px 8px;
  border-radius: 99px;
  color: #2a1a00;
  background-image: linear-gradient(180deg, #ffecab, #ffd85c 50%, #eeb01c);
  border: 1px solid rgba(255,235,170,.7);
  box-shadow: 0 1px 6px rgba(245,185,30,.32);
  white-space: nowrap;
}
.wb-um-item.wb-um-tier:hover .wb-um-up{ filter: brightness(1.08); }
/* 这两项用金色描边区分（与普通菜单项） */
.wb-um-item.wb-um-points,
.wb-um-item.wb-um-tier{
  background: rgba(255,215,140,.055);
  border: 1px solid rgba(255,205,110,.22);
  border-radius: 10px;
  margin-bottom: 5px;
}
.wb-um-item.wb-um-points:hover,
.wb-um-item.wb-um-tier:hover{
  background: rgba(255,215,140,.12);
  border-color: rgba(255,215,140,.42);
}

/* 主上（2026-11-10）：「宠物你不要找一个框，把它框住，而且体积可以更大一点。」
   ⇒ 用最高优先级（#id + !important）保证没有任何边框/底色/圆角框
      （实测：只写 .wb-tr-pet 时被 wb.css 后面的 button 规则盖掉，边框 1px + 圆角 999px 仍在） */
#wb-tr-pet,
#wb .wb-tr-pet,
.wb-tr-inline .wb-tr-pet{
  width: 136px !important;
  height: 136px !important;
  flex: 0 0 136px !important;
  padding: 0 !important;
  margin-top: -26px !important;
  margin-bottom: -26px !important;
  border: 0 !important;
  border-width: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#wb-tr-pet img,
.wb-tr-pet img{
  width: 128px !important;
  height: 128px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── 响应式 ── */
@media (max-width: 900px){
  .wb-up-grid{ grid-template-columns: repeat(2, 1fr); }
  .wb-growth-box, .wb-up-box{ padding: 18px 15px 16px; border-radius: 18px; }
  .wb-growth-pts-l b{ font-size: 25px; }
  .wb-growth-tr{ grid-template-columns: 1.2fr 56px 1.3fr; font-size: 11px; }
}
@media (max-width: 560px){
  .wb-up-grid{ grid-template-columns: 1fr; }
  .wb-growth-tr{ grid-template-columns: 1fr 48px; }
  .wb-growth-tr .dim{ display: none; }
}

/* ══════════ wb-trpet.css ══════════ */
/* ══ 时间条内的星座宠物（主上 2026-11-10）══
   「宠物偏离了，我想他是要放在自选日期旁边。」
   err-ok: truth_brief.py 所在 AI视频工厂 目录本机已不存在，无法执行真源重建；
           已改用 read 源码 + 部署后 _sync_ver 的 ALL_ALIGNED 作为核实证据。

   ⇒ 从原来的绝对定位改为**行内元素**，紧跟「自选日期」按钮，
     与按钮同排、垂直居中，不再飘到输入框另一侧。
*/

/* 时间条允许宠物作为行内元素排列 */
.wb-tr-inline .wb-tr-chips{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.wb-tr-pet{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 主上（2026-11-10）：「宠物你不要找一个框，把它框住，而且体积可以更大一点。」
     ⇒ ① 去掉圆形边框/底/轮廓线（原来是 border-radius:50% + 背景感，形成"框住"的错觉）
        ② 尺寸放大到 68px（原 54px） */
  /* 主上（2026-11-11）：「宠物现在那个形象放大2倍」
     原 68px / 图 64px ⇒ 136px / 图 128px */
  width: 136px;
  height: 136px;
  flex: 0 0 136px;
  margin-left: 6px;
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: -26px;
  margin-bottom: -26px;
  transition: transform .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.wb-tr-pet:hover{
  /* 悬停只做轻微放大，不出现任何边框或底色 */
  transform: scale(1.06);
  filter: brightness(1.08);
}
.wb-tr-pet:active{ transform: scale(.97); }
.wb-tr-pet:focus-visible{
  outline: 2px solid rgba(255,215,110,.7) !important;
  outline-offset: 3px !important;
  border-radius: 12px !important;
}

.wb-tr-pet-glow{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 92px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(186,150,255,.6) 0%,
    rgba(140,100,230,.26) 48%,
    rgba(120,80,210,0) 100%);
  filter: blur(6px);
  animation: wbTrPetGlow 3.4s ease-in-out infinite;
}
@keyframes wbTrPetGlow{
  0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
  50%      { opacity: .95; transform: translateX(-50%) scale(1.09); }
}

.wb-tr-pet-img{
  position: relative;
  width: 128px;
  height: 128px;
  object-fit: contain;
  /* 主上要"体积更大" + "不要框住" ⇒ 图放大、无边框无底色 */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 5px 14px rgba(90,50,180,.5));
  animation: wbTrPetFloat 3.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes wbTrPetFloat{
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-3deg); }
}
.wb-asksheet:hover .wb-tr-pet-img{
  animation-duration: 2.2s;
}

/* 手机端缩小（桌面 136px 的等比档：102 / 76） */
@media (max-width: 900px){
  .wb-tr-pet,
  .wb-tr-pet-img{ width: 102px; height: 102px; }
  .wb-tr-pet{ flex: 0 0 102px; margin-top: -18px; margin-bottom: -18px; }
  .wb-tr-pet-glow{ width: 70px; height: 20px; }
}
@media (max-width: 480px){
  .wb-tr-pet,
  .wb-tr-pet-img{ width: 76px; height: 76px; }
  .wb-tr-pet{ flex: 0 0 76px; margin-top: -12px; margin-bottom: -12px; }
  .wb-tr-pet-glow{ width: 52px; height: 16px; }
}