/* ============================================================================
   tokyo.axiom.yoga — inner-page shell, brought up to the landing page's level
   (T261020-07 追加 38). Ported from _src/template.html: same bar behaviour,
   same two-line hover links, same 3-column footer. inner.css keeps the page
   bodies; this file owns the chrome.
   ========================================================================== */

.nav{
  position:fixed; top:0; left:0; width:100%; height:var(--nav-h,72px); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  transition:transform .55s var(--ease,ease);
}
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(5,7,10,.30);
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  opacity:0; transition:opacity .5s linear;
}
.nav.stuck::before{ opacity:1; }
.nav::after{
  content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s;
}
.nav.stuck::after{ opacity:1; }
.nav.hide{ transform:translate3d(0,-101%,0); opacity:0; pointer-events:none; }
.nav{ transition:transform .55s var(--ease,ease), opacity .28s linear; }
.nav.stuck{ opacity:1; }

.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand svg{ width:34px; height:34px; display:block; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-tx b{ font-size:12px; font-weight:500; letter-spacing:.26em; }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.34em; color:var(--muted); }

.nav-links{ display:flex; align-items:center; gap:clamp(22px,3.0vw,56px); margin-left:auto; }
/* T261023-09 v5.7 回归修复：v5.6 把 .nav-tools 搬进 .nav-links 后，桌面端变成 8 个子项 × 7 个 gap，
   1440 下撑出 7px 横向溢出（header scrollWidth 1432 > clientWidth 1425）。缩一档 gap 收掉，
   视觉差异极小；≤820px 走抽屉时 gap 不参与，不影响移动端。 */
.nav-links a{
  position:relative; display:block;
  font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-dim);
}
/* both lines share one grid cell: the box is as wide as the WIDER label, so the
   Japanese line is never cut off by the vertical wipe's overflow:hidden */
.nav-links a .stk{ display:block; height:15px; }
.nav-links a{ clip-path:inset(0 -80px 0 0); }   /* vertical wipe, horizontal bleed allowed */
.nav-links a .stk > span{ display:block; height:15px; line-height:15px; }
.nav-links a .stk > span:first-child{ transition:transform .55s cubic-bezier(.22,1,.36,1), color .3s; }
.nav-links a > span{ display:block; height:15px; line-height:15px;
  transition:transform .55s cubic-bezier(.22,1,.36,1), color .3s; }
.nav-links a .alt{ position:absolute; left:0; top:0; white-space:nowrap;
  transform:translate3d(0,15px,0); opacity:0;
  color:var(--bone); letter-spacing:.14em;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .3s; }
.nav-links a:hover .stk > span:first-child{ transform:translate3d(0,-100%,0); }
.nav-links a:hover .alt{ transform:none; opacity:1; }
.nav-links a[aria-current="page"]{ color:var(--bone); }
.nav-links a[aria-current="page"]::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#e0231c;
}
.nav-links .soon{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(223,231,224,.28); }

/* cursor ring, same idea as the landing page */
.cur{ position:fixed; z-index:40;   /* below the bar (50): the ring must not cover a nav label */ top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(223,231,224,.55); border-radius:50%; pointer-events:none;
  transition:width .25s, height .25s, margin .25s, border-color .25s, background .25s, opacity .3s;
  opacity:0; }
.cur.on{ opacity:1; }
.cur.grow{ width:52px; height:52px; margin:-26px 0 0 -26px;
  border-color:rgba(224,35,28,.8); background:rgba(224,35,28,.10); }
@media (hover:none){ .cur{ display:none; } }

/* footer: three columns like the landing page */
.foot-top{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,2fr); gap:clamp(24px,4vw,64px); }
.foot-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,48px); }
@media (max-width:820px){
  .foot-top{ grid-template-columns:1fr; }
  /* v13.1 —— 三列内容都很短（最长「服务器状态」5 字），窄屏也塞得下 ⇒ 保持一行三列，不再降成两列。
     ⚠️ 本文件在层叠里**压过 inner.css**（同权重、后加载），改 inner.css 的 `.foot-cols` 是无效的。 */
  .foot-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 16px; }
}
@media (max-width:520px){
  /* 390 宽实测三列仍放得下（每列约 104px），只在极窄时才降到两列 */
  .foot-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; }
}
footer.foot li a{ color:var(--muted); font-size:11.5px; letter-spacing:.04em; }
footer.foot li a:hover{ color:var(--bone); }

