/* ============================================================================
   综合下载站  (assets/css/dl.css)
   ----------------------------------------------------------------------------
   色板 / 基础 / 通用组件（按钮·输入·徽章·页脚）见 ../assets/css/yuzu.css
   本文件：导航 / 首屏 / 搜索分类栏 / 资源卡片网格 / 动效

   2026-10-19 视觉升级：动态壁纸层 + 光斑、分类配色、卡片炫光 / NEW 角标、
   渐变标题、统计卡图标色、更明显的 hover 反馈。
   ========================================================================= */

/* ── 分类配色（游戏=琥珀 / 源码=冰蓝 / 软件=紫罗兰 / 其他=石板蓝）────────── */
:root {
  --dl-game:  #F0A63C;  --dl-game2:  #FFCE7A;  --dl-game-soft:  rgba(240, 166, 60, .15);
  --dl-src:   #4FB3E8;  --dl-src2:   #7FD3F5;  --dl-src-soft:   rgba(79, 179, 232, .15);
  --dl-app:   #8B7CF6;  --dl-app2:   #B4A8FF;  --dl-app-soft:   rgba(139, 124, 246, .15);
  --dl-other: #7C93B5;  --dl-other2: #A8BCD8;  --dl-other-soft: rgba(124, 147, 181, .15);
}

/* ── 背景：壁纸层 + 渐变蒙层（壁纸加载失败时保留渐变底）──────────────────── */
html { background: #EEF6FF; }
body {
  position: relative;
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(201, 182, 255, .38), transparent 62%),
    radial-gradient(900px 560px at 2% -6%, rgba(138, 217, 248, .42), transparent 58%),
    radial-gradient(760px 520px at 62% 112%, rgba(255, 214, 170, .30), transparent 62%),
    linear-gradient(180deg, #F8FCFF 0%, #EDF6FF 52%, #F6FBFF 100%);
  background-attachment: fixed;
}
#bg {
  position: fixed; inset: 0; z-index: -3;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease;
  filter: saturate(.9) brightness(.99);
}
#bg.in { opacity: 1; }
#bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
}
#ov {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, rgba(247, 251, 255, .90) 0%, rgba(238, 247, 255, .80) 45%, rgba(248, 252, 255, .92) 100%);
}

/* ── 导航 ────────────────────────────────────────────────────────────────── */
.dl-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(22, 35, 63, .06);
  box-shadow: 0 8px 30px -24px rgba(43, 127, 184, .55);
}
.dl-nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 179, 232, .45), rgba(139, 124, 246, .35), transparent);
  opacity: .8;
}
.dl-nav-in { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.dl-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 850; font-size: 17px; color: var(--t1); letter-spacing: .2px; flex: 0 0 auto;
}
.dl-logo-dot {
  position: relative; width: 22px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  box-shadow: 0 3px 12px -2px rgba(79, 179, 232, .9);
  animation: dl-bob 4s ease-in-out infinite;
}
.dl-logo-dot::before, .dl-logo-dot::after {
  content: ''; position: absolute; top: -5px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--acc);
}
.dl-logo-dot::before { left: 1px; }
.dl-logo-dot::after { right: 1px; border-bottom-color: var(--acc2); }
@keyframes dl-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(-2deg); } }

.dl-nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dl-nav-links a { font-size: 14px; color: var(--t2); transition: color .2s, transform .2s; }
.dl-nav-links a:hover { color: var(--acc-deep); transform: translateY(-1px); }
.dl-nav-links a.on { color: var(--acc-deep); font-weight: 750; }
.dl-nav-links a.on::after {
  content: ''; display: block; height: 2px; margin-top: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), var(--lav));
}
.dl-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px; font-size: 12.5px; color: var(--t2);
  background: rgba(255, 255, 255, .9); border: 1px solid var(--stroke);
  box-shadow: 0 6px 16px -14px rgba(43, 127, 184, .6);
}
.dl-pill .d { width: 8px; height: 8px; border-radius: 50%; background: var(--t3); }
.dl-pill.on .d { background: var(--ok); box-shadow: 0 0 0 3px rgba(55, 185, 139, .18); animation: dl-pulse 2.2s ease-in-out infinite; }
@keyframes dl-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(55, 185, 139, .16); } 50% { box-shadow: 0 0 0 6px rgba(55, 185, 139, .04); } }

