/* ============================================================
   v2 设计层（2026-11）
   ── 只做「覆盖」：变量、顶栏、导航、按钮、卡片、页脚、标题节奏
   ── 上面的旧规则一律保留，页面结构不用改
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --maxw:1200px;
  --radius:18px;
  --radius-sm:12px;
  --radius-xs:8px;

  /* 暗色：更深的墨蓝，主色换成「靛 + 薄荷」 */
  --bg:#070a11;
  --bg-2:#0a0e18;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --surface-3:rgba(255,255,255,.115);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.17);
  --text:#edf0f8;
  --muted:#a2acc2;
  --dim:#7d88a1;

  --accent:#8b93ff;
  --accent-2:#4fd6c4;
  --accent-3:#6ea8fe;
  --accent-ink:#080b16;
  --accent-soft:rgba(139,147,255,.14);
  --accent-soft-2:rgba(79,214,196,.13);

  --glow-a:rgba(139,147,255,.26);
  --glow-b:rgba(79,214,196,.20);
  --shadow:0 26px 70px -30px rgba(0,0,0,.85);
  --shadow-sm:0 14px 34px -18px rgba(0,0,0,.7);
  --sheet:rgba(10,14,24,.72);
  --line-strong:rgba(255,255,255,.22);
}

[data-theme="light"]{
  --bg:#f6f5f0;
  --bg-2:#efece4;
  --surface:rgba(255,255,255,.72);
  --surface-2:#fffdf9;
  --surface-3:#fffdf9;
  --line:rgba(24,26,44,.12);
  --line-2:rgba(24,26,44,.22);
  --text:#131726;
  --muted:#4e5770;
  --dim:#6b7488;

  --accent:#3f4dd8;
  --accent-2:#0f9d8a;
  --accent-3:#2f63d8;
  --accent-ink:#ffffff;
  --accent-soft:rgba(63,77,216,.10);
  --accent-soft-2:rgba(15,157,138,.10);

  --glow-a:rgba(63,77,216,.16);
  --glow-b:rgba(15,157,138,.12);
  --shadow:0 24px 60px -30px rgba(30,34,66,.35);
  --shadow-sm:0 12px 28px -16px rgba(30,34,66,.28);
  --sheet:rgba(255,253,249,.80);
  --line-strong:rgba(24,26,44,.28);
}

[data-theme="amoled"]{
  --bg:#000;
  --bg-2:#05060a;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --surface-3:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.19);
  --sheet:rgba(4,5,9,.78);
}

body{
  font-size:15.5px;
  line-height:1.72;
  letter-spacing:-.004em;
  background-image:
    radial-gradient(120% 70% at 50% -18%,var(--glow-a),transparent 62%),
    radial-gradient(80% 50% at 96% 4%,var(--glow-b),transparent 60%);
  background-attachment:fixed;
}

::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- 2. 顶栏：浮起来的一条 ---------- */
.topbar{
  position:sticky;top:0;z-index:70;
  padding:10px 0 6px;
  background:transparent;
  border-bottom:0;
}
.topbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 8%,transparent 100%);opacity:.85}
.topbar .wrap{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:8px 12px 8px 14px;
  border:1px solid var(--line);border-radius:16px;
  background:var(--sheet);
  -webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.topbar.scrolled .wrap{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.topbar.scrolled::before{opacity:1}
.brand{display:inline-flex;align-items:center;gap:10px;padding:2px 6px 2px 2px;border-radius:10px;
  font-weight:700;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.brand:hover{color:var(--accent)}
.brand img{border-radius:9px}
.brand span{font-size:16.5px}

.nav-links{gap:2px;padding:2px;border-radius:12px;background:transparent}
.nav-links a{
  position:relative;padding:7px 11px;border-radius:9px;
  font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;
  transition:background .2s,color .2s;
}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a.active,.nav-links a[aria-current="page"]{
  color:var(--text);background:var(--surface-2);font-weight:650;
}
.nav-links a.active::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.9}

.topbar-actions{gap:8px;margin-left:auto}
.topbar-actions .btn,.topbar-actions .btn-ghost{height:34px;padding:0 14px;font-size:13px}
.theme-toggle,.lang-toggle{height:34px;border-radius:10px}

/* ---------- 3. 按钮：统一成胶囊，主按钮走渐变 ---------- */
.btn,.btn-ghost,.hx-btn,.hx-quiet,.pjx-submit,.hx-cta{
  border-radius:999px;font-weight:600;letter-spacing:-.006em;
}
.btn{
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);box-shadow:0 10px 26px -16px var(--accent);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-2);background:var(--surface);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.hx-btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:0 14px 34px -18px var(--accent)}
.hx-quiet,.hx-cta{color:var(--accent)}