/* ============================================================================
   T261020-07 追加 39 — 炫技层：内页也要有首页那种"活"的质感
   ========================================================================== */

/* 1 · 环境层：极细噪点 + 顶部冷光，避免大面积纯黑显得扁 */

/* 2 · 进场：淡入 + 上移，错开一点，别一起蹦 */
.fx{ opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.fx.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .fx{ opacity:1; transform:none; transition:none; }
}

/* 3 · 页面切换：离开时压暗一点再跳，进来时整体淡入 */
html.fx-out body{ opacity:0; transition:opacity .28s ease; }
body{ transition:opacity .5s ease; }

/* 4 · 悬停：行、卡片、按钮都要有回应 */
.rt tbody tr{ transition:background .3s, transform .3s; }
.rt tbody tr:hover{ transform:translate3d(4px,0,0); }
.hof:hover{ transform:translate3d(0,-4px,0); }
.hof{ transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .4s; }
.btn{ transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s, color .3s, border-color .3s; }
.btn:hover{ transform:translate3d(0,-2px,0); }
.btn:active{ transform:translate3d(0,0,0); }

/* 5 · 链接：下划线从左边扫出，不用加边框 */
footer.foot li a,
.sub a,
.lead a{ position:relative; }
footer.foot li a::after,
.sub a::after,
.lead a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
footer.foot li a:hover::after,
.sub a:hover::after,
.lead a:hover::after{ transform:scaleX(1); }

/* 6 · 数字：等宽，滚动时不跳 */
.phead .meta b, .num, .lv{ font-variant-numeric:tabular-nums; }

/* ============================================================================
   追加 41 — 逐页"高级感"：光带、分隔线扫过、表格逐行入场
   ========================================================================== */

/* 区块悬停时一道斜光扫过（纯 CSS，不额外请求）
   ⚠️ v2.5 收敛：这里原本还挂着 `.hof`（网格容器）与 `.race > div`（卡片），
   而"追加 43"那段又给卡片写了一遍 ⇒ 同一张卡两道扫光、容器扫了个空。
   现在分工固定：**区块**（详情面板 / 长文小节）用这一段，**卡片**用追加 43 那段。 */
.hi-detail, .lg-sec{ position:relative; overflow:hidden; }
.hi-detail::after, .lg-sec::after{
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(223,231,224,.06), transparent);
  transform:skewX(-12deg); pointer-events:none; transition:left .75s cubic-bezier(.22,1,.36,1);
}
.hi-detail:hover::after, .lg-sec:hover::after{ left:120%; }

/* 区块之间的分隔线：悬停/入场时从中间向两侧展开 */
.psec{ position:relative; }
.psec + .psec::before{
  content:''; position:absolute; top:0; left:50%; width:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(223,231,224,.22), transparent);
  transform:translateX(-50%); transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.psec.in + .psec::before, .psec.fx.in::before{ width:100%; }

/* 表格逐行入场（JS 给每行写 --i） */
.rt tbody tr{ opacity:0; transform:translate3d(0,10px,0); }
.fx-ready .rt tbody tr{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), background .3s;
  transition-delay:calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion:reduce){
  .rt tbody tr{ opacity:1; transform:none; }
}

/* hide wins over stuck: a bar that is scrolled away must be fully invisible.
   (Earlier .nav.stuck{opacity:1} came after .nav.hide{opacity:0} and overrode it.) */
header.nav.hide, header.nav.hide.stuck{
  transform:translate3d(0,-101%,0) !important;
  opacity:0 !important;
  pointer-events:none;
}

/* ============================================================================
   追加 43 — 通用"高级感"三件套：标题落位、按钮水波、卡片光泽
   ========================================================================== */

