/* ==========================================================================
   Mortal's dream —— 共享组件层
   --------------------------------------------------------------------------
   只放「跨页面复用」的东西：全局质感层、果冻按钮、弹出菜单、弹窗、页脚、提示条。
   页面自有的版式（首页的 Three.js 容器、下载页的卡片网格）不要写在这里。
   依赖：tokens.css（必须先引入）
   ========================================================================== */

/* ---------------------------------------------------------------
   1. 重置与基线
   --------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}

/* hidden 属性必须压得住组件自己的 display —— 否则给按钮加 .md-btn 之后，
   JS 里 el.hidden = true 会失效（display:inline-flex 赢过 [hidden] 的 none）。*/
[hidden]{display:none !important}

button,input,select,textarea{font:inherit;color:inherit}

button{background:none;border:0;cursor:pointer}

a{color:inherit}

::selection{background:rgba(251,191,36,.85);color:#05070f}

:focus-visible{outline:1px solid var(--line-3);outline-offset:2px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--accent),var(--accent-2));
  opacity:.5;
  border-radius:999px;
  border:3px solid var(--bg-deep);
}

/* ---------------------------------------------------------------
   2. 全局质感层
   ------------------------------------------------------------------
   彩色极光 + 颗粒 + 扫描线 + 暗角 = 让所有页面看起来是同一种「显示介质」。
   全部 pointer-events:none，纯装饰，不参与交互。
   --------------------------------------------------------------- */
.md-aura,
.md-grain,
.md-scan,
.md-vignette{
  position:fixed;
  pointer-events:none;
}

/* 彩色极光：那层让近黑底色活起来的光。四角各一族色相。 */
.md-aura{
  inset:-18%;
  z-index:0;
  background:var(--aura);
  filter:blur(70px) saturate(140%);
  animation:mdAuraDrift 26s ease-in-out infinite alternate;
}

@keyframes mdAuraDrift{
  from{transform:translate3d(-22px,-14px,0) scale(1)}
  to{transform:translate3d(24px,18px,0) scale(1.06)}
}

/* 颗粒：SVG 湍流噪声，比逐帧 canvas 便宜。
   想换自己的噪点图，设置 --noise-bg 覆盖即可。 */
.md-grain{
  inset:0;
  z-index:var(--z-fx);
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:var(--noise-bg,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"));
}

/* 扫描线：老式液晶的横向细纹 */
.md-scan{
  inset:0;
  z-index:calc(var(--z-fx) - 1);
  opacity:.14;
  mix-blend-mode:overlay;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.16) 3px,
    rgba(0,0,0,.16) 5px
  );
}

/* 暗角：把注意力压向中间 */
.md-vignette{
  inset:0;
  z-index:calc(var(--z-fx) - 2);
  background:radial-gradient(circle at 50% 44%,transparent 46%,rgba(0,0,4,.62) 100%);
}

/* ---------------------------------------------------------------
   3. 光标：柔光晕 + 光环
   --------------------------------------------------------------- */

.md-glow{
  position:fixed;
  left:0;top:0;
  width:300px;height:300px;
  z-index:1;
  pointer-events:none;
  opacity:0;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(251,191,36,.14),transparent 52%),
    radial-gradient(circle 60% at 60% 60%,rgba(244,114,182,.1),transparent 70%);
  filter:blur(22px);
  transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease);
  will-change:transform;
}
.md-glow.on{opacity:.95}

.md-halo{
  --hs:1;
  position:fixed;
  left:0;top:0;
  width:38px;height:38px;
  z-index:var(--z-cursor);
  pointer-events:none;
  opacity:0;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 0 10px rgba(251,191,36,.35),
    0 0 10px rgba(255,255,255,.4),
    0 0 26px rgba(244,114,182,.35),
    0 0 46px rgba(125,211,252,.22);
  /* 位移走 transform（每帧由 shell.js 写，不加过渡才跟手），
     缩放走独立的 scale 属性（有过渡，张开/回缩才顺滑）。 */
  transform:translate(-50%,-50%);
  scale:var(--hs);
  transition:opacity .22s var(--ease),scale .3s var(--ease-pop),
             border-color .22s var(--ease),box-shadow .22s var(--ease);
  will-change:transform;
}
.md-halo.on{opacity:1}