/* ---------- 4. 标题节奏：小字眉 + 紧字距大标题 ---------- */
h1,h2,h3{letter-spacing:-.022em;line-height:1.18}
.ms-head h1,.pjx-h1,.tb-head h1{
  font-size:clamp(32px,4.4vw,52px);
  font-weight:760;
  letter-spacing:-.035em;
}
.ms-lede,.pjx-lede,.tb-head p{font-size:16px;line-height:1.75;color:var(--muted);max-width:46em}
.eyebrow,.hx-num,.hx-kicker{letter-spacing:.14em;font-size:11.5px;text-transform:uppercase;font-weight:650}

/* ---------- 5. 卡片：更薄、更亮、悬停抬一点 ---------- */
.card,.pjx-card,.alb-card,.mus-card,.mus-panel,.mus-panel-head,.doc-card{
  border-radius:var(--radius-sm);
}
.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:none;
}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.card-ic{border-radius:11px}
.tag{border-radius:999px;font-size:11.5px;padding:3px 9px}

/* ---------- 6. 页脚：修掉溢出，排成整齐的四栏 ---------- */
.footer{border-top:1px solid var(--line);margin-top:clamp(48px,8vw,96px);padding:clamp(34px,5vw,60px) 0 26px}
.footer-inner{flex-wrap:wrap;gap:18px}
.foot{display:grid;grid-template-columns:1.6fr repeat(3,minmax(120px,.7fr));gap:clamp(18px,4vw,48px);width:100%}
.foot-brand{display:flex;gap:12px;align-items:flex-start}
.foot-brand img{border-radius:9px;flex:0 0 auto}
.foot-brand b{font-size:15px;letter-spacing:-.01em}
.foot-brand p{margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--muted);max-width:26em}
.foot-col h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 10px;font-weight:650}
.foot-col ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.foot-col a{font-size:13.5px;color:var(--muted);text-decoration:none}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--dim)}
.foot-social{display:flex;gap:14px;flex-wrap:wrap}
.foot-social a{color:var(--muted);text-decoration:none}
.foot-social a:hover{color:var(--accent)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer-links a{font-size:13.5px;color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--accent)}
.footer-note{font-size:12.5px;color:var(--dim)}

/* ---------- 7. 零碎 ---------- */
.wrap{max-width:var(--maxw)}
input,select,textarea{font-family:inherit}
input[type="search"],input[type="text"],input[type="url"],select,textarea{border-radius:10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:980px){
  .foot{grid-template-columns:1fr 1fr;gap:22px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:15px}
  .topbar{padding:8px 0 4px}
  .topbar .wrap{padding:7px 10px;border-radius:14px}
  .nav-links{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .ms-head h1,.pjx-h1,.tb-head h1{font-size:clamp(28px,9vw,38px)}
}
@media (prefers-reduced-motion: reduce){
  .topbar .wrap,.card,.btn,.nav-links a{transition:none}
}

/* ms.css / home2.css 的变量优先级比 site.css 高，这里再钉一遍，
   同时把「首页写死的白色底」拉回全站底色 */
[data-theme="light"] body.hx-home{background:transparent}
body[data-theme="light"]{background:var(--bg)}
html{background:var(--bg)}
.topbar::before{background:linear-gradient(180deg,var(--bg) 12%,transparent 100%)}

/* 页脚的 .wrap 会跟 .footer-inner 的 padding 打架（后者把左右 padding 覆盖成 0），
   表现是页脚内容贴着屏幕边缘、右边的版权语被切掉。这里把左右内边距钉回来。 */
.footer > .wrap,
.footer .wrap.footer-inner{padding-left:clamp(18px,4vw,32px);padding-right:clamp(18px,4vw,32px)}
.footer-inner{gap:14px 24px}
.footer-links{flex:1 1 auto;min-width:0}
.footer-note{white-space:normal;max-width:100%}
@media (max-width:640px){
  .footer > .wrap,
  .footer .wrap.footer-inner{padding-left:18px;padding-right:18px}
}