/* ── 首屏 ────────────────────────────────────────────────────────────────── */
.dl-hero { position: relative; padding: 76px 0 30px; }
.dl-hero::after {
  content: '📦'; position: absolute; right: 5%; bottom: 6px; font-size: 118px;
  opacity: .06; pointer-events: none; transform: rotate(-8deg);
}
.dl-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.dl-orbs i {
  position: absolute; display: block; border-radius: 50%; filter: blur(46px); opacity: .55;
  animation: dl-float 14s ease-in-out infinite;
}
.dl-orbs i:nth-child(1) { width: 260px; height: 260px; left: -40px; top: -60px; background: rgba(138, 217, 248, .75); }
.dl-orbs i:nth-child(2) { width: 220px; height: 220px; right: 6%; top: 10px; background: rgba(201, 182, 255, .7); animation-delay: -5s; }
.dl-orbs i:nth-child(3) { width: 180px; height: 180px; right: 26%; bottom: -70px; background: rgba(255, 214, 170, .7); animation-delay: -9s; }
@keyframes dl-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -18px, 0) scale(1.08); }
}

.dl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 750; letter-spacing: .4px; color: var(--acc-deep);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(79, 179, 232, .30);
  padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 10px 24px -20px rgba(43, 127, 184, .8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dl-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(247, 200, 107, .22);
}
.dl-hero h1 {
  margin: 18px 0 0; font-size: clamp(36px, 5vw, 58px); line-height: 1.1;
  font-weight: 900; color: var(--t1); letter-spacing: -.025em;
}
.dl-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--acc-deep), var(--acc) 30%, var(--lav) 55%, var(--gold) 78%, var(--acc-deep));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: dl-grad 9s linear infinite;
}
@keyframes dl-grad { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
.dl-sub { margin: 16px 0 0; font-size: 16.5px; color: var(--t2); max-width: 700px; line-height: 1.7; }
.dl-sub b { color: var(--t1); font-weight: 750; }

/* ── 统计卡 ─────────────────────────────────────────────────────────────── */
.dl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.dl-stat {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 35, 63, .07); border-radius: var(--r-lg);
  padding: 15px 17px 15px 52px;
  box-shadow: 0 18px 34px -30px rgba(43, 127, 184, .85);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  animation: dl-pop .5s cubic-bezier(.2, .7, .3, 1) both;
}
.dl-stat:nth-child(1) { --s: var(--dl-src);   animation-delay: .02s; }
.dl-stat:nth-child(2) { --s: var(--dl-app);   animation-delay: .07s; }
.dl-stat:nth-child(3) { --s: var(--dl-game);  animation-delay: .12s; }
.dl-stat:nth-child(4) { --s: var(--dl-other); animation-delay: .17s; }
.dl-stat::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 9px;
  background: linear-gradient(145deg, var(--s), rgba(255, 255, 255, .65));
  box-shadow: 0 8px 16px -10px var(--s);
  opacity: .92;
}
.dl-stat::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 45%);
}
.dl-stat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--s) 35%, transparent); box-shadow: 0 24px 40px -30px var(--s); }
.dl-stat .k { font-size: 12.5px; color: var(--t3); font-weight: 700; letter-spacing: .2px; position: relative; }
.dl-stat .v {
  margin-top: 3px; font-size: 22px; font-weight: 850; color: var(--t1);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; position: relative;
}
@keyframes dl-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── 工具条：搜索 + 分类 ──────────────────────────────────────────────────── */
.dl-main { padding-bottom: 56px; position: relative; z-index: 1; }
.dl-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; padding-top: 10px; }
.dl-search {
  position: relative; display: flex; align-items: center; gap: 9px;
  flex: 1 1 280px; min-width: 220px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 35, 63, .08); border-radius: 999px;
  padding: 11px 17px; transition: border-color .2s, box-shadow .2s, background .2s;
  box-shadow: 0 14px 30px -28px rgba(43, 127, 184, .9);
}
.dl-search:focus-within {
  border-color: rgba(79, 179, 232, .5); background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 179, 232, .13), 0 16px 32px -28px rgba(43, 127, 184, .9);
}
.dl-search svg { width: 17px; height: 17px; color: var(--t3); flex: 0 0 auto; }
.dl-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: inherit; font-size: 14.5px; color: var(--t1); }
.dl-search input::placeholder { color: var(--t3); }