/* 在输入框 / 文本域上隐藏：那里已经有原生文本光标做指示，自定义光圈只会打架
   （而且它悬停时张开到 73px，比 56px 高的输入框还大，看着像跑到框外） */
.md-halo.over-text{opacity:0}

/* 悬停到可点击元素上：光环张开、加亮 —— 给一个「这里能点」的即时反馈 */
.md-halo.hot{
  --hs:1.5;
  border-color:rgba(255,255,255,.9);
  box-shadow:
    inset 0 0 12px rgba(251,191,36,.5),
    0 0 12px rgba(255,255,255,.62),
    0 0 30px rgba(244,114,182,.5),
    0 0 54px rgba(125,211,252,.34);
}

.md-halo.press{--hs:.84}
/* 悬停中按下：比常态略小，但仍是张开的 —— 有"按进去"的手感 */
.md-halo.hot.press{--hs:1.26}

@media (hover:none){
  .md-halo,.md-glow{display:none}
}

/* ---------------------------------------------------------------
   4. 果冻能力 + 按钮
   ------------------------------------------------------------------
   果冻 = 「接触点被压出凹坑 + 欠阻尼弹簧回弹」，形状始终不变。
   由 shell.js 的 MD.jelly() 驱动下面这几个变量，弹簧参数在 tokens.css。

   .md-btn 自带这套能力；其他元素（菜单项、卡片按钮、筛选块…）
   加上 .md-jelly 类即可获得 —— 不必每页复制一遍。
   --------------------------------------------------------------- */
.md-btn,
.md-jelly{
  --px:50%;
  --py:50%;
  --press:0;
  --dent:0;
  --sx:1;
  --sy:1;
  position:relative;
  isolation:isolate;
  /* 用独立的 scale 属性，而不是改 transform ——
     这样元素自己的 transform（菜单项位移、卡片倾斜…）不会被覆盖。 */
  scale:var(--sx) var(--sy);
}

/* 凹坑：接触点附近压暗，外圈提一圈亮边
   z-index:-1 + 父元素的 isolation:isolate → 凹坑落在背景之上、内容之下。
   这样即使内容是没有元素包裹的纯文本，也不会被凹坑盖住。 */
.md-btn::before,
.md-jelly::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:
    radial-gradient(circle 34px at var(--px) var(--py),rgba(0,0,0,.46),rgba(0,0,0,.14) 52%,transparent 74%),
    radial-gradient(circle 44px at var(--px) var(--py),transparent 46%,rgba(255,255,255,.22) 66%,transparent 82%),
    radial-gradient(circle at var(--px) var(--py),rgba(255,255,255,.12),transparent 34%);
  opacity:var(--dent);
  pointer-events:none;
}

/* 内容压在凹坑之上 */
.md-btn > *,
.md-jelly > *{position:relative;z-index:3}

/* ---- 按钮本体：形状固定，永远是同一组有机圆角 ---- */
.md-btn{
  --radius-a:22px;
  --radius-b:18px;
  --radius-c:24px;
  --radius-d:20px;
  --label:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  color:var(--label);
  font-family:var(--font);
  font-size:14px;
  letter-spacing:.02em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  border-radius:var(--radius-a) var(--radius-b) var(--radius-c) var(--radius-d);
  background:var(--glass-2);
  border:1px solid var(--line-2);
  box-shadow:0 14px 34px rgba(0,0,0,.3);
  transition:box-shadow .22s var(--ease),border-color .22s var(--ease),
             background .22s var(--ease),color .22s var(--ease);
  cursor:pointer;
}

.md-btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%);
  opacity:calc(.22 + .4 * var(--dent));
  pointer-events:none;
}

.md-btn:hover{
  background:var(--glass-3);
  border-color:var(--line-3);
  box-shadow:0 18px 40px rgba(0,0,0,.36),var(--glow-accent);
}

