/* ═══════════════════════════════════════════════════════
   星座.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;
}