/* 1 · 大标题：进场时字距略微收拢，像印刷机落版 */
.phead h1{ animation:hx-settle 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes hx-settle{
  from{ opacity:0; letter-spacing:.06em; transform:translate3d(0,10px,0); }
  to  { opacity:1; letter-spacing:0;     transform:none; }
}
/* v2.5：登录/注册的 h1 也落版（原来只有 .phead h1 有，表单页的标题是"硬跳"出来的） */
.auth h1{ animation:hx-settle 1.1s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion:reduce){ .phead h1, .auth h1{ animation:none; } }

/* 2 · 按钮水波（JS 插入 span.hx-ripple） */
.btn, .rd-row .btn{ position:relative; overflow:hidden; }
.hx-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(223,231,224,.28); transform:scale(0); opacity:.9;
  animation:hx-ripple .62s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes hx-ripple{ to{ transform:scale(2.6); opacity:0; } }

/* 3 · 卡片光泽 —— 悬停一道斜光扫过 + 卡片上浮
   ⚠️ v2.5 修正（这是本轮"风格化"的一部分，不是新增机制）：
     原列表里的 `.hof` 是**网格容器**、`.rc-plan-gold` 是套餐卡里的**金额 span**，
     两者都不是卡片本身 ⇒ 扫光几乎不可见（容器本身没有背景、span 被 overflow 裁掉）。
     改成真正的卡片元素：`.hof .c`（殿堂卡）、`.rc-plan`（套餐卡）、`.rk-card`（总览前三名卡）。 */
.rc-pkg-tier, .rc-plan, .rc-method, .rc-cur-opt, .sp-grp, .sp-q, .sp-tk, .hof .c, .race > div, .rk-card{
  position:relative; overflow:hidden;
}
.rc-pkg-tier::after, .rc-plan::after, .rc-method::after, .rc-cur-opt::after,
.sp-grp::after, .sp-q::after, .sp-tk::after, .hof .c::after, .race > div::after, .rk-card::after{
  content:''; position:absolute; top:-20%; left:-75%; width:55%; height:140%;
  background:linear-gradient(105deg, transparent, rgba(223,231,224,.08), transparent);
  transform:skewX(-14deg); pointer-events:none;
  transition:left .85s cubic-bezier(.22,1,.36,1);
}
.rc-pkg-tier:hover::after, .rc-plan:hover::after, .rc-method:hover::after, .rc-cur-opt:hover::after,
.sp-grp:hover::after, .sp-q:hover::after, .sp-tk:hover::after, .hof .c:hover::after,
.race > div:hover::after, .rk-card:hover::after{ left:135%; }

.rc-pkg-tier, .rc-plan, .rc-method, .rc-cur-opt, .sp-q, .sp-tk, .hof .c, .race > div{
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, background .35s;
}
.rc-pkg-tier:hover, .rc-plan:hover, .rc-method:hover, .rc-cur-opt:hover, .sp-tk:hover,
.hof .c:hover, .race > div:hover{ transform:translate3d(0,-3px,0); }
.sp-q:hover{ background:rgba(223,231,224,.035); }
@media (hover:none){
  .rc-pkg-tier::after, .rc-plan::after, .rc-method::after, .rc-cur-opt::after,
  .sp-grp::after, .sp-q::after, .sp-tk::after, .hof .c::after, .race > div::after, .rk-card::after{ display:none; }
}

/* ============================================================================
   追加 45 — 补齐剩下几页（兑换 / 历史 / 条款 / 个人中心）
   ========================================================================== */

/* 兑换：结果提示从左侧滑入 + 输入框聚焦时的呼吸光环 */
.rd-msg{ animation:rd-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes rd-in{ from{ opacity:0; transform:translate3d(-8px,0,0); } to{ opacity:1; transform:none; } }
.rd-row input{ transition:border-color .3s, background .3s, box-shadow .35s; }
.rd-row input:focus{ box-shadow:0 0 0 3px rgba(223,231,224,.07); }
.rd-gift{ transition:transform .3s, border-color .3s; }
.rd-gift:hover{ transform:translate3d(0,-1px,0); border-color:rgba(201,162,74,.7); }

/* 历史 / 兑换 的页码：悬停放大、当前页发光 */
.hi-pg a, .hi-pg span{ transition:transform .28s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s, color .3s, box-shadow .35s; }
.hi-pg a:hover{ transform:translate3d(0,-2px,0); }
.hi-pg .is-on{ box-shadow:0 0 0 3px rgba(223,231,224,.08); }

/* 条款 / 隐私：目录项悬停上浮，小节标题的编号点亮 */
.lg-toc a{ transition:color .3s, transform .3s; }
.lg-toc a:hover{ transform:translate3d(2px,0,0); }
.lg-sec{ scroll-margin-top:96px; }
.lg-sec .lg-num{ transition:color .45s, letter-spacing .45s; }
.lg-sec.fx.in .lg-num, .lg-sec:hover .lg-num{ color:#e0231c; letter-spacing:.3em; }

/* 个人中心：余额两块卡的光泽与数字落位 */
.race > div .v{ font-variant-numeric:tabular-nums; }
.race > div:hover .v{ color:var(--bone); }
.race > div .v{ transition:color .4s; }

/* 表格：首列不换行，行悬停时左侧出现一根细红线 */
.rt tbody tr{ position:relative; }
.rt tbody tr::before{
  content:''; position:absolute; left:0; top:50%; width:2px; height:0;
  background:#e0231c; transform:translateY(-50%);
  transition:height .3s cubic-bezier(.22,1,.36,1);
}
.rt tbody tr:hover::before{ height:62%; }

@media (prefers-reduced-motion:reduce){
  .rd-msg{ animation:none; }
}

/* ---------------------------------------------------------------------------
   响应式：≤820px 收成「品牌 + 汉堡」，点开是一整块下滑菜单（与首页同一断点）
   ------------------------------------------------------------------------- */
.nav-burger{ display:none; margin-left:auto; width:40px; height:40px; padding:0;
  border:1px solid var(--line); border-radius:2px; background:none; cursor:pointer; }
.nav-burger i{ display:block; width:16px; height:1px; margin:5px auto; background:var(--bone-dim);
  transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s; }
@media (max-width:820px){
  header.nav{ gap:12px; }
  .nav-links{
    position:fixed; left:0; right:0; top:var(--nav-h,72px); margin:0;
    flex-direction:column; align-items:flex-start; gap:0;
    padding:10px var(--pad) 22px;
    background:rgba(5,7,10,.96);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
    transform:translate3d(0,-115%,0); opacity:0; pointer-events:none;
    transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s;
    max-height:calc(100vh - var(--nav-h,72px)); overflow:auto;
  }
  .nav-links.menu-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:14px 0; border-bottom:1px solid rgba(223,231,224,.06);
    clip-path:none; font-size:12px; letter-spacing:.18em; }
  .nav-links a .stk{ height:auto; }
  .nav-links a .alt{ position:static; transform:none; opacity:.55; display:block;
    margin-top:4px; font-size:10px; letter-spacing:.2em; }
  .nav-burger{ display:block; }
  .nav-burger.on i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-burger.on i:nth-child(2){ opacity:0; }
  .nav-burger.on i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .nav-tools{ margin-left:0; }
}
@media (min-width:821px){ .nav-tools{ margin-left:0; } }

/* ============================================================================
   追加 52 — 落地页三件搬到内页：磁吸按钮 / 音量按钮 / （光环已在）
   ========================================================================== */
.bgm-btn{
  width:38px; height:34px; padding:0; border:1px solid var(--line); border-radius:2px;
  background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s;
}
.bgm-btn:hover{ border-color:rgba(223,231,224,.45); }
.bgm-btn .bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.bgm-btn .bars i{ display:block; width:2px; height:4px; background:var(--bone-dim); transition:height .25s, background .3s; }
.bgm-btn.on .bars i{ background:var(--vermilion,#e0231c); animation:bgm-bounce 1s infinite ease-in-out; }
.bgm-btn.on .bars i:nth-child(2){ animation-delay:.15s; }
.bgm-btn.on .bars i:nth-child(3){ animation-delay:.3s; }
.bgm-btn.on .bars i:nth-child(4){ animation-delay:.45s; }
@keyframes bgm-bounce{ 0%,100%{ height:4px; } 50%{ height:12px; } }
@media (max-width:520px){ .bgm-btn{ width:34px; height:30px; } }
@media (prefers-reduced-motion:reduce){ .bgm-btn.on .bars i{ animation:none; height:10px; } }

/* 页面级 3D 舞台（T261020-07 追加 55）：只在有 #scene 的页面出现 */
.scene-stage{
  position:relative; width:100%; height:clamp(360px,62vh,620px);
  margin:calc(var(--nav-h,72px) * -1) 0 clamp(-104px,-9vh,-64px);
  overflow:hidden; pointer-events:none;
}
.scene-stage canvas{ display:block; width:100% !important; height:100% !important; }
.scene-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 50% 78%, rgba(224,35,28,.10) 0%, transparent 62%),
    radial-gradient(80% 60% at 50% 100%, rgba(223,231,224,.05) 0%, transparent 70%);
}
.scene-stage canvas + .scene-fallback{ opacity:0; transition:opacity .6s; }
@media (max-width:900px){
  .auth-split{ grid-template-columns:1fr; min-height:0; }
  .scene-stage{ height:clamp(300px,46vh,400px); }
  .scene-veil{ background:linear-gradient(to bottom, transparent 62%, var(--ink) 100%); }
}
@media (prefers-reduced-motion:reduce){ .scene-stage{ height:clamp(240px,36vh,360px); } }

/* 03 · 夜寺场景（T261020-07 追加 58）：左右分栏，场景满高、右侧渐隐融入页面；
   手机端退回上下排列。不再是"贴一条横幅"。 */
/* 一屏高的舞台：寺院完整露出，登录框压在最下方的暗部（前景地面），不挡塔身；
   往下滚是页脚 */
.auth-split{
  position:relative; overflow:hidden; display:block;
  height:calc(100vh - var(--nav-h,72px));
  min-height:620px;
  padding:0;
}
/* 场景铺满整幅（含表单那一栏），表单浮在上面、背景保持通透 */
.scene-stage{
  position:absolute; inset:0; z-index:0;
  isolation:isolate; width:100%; height:100%; margin:0 !important; overflow:hidden;
}
/* 表单居中：上下左右都在正中，背景从场景里透出来 */
/* 直角玻璃板：贴底压在前景暗部，尺寸放大 */
.auth-split .auth{
  position:absolute; left:50%; bottom:clamp(14px,3vh,36px); transform:translateX(-50%);
  z-index:1; max-width:560px; width:calc(100% - 48px); margin:0 auto;
  padding:clamp(30px,3.6vw,46px) clamp(28px,3.4vw,44px);
  background:rgba(2,3,6,.32);
  -webkit-backdrop-filter:blur(10px) brightness(.7) saturate(.9);
  backdrop-filter:blur(10px) brightness(.7) saturate(.9);
  border:1px solid rgba(223,231,224,.2);
  border-radius:0;   /* 直角框 */
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.scene-frame{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  pointer-events:none; display:block;
}
/* 不压暗背景：只留最底边一道极轻的过渡，避免场景与页脚之间出现硬切 */
.scene-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 92%, rgba(5,7,10,.55) 100%);
}

/* 分栏里的表单列：定宽 420、垂直居中，与场景共享一条中轴 */
.auth-split .auth{
  max-width:420px; width:100%; margin:0 auto; align-self:center;
  padding:clamp(28px,5vh,60px) clamp(20px,4vw,48px);
}
@media (max-width:900px){
  .auth-split .auth{ max-width:420px; padding-top:clamp(20px,4vh,36px); }
}

/* 手机端必须堆叠：上面那条 media 写在了基础规则之前，被后面的 .auth-split 覆盖了 */
@media (max-width:900px){
  .auth-split{ height:auto; min-height:0; padding-top:clamp(280px,42vh,360px); }
  .auth-split .scene-stage{ position:absolute; inset:0; height:100%; }
  .auth-split .auth{
    position:relative; left:auto; bottom:auto; transform:none;
    max-width:560px; margin:0 auto; padding-bottom:clamp(24px,4vh,40px);
  }
}

/* 注册页字段多，不能像登录页那样贴底：改成按内容高度排，整页可滚 */
.auth-split--flow{
  height:auto; min-height:0;
  padding:calc(var(--nav-h,72px) + 48px) 0 clamp(40px,6vh,80px);
}
.auth-split--flow .auth{
  position:relative; left:auto; bottom:auto; transform:none; margin:0 auto;
}
/* 表单里的原生控件：inner.css 把 input 拉成 100% 宽，radio 会变成巨型圆点 */
.auth .seg{ display:flex; gap:28px; align-items:center; }
.auth .seg label{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--bone-dim); }
.auth .seg input[type="radio"]{
  width:15px; height:15px; min-width:0; padding:0; margin:0;
  accent-color:#e0231c; background:none; border:1px solid var(--line);
}
.auth .tri{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; }
.auth .tri input{ width:100%; }
.auth .cap{ display:grid; grid-template-columns:1fr 118px; gap:12px; align-items:center; }
.auth .cap img{ width:100%; height:44px; object-fit:cover; border:1px solid var(--line); border-radius:2px; cursor:pointer; }
.auth .agree{ display:flex; gap:10px; align-items:flex-start; font-size:11.5px; color:var(--muted); line-height:1.7; }
.auth .agree input[type="checkbox"]{ width:15px; height:15px; min-width:0; margin-top:2px; accent-color:#e0231c; }
.auth .err{ display:block; margin-top:6px; font-style:normal; font-size:11px; color:#ff8a80; }
/* T261031-03 v27.8（2026-10-31）注册页「账号」输入框下的常驻规则提示（用户：「注册的时候 用户名
   至少要 6 位起」）。与 .err 同排版但用中性色 --muted —— 红 #ff8a80 只留给真正的校验错误，
   免得用户把「规则说明」读成报错。 */
.auth .hint{ display:block; margin-top:6px; font-style:normal; font-size:11px; color:var(--muted); letter-spacing:.01em; }
.auth .field--bad input{ border-color:rgba(224,35,28,.55); }
.auth .alert{
  margin:0 0 18px; padding:11px 14px; border-radius:2px; font-size:12px;
  border:1px solid rgba(224,35,28,.42); background:rgba(224,35,28,.08); color:#ffd9d3;
}
@media (max-width:520px){
  .auth .tri{ grid-template-columns:1fr 1fr 1fr; }
  .auth .cap{ grid-template-columns:1fr 100px; }
}

/* 注册分步：一次只显示一步，字段仍在同一 form 内
   🔴 v2.5 修正作用域：原来写成全局 `.steps`，而 inner.css 里同名 `.steps` 是「下载页
   的编号步骤卡」（每步一张大卡，含 .n / h3 / p）。shell.css 后加载 ⇒ 全局版把下载页
   的四步压成了扁平小条（实测：标题与正文被挤在同一行）。这里收回成 `.auth .steps`，
   两个组件各归各位。 */
.auth .steps{ display:flex; gap:10px; list-style:none; margin:0 0 18px; padding:0; }
.auth .steps li{
  flex:1; padding-top:8px; border-top:1px solid var(--line); font-size:10px;
  letter-spacing:.2em; color:var(--muted);
}
.auth .steps li.on{ border-top-color:#e0231c; color:var(--bone); }
.auth .step{ display:none; }
.auth .step.on{ display:block; }
.auth .stepnav{ display:flex; gap:10px; margin-top:22px; }
.auth .stepnav .btn{ flex:1; }
.auth .btn--ghost{
  background:none; border:1px solid var(--line); color:var(--bone-dim);
}
.auth .btn--ghost:hover{ border-color:rgba(223,231,224,.45); color:var(--bone); }
.auth input.is-bad{ border-color:rgba(224,35,28,.62) !important; }



/* ============================================================================
   朱红氛围 · 与语言选择页同一配方（radial 28%→10%→透明 + blur 观感）
   内页有 main 铺底，光斑画在 body 上会被盖住 ⇒ 直接画在 main 的 background-image 上，
   层级天然在底色之上、内容之下。
   ========================================================================== */
/* 底色 + 朱红光斑画在 body（视口级），main 透明 —— 这样连导航条那 72px 也有光 */
body{
  background-color:#05070a;
  background-image:radial-gradient(circle at 50% 50%,
    rgba(224,35,28,.28) 0%, rgba(224,35,28,.10) 38%, transparent 68%);
  background-repeat:no-repeat;
  background-size:920px 920px;
  background-position:right -300px top -340px;
  background-attachment:fixed;
}
main{ background:transparent; }
/* 暗角：与选择页一致，四角压暗让中间更聚焦 */
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 40%, transparent 38%, rgba(2,4,6,.72) 100%);
}
header.nav, main, footer.foot, .auth-split, .acct-wrap{ position:relative; z-index:1; }
/* T261022-08 P1（v3.10）：账户下拉面板在 header 里，而上面那条把 header 压到 z-index:1、
   与 main 同层（main 在 DOM 里更靠后 ⇒ 正文盖住菜单）。桌面右侧恰好空白所以看不出来，
   移动端正文满宽就露馅（实测 elementFromPoint 命中 SECTION.phead）。header 必须高于正文。 */
header.nav{ z-index:70; }
.acct-main .race > div, .acct-main .rt{
  background:linear-gradient(180deg, rgba(223,231,224,.035) 0%, rgba(223,231,224,.012) 100%);
}
/* 登录/注册等待期：用同一道朱红，而不是我之前那块冷蓝底 */
.scene-stage{
  background-image:radial-gradient(circle at 50% 50%,
    rgba(224,35,28,.28) 0%, rgba(224,35,28,.10) 38%, transparent 68%);
  background-color:#05070a;
  background-repeat:no-repeat;
  background-size:900px 900px;
  background-position:right -280px top -300px;
}
@keyframes sceneIn{ from{ opacity:0; } to{ opacity:1; } }
.scene-frame{ opacity:1; animation:sceneIn 1s ease both; }
@media (prefers-reduced-motion:reduce){ .scene-frame{ animation:none; opacity:1; } }

/* inner.css 把 82% 的黑直接画在 .nav 元素上（不是 ::before），
   那才是"透不出红光"的真凶 —— 我在 ::before 上怎么调都没用。
   这里把元素底透明化，只留滚动时的 .stuck::before 磨砂。 */
header.nav{ background:transparent; border-bottom-color:transparent; }
header.nav.stuck{ border-bottom-color:var(--line-soft); }

/* 毛玻璃常驻：上一版把 .nav 元素底刷透明后，::before 只在 .stuck 才出现，
   首屏等于完全没有磨砂。这里让磨砂层一直开着，只是底压到 .30，红光仍能透。 */
header.nav::before{
  opacity:1 !important;
  background:rgba(5,7,10,.30);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}
/* 下滚收起时整条一起走，别让磨砂层留在原地 */
header.nav.hide::before{ opacity:0 !important; }

/* ============================================================================
   v3.3 · 图标按钮的触控热区（视觉不变，只扩可点区域）
   实测：nav-burger 26×16、bgm-btn 34×30 —— 都低于 24×24（WCAG 2.2 SC 2.5.8）
   与常见 44×44 触控习惯。伪元素扩边不改布局、不影响已有 ::before/::after。
   ========================================================================== */
.nav-burger, .bgm-btn{ position:relative; }
.nav-burger::after{ content:''; position:absolute; inset:-14px -10px; }
.bgm-btn::after{ content:''; position:absolute; inset:-7px; }

/* ============================================================================
   T261023-09 v5.6 — 导航抽屉收口（390px 下 17px 横向溢出的根治）
   因：语言切换 + BGM 原本和 logo、汉堡挤在 header 同一行，390px 必然出头。
   果：把 .nav-tools 挪进 .nav-links 面板 —— 桌面端仍排在链接之后（视觉不变），
       ≤820px 面板本身是 fixed 抽屉，于是它们自然落进抽屉底部，header 只剩 logo + 汉堡。
   ============================================================================ */
.nav-links .nav-tools{ display:flex; align-items:center; gap:10px; margin-left:0; }
/* T261023-09 v5.10.5 修复（用户：点导航像点到音乐按钮）：
   此处曾写 `position:static`，导致下面那条 `::after{inset:-7px}` 失去定位参照，
   改以 header.nav 为参照 ⇒ 热区被撑成整条导航，**点任何导航项都触发 BGM**（实测 elementFromPoint
   在 x=824…1243 全部命中 BUTTON.bgm-btn）。必须保持 relative。 */
.nav-links .bgm-btn{ position:relative; }
@media (max-width:820px){
  .nav-links .nav-tools{ width:100%; margin-top:14px; padding-top:16px;
    border-top:1px solid var(--line-soft); gap:16px; justify-content:flex-start; }
  .nav-links .lang-sw{ display:flex; }
}

/* T261023-09 v5.7.1 — 内页 header 7px 溢出的最终收口（上一档 gap 在桌面端不够）。
   只在 ≥821px 生效；≤820px 是抽屉，gap 不参与布局。 */
@media (min-width:821px){
  .nav-links{ gap:clamp(14px,2.0vw,38px); min-width:0; }
  .nav-links .nav-tools{ margin-left:clamp(8px,1.4vw,20px); }
  /* 7px 的真源不是 gap：内页 header 里有绝对定位的双语副标（.alt，white-space:nowrap）横向越界，
     它不进 layout 却计入 scrollWidth。overflow-x:clip 只横向裁剪、不建滚动容器、不影响纵向下拉；
     仅桌面端启用，移动端抽屉（position:fixed）不受影响。 */
  header.nav{ min-width:0; overflow-x:clip; }
}

/* ============================================================================
   T261026-08 v14.8 —— 账户菜单里两个「增长入口」改**主题红**（用户 2026-10-26：「上面两个字体 改为红色」）
   名单只有一处：`tk_accent_keys()`（PHP，现为 daily / recruit）。顶部下拉与「个人中心」侧栏共用同一张
   条目表，所以两处同时生效 —— 不需要分别打标记。
   权重说明：inner.css 的 `.nav-user-menu a`(0,1,1) 与 account.css 的 `.acct-nav a`(0,1,1) 都更弱，
   这里用 `a.is-accent`(0,2,1)，且 shell.css 后加载 ⇒ 稳定覆盖；hover 仍改浅一档（--ember）保留反馈。
   注：不改 inner.css（静态首页内联它，改它要重建全部静态页）。
   ========================================================================== */
.nav-user-menu a.is-accent,
.nav-user-menu .mi.is-accent{ color:var(--vermilion); }
.nav-user-menu a.is-accent:hover,
.nav-user-menu a.is-accent:focus-visible{ color:var(--ember); }
.acct-nav a.is-accent,
.acct-nav .acct-nav-cur.is-accent{ color:var(--vermilion); }
.acct-nav a.is-accent:hover{ color:var(--ember); }

/* --- v14.9 追加：金色调（VIP 专区）----------------------------------------------------
   金色条目同时带 `is-accent`（便于统一统计），所以这两条必须写在上面的红规则**之后** ——
   两者权重相同（0,2,1），靠书写顺序覆盖。 */
.nav-user-menu a.is-accent--gold,
.nav-user-menu .mi.is-accent--gold{ color:var(--gold); }
.nav-user-menu a.is-accent--gold:hover,
.nav-user-menu a.is-accent--gold:focus-visible{ color:#e2bd67; }
.acct-nav a.is-accent--gold,
.acct-nav .acct-nav-cur.is-accent--gold{ color:var(--gold); }
.acct-nav a.is-accent--gold:hover{ color:#e2bd67; }

/* ============================================================================
   T261026-08 v14.10 —— 页脚品牌字「AXIOM.YOGA」改**金色**（用户 2026-10-26 截图 + 「改为金色」）
   目标只有 `tk_foot()` 页脚左侧那块品牌字（`.foot-brand b`）；原来继承 `inner.css:161` 的 `--bone`（近白）。
   权重相同（0,1,1）但本文件后加载 ⇒ 稳定覆盖；`inner.css` 不动（静态首页另有一套自包含样式，与这块无关）。
   ========================================================================== */
.foot-brand b{ color:var(--gold); }

/* ============================================================================
   T261026-08 v15.1 —— 页脚三列小标题（章节 / 快捷 / 功能）改**主题红**（用户 2026-10-26 截图 + 「改为红色」）
   目标只有 `.foot-cols h4`（原 `inner.css:174` 的 `--muted` 灰）；列里的链接本身不变（仍 `--bone-dim`，hover 变白）。
   权重同为 (0,1,1)，`shell.css` 后加载 ⇒ 覆盖；`inner.css` 不动。
   ========================================================================== */
.foot-cols h4{ color:var(--vermilion); }