/* 实心：白底黑字，最高对比的主动作 */
.md-btn--solid{
  --label:#05070f;
  background:#fff;
  border-color:#fff;
  font-weight:500;
}
.md-btn--solid:hover{background:#f2f5fa;border-color:#f2f5fa;box-shadow:0 18px 42px rgba(255,255,255,.2)}

/* 强调：琥珀→粉渐变，用于页面里的主 CTA */
.md-btn--accent{
  --label:#100a02;
  font-weight:500;
  background:var(--grad-accent-strong);
  border-color:rgba(255,255,255,.28);
}
/* 必须显式写回背景：.md-btn:hover 的 background 特异性是 (0,2,0)，
   比这里的 (0,1,0) 高，否则悬停时渐变会被盖成一层近乎透明的白，
   亮色按钮一 hover 就"塌"下去、文字发闷。 */
.md-btn--accent:hover{
  background:var(--grad-accent-strong);
  border-color:rgba(255,255,255,.34);
  filter:brightness(1.07) saturate(1.06);
  box-shadow:0 18px 42px rgba(251,191,36,.3),0 6px 18px rgba(244,114,182,.24);
}

/* 幽灵：只用描边 */
.md-btn--ghost{background:transparent;box-shadow:none}

/* 亮色实心按钮（白底 / 琥珀渐变）上，凹坑要收着点：
   默认那套 46% 的黑在深色玻璃按钮上是"按进去"，在亮底上会变成脏暗斑、把文字压闷。
   这里改成「亮边向内收」—— 暗的部分减半，高光加强，在亮底上读起来是凹陷而不是脏。 */
.md-btn--solid::before,
.md-btn--accent::before{
  background:
    radial-gradient(circle 34px at var(--px) var(--py),rgba(0,0,0,.2),rgba(0,0,0,.06) 52%,transparent 74%),
    radial-gradient(circle 44px at var(--px) var(--py),transparent 46%,rgba(255,255,255,.36) 66%,transparent 82%),
    radial-gradient(circle at var(--px) var(--py),rgba(255,255,255,.22),transparent 34%);
}

/* 大号：和 56px 高的输入框并排时用，保证基线齐平 */
.md-btn--lg{
  height:56px;
  padding:0 26px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
}

/* 彩色描边：跟当前 --cat 走，用于分类相关的小按钮 */
.md-btn--tint{
  color:var(--cat);
  background:var(--cat-soft);
  border-color:color-mix(in srgb,var(--cat) 42%,transparent);
}
.md-btn--tint:hover{
  color:var(--ink-inverse);
  background:var(--cat);
  border-color:var(--cat);
  box-shadow:0 14px 32px color-mix(in srgb,var(--cat) 34%,transparent);
}

.md-btn svg{width:14px;height:14px;flex:none}
.md-btn[disabled],.md-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------------------------------------------------------------
   5. 右上角停靠区 + 弹出菜单
   --------------------------------------------------------------- */
.md-dock{
  position:relative;
  z-index:var(--z-menu);
}

.md-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(330px,calc(100vw - 32px));
  padding:8px;
  border:1px solid var(--line-2);
  border-radius:var(--r-d) var(--r-sm-a) var(--r-a) var(--r-sm-c);
  background:var(--surface-2);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 40px rgba(244,114,182,.05),
    0 30px 70px rgba(0,0,0,.7);
  transform-origin:top right;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px) scale(.95);
  transition:opacity .2s var(--ease),transform .3s var(--ease-pop),visibility .2s var(--ease);
}
.md-menu.on{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.md-menu.on .md-menu-item{animation:mdItemIn .34s var(--ease-pop) backwards}
.md-menu.on .md-menu-item:nth-child(1){animation-delay:40ms}
.md-menu.on .md-menu-item:nth-child(2){animation-delay:80ms}
.md-menu.on .md-menu-item:nth-child(3){animation-delay:120ms}
.md-menu.on .md-menu-item:nth-child(4){animation-delay:160ms}

@keyframes mdItemIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

.md-menu-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 12px;
  color:var(--ink);
  font:inherit;
  text-align:left;
  text-decoration:none;
  border-radius:var(--r-sm-c) var(--r-sm-b) var(--r-sm-a) var(--r-sm-d);
  background:transparent;
  cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.md-menu-item:hover,
.md-menu-item:focus-visible{
  background:var(--cat-soft);
  transform:translateX(2px);
  outline:none;
}
.md-menu-item[aria-expanded="true"]{background:var(--cat-soft)}

.md-menu-ico{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  flex:none;
  color:var(--cat);
  background:var(--cat-soft);
  border:1px solid color-mix(in srgb,var(--cat) 34%,transparent);
  border-radius:12px 9px 14px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.md-menu-item:hover .md-menu-ico{
  color:var(--ink-inverse);
  background:var(--cat);
  transform:scale(1.06);
}
.md-menu-ico svg{width:17px;height:17px}

.md-menu-text{min-width:0;flex:1}
.md-menu-text b{
  display:block;
  font-family:var(--font-serif);
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.02em;
}
.md-menu-text em{
  display:block;
  margin-top:3px;
  font-style:normal;
  font-size:11.5px;
  line-height:1.55;
  color:var(--ink-4);
}

.md-contact{
  margin-top:4px;
  padding:12px 13px 10px;
  border-top:1px solid var(--line);
  display:grid;
  gap:9px;
  animation:mdItemIn .3s var(--ease) backwards;
}
.md-contact[hidden]{display:none}

.md-contact-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:12.5px;
}
.md-contact-row span{
  flex:none;
  width:34px;
  color:var(--ink-4);
  letter-spacing:.06em;
}
.md-contact-row a,
.md-contact-row code{
  font-family:var(--font);
  font-size:12.5px;
  color:var(--ink-2);
  text-decoration:none;
  word-break:break-all;
  transition:color .18s var(--ease);
}
.md-contact-row a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.md-contact-row code{
  padding:2px 7px;
  background:var(--glass-2);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
}

/* ---------------------------------------------------------------
   6. 弹窗（详情面板）
   --------------------------------------------------------------- */
.md-modal{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,40px);
  opacity:0;
  visibility:hidden;
  transition:opacity .24s var(--ease),visibility .24s var(--ease);
}
.md-modal.on{opacity:1;visibility:visible}

