/* 2026-10-26 修复：筛选 hidden 属性被 display:flex 类覆盖 */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Aqua Catalog v2 · 前台条目区（分类筛选 / 自绘缺图 / 管理员「+」）
   v2 新增：置顶角标 .pin-flag，以及卡片底部动作条 .cat-acts ——
   一条资源同时有「站内那份」和「管理员自己传到夸克网盘那份」时，两个入口并列给访客。
   只新增，不覆盖既有规则；必须排在玻璃与首页样式之后加载。
   ═══════════════════════════════════════════════════════════════ */

/* ── 卡片入场：脚本注入的卡片不走全站 .reveal（观察器只认首次 DOM） ── */
@keyframes catIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); }
  to { opacity: 1; transform: none; }
}
.cat-in { animation: none !important; }

/* ── 分类筛选条 ── */
.cat-chips {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.cat-chip {
  appearance: none; cursor: pointer; font: inherit;
  padding: 9px 20px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(140deg, rgba(255, 255, 255, .74), rgba(214, 234, 255, .42));
  box-shadow: 0 10px 24px rgba(26, 73, 196, .1), inset 0 1px 0 #fff;
  color: var(--ink-soft); font-size: 13px; font-weight: 900; letter-spacing: .06em;
  transition: transform .35s ease, box-shadow .35s ease, color .35s ease, background .35s ease;
}
.cat-chip:hover { transform: translateY(-3px); color: var(--ink); }
.cat-chip:active { transform: translateY(-1px) scale(.985); }
.cat-chip[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(140deg, var(--sky), var(--azure) 58%, var(--azure-deep));
  border-color: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 34px rgba(26, 73, 196, .3), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.cat-add {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1.5px dashed rgba(47, 108, 246, .55);
  color: var(--azure); font-size: 13px; font-weight: 900; letter-spacing: .06em;
  text-decoration: none; background: rgba(255, 255, 255, .38);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.cat-add:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .72); border-color: var(--azure); }

/* ── 教程屏的框内滚动：滚动只能开在网格容器上，且必须限高，
      否则条目一多整屏就顶出视口（首页每屏要完整落在一屏） ── */
.learn-scroll {
  overflow-x: hidden; overflow-y: auto;
  max-height: min(58vh, 560px);
  padding-right: 4px;
  overscroll-behavior: contain;                 /* 滚到框内尽头就收手，不把滚动甩给整屏翻页 */
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 108, 246, .42) transparent;
}
.learn-scroll::-webkit-scrollbar { width: 10px; }
.learn-scroll::-webkit-scrollbar-track { background: transparent; }
.learn-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent; border-radius: 99px; background-clip: padding-box;
  background-image: linear-gradient(180deg, rgba(47, 108, 246, .5), rgba(124, 156, 255, .42));
}
.learn-scroll::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, rgba(47, 108, 246, .74), rgba(124, 156, 255, .62));
}

/* ── 管理员「+」块：与卡片同尺寸同圆角，虚线玻璃面 ── */
.add-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 168px; padding: 22px 18px;
  border-radius: var(--r-md);
  border: 1.5px dashed rgba(47, 108, 246, .5);
  background: linear-gradient(150deg, rgba(255, 255, 255, .58), rgba(206, 228, 255, .34));
  box-shadow: var(--shadow-inset);
  color: var(--azure-deep); text-decoration: none; text-align: center;
  transition: transform .8s var(--e-expo), box-shadow .8s var(--e-expo), border-color .6s;
}
.add-tile:hover {
  
  border-color: var(--azure);
  
}
.add-tile .add-plus {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 18px;
  background: linear-gradient(140deg, var(--sky), var(--azure) 60%, var(--azure-deep));
  color: #fff; font-size: 30px; font-weight: 900; line-height: 1;
  box-shadow: 0 14px 30px rgba(26, 73, 196, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.add-tile .add-tx { font-size: 15px; font-weight: 900; letter-spacing: .04em; color: var(--ink); }
.add-tile .add-sub { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-faint); }

/* ── 空状态 ── */
.cat-empty {
  grid-column: 1 / -1;
  padding: clamp(28px, 5vh, 54px) 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .8);
  background: linear-gradient(150deg, rgba(255, 255, 255, .5), rgba(214, 234, 255, .3));
  text-align: center; font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--ink-faint);
}

