/* ============================================================
   AnimatedList —— 原生 CSS 版（原 React 组件样式完整移植）
   深色主题按本站蓝调配色微调
   ============================================================ */
.animated-list{
  /* ---- 尺寸 ---- */
  --al-width:100%;
  --al-radius:20px;
  --al-gap:12px;
  --al-accent:#2b6cff;

  /* ---- 深色主题 ---- */
  --al-frame:rgba(15,23,45,.62);
  --al-frame-edge:rgba(255,255,255,.08);
  --al-frame-highlight:rgba(255,255,255,.07);
  --al-frame-shadow:0 22px 44px -20px rgba(0,0,0,.8),0 6px 16px -8px rgba(0,0,0,.5);
  --al-tile:linear-gradient(180deg,#1c2745 0%,#141d34 100%);
  --al-tile-edge:rgba(255,255,255,.07);
  --al-tile-highlight:rgba(255,255,255,.1);
  --al-tile-shadow:0 4px 10px -4px rgba(0,0,0,.7);
  --al-well:rgba(255,255,255,.07);
  --al-ink:#eaf0ff;
  --al-muted:rgba(198,210,240,.6);
  --al-thumb:rgba(255,255,255,.16);
  --al-ring:#2b6cff;
  --al-ring-fill:rgba(43,108,255,.1);
  --al-hover:brightness(1.14);
  --al-press:brightness(.85);
  --al-active:brightness(1.18);

  position:relative;
  width:min(100%,var(--al-width));
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  border-radius:calc(var(--al-radius) + 12px);
  color:var(--al-ink);
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}

.animated-list--framed{
  padding:6px;
  background:var(--al-frame);
  box-shadow:var(--al-frame-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
}

.animated-list:has(>.animated-list__viewport:focus-visible){
  outline:2px solid var(--al-accent);
  outline-offset:3px;
}

.animated-list__frame-rim{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--al-frame-edge),
    inset 0 1px 0 var(--al-frame-highlight);
  pointer-events:none;
}

.animated-list__viewport{
  --al-fade-top:0px;
  --al-fade-bottom:0px;
  position:relative;
  box-sizing:border-box;
  padding:6px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-radius:calc(var(--al-radius) + 6px);
  outline:none;
  scrollbar-width:thin;
  scrollbar-color:var(--al-thumb) transparent;
}

.animated-list__viewport::-webkit-scrollbar{width:6px;}
.animated-list__viewport::-webkit-scrollbar-track{background:transparent;}
.animated-list__viewport::-webkit-scrollbar-thumb{border-radius:3px;background:var(--al-thumb);}
.animated-list__viewport--bare{scrollbar-width:none;}
.animated-list__viewport--bare::-webkit-scrollbar{display:none;}

.animated-list__track{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--al-gap);
}

.animated-list__item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:11px 14px 11px 11px;
  box-sizing:border-box;
  border-radius:var(--al-radius);
  background:var(--al-tile);
  box-shadow:var(--al-tile-shadow);
  color:var(--al-ink);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  transform-origin:center center;
  will-change:transform,opacity;
}

.animated-list[data-animated] .animated-list__item:not([data-state]){
  opacity:0;
}

@media (hover:hover){
  .animated-list__item:hover{filter:var(--al-hover);}
}

.animated-list__item[data-selected]:not(:active){filter:var(--al-active);}
.animated-list__item:active{filter:var(--al-press);}

.animated-list__lead{
  display:grid;
  place-items:center;
  flex:none;
  width:42px;
  height:42px;
  overflow:hidden;
  border-radius:max(8px,calc(var(--al-radius) - 8px));
  background:var(--al-well);
  color:var(--al-ink);
}

.animated-list__lead img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.animated-list__lead svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.animated-list__text{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.animated-list__title{
  overflow:hidden;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.animated-list__description{
  overflow:hidden;
  font-size:12.5px;
  line-height:1.35;
  color:var(--al-muted);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.animated-list__meta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:18px;
  height:18px;
  font-variant-numeric:tabular-nums;
  color:var(--al-muted);
}

.animated-list__meta svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.animated-list__rim{
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--al-tile-edge),
    inset 0 1px 0 var(--al-tile-highlight);
  pointer-events:none;
}

.animated-list__indicator{
  position:absolute;
  top:0;left:0;right:0;
  z-index:2;
  height:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.animated-list__ring{
  position:absolute;
  inset:0;
  border-radius:var(--al-radius);
  background:var(--al-ring-fill);
  box-shadow:inset 0 0 0 1px var(--al-ring);
  transform-origin:center center;
}

/* 「推荐」小胶囊 */
.al-tag{
  display:inline-block;
  margin-left:7px;
  padding:1px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.5px;
  vertical-align:2px;
  color:#fff;
  background:linear-gradient(90deg,#2b6cff,#00a2f6);
  box-shadow:0 3px 10px rgba(43,108,255,.5);
}

/* 矮屏压缩 */
@media (max-height:700px){
  .animated-list{
    --al-radius:17px;
    --al-gap:9px;
  }
  .animated-list--framed{padding:5px;}
  .animated-list__viewport{padding:5px;}
  .animated-list__item{padding:8px 12px 8px 8px;gap:11px;}
  .animated-list__lead{width:38px;height:38px;}
  .animated-list__lead svg{width:20px;height:20px;}
  .animated-list__title{font-size:16px;}
  .animated-list__description{font-size:12px;}
}