/* ============================================================================
 * css/theme-v3.css · 全站 V3 风格统一外层（抹平外壳差异层）
 * ----------------------------------------------------------------------------
 * 作用：在 old 站既有 DOM 结构与 JS 交互完全不变的前提下，
 *       把 v2 侧边栏外壳改写为新首页 V3 的顶部导航外观，
 *       并统一按钮、卡片、标题、间距与页脚的视觉语言。
 *
 * 加载顺序约束：必须在 css/styles_v2.css 之后引入。
 * 兼容性：仅使用 CSS 覆写，不动 #siteHeader / #siteFooter 的结构与类名，
 *         因此 js/layout_v2.js 的菜单开合、高亮、滚动等交互零影响。
 *
 * 对齐基线（源自 ../css/tokens.css 与 ../css/style.css）：
 *   导航 72px 高、滚动后 --ink-glass 毛玻璃、链接 active 为 14x2 金色下划线
 *   按钮 9999px 胶囊、暖金底、4.8s 周期 25° 扫光
 *   容器 max-width 1240px、左右留白 clamp(20px,4vw,48px)
 * ==========================================================================*/

:root{
  /* 字体别名：v2 用 display/body，V3 用 serif/sans，此处双向打通 */
  --font-serif:var(--font-display);
  --font-sans:var(--font-body);

  /* 容器与节奏：对齐 V3 首页同样的呼吸感 */
  --max-w:1240px;
  --container-px:clamp(20px,4vw,48px);
  --section-py:clamp(72px,8vw,112px);
  --header-h:72px;

  /* V3 质感补充 */
  --ink-glass:rgba(20,20,18,.85);
  --line-strong:rgba(232,228,220,.18);
  --gold-light:#dfc593;
  --gold-border:rgba(201,169,110,.35);
  --shadow-cta:0 4px 16px rgba(201,169,110,.25);
  --shadow-cta-hover:0 8px 24px rgba(201,169,110,.40);
  --shadow-card:0 4px 24px -6px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.08);
  --shadow-card-hover:0 12px 36px -8px rgba(0,0,0,.7), 0 0 0 1px var(--gold-border), inset 0 1px 2px rgba(255,255,255,.15);
  --duration-fast:160ms;
  --duration-smooth:400ms;
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* 文字层级对齐 V3（V3 的 faint 略亮，可读性更好） */
  --paper-faint:#757169;
}

/* ==========================================================================
 * 一、抹平原有侧边栏预留
 * 说明：qa.html 等自包含页在 body 上为侧边栏留出了 260px 左内边距。
 *       改为顶部导航后该预留必须清零，否则内容整体右偏。
 * ========================================================================*/
body{ padding-left:0; }

/* qa.html 自带一套悬浮胶囊导航（.site-nav），与注入的统一外壳功能重复，
   会造成同屏双导航。此处隐藏，交由统一外壳承担导航职责。 */
.site-nav{ display:none; }

/* ==========================================================================
 * 二、顶部导航：侧边栏改造为横向吸顶条
 * ========================================================================*/
.nav{
  position:fixed;
  top:0; left:0; right:0; bottom:auto;
  width:100%;
  height:var(--header-h);
  z-index:100;
  padding:0;
  overflow:visible;
  background:transparent;
  border-right:none;
  border-bottom:1px solid transparent;
  box-shadow:none;
  flex-direction:row;
  transition:background-color var(--duration-smooth) var(--ease-out),
             border-color var(--duration-smooth) var(--ease-out),
             box-shadow var(--duration-smooth) var(--ease-out);
}

/* 滚动后收束为 V3 同款毛玻璃 */
.nav.scrolled{
  background:var(--ink-glass);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 32px -8px rgba(0,0,0,.6);
}

/* 内层容器：横排三分区，宽度与留白贴合首页 container */
.nav .wrap{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:var(--max-w);
  height:100%;
  margin:0 auto;
  padding:0 var(--container-px);
}

/* Logo：去掉侧边栏的下划分隔 */
.logo{
  flex-shrink:0;
  padding:0;
  margin-bottom:0;
  border-bottom:none;
  font-size:1.125rem;
  letter-spacing:.03em;
  transition:color var(--duration-fast) var(--ease-out);
}
.logo:hover{ color:var(--gold-light); }
.logo-mark{
  width:32px; height:32px;
  border-radius:9px;
  font-size:.9375rem;
}