.dl-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 750; color: var(--t2);
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(22, 35, 63, .07);
  transition: all .18s; box-shadow: 0 10px 22px -26px rgba(43, 127, 184, .9);
}
.dl-tab[data-cat="game"] { --t: var(--dl-game); }
.dl-tab[data-cat="src"] { --t: var(--dl-src); }
.dl-tab[data-cat="app"] { --t: var(--dl-app); }
.dl-tab[data-cat="other"] { --t: var(--dl-other); }
.dl-tab[data-cat="all"] { --t: var(--acc); }
.dl-tab:hover { color: var(--acc-deep); border-color: rgba(79, 179, 232, .35); transform: translateY(-1px); }
.dl-tab .ti { font-size: 14px; transition: transform .18s; }
.dl-tab:hover .ti { transform: scale(1.15) rotate(-6deg); }
.dl-tab.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--t, var(--acc)), var(--t, var(--acc2)));
  filter: saturate(1.05);
  box-shadow: 0 12px 26px -14px var(--t, var(--acc));
}
.dl-tab .tn {
  font-size: 11.5px; font-weight: 850; padding: 1px 7px; border-radius: 999px;
  background: rgba(22, 35, 63, .07); color: inherit; min-width: 18px; text-align: center;
}
.dl-tab.on .tn { background: rgba(255, 255, 255, .30); }

/* ── 资源卡片 ────────────────────────────────────────────────────────────── */
.dl-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
.dl-card {
  --cat: var(--dl-other); --cat2: var(--dl-other2); --cat-soft: var(--dl-other-soft);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 15px; align-items: start;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(22, 35, 63, .07); border-radius: 20px;
  padding: 19px 20px 18px;
  box-shadow: 0 22px 46px -40px rgba(43, 127, 184, .95);
  transition: transform .2s, box-shadow .22s, border-color .2s, background .2s;
  animation: dl-in .42s cubic-bezier(.2, .7, .3, 1) both;
}
.dl-card[data-cat="game"]  { --cat: var(--dl-game);  --cat2: var(--dl-game2);  --cat-soft: var(--dl-game-soft); }
.dl-card[data-cat="src"]   { --cat: var(--dl-src);   --cat2: var(--dl-src2);   --cat-soft: var(--dl-src-soft); }
.dl-card[data-cat="app"]   { --cat: var(--dl-app);   --cat2: var(--dl-app2);   --cat-soft: var(--dl-app-soft); }
.dl-card[data-cat="other"] { --cat: var(--dl-other); --cat2: var(--dl-other2); --cat-soft: var(--dl-other-soft); }

/* 左侧分类色条 */
.dl-card::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--cat), var(--cat2)); opacity: .75;
  transition: opacity .2s, top .2s, bottom .2s;
}
/* hover 时扫过一道高光 */
.dl-card::after {
  content: ''; position: absolute; top: -60%; bottom: -60%; left: -80%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.dl-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cat) 32%, transparent);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 30px 56px -38px var(--cat);
}
.dl-card:hover::before { opacity: 1; top: 8px; bottom: 8px; }
.dl-card:hover::after { opacity: 1; animation: dl-sheen .75s ease; }
@keyframes dl-sheen { from { left: -80%; } to { left: 140%; } }
@keyframes dl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dl-card:nth-child(1) { animation-delay: .02s; }
.dl-card:nth-child(2) { animation-delay: .07s; }
.dl-card:nth-child(3) { animation-delay: .12s; }
.dl-card:nth-child(4) { animation-delay: .17s; }
.dl-card:nth-child(5) { animation-delay: .22s; }
.dl-card:nth-child(6) { animation-delay: .27s; }

