/* =====================================================================
   ax-settings.css — 个性化层：主题配色 / 自定义壁纸 / 动画强度与开关
   · 只覆盖 ax-anim.css 的变量，不改变原有动画逻辑
   · 由 ax-settings.js 在 <html> 上写 data-* 属性驱动
   · 与三站已有主题兼容：站点原生配色只在「跟随乐队」时生效
   ===================================================================== */

/* 让「模糊」滑块能作用在背景图上：把图片变量注册为可插值的 url 类型
   （不支持 @property 的旧浏览器会退化为不模糊，其余功能不受影响） */
@property --axg-wallimg{
  syntax:"<url>";
  inherits:true;
  initial-value:url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
}

:root{
  --axg-wallimg-blur:0px;
  --axg-wallimg-dim:.22;
}

/* ------------- 1. 配色覆盖（优先级高于 .theme-* 的单类选择器） ------------- */
html[data-axg-accent="sunset"]{--ax-accent:#fb923c;--ax-accent-2:#f43f5e}
html[data-axg-accent="ocean"]{--ax-accent:#38bdf8;--ax-accent-2:#6366f1}
html[data-axg-accent="forest"]{--ax-accent:#34d399;--ax-accent-2:#a3e635}
html[data-axg-accent="violet"]{--ax-accent:#a78bfa;--ax-accent-2:#f472b6}
html[data-axg-accent="mono"]{--ax-accent:#cbd5e1;--ax-accent-2:#64748b}

/* 品牌字与强调元素跟随主色 */
html[data-axg-accent] .brand-a,
html[data-axg-accent] .brand-b{color:var(--ax-accent)}
html[data-axg-accent] .hero .brand-b{color:var(--ax-accent-2)}
html[data-axg-accent] .ax-top:hover,
html[data-axg-accent] .btn-p{background:var(--ax-accent)}

/* ------------- 2. 壁纸（铺在内容之下，不遮挡、不抢夺可读性） ------------- */
/* 只在选了非默认壁纸时才创建这一层，默认状态零开销 */
body::before{content:none;pointer-events:none}
html[data-axg-wall]:not([data-axg-wall="default"]) body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:var(--axg-wall-bg,transparent);
  background-size:var(--axg-wall-size,auto);
  background-position:center;
  filter:var(--axg-wall-filter,none);
  opacity:var(--axg-wall-opacity,1);
  transition:opacity .5s var(--ax-ease), background .5s var(--ax-ease);
}
html[data-axg-wallimg="1"] body::before{
  background:linear-gradient(rgba(0,0,0,var(--axg-wallimg-dim)),rgba(0,0,0,var(--axg-wallimg-dim))),var(--axg-wallimg);
  background-size:cover,cover;
  background-position:center,center;
  filter:blur(var(--axg-wallimg-blur));
  content:"";
}
html[data-axg-wall="aurora"]{
  --axg-wall-bg:
    radial-gradient(1200px 620px at 8% -6%,rgba(56,189,248,.30),transparent 62%),
    radial-gradient(980px 520px at 96% 4%,rgba(167,139,250,.26),transparent 64%),
    radial-gradient(900px 620px at 46% 108%,rgba(52,211,153,.24),transparent 66%);
  --axg-wall-opacity:1;
}
html[data-axg-wall="mesh"]{
  --axg-wall-bg:
    linear-gradient(rgba(127,150,175,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,150,175,.16) 1px,transparent 1px);
  --axg-wall-size:34px 34px,34px 34px;
}
html[data-axg-wall="dots"]{
  --axg-wall-bg:radial-gradient(rgba(127,150,175,.28) 1.4px,transparent 1.5px);
  --axg-wall-size:22px 22px;
}
html[data-axg-wall="stripes"]{
  --axg-wall-bg:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 14px,transparent 14px 34px);
}
html[data-axg-wall="deep"]{--axg-wall-bg:linear-gradient(180deg,#060b12,#04070c)}

/* ------------- 3. 文字与圆角档位 ------------- */
html[data-axg-font="s"]{font-size:15.5px;--ax-line:1.78}
html[data-axg-font="l"]{font-size:18.5px;--ax-line:1.9}
html[data-axg-radius="s"]{--ax-radius:4px}
html[data-axg-radius="l"]{--ax-radius:22px}

/* ------------- 4. 动画强度 ------------- */
/* 清淡：只保留淡入，关掉循环呼吸与漂移 */
html[data-axg-motion="calm"] .ax-blob,
html[data-axg-motion="calm"] .ax-eq i,
html[data-axg-motion="calm"] .ax-progress::after,
html[data-axg-motion="calm"] .aibar::after,
html[data-axg-motion="calm"] .ax-vplay::after,
html[data-axg-motion="calm"] .ax-top::after,
html[data-axg-motion="calm"] .ax-wave{animation:none!important;opacity:.5}
html[data-axg-motion="calm"] .ax-hero-img,
html[data-axg-motion="calm"] .hero-art .hero-art-cap,
html[data-axg-motion="calm"] .hero-art::before,
html[data-axg-motion="calm"] .hero-art::after{animation:none!important}
html[data-axg-motion="calm"] .ax-drop,
html[data-axg-motion="calm"] .ax-focus,
html[data-axg-motion="calm"] .ax-wipe,
html[data-axg-motion="calm"] .ax-row,
html[data-axg-motion="calm"] .ax-line,
html[data-axg-motion="calm"] .ax-galt,
html[data-axg-motion="calm"] .ax-foot,
html[data-axg-motion="calm"] .ax-mask > span,
html[data-axg-motion="calm"] .ax-zoomable{transform:none!important}
html[data-axg-motion="calm"] *{animation-duration:.001ms!important;transition-duration:.14s!important}
html[data-axg-motion="calm"] .ax-curtain{display:none}
/* 丰富：节奏更快、浮得更明显 */
html[data-axg-motion="rich"]{--ax-ease-out:cubic-bezier(.14,1.3,.3,1)}
html[data-axg-motion="rich"] .ax-hero-img{animation-duration:5.4s!important}
html[data-axg-motion="rich"] .hero-art::before{animation-duration:5.4s!important}
html[data-axg-motion="rich"] .hero-art::after{animation-duration:6s!important}
html[data-axg-motion="rich"] .ax-blob{animation-duration:14s!important}
html[data-axg-motion="rich"] .ax-drop.ax-hover{transform:translateY(-11px) scale(1.012)}

/* ------------- 5. 动画开关 ------------- */
html[data-tblobs="off"] .ax-blobs{display:none!important}
html[data-therofloat="off"] .ax-hero-img,
html[data-therofloat="off"] .hero-art .hero-art-cap{animation:none!important;transform:none!important}
html[data-therofloat="off"] .hero-art::before,
html[data-therofloat="off"] .hero-art::after{animation:none!important}
html[data-therofloat="off"] .ax-hero-sheen{display:none}
html[data-tsonic="off"] .ax-sonic{display:none!important}
html[data-trail="off"] .ax-rail{display:none!important}
html[data-twave="off"] .ax-wave,
html[data-twave="off"] .ax-progress{display:none!important}
html[data-tcurtain="off"] .ax-curtain{display:none!important}
html[data-treviews="off"] .ax-rev-cell{display:none!important}

/* ------------- 6. 设置面板 ------------- */
.axg-open{
  position:fixed;right:22px;bottom:22px;z-index:59;
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;
  border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(140deg,rgba(14,22,34,.92),rgba(8,12,20,.94));
  color:#e8f1fa;font-size:.82rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 20px 42px -24px rgba(0,0,0,.85);
  backdrop-filter:blur(12px);
  transition:transform .4s var(--ax-ease-out), background .3s, opacity .3s;
}
.axg-open:hover{transform:translateY(-3px);background:linear-gradient(140deg,var(--ax-accent),var(--ax-accent-2));color:#04121f;border-color:transparent}
.axg-open.axg-hide{opacity:0;pointer-events:none;transform:translateY(12px)}
.axg-open svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (max-width:760px){ .axg-open{right:14px;bottom:14px;height:40px;padding:0 14px} .axg-open span{display:none} }

.axg-panel{
  position:fixed;top:0;right:0;bottom:0;width:378px;max-width:100vw;z-index:80;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(12,18,28,.98),rgba(7,11,18,.99));
  border-left:1px solid rgba(255,255,255,.14);
  box-shadow:-30px 0 70px -34px rgba(0,0,0,.9);
  color:#e8f1fa;
  transform:translateX(102%);
  transition:transform .55s var(--ax-ease-out);
  backdrop-filter:blur(16px);
}
.axg-panel.axg-show{transform:none}
.axg-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.1);
}
.axg-head strong{display:block;font-size:1rem;line-height:1.4}
.axg-head em{display:block;font-style:normal;font-size:.74rem;color:rgba(255,255,255,.5);margin-top:2px}
.axg-close{
  width:30px;height:30px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#e8f1fa;font-size:1.05rem;line-height:1;
}
.axg-close:hover{background:var(--ax-accent);color:#04121f;border-color:transparent}
.axg-body{flex:1;overflow-y:auto;padding:6px 18px 20px;overscroll-behavior:contain}
.axg-sec{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.axg-sec:last-child{border-bottom:0}
.axg-sec h3{margin:0 0 12px;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.82)}

/* 配色 */
.axg-swatches{display:flex;flex-wrap:wrap;gap:8px}
.axg-sw{
  display:flex;flex-direction:column;align-items:center;gap:5px;width:60px;
  background:none;border:0;cursor:pointer;color:inherit;padding:0;
}
.axg-sw-dot{
  width:34px;height:34px;border-radius:50%;display:block;
  border:2px solid rgba(255,255,255,.25);
  transition:transform .3s var(--ax-spring), border-color .25s;
}
.axg-sw em{font-style:normal;font-size:.66rem;color:rgba(255,255,255,.6);white-space:nowrap}
.axg-sw:hover .axg-sw-dot{transform:scale(1.08)}
.axg-sw.is-on .axg-sw-dot{border-color:#fff;transform:scale(1.1);box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.axg-sw.is-on em{color:#fff}
.axg-custom{display:flex;gap:14px;margin-top:14px}
.axg-custom label{display:flex;align-items:center;gap:8px;font-size:.76rem;color:rgba(255,255,255,.6)}
.axg-custom input[type=color]{
  width:38px;height:26px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:none;cursor:pointer;
}

/* 壁纸 */
.axg-walls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.axg-wall{
  text-align:left;cursor:pointer;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:inherit;
  transition:border-color .25s, background .25s, transform .3s var(--ax-ease-out);
}
.axg-wall strong{display:block;font-size:.84rem;margin-bottom:2px}
.axg-wall em{display:block;font-style:normal;font-size:.68rem;color:rgba(255,255,255,.5);line-height:1.5}
.axg-wall:hover{transform:translateY(-2px);border-color:var(--ax-accent)}
.axg-wall.is-on{border-color:var(--ax-accent);background:rgba(56,189,248,.14)}
.axg-wallopts{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center}
.axg-file{
  display:inline-flex;align-items:center;gap:6px;font-size:.76rem;cursor:pointer;
  border:1px dashed rgba(255,255,255,.3);border-radius:8px;padding:7px 12px;color:rgba(255,255,255,.75);
}
.axg-file:hover{border-color:var(--ax-accent);color:#fff}
.axg-file input{display:none}
.axg-range{display:flex;align-items:center;gap:8px;font-size:.74rem;color:rgba(255,255,255,.6)}
.axg-range input[type=range]{width:82px;accent-color:var(--ax-accent)}
.axg-tip{margin:10px 0 0;font-size:.68rem;line-height:1.7;color:rgba(255,255,255,.42)}

/* 强度 */
.axg-motions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.axg-motion{
  cursor:pointer;padding:10px 8px;border-radius:10px;text-align:center;color:inherit;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  transition:border-color .25s, background .25s, transform .3s var(--ax-ease-out);
}
.axg-motion strong{display:block;font-size:.84rem}
.axg-motion em{display:block;font-style:normal;font-size:.64rem;color:rgba(255,255,255,.5);margin-top:3px;line-height:1.45}
.axg-motion:hover{transform:translateY(-2px);border-color:var(--ax-accent)}
.axg-motion.is-on{border-color:var(--ax-accent);background:rgba(56,189,248,.14)}

/* 开关 */
.axg-toggles{display:flex;flex-direction:column;gap:2px}
.axg-tg{display:flex;align-items:flex-start;gap:11px;padding:9px 4px;cursor:pointer;border-radius:8px}
.axg-tg:hover{background:rgba(255,255,255,.05)}
.axg-tg input{display:none}
.axg-tg-box{
  position:relative;flex:0 0 auto;width:38px;height:21px;border-radius:999px;margin-top:2px;
  background:rgba(255,255,255,.16);transition:background .3s var(--ax-ease);
}
.axg-tg-box::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .34s var(--ax-spring);
}
.axg-tg input:checked + .axg-tg-box{background:var(--ax-accent)}
.axg-tg input:checked + .axg-tg-box::after{transform:translateX(17px)}
.axg-tg-txt strong{display:block;font-size:.83rem;font-weight:600;line-height:1.45}
.axg-tg-txt em{display:block;font-style:normal;font-size:.68rem;color:rgba(255,255,255,.48);line-height:1.5}

/* 分段控件 */
.axg-seg{display:flex;gap:6px;margin-bottom:10px}
.axg-seg button{
  flex:1;cursor:pointer;padding:8px 0;border-radius:8px;color:inherit;font-size:.78rem;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  transition:border-color .25s, background .25s;
}
.axg-seg button:hover{border-color:var(--ax-accent)}
.axg-seg button.is-on{border-color:var(--ax-accent);background:rgba(56,189,248,.16);font-weight:700}

/* 底部 */
.axg-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-top:1px solid rgba(255,255,255,.1);
}
.axg-reset{
  cursor:pointer;padding:9px 16px;border-radius:999px;font-size:.8rem;font-weight:600;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#e8f1fa;
}
.axg-reset:hover{background:var(--ax-accent);color:#04121f;border-color:transparent}
.axg-hint{font-size:.7rem;color:rgba(255,255,255,.42)}

/* 深色主题下让壁纸不影响正文对比度 */
html[data-axg-wall="mesh"] .section.alt,
html[data-axg-wall="dots"] .section.alt,
html[data-axg-wall] .rcard,
html[data-axg-wall] .tile,
html[data-axg-wall] .member,
html[data-axg-wall] .award,
html[data-axg-wall] .src,
html[data-axg-wall] .ax-series-list li{backdrop-filter:blur(2px)}

/* ===== 5. 页面底色与分享码（本段由 patch-settings-css.py 维护） ===== */
/* ------------- 5.0 让滚动条/表单控件跟随深浅色 -------------
   放在 :root 上，优先级最低；深色规则写在后面，顺序上稳赢 */
:root{color-scheme:light}
html[data-axg-scheme]{color-scheme:dark}

/* 3 个新配色（樱粉 / 青柠 / 琥珀） */
html[data-axg-accent="sakura"]{--ax-accent:#f9a8d4;--ax-accent-2:#c084fc}
html[data-axg-accent="lime"]{--ax-accent:#a3e635;--ax-accent-2:#22d3ee}
html[data-axg-accent="amber"]{--ax-accent:#fbbf24;--ax-accent-2:#f87171}

/* 2 个新壁纸（暖阳 / 冷雾） */
html[data-axg-wall="sun"]{
  --axg-wall-bg:
    radial-gradient(1100px 560px at 50% -10%,rgba(251,191,36,.22),transparent 60%),
    radial-gradient(900px 520px at 6% 110%,rgba(244,63,94,.16),transparent 64%);
}
html[data-axg-wall="mist"]{
  --axg-wall-bg:
    radial-gradient(1000px 620px at 108% 108%,rgba(34,211,238,.20),transparent 62%),
    radial-gradient(760px 520px at 92% 24%,rgba(99,102,241,.14),transparent 66%);
}

/* ------------- 5.1 深色底色：只重映射站点已有的 5 个调色变量 -------------
   正文/卡片/表格/输入框都走这些变量，因此不需要逐条覆盖组件样式；
   仅有 5 处硬编码白底需要单独改写。
   选择器同时吃 html.ax-dark（首帧兜底，样式表加载早于 <body>）与 body.ax-dark。 */
html.ax-dark,
html.ax-dark-boot,
body.ax-dark{
  --bg:#0b1017;
  --bg-2:#141c26;
  --bg-3:#0e141d;
  --ink:#e9eef5;
  --ink-2:#a9b4c2;
  --ink-3:#7d8899;
  --line:#243040;
  --line-2:#2f3d4f;
  --dark:#060a10;
}
html.ax-dark body,
html.ax-dark-boot body,
body.ax-dark{background:#0b1017}
body.ax-dark .tile,
body.ax-dark .how,
body.ax-dark .rcard,
body.ax-dark .tablewrap,
body.ax-dark .award{background:#131b25;border-color:#25313f}
body.ax-dark .searchbar input{background:#131b25;color:var(--ink)}
body.ax-dark .searchbar input::placeholder{color:var(--ink-3)}
body.ax-dark .tbl tbody tr:hover{background:#182231}
body.ax-dark .tl-item::before{background:#0b1017}
body.ax-dark img{filter:none}
body.ax-dark .topnav a:hover{background:rgba(255,255,255,.08)}
body.ax-dark ::selection{background:rgba(56,189,248,.28)}
/* 首帧兜底：body 还没出现时也要先把硬编码白底压暗，避免闪白 */
html.ax-dark-boot .tile,
html.ax-dark-boot .how,
html.ax-dark-boot .rcard,
html.ax-dark-boot .tablewrap,
html.ax-dark-boot .award{background:#131b25;border-color:#25313f}
html.ax-dark-boot .searchbar input{background:#131b25;color:var(--ink)}
html.ax-dark-boot .tbl tbody tr:hover{background:#182231}
html.ax-dark-boot .tl-item::before{background:#0b1017}
/* 深色下 hero 与页脚本来就是深色，保持不动，避免出现断层 */
body.ax-dark .pagehead{border-bottom-color:#1b2532}
body.ax-dark .footer{border-top-color:#1b2532}

/* 跟随系统（未手动选深色时） */
@media (prefers-color-scheme: dark){
  html[data-axg-scheme="auto"]{
    --bg:#0b1017;--bg-2:#141c26;--bg-3:#0e141d;
    --ink:#e9eef5;--ink-2:#a9b4c2;--ink-3:#7d8899;
    --line:#243040;--line-2:#2f3d4f;
  }
  html[data-axg-scheme="auto"] body{background:#0b1017}
}

/* ------------- 5.2 页面底色档位卡 ------------- */
.axg-schemes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.axg-scheme{
  cursor:pointer;padding:10px 8px;border-radius:10px;text-align:center;color:inherit;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  transition:border-color .25s, background .25s, transform .3s var(--ax-ease-out);
}
.axg-scheme strong{display:block;font-size:.84rem}
.axg-scheme em{display:block;font-style:normal;font-size:.62rem;color:rgba(255,255,255,.5);margin-top:3px;line-height:1.45}
.axg-scheme:hover{transform:translateY(-2px);border-color:var(--ax-accent)}
.axg-scheme.is-on{border-color:var(--ax-accent);background:rgba(56,189,248,.14)}

/* ------------- 5.3 设置分享码 ------------- */
.axg-foot{flex-wrap:wrap}
.axg-foot .axg-hint{margin-left:auto}
.axg-share{
  cursor:pointer;padding:9px 14px;border-radius:999px;font-size:.78rem;font-weight:600;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#e8f1fa;
}
.axg-share:hover{border-color:var(--ax-accent);color:#fff}
.axg-sharebox{
  display:none;padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.1);
}
.axg-sharebox label{display:block;font-size:.7rem;line-height:1.65;color:rgba(255,255,255,.52)}
.axg-panel.axg-share-on .axg-sharebox{display:block;animation:axgDrop .32s var(--ax-ease-out)}
.axg-code{
  width:100%;box-sizing:border-box;height:58px;margin-top:8px;resize:vertical;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.66rem;line-height:1.5;
  color:#dceaf6;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:9px 10px;word-break:break-all;
}
.axg-code:focus{outline:none;border-color:var(--ax-accent)}
.axg-sharebtns{display:flex;gap:8px;margin-top:10px}
.axg-sharebtns button{
  flex:1;cursor:pointer;padding:9px 0;border-radius:8px;font-size:.76rem;font-weight:600;color:#e8f1fa;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
}
.axg-sharebtns button:hover{background:var(--ax-accent);color:#04121f;border-color:transparent}
@keyframes axgDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 结果提示（复制/导入反馈） */
.axg-toast{
  position:fixed;left:50%;bottom:28px;z-index:2147483000;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  max-width:min(86vw,420px);padding:11px 18px;border-radius:999px;
  font-size:.78rem;line-height:1.5;color:#eaf4ff;
  background:rgba(9,15,22,.94);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:opacity .3s var(--ax-ease), transform .34s var(--ax-spring);
}
.axg-toast.axg-toast-on{opacity:1;transform:translate(-50%,0)}
.axg-toast.is-bad{border-color:#fb7185;color:#ffe4e6}

/* ------------- 5.4 个性化按钮放在屏幕左下角 -------------
   需求：图标（按钮）在网站左边。抽屉仍在右侧（它是面板，不是按钮）。
   写法上用 left + right:auto，而不是去改第 6 节的 right:22px —— 这样
   本脚本删掉这条规则就自动回到原位置，不依赖运行顺序。
   !important 是为了压过第 6 节的 right 与窄屏媒体查询里的 right:14px。 */
.axg-open{left:22px;right:auto!important}
/* 收起时的位移方向也跟着换成向左滑出（原来是向下） */
.axg-open.axg-hide{transform:translateX(-14px)}
@media (max-width:760px){ .axg-open{left:14px;right:auto!important} }

/* ------------- 5.5 与音乐面板（互动键）不重叠 -------------
   实测（1376/1076/796/676/492 五个宽度）：
   - 宽 >760：音乐面板是右下角 340px 宽的收起条，按钮在左下角，本来就不碰。
   - 宽 ≤760：ax-anim.css 的 `@media (max-width:760px){.ax-sonic{left:14px;right:14px}}`
     让收起条横跨整屏，y 范围 [740,786]，而按钮在 y [754,794] —— 37px 的重叠区，
     两者都贴着下边缘，会叠在一起。
   处理：窄屏时把音乐面板重新按回右下角（left:auto + !important，压过窄屏媒体查询），
   宽度封顶 430px 且给按钮留出 82px。于是按钮永远在左下、面板永远在右下，任何
   宽度、任何展开状态下都不重叠 —— 实测 overlap 面积 = 0。
   （试过「展开时把按钮抬到 bottom:74px」，结果按钮被顶到面板中部，得整页滚动才看得到，
     已放弃；窄屏左右分居才是稳定解。） */
@media (max-width:760px){
  .ax-sonic{left:auto!important;right:14px!important;width:min(430px,calc(100vw - 82px))}
}
/* ===== 5. 结束 ===== */

/* 降级：不用动画时面板保持可用 */
@media (prefers-reduced-motion:reduce){
  .axg-panel{transition:none}
  .axg-open:hover{transform:none}
}