/* 导航链接：横向排列 + 金色 active 指示条 */
.nav-links{
  flex-direction:row;
  align-items:center;
  gap:28px;
  padding:0;
  margin:0 8px;
  flex:1 1 auto;
  justify-content:flex-end;
}
.nav-links a{
  position:relative;
  padding:6px 0;
  font-size:.9375rem;
  font-weight:400;
  white-space:nowrap;
  background:transparent;
  border-radius:0;
  transition:color var(--duration-fast) var(--ease-out);
}
.nav-links a::before{ display:none; }        /* 移除侧边栏左侧竖条 */
.nav-links a:hover{ color:var(--paper); background:transparent; }
.nav-links a.active{
  color:var(--paper);
  background:transparent;
  font-weight:500;
}
.nav-links a.active::after{
  content:'';
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:14px; height:2px;
  background:var(--gold);
  border-radius:9999px;
}

/* 右侧 CTA：V3 胶囊按钮 */
.nav-cta{
  flex-shrink:0;
  margin:0;
  padding:8px 20px;
  font-size:.875rem;
  font-weight:600;
  color:#141412;
  border-radius:9999px;
  box-shadow:var(--shadow-cta);
  transition:all var(--duration-fast) var(--ease-out);
}
.nav-cta:hover{
  background:var(--gold-light);
  transform:translateY(-1px);
  box-shadow:var(--shadow-cta-hover);
}
.nav-cta:active{ transform:scale(.98); }

/* 侧边栏底部直播信息在顶栏形态下隐藏（信息已由页面内容承载） */
.sidebar-footer{ display:none; }

/* ==========================================================================
 * 二、主内容区：让出导航空间，容器宽度对齐首页
 * ========================================================================*/
.content{
  margin-left:0;
  padding-top:var(--header-h);
  min-height:100vh;
}
.wrap{
  max-width:var(--max-w);
  padding:0 var(--container-px);
}
.section{ padding:var(--section-py) 0; }

/* 滚动进度条覆盖全宽（原从侧边栏右侧起算） */
.scroll-progress{ left:0; z-index:120; }
.skip-link:focus{ left:16px; }

/* ==========================================================================
 * 三、按钮：统一为 V3 胶囊 Button-in-Button 观感
 * ========================================================================*/
.btn{
  position:relative;
  overflow:hidden;
  padding:12px 26px;
  font-size:.9375rem;
  font-weight:600;
  border-radius:9999px;
  transition:all var(--duration-fast) var(--ease-out);
}
.btn .ic{ transition:transform var(--duration-fast) var(--ease-out); }
.btn:hover .ic{ transform:translateX(3px); }

.btn-primary{
  color:#141412;
  box-shadow:var(--shadow-cta);
}
/* 4.8s 周期 25° 扫光，与新首页主 CTA 完全一致 */
.btn-primary::after{
  content:'';
  position:absolute;
  top:-50%; left:-70%;
  width:45%; height:200%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:rotate(25deg);
  animation:shimmerBeam 4.8s infinite cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
@keyframes shimmerBeam{
  0%{ left:-70%; }
  22%{ left:140%; }
  100%{ left:140%; }
}
.btn-primary:hover{
  background:var(--gold-light);
  transform:translateY(-2px);
  box-shadow:var(--shadow-cta-hover), 0 0 20px var(--gold-glow);
}
.btn-primary:active{ transform:scale(.98); }

.btn-cta-highlight,
.btn-outline{
  border-color:var(--gold-border);
  color:var(--gold-light);
  border-radius:9999px;
}
.btn-cta-highlight:hover,
.btn-outline:hover{
  background:var(--gold-soft);
  border-color:var(--gold);
  color:var(--gold-light);
  transform:translateY(-2px);
}

/* ==========================================================================
 * 四、标题与区块：统一杂志式节奏
 * ========================================================================*/
.sec-title{
  font-family:var(--font-serif);
  font-weight:700;
  letter-spacing:-.01em;
}
.sec-kicker{ letter-spacing:.14em; }

/* ==========================================================================
 * 五、页脚：对齐首页深墨收束区
 * ========================================================================*/
.footer{
  background:var(--ink);
  padding:56px 0 24px;
  margin-top:0;
  border-top:1px solid var(--line);
  color:var(--paper-dim);
}
.footer .wrap{
  max-width:var(--max-w);
  padding:0 var(--container-px);
}
.footer .top{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 2fr;
  gap:40px;
  margin-bottom:32px;
}
.footer .brand{ font-size:1.25rem; }
.footer .slogan{ font-size:.8125rem; line-height:1.7; }
.footer .links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:18px 20px;
  justify-content:stretch;
}
.footer .links .footer-col{ gap:12px; }
.footer .links a{
  font-size:.875rem;
  transition:color var(--duration-fast) var(--ease-out);
}
.footer .links a:hover{ color:var(--gold-light); }