.md-modal-scrim{
  position:absolute;
  inset:0;
  background:rgba(2,4,10,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
}

.md-modal-panel{
  position:relative;
  width:min(520px,100%);
  max-height:min(84vh,760px);
  overflow:auto;
  padding:clamp(22px,3.4vw,30px);
  border:1px solid var(--line-2);
  border-radius:var(--r-a) var(--r-b) var(--r-c) var(--r-d);
  background:var(--surface-3);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 70px color-mix(in srgb,var(--cat) 8%,transparent),
    0 40px 90px rgba(0,0,0,.75);
  transform:translateY(14px) scale(.97);
  transition:transform .34s var(--ease-pop);
}
.md-modal.on .md-modal-panel{transform:none}

.md-modal-x{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:32px;height:32px;
  color:var(--ink-3);
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:11px 9px 13px 10px;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.md-modal-x:hover{color:var(--ink-inverse);background:var(--cat);border-color:var(--cat)}
.md-modal-x svg{width:14px;height:14px}

/* 详情行的键值表 */
.md-kv{
  display:grid;
  gap:0;
  margin-top:18px;
  border-top:1px solid var(--line);
}
.md-kv > div{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:14px;
  padding:11px 2px;
  border-bottom:1px solid var(--line);
}
.md-kv dt{
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-4);
  padding-top:1px;
}
.md-kv dd{
  font-size:13px;
  line-height:1.7;
  color:var(--ink-2);
  word-break:break-word;
}
.md-kv dd.mono{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}

/* 标签 */
.md-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  font-size:11.5px;
  color:var(--cat);
  background:var(--cat-soft);
  border:1px solid color-mix(in srgb,var(--cat) 30%,transparent);
  border-radius:var(--r-pill);
}