/* NEW 角标 */
.dl-new {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: 10px; font-weight: 900; letter-spacing: .8px;
  padding: 2px 7px; border-radius: 999px; color: #7A4A00;
  background: linear-gradient(135deg, #FFE08A, #FFC24D);
  box-shadow: 0 6px 14px -8px rgba(240, 166, 60, .9);
  animation: dl-blink 2.6s ease-in-out infinite;
}
@keyframes dl-blink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.dl-ico {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(145deg, var(--cat-soft), rgba(255, 255, 255, .92));
  border: 1px solid color-mix(in srgb, var(--cat) 22%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 20px -16px var(--cat);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s;
}
.dl-card:hover .dl-ico { transform: translateY(-2px) rotate(-4deg) scale(1.04); box-shadow: inset 0 1px 0 #fff, 0 14px 26px -16px var(--cat); }
.dl-card-body { min-width: 0; }
.dl-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dl-card-head h3 { margin: 0; font-size: 16.5px; font-weight: 850; color: var(--t1); line-height: 1.35; }
.dl-chip {
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  color: color-mix(in srgb, var(--cat) 72%, #16233F);
  background: var(--cat-soft);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent);
  padding: 2px 9px; border-radius: 999px;
}
.dl-desc { margin: 8px 0 0; font-size: 13.5px; color: var(--t2); line-height: 1.62; }
.dl-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.dl-m {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--t2);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(22, 35, 63, .045); border: 1px solid rgba(22, 35, 63, .05);
}
.dl-m b { color: var(--t3); font-weight: 800; font-size: 10.5px; letter-spacing: .3px; }
.dl-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.dl-tag {
  font-size: 11.5px; color: color-mix(in srgb, var(--cat) 55%, var(--t3));
  background: color-mix(in srgb, var(--cat) 8%, transparent);
  padding: 1px 8px; border-radius: 999px;
}

/* ── 操作区 ─────────────────────────────────────────────────────────────── */
.dl-act { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 800;
  white-space: nowrap; cursor: pointer; border: 0; color: #fff;
  background: linear-gradient(135deg, var(--cat), var(--cat2));
  box-shadow: 0 10px 22px -14px var(--cat);
  transition: transform .16s, box-shadow .18s, filter .18s;
}
.dl-btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 16px 28px -14px var(--cat); }
.dl-btn:active { transform: translateY(0) scale(.98); }
.dl-btn svg { width: 15px; height: 15px; transition: transform .18s; }
.dl-btn:hover svg { transform: translateY(2px); }
.dl-copy {
  border: 1px solid rgba(22, 35, 63, .1); background: rgba(255, 255, 255, .9);
  color: var(--t2); border-radius: 12px; padding: 7px 10px; cursor: pointer;
  font-size: 13px; line-height: 1; transition: all .18s;
}
.dl-copy:hover { color: color-mix(in srgb, var(--cat) 70%, #16233F); border-color: color-mix(in srgb, var(--cat) 40%, transparent); transform: translateY(-1px); }
.dl-copy.done, .dl-btn.done { filter: saturate(1.15) brightness(1.02); }

/* ── 空态 / 说明 ─────────────────────────────────────────────────────────── */
.dl-empty {
  text-align: center; padding: 58px 20px; color: var(--t2);
  background: rgba(255, 255, 255, .66); border: 1px dashed rgba(79, 179, 232, .35);
  border-radius: 20px;
}
.dl-empty.hidden { display: none; }
.dl-empty .e-ico { font-size: 42px; opacity: .65; animation: dl-float 6s ease-in-out infinite; display: inline-block; }
.dl-empty p { margin: 12px 0 16px; font-size: 15px; }
.dl-note {
  margin-top: 24px; padding: 14px 18px; font-size: 13px; color: var(--t2); line-height: 1.75;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(22, 35, 63, .06);
  border-left: 3px solid var(--gold); border-radius: var(--r);
  box-shadow: 0 16px 34px -34px rgba(43, 127, 184, .8);
}
.dl-note b { color: var(--t1); }
.dl-note a { color: var(--acc-deep); font-weight: 700; }

/* ── 页脚 ────────────────────────────────────────────────────────────────── */
.foot { margin-top: 46px; border-top: 1px solid rgba(22, 35, 63, .07); padding: 26px 0; font-size: 13px; color: var(--t3); position: relative; z-index: 1; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot .dim { opacity: .75; }

/* ── 响应式 ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .dl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dl-hero { padding: 48px 0 22px; }
  .dl-hero h1 { font-size: 36px; }
  .dl-hero::after { display: none; }
  .dl-orbs i { filter: blur(34px); }
  .dl-nav-links { gap: 14px; }
  .dl-nav-links a:not(.on) { display: none; }
  .dl-pill { display: none; }
  .dl-card { grid-template-columns: 40px minmax(0, 1fr); padding: 15px; }
  .dl-ico { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
  .dl-act { grid-column: 1 / -1; flex-direction: row; align-items: center; margin-top: 4px; }
  .dl-act .dl-btn { flex: 1; }
  .dl-copy { flex: 0 0 auto; }
}

/* 减少动态偏好时关掉装饰动画 */
@media (prefers-reduced-motion: reduce) {
  .dl-orbs i, .dl-logo-dot, .dl-new, .dl-empty .e-ico, .dl-hero h1 em { animation: none !important; }
  .dl-card, .dl-stat { animation: none !important; }
}


/* ── 文件用途悬浮面板 ─────────────────────────────────────────────────── */
.dl-more {
  appearance: none; border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .92); color: var(--t2);
  border-radius: 11px; padding: 7px 10px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: color .16s, border-color .16s, transform .16s;
}
.dl-more:hover { color: var(--acc-deep); border-color: rgba(79, 179, 232, .42); transform: translateY(-1px); }
.dl-pop {
  position: fixed; z-index: 1300;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(22, 35, 63, .1); border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 32px 64px -34px rgba(43, 127, 184, .6);
  color: var(--t2); font-size: 13px; line-height: 1.6;
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.985);
  transition: opacity .16s ease, transform .18s ease, visibility .16s;
  overflow: auto; overscroll-behavior: contain;
}
.dl-pop.on { opacity: 1; visibility: visible; transform: none; }
.dp-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 4px; }
.dp-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(145deg, rgba(138, 217, 248, .3), rgba(255, 183, 201, .28));
  border: 1px solid rgba(79, 179, 232, .2);
}
.dp-head-txt { min-width: 0; }
.dp-head h4 { margin: 0; font-size: 15px; font-weight: 850; color: var(--t1); line-height: 1.35; }
.dp-meta { margin-top: 3px; font-size: 11.5px; color: var(--t3); }
.dp-sec { margin-top: 10px; }
.dp-sec > b { display: block; font-size: 12px; font-weight: 850; color: var(--t1); margin-bottom: 2px; letter-spacing: .3px; }
.dp-sec p { margin: 0; font-size: 12.8px; color: var(--t2); }
.dp-sec ol { margin: 4px 0 0; padding-left: 18px; }
.dp-sec li { font-size: 12.6px; line-height: 1.6; margin: 2px 0; }
.dp-note {
  background: rgba(255, 214, 170, .2);
  border: 1px solid rgba(255, 193, 120, .35);
  border-radius: 10px; padding: 8px 10px;
}
.dp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.dp-tag {
  font-size: 11px; color: var(--t3);
  background: rgba(22, 35, 63, .05); border: 1px solid rgba(22, 35, 63, .05);
  padding: 1px 7px; border-radius: 999px;
}
.dl-hint {
  margin: 2px 0 14px; font-size: 12.5px; color: var(--t3);
  display: inline-flex; align-items: center; gap: 6px;
}
@media (max-width: 640px) { .dl-pop { left: 12px !important; width: auto !important; right: 12px; } }