/* ── 缺图时自绘的玻璃面片 ── */
.z-shard { width: 100%; height: 100%; display: block; }

/* ── 卡片上的分类小标与教程卡的行动提示 ── */
.cat-flag {
  padding: 3px 11px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .92);
  background: linear-gradient(140deg, rgba(255, 255, 255, .8), rgba(206, 228, 255, .5));
  color: var(--azure-deep); font-size: 11px; font-weight: 900; letter-spacing: .06em;
}
.course .open-hint {
  margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--azure);
  display: flex; align-items: center; gap: 8px;
}
.course .open-hint::after {
  content: ''; width: 22px; height: 1.5px; background: linear-gradient(90deg, var(--azure), transparent);
  transition: width .7s var(--e-expo);
}

@media (max-width: 768px) {
  .cat-add { margin-left: 0; }
  .learn-scroll { max-height: none; overflow: visible; padding-right: 0; }
  .add-tile { min-height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-in { animation: none; }
}

/* ── 置顶角标：只显示服务端给的 pinned，前端不自己判类型 ── */
.pin-flag {
  flex: none;
  padding: 3px 11px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .96);
  background: linear-gradient(140deg, var(--sky), var(--azure) 62%, var(--azure-deep));
  color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .08em;
  box-shadow: 0 10px 22px rgba(26, 73, 196, .26), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* 普通插件卡没有 meta 行，角标浮在封面右上角 */
.c-card .z-img > .pin-flag { position: absolute; right: 10px; top: 10px; }

/* ── 卡片底部动作条：站内直接下载 / 在线观看 / 去网盘下载 并存 ──
      一条资源往往两个入口都有（网站自己那份 + 管理员自己传到夸克的那份），
      所以这里做成可以并排放的胶囊，而不是原来那一行「只能显示一个」的提示文字。 */
.cat-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.cat-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(140deg, rgba(255, 255, 255, .76), rgba(214, 234, 255, .44));
  box-shadow: 0 10px 24px rgba(26, 73, 196, .1), inset 0 1px 0 #fff;
  color: var(--azure-deep); font-size: 12px; font-weight: 900; letter-spacing: .05em;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.cat-act:hover {
  transform: translateY(-3px); background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 30px rgba(26, 73, 196, .2), inset 0 1px 0 #fff;
}
.cat-act:active { transform: translateY(-1px) scale(.985); }
.cat-act.primary {
  color: #fff; border-color: rgba(255, 255, 255, .96);
  background: linear-gradient(140deg, var(--sky), var(--azure) 58%, var(--azure-deep));
}

@media (max-width: 768px) {
  .cat-acts { gap: 6px; }
  .cat-act { padding: 6px 12px; font-size: 11px; }
}
/* JS 驱动时禁用 CSS transform 过渡，避免双重动画 */
/* 2026-10-24 removed: blocked hover transition */

.pill {
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.pill:hover {
  box-shadow: 0 16px 34px rgba(47, 108, 246, .32), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ═══════════════════════════════════════════════════════════
   Aqua Hover v3（2026-10-24 全新重做）
   悬停：柔和上浮 8px + 阴影微增。0.4s easeOutQuad，双向一致。
   移入移出同一条 transition 定义，CSS transition 原生支持中断续接。
   不使用 will-change / JS / backdrop-filter 操作。
   ═══════════════════════════════════════════════════════════ */

.glass-card, .c-card, .course, .band, .mat-cell, .tl-item, .feat-item, .stage {
  transition: transform 0.5s cubic-bezier(.25, .8, .4, 1), box-shadow 0.5s ease;
}

.pill, .glass-btn {
  transition: transform .35s cubic-bezier(.25, .46, .45, .94),
              box-shadow .35s cubic-bezier(.25, .46, .45, .94);
}
.pill:hover { transform: translateY(-3px); }
.glass-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .glass-card, .c-card, .course, .band, .mat-cell, .tl-item, .feat-item,
  .stage, .pill, .glass-btn {
    transition: none;
  }
}


/* ═══ NO-ENTRANCE-ANIM-v1（2026-10-25 站长要求）═══
   内容页卡片不要任何入场浮现动画：滚动到哪就静止显示在哪。
   cat-in / reveal / reveal-left / reveal-scale 一律取消位移与淡入。 */
.cat-in,
.reveal,
.reveal-left,
.reveal-scale,
.reveal.in,
.reveal-left.in,
.reveal-scale.in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}