/* ---- 详情面板内部的排版 ---- */
.md-modal-title{
  margin-top:10px;
  font-family:var(--font-serif);
  font-size:clamp(19px,2.4vw,23px);
  font-weight:500;
  line-height:1.45;
  letter-spacing:.03em;
  color:#fff;
  word-break:break-word;
}
.md-modal-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}
.md-modal-tags:empty{display:none}
.md-modal-ops{
  display:flex;
  gap:10px;
  margin-top:22px;
}
.md-modal-ops .md-btn{flex:1}

/* ---------------------------------------------------------------
   7. 页脚
   --------------------------------------------------------------- */
.md-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:16px 20px;
  color:var(--ink-4);
  font-size:12.5px;
}
.md-footer a{
  color:var(--ink-3);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.md-footer a:hover{color:var(--accent)}

.md-footer--fixed{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--z-nav);
  background:rgba(4,6,15,.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}

.md-icp{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.md-icp img{width:15px;height:15px;object-fit:contain}

/* ---------------------------------------------------------------
   8. 提示条
   --------------------------------------------------------------- */
.md-toast{
  position:fixed;
  left:50%;
  bottom:32px;
  z-index:var(--z-toast);
  display:flex;
  align-items:center;
  gap:9px;
  max-width:calc(100vw - 32px);
  padding:11px 18px;
  color:var(--ink);
  font-size:13px;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm-a) var(--r-sm-b) var(--r-sm-c) var(--r-sm-d);
  box-shadow:0 20px 44px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,16px);
  pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s var(--ease);
}
.md-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.md-toast i{
  width:6px;height:6px;
  flex:none;
  border-radius:50%;
  background:var(--accent-live);
  box-shadow:0 0 12px var(--accent-live);
}
.md-toast[data-tone="warn"] i{
  background:var(--c-rose);
  box-shadow:0 0 12px var(--c-rose);
  animation:mdPulse 1s ease-in-out infinite;
}
.md-toast[data-tone="ok"] i{
  background:var(--c-emerald);
  box-shadow:0 0 12px var(--c-emerald);
}

@keyframes mdPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.8)}
}

/* ---------------------------------------------------------------
   9. 通用排版工具类
   --------------------------------------------------------------- */
.md-serif{font-family:var(--font-serif)}

.md-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.md-eyebrow i{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent-live);
  box-shadow:0 0 0 4px rgba(36,251,194,.14),0 0 14px var(--accent-live);
  animation:mdPulse 2.8s ease-in-out infinite;
}

.md-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  font-size:12px;
  color:var(--ink-3);
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  white-space:nowrap;
}
.md-chip b{color:#fff;font-weight:500}
.md-chip::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--cat);
  box-shadow:0 0 8px var(--cat);
  flex:none;
}

.md-round{border-radius:var(--r-a) var(--r-b) var(--r-c) var(--r-d)}
.md-round-sm{border-radius:var(--r-sm-a) var(--r-sm-b) var(--r-sm-c) var(--r-sm-d)}

/* 缓慢的有机形变（大容器专用，别用在列表卡片上，会晃） */
.md-morph{animation:mdBlob 16s ease-in-out infinite}
@keyframes mdBlob{
  0%,100%{border-radius:var(--r-a) var(--r-b) var(--r-c) var(--r-d)}
  50%{border-radius:calc(var(--r-b) + 6px) calc(var(--r-c) + 3px) calc(var(--r-d) + 7px) calc(var(--r-a) - 5px)}
}

/* 渐变文字：用于标题里的强调字 */
.md-grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ---------------------------------------------------------------
   10. 顶部导航条（内容页）与表单控件
   ------------------------------------------------------------------
   站内有两种导航形态，各有适用场景，不要混用：

     · 沉浸页（首页）—— 右上角 .md-dock + .md-menu
       画面完整不被切割，适合「一个球 + 一句话」这种单屏叙事。
     · 内容页（资源库、404、以及后续新增的任何信息页）—— 顶部 .md-nav
       随时能返回上一级、切换分区，信息页需要这种"在场感"。

   新增页面时按上面这条规则选，别把两种混在一页里。
   --------------------------------------------------------------- */