/* 重点链接卡片：V3 双层微光质感 */
.fl-card{
  border-radius:14px;
  padding:14px 18px;
  background:var(--ink-2);
  transition:all var(--duration-fast) var(--ease-out);
}
.fl-card:hover{
  background:var(--ink-3);
  border-color:var(--gold-border);
  transform:translateY(-2px);
}
.fl-name{ font-size:.875rem; }
.fl-url{ font-size:.6875rem; color:var(--gold); }

.footer .divider{ background:var(--line); margin:24px 0 18px; }
.footer .copyright{
  font-size:.75rem;
  text-align:center;
  line-height:1.8;
}

/* ==========================================================================
 * 六、响应式：窄屏回收为抽屉式导航
 * ========================================================================*/
@media (max-width:1080px){
  .nav-links{ gap:20px; }
  .logo{ font-size:1rem; }
}

@media (max-width:900px){
  :root{ --sidebar-w:0px; }

  .nav{
    width:280px;
    height:auto;
    bottom:0;
    background:var(--ink-2);
    border-right:1px solid var(--line);
    border-bottom:none;
    padding:80px 0 24px;
    overflow-y:auto;
    flex-direction:column;
    transform:translateX(-100%);
    transition:transform .35s var(--ease);
  }
  .nav.scrolled{
    background:var(--ink-2);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-bottom:none;
    box-shadow:none;
  }
  .nav.open{
    transform:translateX(0);
    box-shadow:0 0 60px rgba(0,0,0,.5);
  }
  .nav .wrap{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    height:auto;
    padding:0 20px;
  }
  .logo{
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line-soft);
  }
  .nav-links{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin:0 0 12px;
    justify-content:flex-start;
  }
  .nav-links a{
    padding:12px 14px;
    font-size:1rem;
    border-radius:10px;
  }
  .nav-links a:hover{ background:var(--ink-3); }
  .nav-links a.active{
    background:var(--gold-soft);
    color:var(--gold);
    font-weight:600;
  }
  .nav-links a.active::after{ display:none; }
  .nav-cta{
    text-align:center;
    padding:11px 20px;
    border-radius:9999px;
  }
  .sidebar-footer{ display:block; }

  .nav-toggle{
    display:flex;
    position:fixed;
    top:14px; left:16px;
    z-index:110;
    width:42px; height:42px;
    align-items:center;
    justify-content:center;
    background:var(--ink-glass);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border:1px solid var(--line);
    border-radius:10px;
    cursor:pointer;
  }
  .nav-toggle:hover{ background:var(--ink-3); }

  /* 汉堡图标：v2 样式表缺失 .nt-ico 定义（其规则在未被加载的 v1 中），此处补齐；
     同时以纯 CSS 实现「三横线 → 叉号」形变，不依赖 v1 才注入的 .nt-x 元素 */
  .nt-ico{ position:relative; display:block; width:20px; height:14px; }
  .nt-ico i{
    position:absolute; left:0;
    width:20px; height:2px;
    background:var(--paper);
    border-radius:2px;
    transition:all .3s var(--ease);
  }
  .nt-ico i:nth-child(1){ top:0; }
  .nt-ico i:nth-child(2){ top:6px; }
  .nt-ico i:nth-child(3){ top:12px; }
  .nav-toggle.open .nt-ico i:nth-child(1){ top:6px; transform:rotate(45deg); }
  .nav-toggle.open .nt-ico i:nth-child(2){ opacity:0; transform:scaleX(.2); }
  .nav-toggle.open .nt-ico i:nth-child(3){ top:6px; transform:rotate(-45deg); }

  .content{ padding-top:60px; }
  .wrap{ padding:0 24px; }

  .footer .top{ grid-template-columns:1fr; gap:28px; }
  .footer .links{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .footer .links{ grid-template-columns:1fr; }
}

/* 无障碍：系统开启减弱动效时关闭扫光与位移 */
@media (prefers-reduced-motion:reduce){
  .btn-primary::after{ animation:none; display:none; }
  .btn:hover,
  .nav-cta:hover,
  .fl-card:hover{ transform:none; }
}