/* 夜空视觉系统：首页登录态星阶卡 与 星阶说明页 /rank 共用同一套来源。
   五角色值只在此处定义一次（--rk0..4），其他页面一律通过 var() 引用，杜绝漂移。
   序按**五行相生**连续链：水→木→火→土→金（水生木、木生火、火生土、土生金），一级生一级。
   五色取正色（本人 2026-09-21 拍板）：水=玄（深灰，取冷调以便辨冷暖）、木=青（淡青绿）、火=赤、
   土=黄、金=白（亮银白）。
   回归断言：前两级冷（蓝>红，还在地面观测），三四两级暖（红>蓝，自己燃烧）；
   第五级是金之白＝五色之极，近白处 RGB 冷暖判据已无意义（差 10/255 肉眼不可辨），改以「明度最高」断言。
   与运营端 console.html 的 .rk-N 色值逐一同源，由 verify-rank.js 断言。 */

:root{
  --rk0:#7d879a; --rk1:#86d9c2; --rk2:#f2603f; --rk3:#dfb03c; --rk4:#eef3f8;

  /* 平台主色（紫微）与链接色：**全站唯一定义处**，各页一律 var(--acc) / var(--link) 引用，
     不再各写一份硬编码——这是 2026-09-22 撞色事故的根因之一（主色曾散在 8 个文件 + 57 处 rgba）。
     主色为什么取紫：五行正色青赤黄白黑，五星已占青（木 163°）/赤（火 11°）/黄（土 43°）/白（金），
     链接色又占过 217°——色相环只剩 240°–300° 空档，紫是唯一不与任何一级争位的选择；
     且紫为间色、非五行正色，紫微垣＝天帝所居、众星环拱之中枢，正合「公会是中心核、五星环绕」：
     平台是中宫，不是五星之一。
     旧主色金黄 #f5cf79 与土·恒星 #dfb03c 色相差仅 1.1°、ΔE2000 仅 8.6（撞色），
     且金黄被读成「金级」而本系统金级实为白色 —— 抢了金的名、撞了土的色，故换。
     链接色 #38bdf8：与紫主色 ΔE 28.0、与五星最小 ΔE 23.3，是唯一双达标的值。
     回归闸门：verify-color.js 断言主色与五星最小 ΔE2000 ≥ 20、色相差 ≥ 25°，
     防止任何人把主色改回黄、或新增一颗撞色的星。 */
  --acc:#c4b5fd; --link:#38bdf8;

  /* 功能色（成功／告警）—— 2026-09-22 与「主色散在 8 文件」同一种病的第二例：
     改动前 --grn 有两种值（#5dd6a0 / #34d399）、--red 有三种（#c94b42 / #ff8f87 / #f87171），
     散在 7 个页面各写一份，且**从未与五星做过色距校验**，结果撞色比主色那次更严重：
       成功绿 #5dd6a0 ↔ 木·生长者 #86d9c2 —— ΔE 仅 8.8（主色撞土星也才 8.6）
       告警红 #c94b42 ↔ 火·燃薪者 #f2603f —— ΔE 仅 11.6，色相差 3.0°
     另有三处硬编码连带撞色：渐变终点 #7fd6c0 距木星 5.1°、#ff9a6b 距火星 14.3°、
     #e08a84 距火星 0.9° —— 静态查 --grn/--red 定义查不到，必须查硬编码。
     新值与主色同一套闸门（五星最小 ΔE≥20 且色相差≥25°）：
       --ok  #b4e457 ΔE5 24.0（余量 4.0）  --bad #ff76bf ΔE5 29.9（余量 9.9）
     为什么成功色只能是黄绿：木星占 159.7°、土星占 33.7°，要同时远离两者，
     色相只能落在 ~88–95° 的黄绿带——这是五星布局锁死的解，不是审美挑选。
     为什么告警色只能是玫红：火星占 4.8°、土星占 33.7°，两者 ±25° 禁区连成 339.8°–58.7° 一片，
     正红/橙红全在禁区内，唯一不撞的暖色出口是 335° 附近的玫红。
     -hi 为渐变终点（装饰、非语义），只断言五星合规，不要求与主色 ΔE≥20（越浅越近白，物理上做不到）。
     -rgb 供 rgba() 半透明用（CSS 变量无法直接进 rgba() 的颜色位）。 */
  --ok:#b4e457; --ok-hi:#cdeb8a; --ok-rgb:180,228,87;
  --bad:#ff76bf; --bad-hi:#ffb3d9; --bad-rgb:255,118,191;

  --night-panel:#171b28; --night-line:#313a4b; --night-txt:#eef1ea; --night-mut:#aeb6c9; --night-gold:var(--acc);
  --night-bg:
    radial-gradient(1px 1px at 16% 20%, rgba(253,230,138,.55), transparent 60%),
    radial-gradient(1px 1px at 74% 26%, rgba(231,224,200,.40), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 74%, rgba(253,230,138,.30), transparent 60%),
    radial-gradient(1px 1px at 34% 88%, rgba(231,224,200,.26), transparent 60%),
    radial-gradient(620px 320px at 10% -12%, rgba(96,165,250,.13), transparent 70%),
    radial-gradient(640px 340px at 94% 118%, rgba(253,230,138,.13), transparent 70%),
    #10131d;
  --night-trail:linear-gradient(180deg,var(--rk0) 0%,var(--rk1) 34%,var(--rk2) 56%,var(--rk3) 80%,var(--rk4) 100%);
}