.md-nav{
  position:sticky;
  top:0;
  z-index:var(--z-nav);
  display:flex;
  align-items:center;
  gap:14px;
  height:var(--nav-h);
  padding:0 clamp(16px,3.5vw,40px);
  background:rgba(4,6,15,.74);          /* 与 --bg 同调，压住背后的极光 */
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.md-nav::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:.5;
}

.md-nav-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px 9px 12px;
  font:inherit;
  font-size:13px;
  color:var(--ink-2);
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-sm-a) var(--r-sm-b) var(--r-sm-c) var(--r-sm-d);
  cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease);
}
.md-nav-back:hover{
  color:#fff;
  background:var(--glass-2);
  border-color:var(--line-2);
  transform:translateX(-2px);
}
.md-nav-back svg{width:14px;height:14px}

.md-nav-brand{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-right:auto;
  text-decoration:none;
  white-space:nowrap;
}
.md-nav-name{font-size:14px;font-weight:500;color:#fff;letter-spacing:.02em}
.md-nav-sep{color:var(--ink-4)}
.md-nav-sub{
  font-family:var(--font-serif);
  font-size:14px;
  color:var(--ink-3);
  letter-spacing:.08em;
}

.md-nav-chips{display:flex;gap:8px;flex-wrap:wrap}

/* ---- 下拉选择：原生 select 换皮 ---- */
.md-select{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.md-select::after{
  content:"";
  position:absolute;
  right:13px;
  width:6px;height:6px;
  border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);
  pointer-events:none;
}
.md-select select{
  appearance:none;
  -webkit-appearance:none;
  padding:9px 32px 9px 14px;
  font:inherit;
  font-size:13px;
  color:var(--ink-2);
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-sm-a) var(--r-sm-b) var(--r-sm-c) var(--r-sm-d);
  cursor:pointer;
  outline:0;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.md-select select:hover{color:#fff;border-color:var(--line-2)}
.md-select option{background:#0a0f1e;color:var(--ink)}

/* ---- 分段控件：网格 / 列表这类二选一 ---- */
.md-seg{
  display:flex;
  gap:3px;
  padding:3px;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:calc(var(--r-sm-a) + 2px) calc(var(--r-sm-b) + 2px)
                calc(var(--r-sm-c) + 2px) calc(var(--r-sm-d) + 2px);
}
.md-seg button{
  padding:7px 13px;
  font:inherit;
  font-size:12.5px;
  color:var(--ink-3);
  background:transparent;
  border:0;
  border-radius:var(--r-sm-b) var(--r-sm-d) var(--r-sm-a) var(--r-sm-c);
  cursor:pointer;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.md-seg button:hover{color:#fff}
.md-seg button[aria-pressed="true"]{color:#fff;background:var(--glass-3)}

/* ---- 空状态：任何列表页都可能用到 ---- */
.md-empty{
  padding:clamp(48px,8vw,86px) 20px;
  text-align:center;
  border:1px dashed var(--line-2);
  border-radius:var(--r-b) var(--r-d) var(--r-a) var(--r-c);
  background:rgba(255,255,255,.008);
}
.md-empty h3{
  font-family:var(--font-serif);
  font-size:19px;
  font-weight:500;
  color:var(--ink);
}
.md-empty p{
  max-width:460px;
  margin:12px auto 0;
  font-size:13px;
  line-height:1.8;
  color:var(--ink-3);
}
.md-empty .md-btn{margin-top:20px}

/* ---- 蜜罐：给爬虫准备的，真人看不到也点不到 ---- */
.md-trap{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* ---------------------------------------------------------------
   11. 降级：浏览器不支持 color-mix 时，描边回落到半透明白
   --------------------------------------------------------------- */
@supports not (color:color-mix(in srgb,red 50%,transparent)){
  .md-menu-ico,
  .md-btn--tint,
  .md-tag{border-color:var(--line-2)}
}

/* ---------------------------------------------------------------
   12. 降低动效偏好
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}