.dp-link {
  color: var(--acc-deep); font-weight: 700; text-decoration: none;
  border-bottom: 1px dashed rgba(79, 179, 232, .55); word-break: break-all;
}
.dp-link:hover { border-bottom-style: solid; }


/* ── 悬浮说明面板 2.0 ─────────────────────────────────────────────────── */
.dl-pop {
  border-radius: 20px; padding: 18px 18px 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 252, 255, .97));
  border: 1px solid rgba(22, 35, 63, .08);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .7) inset,
              0 30px 70px -32px rgba(43, 127, 184, .55),
              0 10px 30px -24px rgba(22, 35, 63, .25);
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 179, 232, .45) transparent;
}
.dl-pop::-webkit-scrollbar { width: 6px; }
.dl-pop::-webkit-scrollbar-track { background: transparent; }
.dl-pop::-webkit-scrollbar-thumb { background: rgba(79, 179, 232, .4); border-radius: 999px; }
.dl-pop::-webkit-scrollbar-thumb:hover { background: rgba(79, 179, 232, .65); }
.dl-pop::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--popcat, #4FB3E8), color-mix(in srgb, var(--popcat, #4FB3E8) 35%, #FFB7C9));
  border-radius: 20px 20px 0 0;
}
.dl-pop[data-cat="game"]  { --popcat: var(--dl-game); }
.dl-pop[data-cat="src"]   { --popcat: var(--dl-src); }
.dl-pop[data-cat="app"]   { --popcat: var(--dl-app); }
.dl-pop[data-cat="other"] { --popcat: var(--dl-other); }
.dp-ico {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--popcat, #4FB3E8) 22%, #fff),
    color-mix(in srgb, #FFB7C9 26%, #fff));
  border: 1px solid color-mix(in srgb, var(--popcat, #4FB3E8) 28%, transparent);
}
.dp-head h4 { font-size: 15.5px; }
.dp-meta { font-size: 11.5px; }
.dp-sec > b { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.dp-sec > b::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px;
  background: var(--popcat, #4FB3E8); flex: none;
}
.dp-sec p { font-size: 13px; }
.dp-sec li { font-size: 12.8px; }
.dp-note {
  background: linear-gradient(180deg, rgba(255, 241, 224, .6), rgba(255, 214, 170, .22));
  border: 1px solid rgba(255, 193, 120, .4);
}
.dp-note > b::before { background: #FFB347; }
.dp-link { color: var(--popcat, var(--acc-deep)); }