.night{
  --panel:var(--night-panel); --line:var(--night-line); --txt:var(--night-txt); --mut:var(--night-mut); --gold:var(--night-gold);
  position:relative;overflow:hidden;border-radius:20px;border:1px solid #232838;
  background:var(--night-bg);
  color:var(--txt);padding:30px 32px 28px;
}
.night-hd{display:flex;align-items:baseline;gap:12px}
.night-hd .no{font-family:var(--serif);font-size:12.5px;letter-spacing:.2em;color:var(--gold)}
.night-hd h2{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.16em;margin:0;color:var(--txt)}
.night .hint{font-size:12.5px;color:var(--mut);margin:8px 0 22px}
.night-in{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start}
@media(max-width:820px){.night-in{grid-template-columns:1fr;gap:22px}}
.story{font-size:14px;line-height:2;color:var(--txt);margin:0 0 20px}
.story .k{color:var(--gold)}
.trail{position:relative;padding-left:22px}
.trail:before{
  content:'';position:absolute;left:5px;top:8px;bottom:14px;width:1px;
  background:var(--night-trail);
  opacity:.5;
}
.node{position:relative;padding-bottom:16px}
.node:last-child{padding-bottom:0}
.node i{
  position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid currentColor;background:#10131d;
}
.node .h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.node .nm{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.1em}
.node .cd{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:1px 9px}
.node .im{font-size:12.5px;color:var(--mut);line-height:1.75;margin-top:2px}
.tail{font-size:12.5px;color:var(--mut);line-height:2;border-top:1px solid var(--line);padding-top:15px}
/* 星阶色阶：前两级冷（还在地面观测），三四两级暖（自己燃烧），第五级白＝五色之极。
   色值必须与 console.html 的 .rk-N 逐一同源 —— 勋章感发生在用户端，色阶不能只做给运营看。
   注意：.rk-3,.rk-4 的发光必须写成组合规则（见下），若拆成 `.rk-3{text-shadow:…}` 单条，
   verify-rank.js 取色正则（`^\.rk-(\d)\{`，要求规则体含 color:）会把该级取成 null 而报错。 */
.rk-0{color:var(--rk0)}
.rk-1{color:var(--rk1)}
.rk-2{color:var(--rk2)}
.rk-3{color:var(--rk3)}
.rk-4{color:var(--rk4)}
.rk-3,.rk-4{text-shadow:0 0 22px rgba(238,243,248,.3)}
.node.n0,.node.n0 i{color:var(--rk0)}
.node.n1,.node.n1 i{color:var(--rk1)}
.node.n2,.node.n2 i{color:var(--rk2)}
.node.n3,.node.n3 i{color:var(--rk3)}
.node.n4,.node.n4 i{color:var(--rk4)}
/* 后三级：自己烧起来的，点实心 */
.node.n2 i,.node.n3 i,.node.n4 i{background:currentColor}
.node.n2 i{box-shadow:0 0 12px rgba(242,96,63,.55)}
.node.n3 i{box-shadow:0 0 14px rgba(223,176,60,.5)}
.node.n4 i{box-shadow:0 0 16px rgba(238,243,248,.6)}

/* 数据锚点条（.stats）：全站「数字上版」的唯一来源，about / rank / insight / guild 共用。
   口径纪律：条上的每个数字都必须对得上服务端常量 ——
   users.js（RANKS / VENUS_GROUPS / GUILD_RANK_MIN / GUILD_COHORTS·cap）与
   insight.js（K_ANON / K_PATH / YEAR_BANDS）。verify-app 会按这些常量逐项断言，
   改了常量却没改页面，回归立刻变红，杜绝数字静默漂移。
   --gold 各页 :root 都会定义；万一没有则回落 --acc（night.css 自身定义的平台主色）。 */
.stats{display:flex;gap:0;margin:0 0 40px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.stats div{flex:1;padding:18px 10px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border-right:none}
.stats .n{font-family:var(--serif);font-size:26px;font-weight:800;color:var(--gold,var(--acc));letter-spacing:1px}
.stats .u{font-size:12px;color:var(--mut);letter-spacing:1.5px;margin-top:3px}
@media(max-width:560px){
  .stats{flex-direction:column;border-radius:12px}
  .stats div{border-right:none;border-bottom:1px solid var(--line);padding:14px 10px}
  .stats div:last-child{border-bottom:none}
  .stats .n{font-size:22px}
}