/* ============================================================
   字体: 拉丁/数字用自托管 Inter(latin 子集, 每枚 24KB, 中文自动回落系统黑体)
   中文不引 webfont(体积大) —— 顺序里优先本机可能装有的高质量黑体, 再落到雅黑
   ============================================================ */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-latin-800-normal.woff2") format("woff2")}

/* ============================================================
   教响曲 1v1 私教俱乐部 · 设计系统 v3(编辑感 · 精致扁平暗色)
   暖调近黑 / 发丝线 / 克制的红与香槟金 / 衬线大数字 / 平滑动效
   原则: 少装饰、留白、层级靠字重与间距; 动效只服务内容, 不抢戏
   ============================================================ */
 :root{
   /* 中性色(暖调近黑, 非纯黑) */
   --bg:#f5f3ee;
   --bg2:#efece5;
   --panel:#ffffff;
   --card:#ffffff;
   --card2:#faf9f6;
   --line:rgba(24,22,20,.10);
   --line2:rgba(24,22,20,.18);
   --txt:#17161a;
   --sub:rgba(23,22,26,.76);
   --dim:rgba(23,22,26,.62);
   /* 品牌(克制的红 + 香槟金) */
   --red:#c62a20;
   --red-deep:#a01f16;
   --gold:#84621c;
   --gold-deep:#6f5219;
   --on-gold:#fff;                      /* 落在金色渐变底上的文字(暗色主题=深墨) */
   --blue:#2f6fe4;
   --green:#157a41;
   /* 表面(去玻璃: 极淡提亮, 靠发丝线分界) */
   --surf:rgba(24,22,20,.04);
   --surf2:rgba(24,22,20,.07);
   /* 圆角(略收, 更克制) */
   --r-card:14px; --r-in:10px; --r-pill:980px;
   /* 阴影(只用于浮层, 不用于装饰发光) */
   --shadow-1:0 1px 2px rgba(24,22,20,.07);
   --shadow-2:0 18px 44px rgba(24,22,20,.13);
   --shadow-3:0 30px 70px rgba(24,22,20,.17);
   /* 顶部受光发丝: 面不是纯色块, 而是被打过光的材质(高级感基石) */
   --edge:inset 0 1px 0 rgba(255,255,255,.9);
   --edge-2:inset 0 1px 0 #fff;
   --inset:inset 0 1px 2px rgba(24,22,20,.06);
   /* 层次面: 极低对比纵向渐变, 让卡片有体积 */
   --face:linear-gradient(180deg,#fff,var(--card2) 64%);
   /* 字阶/字距: 越大的字越紧(编辑感) */
   --fs-display:clamp(34px,5vw,54px);
   --fs-h2:clamp(24px,2.6vw,32px);
   /* 动效(平滑出, 无弹跳) */
   --ease:cubic-bezier(.22,.61,.36,1);
   --ease-out:cubic-bezier(.16,1,.3,1);
   --ease-spring:cubic-bezier(.175,.885,.32,1.08);
   /* 字体: 拉丁/数字 Inter(自托管) → 中文按"本机可能装有的更好黑体"顺序回落, 最后才是雅黑 */
   --font:"Inter","Noto Sans SC Variable",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI","PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
   /* 展示字体(大标题 h1/h2): 中文优先"等线 DengXian" —— Windows 上比雅黑更细更利落(实测字宽 711 vs 730) */
   --font-display:"Inter","Noto Sans SC Variable",-apple-system,BlinkMacSystemFont,"SF Pro Display","HarmonyOS Sans SC","MiSans","Source Han Sans SC","PingFang SC","DengXian","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
   /* 大数字/价格/编号(页内沿用 --font-serif 名字): 同样走展示字体 —— 原来结尾落到通用 serif, Windows 上中文会变宋体 */
   --font-serif:"Inter","Noto Sans SC Variable",-apple-system,BlinkMacSystemFont,"HarmonyOS Sans SC","MiSans","Source Han Sans SC","PingFang SC","DengXian","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
   /* ==== 主题系统 v3.1 追加令牌 ==== */
   --line3:rgba(24,22,20,.30);          /* 更强的分隔/描边(悬停态) */
   --nav-bg:rgba(250,249,246,.86);            /* 顶栏底色(半透明 + blur) */
   --scrim:rgba(23,22,26,.45);                 /* 遮罩底色 */
   --on-tint:var(--txt);                         /* 落在「淡色强调面」上的文字: 暗色主题=白, 亮色主题=墨 */
   --mp-bg:#000;                           /* 媒体播放区(始终暗色, 两种主题一致) */
   --mp-txt:#fff;
   color-scheme:light;
 }
 /* ============================================================
    白天模式(浅色主题): 暖纸底色 + 墨色文字 + 收敛的香槟金
    切换方式: <html data-theme="light|dark">(由 auth-nav.js 主题切换器写入, 首屏内联脚本防闪烁)
    媒体播放区(.feed/.fcard/.pv-*)不受主题影响, 始终暗色(播放器惯例)
    ============================================================ */
 
 *{margin:0;padding:0;box-sizing:border-box}
 html{scroll-behavior:smooth}
 body{
   background:var(--bg);color:var(--txt);
   font-family:var(--font);
   font-size:16px;line-height:1.72;letter-spacing:.01em;
   -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
   font-kerning:normal;
   text-wrap:pretty;
   min-height:100vh;
 }
 /* 大标题走展示字体(等线/HarmonyOS 等, 比正文雅黑更利落); h3 及以下保持正文字体(小字号更实) */
 h1,h2{font-family:var(--font-display);font-kerning:normal;text-wrap:balance}
 /* 环境光: 顶部一层极淡暖光 + 底部轻压暗, 让整页有"打光"的空间感(不参与内容, 不滚动) */
 body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
   background:
     radial-gradient(1100px 520px at 50% -12%,rgba(217,179,106,.06),transparent 72%),
     radial-gradient(900px 620px at 92% 6%,rgba(255,69,58,.045),transparent 70%),
     linear-gradient(180deg,transparent 58%,rgba(0,0,0,.34))}
 /* 纸张噪点: 静态 feTurbulence, 极低透明度 —— 让暗面有质感而不发飘 */
 body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 a{color:inherit;text-decoration:none}
 img{display:block;max-width:100%}
 /* 触屏: 交互元素去双击缩放延迟(捏合缩放/平移仍可用) */
 a,button,input,select,textarea,[role="button"]{touch-action:manipulation}
 ::selection{background:rgba(255,69,58,.3);color:#fff}
 :focus-visible{outline:2px solid rgba(217,179,106,.72);outline-offset:3px;border-radius:8px}
 /* 滚动条(细, 低调) */
 ::-webkit-scrollbar{width:9px;height:9px}
 ::-webkit-scrollbar-track{background:transparent}
 ::-webkit-scrollbar-thumb{background:rgba(150,152,162,.28);border-radius:99px;border:2px solid transparent;background-clip:content-box}
 ::-webkit-scrollbar-thumb:hover{background:rgba(150,152,162,.5);background-clip:content-box}
 .wrap{max-width:1180px;margin:0 auto;padding:0 24px}

 /* ===== 导航(近实底 + 发丝线, 轻模糊) ===== */
 .nav{position:sticky;top:0;z-index:50;
   background:var(--nav-bg);
   -webkit-backdrop-filter:saturate(130%) blur(14px);backdrop-filter:saturate(130%) blur(14px);
   box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
   border-bottom:1px solid var(--line)}
 .nav .wrap{display:flex;align-items:center;height:62px;gap:20px}
 .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:.2px;white-space:nowrap}
 .logo .mark{width:34px;height:34px;border-radius:8px;object-fit:cover;border:1px solid var(--line2);box-shadow:var(--edge)}
 .nav-links{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
 .nav-links a{position:relative;padding:8px 14px;font-size:14px;color:var(--sub);letter-spacing:.3px;white-space:nowrap;transition:color .3s var(--ease)}
 /* 下划线滑动(hover/.on), 替代背景胶囊 */
 .nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;background:var(--txt);
   transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);opacity:0}
 .nav-links a:hover{color:var(--txt)}
 .nav-links a:hover::after{transform:scaleX(1);opacity:.7}
 .nav-links a.on{color:var(--txt)}
 .nav-links a.on::after{transform:scaleX(1);background:var(--red);opacity:1}
 .nav-tag{font-size:10.5px;letter-spacing:4px;color:var(--dim);white-space:nowrap}
 /* 防重叠: 导航条高度自适应(窄宽换行时撑高不压内容), 窄屏隐藏品牌 tag 腾出空间 */
 .nav .wrap{height:auto;min-height:62px;padding:10px 0;row-gap:6px}
 @media (max-width:1400px){.nav-tag{display:none}}
 /* 导航登录态(近实底胶囊) */
 .nav-auth{display:inline-flex;align-items:center;gap:8px;margin-left:10px}
 .nav-auth .chip-user{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);
   background:var(--surf);border-radius:var(--r-pill);padding:5px 15px;font-size:13px;font-weight:500;color:var(--txt);
   max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
 .nav-auth .chip-user:hover{background:var(--surf2);border-color:rgba(233,235,244,.28)}
 .nav-auth .chip-user i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
 .nav-auth a.out{font-size:12.5px;color:var(--dim);margin-left:2px;transition:color .25s var(--ease)}
 .nav-auth a.out:hover{color:var(--red)}
 /* 个人中心下拉(未登录: 登录/注册; 已登录: 资料/视频/退出), 菜单锚定右侧防出屏 */
 .nav-dd-user{margin-left:10px}
 .nav-dd-user .nav-dd-btn{gap:7px;border:1px solid var(--line2);background:var(--surf);color:var(--txt);font-weight:500;padding:5px 13px}
 .nav-dd-user .nav-dd-btn:hover{background:var(--surf2);border-color:rgba(233,235,244,.28)}
 .nav-dd-user .nav-dd-btn svg{width:10px;height:10px}
 .nav-ava{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);flex:none;display:block}
 .nav-dd-user .nav-dd-menu{min-width:200px;left:auto;right:0;transform:translateY(-8px) scale(.97);transform-origin:top right}
 .nav-dd.nav-dd-user.open .nav-dd-menu{transform:translateY(0) scale(1)}
 .nav-dd-user .nav-dd-item{padding:9px 12px}
 .nav-dd-user .dd-sec{height:1px;background:var(--line);margin:8px 4px}
 .nav-dd-user .nav-dd-item.danger b{color:var(--sub)}
 .nav-dd-user .nav-dd-item.danger:hover b{color:var(--red)}
 /* 导航下拉子菜单(编辑式: 近实底 + 发丝线) */
 .nav-dd{position:relative}
 .nav-dd-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:0;
   font-size:14px;color:var(--sub);background:none;border:none;font-family:inherit;cursor:pointer;
   letter-spacing:.3px;white-space:nowrap;position:relative;transition:color .3s var(--ease)}
 .nav-dd-btn::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1px;background:var(--txt);
   transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);opacity:0}
 .nav-dd-btn:hover{color:var(--txt)}
 .nav-dd-btn:hover::after{transform:scaleX(1);opacity:.7}
 .nav-dd.open .nav-dd-btn,.nav-dd-btn.on{color:var(--txt)}
 .nav-dd.open .nav-dd-btn::after,.nav-dd-btn.on::after{transform:scaleX(1);background:var(--red);opacity:1}
 .nav-dd-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;
   transition:transform .35s var(--ease)}
 .nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
 .nav-dd-menu{position:absolute;z-index:5;top:calc(100% + 8px);left:50%;min-width:330px;padding:10px;border-radius:var(--r-card);
   background:var(--card2);border:1px solid var(--line2);box-shadow:var(--edge-2),var(--shadow-3);
   transform:translateX(-50%) translateY(-8px) scale(.97);transform-origin:top center;
   opacity:0;pointer-events:none;
   transition:opacity .26s var(--ease),transform .34s var(--ease-spring)}
 .nav-dd.open .nav-dd-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
 .nav-dd-item{display:block;padding:10px 14px;border-radius:10px;transition:background .25s var(--ease)}
 .nav-dd-item:hover{background:var(--surf2)}
 .nav-dd-item b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.2px;color:var(--txt)}
 .nav-dd-item span{display:block;font-size:12px;color:var(--dim);letter-spacing:.3px;margin-top:1px}
 .nav-dd-item.on b{color:var(--red)}
 /* 课程介绍二级下拉: 按游戏划分 */
 .nav-dd-games{min-width:170px}
 /* 教学空间下拉与个人中心下拉统一: 右锚定 200px / 同 item 内距 */
 .nav-dd-space .nav-dd-menu{min-width:200px;left:auto;right:0;background:var(--card2);
   transform:translateY(-8px) scale(.97);transform-origin:top right}
 .nav-dd.open.nav-dd-space .nav-dd-menu{transform:translateY(0) scale(1)}
 .nav-dd-space .nav-dd-item{padding:9px 12px}
 .dd-game{position:relative}
 .dd-game-t{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:14.5px;font-weight:600;letter-spacing:1px;color:var(--txt);border-radius:10px;white-space:nowrap;text-decoration:none}
 .dd-game-t:hover{background:var(--surf2)}
 .dd-game-t::after{content:"";flex:none;width:7px;height:7px;margin-left:auto;border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);transform:rotate(-45deg)}
 /* flyout 按内容自适应高度, 相对行垂直居中; ::before 补上 8px 间距的 hover 桥, 防止移过去时闪断 */
 .dd-fly{position:absolute;z-index:10;left:calc(100% + 8px);top:50%;transform:translate(-8px,-50%);width:118px;padding:8px;border-radius:12px;
   background:var(--card2);border:1px solid var(--line2);box-shadow:var(--edge-2),var(--shadow-3);
   opacity:0;visibility:hidden;pointer-events:none;
   transition:opacity .24s var(--ease),transform .3s var(--ease-spring)}
 .dd-fly::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:12px}
 .dd-game:hover .dd-fly{opacity:1;visibility:visible;transform:translate(0,-50%);pointer-events:auto}
 .dd-fly .nav-dd-item{padding:8px 10px}
 .dd-fly .nav-dd-item b{font-size:14px}
 @media (max-width:700px){
   .dd-fly{position:static;width:auto;margin:2px 0 8px 14px;border:1px dashed #ffffff14;border-radius:12px;
     box-shadow:none;background:var(--surf);
     opacity:1;visibility:visible;transform:none;pointer-events:auto;padding:6px}
   .dd-game-t::after{display:none}
 }

 /* ===== 按钮(扁平, 无扫光) ===== */
 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
   padding:14px 30px;border-radius:var(--r-pill);font-size:15px;font-weight:600;letter-spacing:0;
   transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
   cursor:pointer;border:1px solid transparent;font-family:inherit}
 .btn:active{transform:scale(.978)}
 .btn.primary{background:linear-gradient(180deg,#ff5b50,var(--red) 56%,var(--red-deep));color:#fff;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 20px rgba(255,69,58,.2)}
 .btn.primary:hover{background:linear-gradient(180deg,#ff675c,var(--red) 52%,var(--red-deep));transform:translateY(-1px);
   box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 30px rgba(255,69,58,.3)}
 .btn.primary:disabled{opacity:.4;cursor:not-allowed}
 .btn.ghost{border-color:var(--line2);color:var(--sub);background:var(--surf);box-shadow:var(--edge)}
 .btn.ghost:hover{color:var(--txt);border-color:rgba(233,235,244,.34);background:var(--surf2);
   box-shadow:var(--edge-2),0 8px 22px rgba(0,0,0,.28)}
 .btn.small{padding:9px 20px;font-size:13.5px;border-radius:var(--r-pill)}
 .btn .spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;display:none;flex:none}
 .btn.loading .spin{display:inline-block}
 .btn.loading{pointer-events:none;opacity:.9}

 /* ===== 区块标题(编辑式: 英文 overline + 紧字距大标题) ===== */
 .page-head{padding:68px 0 12px}
 .page-head h1{font-size:var(--fs-display);font-weight:700;letter-spacing:var(--track-tight);line-height:1.08;text-wrap:balance}
 .page-head h1 .r{color:var(--red)}
 .page-head .en{display:block;font-size:11px;color:var(--dim);letter-spacing:.22em;margin-top:10px;text-transform:uppercase;font-weight:600}
 .page-head .sub{color:var(--sub);font-size:15.5px;margin-top:14px;max-width:640px}
 main{padding-bottom:96px}

 /* ===== 卡片(扁平 + 发丝线) ===== */
 .card{background:var(--face);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;
   box-shadow:var(--edge),0 2px 8px rgba(0,0,0,.22)}
 /* 各页卡片类: 保持 position:relative(页内绝对定位子元素依赖); 鼠标跟随聚光已移除 */
 .pcard,.coach,.step,.qa,.cmp,.cat,.ccard,.vcard,.login-card,.mine .item{position:relative}

 /* ===== 表单 ===== */
 .field{margin-bottom:16px}
 .field label{display:block;font-size:13.5px;color:var(--sub);margin-bottom:8px;letter-spacing:.3px;font-weight:500}
 .field input[type=text],.field input[type=tel],.field input[type=password],.field textarea{
   width:100%;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-in);
   padding:13px 16px;color:var(--txt);font-size:15px;font-family:inherit;box-shadow:var(--inset);
   transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);outline:none}
 .field input::placeholder,.field textarea::placeholder{color:var(--dim)}
 .field input:focus,.field textarea:focus{border-color:rgba(217,179,106,.55);background:var(--surf2);
   box-shadow:var(--inset),0 0 0 3px rgba(217,179,106,.09)}
 .field textarea{resize:vertical;min-height:74px}

 /* ===== 分段控件(近实底, 无 iOS 灰) ===== */
 .segmented{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surf);border:1px solid var(--line);border-radius:11px;padding:2px;isolation:isolate}
 .segmented .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/4);
   background:var(--card2);border:1px solid var(--line2);border-radius:9px;
   transition:transform .45s var(--ease-spring);z-index:0}
 .segmented button{position:relative;z-index:1;border:none;background:transparent;color:var(--sub);
   font:600 14px/1 var(--font);letter-spacing:.3px;padding:10px 0;border-radius:9px;cursor:pointer;
   transition:color .35s var(--ease)}
 .segmented button.on{color:#fff}

 /* ===== 搜索框 ===== */
 .search{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--line);
   border-radius:var(--r-in);padding:11px 16px;box-shadow:var(--inset);transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
 .search:focus-within{border-color:rgba(217,179,106,.5);background:var(--surf2);box-shadow:var(--inset),0 0 0 3px rgba(217,179,106,.08)}
 .search svg{width:16px;height:16px;stroke:var(--dim);fill:none;stroke-width:2;flex:none;transition:stroke .3s var(--ease)}
 .search:focus-within svg{stroke:var(--sub)}
 .search input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font:400 15px var(--font);min-width:0}
 .search input::placeholder{color:var(--dim)}

 /* ===== 提示 ===== */
 .note{display:flex;align-items:flex-start;gap:10px;background:var(--surf);border:1px solid var(--line);
   border-radius:12px;padding:13px 16px;font-size:13px;color:var(--sub);line-height:1.7}
 .note .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:8px}
 .note b{color:var(--txt);font-weight:600}
 .err{color:var(--red);font-size:13px;min-height:20px;margin-top:6px}
 .ok{color:var(--green);font-size:13px;min-height:20px;margin-top:6px}
 .code-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(91,155,255,.08);border:1px solid rgba(91,155,255,.35);
   border-radius:var(--r-pill);padding:7px 16px;font-size:13.5px;color:var(--blue);font-weight:600;letter-spacing:1px;margin-top:10px;
   animation:popIn .4s var(--ease) both}
 .code-chip b{color:var(--gold);font-weight:700;letter-spacing:2px}

 /* ===== 页脚 ===== */
 footer{border-top:1px solid var(--line);padding:40px 0 34px;margin-top:20px;text-align:center;color:var(--sub);font-size:13px}
 footer .note2{max-width:760px;margin:0 auto 10px;color:var(--dim)}
 footer .brand{color:var(--red);font-weight:700;letter-spacing:2px;font-size:15px}

 /* ===== 白天模式细节: 纸张噪点更轻, 环境光改为暖纸上的柔光 ===== */
 body::before{opacity:.018}
 body::after{
   background:
     radial-gradient(1200px 560px at 50% -14%,rgba(168,128,44,.05),transparent 74%),
     radial-gradient(900px 620px at 96% 2%,rgba(224,54,43,.018),transparent 72%),
     linear-gradient(180deg,transparent 68%,rgba(24,22,20,.035))}
 .scrollbar{background:linear-gradient(90deg,var(--red),var(--gold))}
 ::-webkit-scrollbar-thumb{background:rgba(24,22,20,.24);background-clip:content-box}
 ::-webkit-scrollbar-thumb:hover{background:rgba(24,22,20,.4);background-clip:content-box}
 ::selection{background:rgba(224,54,43,.22);color:var(--txt)}

/* ===== 全局小件: 滚动进度条 / 返回顶部 ===== */
 .scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:99;transform:scaleX(0);transform-origin:0 50%;
   background:var(--red)}
 .totop{position:fixed;right:22px;bottom:24px;z-index:98;width:44px;height:44px;border-radius:50%;
   display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--sub);
   background:var(--face);border:1px solid var(--line2);box-shadow:var(--edge),var(--shadow-1);
   opacity:0;transform:translateY(14px);pointer-events:none;transition:.35s var(--ease)}
 .totop.show{opacity:1;transform:none;pointer-events:auto}
 .totop:hover{color:#fff;border-color:rgba(233,235,244,.32)}
 /* 鼠标跟随背景光: 已移除(装饰性动效, 非内容服务) —— 保留元素占位避免 JS 报错 */
 .mglow{display:none!important}

 /* ===== 动画 ===== */
 @keyframes fadeUp{from{opacity:0;transform:translateY(20px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
 @keyframes popIn{from{opacity:0;transform:scale(.94);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
 @keyframes spin{to{transform:rotate(360deg)}}
 @keyframes scan{0%{top:6%}50%{top:88%}100%{top:6%}}
 .fade-up{animation:fadeUp .8s var(--ease) both}
 .pop-in{animation:popIn .45s var(--ease) both}

 /* ===== 微交互(克制): 按钮轻抬 · 卡片描边提亮 ===== */
 a{transition:color .25s var(--ease)}
 [id]{scroll-margin-top:84px}
 .btn:hover{transform:translateY(-1px)}
 .btn.ghost:hover{transform:translateY(-1px)}
 .totop:active{transform:translateY(0) scale(.9)}
 /* 客服入口: 悬浮按钮 + 联系面板(auth-nav.js 全站注入, 数据 = /api/site-config 后台「设置→联系方式」) */
 .cs-fab{position:fixed;right:22px;bottom:24px;z-index:99;width:48px;height:48px;border-radius:50%;
   background:var(--card);border:1px solid var(--line2);color:var(--txt);cursor:pointer;
   display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
   box-shadow:var(--edge),var(--shadow-1);transition:transform .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
   -webkit-tap-highlight-color:transparent}
 .cs-fab svg{width:21px;height:21px;flex:none}
 .cs-fab span{font-size:10px;line-height:1;letter-spacing:1px}
 .cs-fab:hover{border-color:rgba(233,235,244,.32);transform:translateY(-2px)}
 .cs-fab:active{transform:scale(.9)}
 /* 页面有抽屉(评论/组队房间/分享)打开时隐藏客服悬浮按钮: 防它盖住抽屉底部输入行的「发送」键(页面 JS 切 body.drawer-open, 比纯 z-index 叠层更稳) */
 body.drawer-open #csFab{display:none}
 .cs-fab.on{border-color:var(--red);color:var(--red)}
 .cs-panel{position:fixed;right:22px;bottom:84px;z-index:99;width:318px;max-width:calc(100vw - 32px);
   background:var(--face);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--edge-2),var(--shadow-3);overflow:hidden;
   animation:csIn .2s var(--ease)}
 .cs-panel[hidden]{display:none}
 @keyframes csIn{from{opacity:0;transform:translateY(10px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
 .cs-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
 .cs-head b{font-size:14.5px;color:var(--txt)}
 .cs-x{background:none;border:0;color:var(--dim);font-size:20px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px}
 .cs-x:hover{color:var(--txt);background:var(--surf2)}
 /* 排版: 图标磁贴 + 标签/值两行堆叠 + 值单行省略 */
 .cs-body{padding:4px 10px}
 .cs-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:12px;transition:background .15s var(--ease)}
 .cs-row + .cs-row{border-top:1px solid var(--line)}
 .cs-row:hover{background:var(--surf)}
 .cs-ico{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}
 .cs-ico svg{width:22px;height:22px}
 .cs-ico.g{background:rgba(62,207,111,.12);color:var(--green)}
 .cs-ico.b{background:rgba(91,155,255,.12);color:var(--blue)}
 .cs-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
 .cs-k{font-size:11px;color:var(--dim);letter-spacing:1px;line-height:1}
 .cs-vl{display:flex;align-items:center;gap:8px;min-width:0}
 .cs-v{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt);font-size:14px;font-weight:600}
 .cs-v.empty{color:var(--dim)}
 a.cs-v{color:var(--red);text-decoration:none;font-weight:600}
 a.cs-v:hover{text-decoration:underline}
 .cs-note{padding:9px 16px 12px;font-size:11.5px;color:var(--dim);line-height:1.5;border-top:1px solid var(--line)}
 .cs-qr{flex:none;width:84px;height:84px;object-fit:cover;background:#fff;border-radius:10px;padding:4px;cursor:zoom-in;transition:transform .15s var(--ease)}
 .cs-qr:hover{transform:scale(1.04)}
 /* 客服微信二维码放大灯箱(点面板内二维码弹出) */
 .cs-qr-zoom{position:fixed;inset:0;z-index:115;display:flex;align-items:center;justify-content:center;
   background:rgba(8,8,10,.82);animation:csIn .15s var(--ease)}
 .cs-qr-zoom[hidden]{display:none}
 .cs-qr-zoom-card{position:relative;background:#fff;border-radius:16px;padding:16px 16px 8px;box-shadow:var(--shadow-2);
   text-align:center;max-width:calc(100vw - 32px)}
 .cs-qr-zoom-card img{display:block;width:min(68vmin,320px);height:min(68vmin,320px);object-fit:contain}
 .cs-qr-zoom-cap{font-size:13px;color:#555;padding:9px 0 6px}
 .cs-qr-zoom-x{position:absolute;top:4px;right:6px;width:30px;height:30px;border:0;background:none;color:#999;
   font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
 .cs-qr-zoom-x:hover{color:#333;background:rgba(0,0,0,.08)}
 .cs-copy{flex:none;font-size:11.5px;color:var(--red);background:none;border:1px solid var(--line2);border-radius:999px;
   padding:3px 10px;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease)}
 .cs-copy:hover{background:rgba(255,80,80,.08);border-color:var(--red)}
 .cs-tag{flex:none;font-size:10.5px;color:var(--dim);border:1px solid var(--line2);border-radius:999px;
   padding:2px 8px;white-space:nowrap}
 .cs-hint{font-size:12px;color:var(--dim);line-height:1.55}
 @media (max-width:640px){
   .cs-fab{right:14px;bottom:14px;width:46px;height:46px}
   .cs-panel{right:14px;bottom:68px;width:calc(100vw - 28px);max-width:calc(100vw - 28px)}
   .cs-qr{width:74px;height:74px}
 }
 .nav-auth .chip-user:hover{transform:translateY(-1px)}
 .field label{transition:color .3s var(--ease)}
 .field:focus-within label{color:var(--txt)}
 /* 下拉菜单项: 交错入场 */
 .nav-dd-item{transition:background .25s var(--ease)}
 @keyframes ddItemIn{from{opacity:0;transform:translateY(7px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
 .nav-dd.open .nav-dd-menu .nav-dd-item{animation:ddItemIn .38s var(--ease) both}
 .nav-dd.open .nav-dd-menu>.nav-dd-item:nth-child(2){animation-delay:.05s}
 .nav-dd.open .nav-dd-menu>.nav-dd-item:nth-child(3){animation-delay:.1s}
 .nav-dd.open .nav-dd-menu>.nav-dd-item:nth-child(4){animation-delay:.15s}
 .nav-dd.open .nav-dd-menu>.dd-game{animation:ddItemIn .38s var(--ease) both}
 .nav-dd.open .nav-dd-menu>.dd-game:nth-child(2){animation-delay:.04s}
 .nav-dd.open .nav-dd-menu>.dd-game:nth-child(3){animation-delay:.08s}
 .nav-dd.open .nav-dd-menu>.dd-game:nth-child(4){animation-delay:.12s}
 .nav-dd.open .nav-dd-menu>.dd-game:nth-child(5){animation-delay:.16s}
 .nav-dd.open .nav-dd-menu>.dd-game:nth-child(6){animation-delay:.2s}

 /* ===== 降级与响应式 ===== */
 @media (prefers-reduced-motion:reduce){
   *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
   html{scroll-behavior:auto}
 }
 /* ?static 静态模式(截图/打印用): 完全关闭动画与过渡 */
 html.no-anim,html.no-anim *,html.no-anim *::before,html.no-anim *::after{animation:none!important;transition:none!important}
/* ?static(html.no-anim): 揭示类元素一律可见(否则跳过进场脚本的页面会白屏) 且不留模糊 */
html.no-anim .rv,html.no-anim .reveal,html.no-anim .ch{opacity:1!important;transform:none!important;filter:none!important}
 @media (max-width:700px){
   /* 移动端导航: 单行紧凑(logo + 可横滑链接 + 消息/公告/用户), 省首屏空间;
      链接过多时横向滚动(站内下拉菜单都在 nav-links 之外, 不会被裁剪) */
   .nav .wrap{flex-wrap:nowrap;height:50px;min-height:50px;padding:0 10px;row-gap:0;gap:6px;align-items:center}
   .nav .logo{order:0;flex:none;font-size:13px;gap:7px;white-space:nowrap}
   .nav .logo .mark{width:27px;height:27px;border-radius:7px}
   .nav .nav-auth{order:0;flex:none;margin-left:2px}
   .nav .nav-auth a{font-size:12.5px;padding:6px 10px}
   .nav .nav-dd-user{order:0;flex:none;margin-left:0}
   .nav .nav-dd-user .nav-dd-btn{font-size:12.5px;padding:6px 10px;gap:5px}
   .nav .nav-dd-user .nav-dd-btn svg{width:9px;height:9px}
   .nav .nav-links{order:0;flex:1 1 auto;min-width:0;flex-basis:0;gap:2px;flex-wrap:nowrap;
     overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:0;padding:0 1px}
   .nav .nav-links::-webkit-scrollbar{display:none}
   .nav .nav-links > a{flex:none;font-size:12.5px;padding:5px 9px;white-space:nowrap}
   .nav .nav-links > .nav-dd > .nav-dd-btn{flex:none;font-size:12.5px;padding:5px 9px}
   .nav .nav-links > .btn{flex:none;margin-left:2px!important;font-size:12px;padding:5px 10px}
   /* 消息/公告等 nav-links 之外的裸锚点: 保持单行不压缩 */
   .nav .wrap > a{flex:none;font-size:12.5px}
   .nav-tag{display:none}
   .nav-dd-menu{left:auto;right:0;min-width:250px;transform:translateY(-8px) scale(.97);transform-origin:top right}
   .nav-dd.open .nav-dd-menu{transform:translateY(0) scale(1)}
   .page-head h1{font-size:30px}
   .wrap{padding:0 16px}
 }

 /* ===== 页脚 · 品牌 ===== */
 .f-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;text-align:left}
 .f-brand{display:flex;align-items:center;gap:13px;text-align:left}
 .f-brand img{width:44px;height:44px;flex:none;border-radius:10px;object-fit:cover;border:1px solid var(--line2);background:#000;box-shadow:var(--edge)}
 .f-brand b{display:block;font-size:16px;font-weight:900;letter-spacing:1px;color:var(--txt)}
 .f-brand span{display:block;font-size:10.5px;letter-spacing:4px;color:var(--dim);margin-top:5px}
 @media (max-width:700px){.f-top{justify-content:center;text-align:center}}
 /* 导航「消息」未读角标 */
 .msg-badge{display:inline-block;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:999px;
   background:var(--red);color:#fff;font-size:10.5px;font-weight:700;line-height:16px;text-align:center;vertical-align:1px}
 .msg-badge[hidden]{display:none}
 #navMsg.has-unread{color:var(--txt);background:var(--surf)}
 /* ---------- 全站统一提示(替代原生 alert/confirm): jxqToast 轻提示 + jxqConfirm 确认框 ---------- */
 .jxq-tw{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;
   pointer-events:none;width:max-content;max-width:calc(100vw - 28px)}
 .jxq-toast{background:var(--card2);border:1px solid var(--line2);color:var(--txt);font-size:13px;font-weight:600;letter-spacing:.3px;
   padding:9px 16px;border-radius:999px;box-shadow:var(--shadow-2);animation:jxqIn .22s var(--ease);max-width:100%;text-align:center;word-break:break-word}
 .jxq-toast.ok{border-color:rgba(62,207,111,.5)}
 .jxq-toast.bad{border-color:rgba(255,69,58,.55)}
 .jxq-toast.out{animation:jxqOut .3s var(--ease) forwards}
 @keyframes jxqIn{from{opacity:0;transform:translateY(10px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
 @keyframes jxqOut{to{opacity:0;transform:translateY(8px) scale(.96);filter:blur(5px)}}
 .jxq-m{position:fixed;inset:0;z-index:110;background:var(--scrim);
   display:flex;align-items:center;justify-content:center;padding:16px;animation:jxqFade .18s var(--ease)}
 @keyframes jxqFade{from{opacity:0}to{opacity:1}}
 .jxq-mb{width:min(420px,100%);background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-2);
   animation:jxqIn .2s var(--ease)}
 .jxq-mt{font-size:15px;font-weight:800;color:var(--txt);letter-spacing:.5px}
 .jxq-mn{font-size:13px;color:var(--sub);line-height:1.7;margin-top:9px}
 .jxq-mf{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
 @media (max-width:640px){.jxq-tw{bottom:20px}.jxq-mb{padding:18px}}

/* ============================================================
   动效与鼠标交互 v3.2
   - 指针类效果(涟漪 / 光标跟随高光 / 轻微倾斜 / 磁吸)由 auth-nav.js 的 fx IIFE 驱动, 仅桌面精细指针启用
   - `?static`(html.no-anim) 与系统「减少动效」下整体不生效(见上方全局 kill-switch)
   - 高光走 z-index:-1 + isolation:isolate → 落在卡片底色之上、文字之下, 不遮内容
   ============================================================ */
 :root{
   --dur-1:.16s; --dur-2:.26s; --dur-3:.42s;
   --spot-2:rgba(255,255,255,.9);            /* 光标跟随高光(暗色主题) */
   --nav-bg-strong:rgba(250,249,246,.97);        /* 滚动态顶栏 */
 }
 

 /* 1) 按压反馈: 全站可点元素统一"按下去"的手感 */
 .btn:active,.chip:active,.cat:active,.gtab:active,.tchip:active,.pager button:active,
 .mode-switch .ms:active,.ad-side button:active,.conv:active,.sort button:active,.ts-cat button:active{
   transform:translateY(1px) scale(.985)
 }
 /* 1b) 主按钮悬停流光(掠过式高光) */
 .btn.primary{position:relative;overflow:hidden}
 .btn.primary::after{content:"";position:absolute;top:-12%;bottom:-12%;width:38%;left:-62%;pointer-events:none;z-index:0;
   background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-18deg);
   transition:left .62s var(--ease-out)}
 .btn.primary:hover::after{left:122%}
 /* 1c) 点击涟漪 */
 .rip{position:absolute;z-index:0;border-radius:50%;pointer-events:none;
   background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);
   transform:translate(-50%,-50%) scale(.06);animation:jxqRip .6s var(--ease-out) forwards}
 .rip{background:radial-gradient(circle,rgba(24,22,20,.16),rgba(24,22,20,0) 70%)}
 @keyframes jxqBlurIn{from{filter:blur(9px)}to{filter:blur(0)}}
@keyframes jxqBlurInSm{from{filter:blur(5px)}to{filter:blur(0)}}
@keyframes jxqRip{60%{opacity:.5}to{transform:translate(-50%,-50%) scale(1);opacity:0}}

 /* 2) 卡片: 光标跟随高光 + 抬升/倾斜的过渡 */
 .fx-card{position:relative;isolation:isolate}
 .fx-card:hover{will-change:transform}
 .fx-card.fx-spot::before,.fx-card.fx-spot-a::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
   pointer-events:none;opacity:0;transition:opacity var(--dur-3) var(--ease-out);
   background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--spot-2),transparent 62%)}
 .fx-card.fx-spot:hover::before,.fx-card.fx-spot-a:hover::after{opacity:1}
 .fx-card.fx-card{transition:transform .24s var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out)}

 /* 3) 顶栏滚动态(只加深底色/阴影, 不改高度 → 不产生布局位移) + 顶部滚动进度条 */
 .nav.scrolled{background:var(--nav-bg-strong);box-shadow:0 14px 36px rgba(0,0,0,.34),var(--edge)}
 .nav.scrolled{box-shadow:0 12px 30px rgba(24,22,20,.12),var(--edge)}
 #jxqProg{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;pointer-events:none;transform-origin:0 50%;
   transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--red),var(--gold));opacity:.85;
   transition:transform .12s linear,opacity var(--dur-2) var(--ease)}
 #jxqProg[data-idle="1"]{opacity:0}


 /* 5) 箭头/图标微位移 */
 .hcard .hgo,.pcard .pgo,.tcard .tgo{transition:transform var(--dur-3) var(--ease-out),color var(--dur-2) var(--ease)}
 .hcard:hover .hgo{transform:translateX(4px)}

 /* 6) 列表错峰入场(数字滚动在各页内实现, 带后台节流兜底) */
 .fx-stagger>*{transition-delay:calc(var(--i,0) * 55ms)}

 @media (prefers-reduced-motion: reduce){
   #jxqProg{display:none}
   .nav-dd-menu,.toast,.jxq-t,.jxq-mb,.cs-panel,.nn-panel,.nn-tip{animation:none!important}
   *{filter:none!important}
   .fx-card.fx-spot::before,.fx-card.fx-spot-a::after{display:none!important}
   .btn.primary::after{display:none}
 }
 @media (max-width:640px){
   #jxqProg{height:2px}
 }