/* ===== 液态玻璃 · 设计令牌 ===== */
:root{
  --ink:#101828; --ink2:rgba(16,24,40,.68); --muted:rgba(16,24,40,.48);
  --bg:linear-gradient(150deg,#e3ecff 0%,#f0eaff 26%,#e2f6ef 52%,#ffeadd 78%,#fdf4e0 100%);
  --glass:rgba(255,255,255,.34); --glass-strong:rgba(255,255,255,.58);
  --stroke:rgba(255,255,255,.75); --stroke-soft:rgba(16,24,40,.08);
  --shine:inset 0 1px 0 rgba(255,255,255,.85);
  --shadow:0 18px 44px -18px rgba(26,38,80,.28), 0 3px 10px -4px rgba(26,38,80,.12);
  --shadow-hover:0 28px 60px -20px rgba(26,38,80,.34), 0 4px 14px -4px rgba(26,38,80,.14);
  --accent:#4f46e5; --accent2:#0ea5a4;
  --chip:rgba(255,255,255,.5); --chip-ink:#3730a3;
  --warn:#b45309;
  --btn:linear-gradient(135deg,#6366f1,#3b82f6 55%,#0ea5e9);
  /* 置顶卡专用：暖色系，刻意与普通条目的冷蓝按钮区分开 */
  --pin-edge:linear-gradient(120deg,#fbbf24,#fb7185 46%,#a78bfa);
  --pin-btn:linear-gradient(135deg,#f59e0b,#f43f5e 52%,#a855f7);
  --pin-ink:#b45309; --pin-cell:rgba(255,255,255,.42);
  --pin-glow:rgba(244,114,182,.3); --pin-glow-s:rgba(244,63,94,.5);
  --pin-wash:rgba(251,191,36,.18);
  --r:22px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#eef2ff; --ink2:rgba(226,232,255,.72); --muted:rgba(226,232,255,.5);
    --bg:linear-gradient(155deg,#070b18 0%,#0c1430 30%,#0a1f24 58%,#141126 82%,#0a0f1e 100%);
    --glass:rgba(22,30,58,.38); --glass-strong:rgba(26,34,60,.55);
    --stroke:rgba(148,180,255,.22); --stroke-soft:rgba(226,232,255,.09);
    --shine:inset 0 1px 0 rgba(255,255,255,.12);
    --shadow:0 20px 50px -18px rgba(0,0,0,.6);
    --shadow-hover:0 30px 64px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(148,180,255,.1);
    --accent:#a5b4fc; --accent2:#5eead4;
    --chip:rgba(148,180,255,.12); --chip-ink:#c7d2fe;
    --warn:#fbbf24;
    --btn:linear-gradient(135deg,#818cf8,#38bdf8);
    --pin-edge:linear-gradient(120deg,rgba(251,191,36,.78),rgba(251,113,133,.72) 46%,rgba(167,139,250,.78));
    --pin-btn:linear-gradient(135deg,#fbbf24,#fb7185 52%,#c084fc);
    --pin-ink:#fcd34d; --pin-cell:rgba(148,180,255,.1);
    --pin-glow:rgba(244,114,182,.24); --pin-glow-s:rgba(244,63,94,.38);
    --pin-wash:rgba(251,191,36,.1);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-width:320px;min-height:100vh;
  color:var(--ink);
  font-family:-apple-system,"SF Pro SC","PingFang SC","HarmonicOS Sans SC","Microsoft YaHei",system-ui,"Segoe UI",sans-serif;
  font-size:15.5px;line-height:1.72;letter-spacing:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* 背景渐变做成独立合成层：等价于 fixed 背景，但滚动时不再触发整页重绘 */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--bg);pointer-events:none}
a{color:inherit}
::selection{background:rgba(99,102,241,.9);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{width:min(100% - 36px, 740px);margin:0 auto;padding:22px 0 64px}

/* 毛玻璃公共件 */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(150deg,var(--glass-strong) 0%,var(--glass) 60%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--stroke);
  box-shadow:var(--shine), inset 0 0 0 1px rgba(255,255,255,.05), var(--shadow);
  border-radius:var(--r);
}
/* 玻璃表面高光 / 折射光泽 */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(130% 90% at 10% -12%, rgba(255,255,255,.38), rgba(255,255,255,0) 42%),
    radial-gradient(100% 70% at 92% 112%, rgba(120,168,255,.16), rgba(120,168,255,0) 48%);
}
.glass>*{position:relative;z-index:2}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:var(--glass-strong)}
}

/* 液态折射背景：模糊色块用 GPU tween 缓慢漂移，玻璃随之"流动"。
   blur 放在每个 span 上，动画只占合成线程，不重算滤镜，滚动不卡 */
.liquid-bg{position:fixed;inset:-15%;z-index:-1;opacity:.4;pointer-events:none;overflow:hidden}
.liquid-bg span{position:absolute;display:block;border-radius:50%;-webkit-filter:blur(44px);filter:blur(44px);will-change:transform;transform:translateZ(0)}
.liquid-bg .w1{width:56vmax;height:56vmax;left:-12vmax;top:-16vmax;background:#7286ff;animation:drift1 26s ease-in-out infinite alternate}
.liquid-bg .w2{width:50vmax;height:50vmax;right:-14vmax;top:22vmax;background:#34d9c0;animation:drift2 32s ease-in-out infinite alternate}
.liquid-bg .w3{width:46vmax;height:46vmax;left:20vmax;bottom:-20vmax;background:#f4a94e;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(10vmin,8vmin) rotate(24deg) scale(1.12)}}
@keyframes drift2{to{transform:translate(-9vmin,7vmin) rotate(-20deg) scale(1.15)}}
@keyframes drift3{to{transform:translate(-12vmin,-6vmin) rotate(18deg) scale(1.1)}}
@media (prefers-color-scheme:dark){.liquid-bg{opacity:.3}}

/* 顶部悬浮条 */
.dock{
  position:sticky;top:14px;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;margin-bottom:34px;border-radius:18px;
}
.dock .site{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px}
.dot{
  position:relative;overflow:hidden;
  width:26px;height:26px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,#6ee7b7,#10b981 55%,#0f9a7e);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1.5px 1.5px rgba(255,255,255,.5), inset 0 -1.5px 3px rgba(6,78,59,.28), 0 4px 12px -2px rgba(16,185,129,.5);
}
.dot::after{content:"";position:absolute;left:2px;right:2px;top:1.5px;height:11px;border-radius:6px;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0))}
@media (prefers-color-scheme:dark){
  .dot{
    background:linear-gradient(140deg,#34d399,#10b981 55%,#0f766e);
    border-color:rgba(94,234,212,.35);
    box-shadow:inset 0 1.5px 1.5px rgba(255,255,255,.22), inset 0 -1.5px 3px rgba(0,0,0,.35), 0 4px 12px -2px rgba(45,212,191,.4);
  }
}
.dock a.src{font-size:12.5px;color:var(--ink2);text-decoration:none;padding:6px 12px;border-radius:999px;border:1px solid var(--stroke-soft);transition:.18s}
.dock a.src:hover{color:var(--accent);border-color:var(--accent)}

/* 风险提示 */
.risk{
  display:flex;gap:12px;align-items:flex-start;
  padding:15px 18px;margin-bottom:14px;border-radius:18px;
  color:var(--ink2);font-size:13.5px;line-height:1.8;
}
.risk .warn-i{
  flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(140deg,#fbbf24,#f59e0b);
  box-shadow:0 4px 10px -2px rgba(245,158,11,.5);
  font-size:14px;font-weight:800;margin-top:2px;
}
.risk b{color:var(--warn)}

/* 分组标题 */
.group{margin-top:38px}
.group-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.group-no{font-size:12.5px;letter-spacing:.16em;color:var(--accent);font-weight:700}
.group-head h2{margin:0;font-size:20px;font-weight:800}
.group-cnt{margin-left:auto;font-size:12.5px;color:var(--muted)}

/* 条目卡（液态玻璃） */
.list{display:grid;gap:14px}
.entry{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;align-items:center;padding:20px 22px;
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  /* 视口外的卡片跳过渲染采样（含 backdrop-filter），长列表滚动更明显 */
  content-visibility:auto;contain-intrinsic-size:auto 120px;
}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shine), var(--shadow-hover);border-color:var(--stroke)}

.tile{
  width:52px;height:52px;border-radius:16px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(var(--glass-strong),var(--glass));
  border:1px solid var(--stroke);box-shadow:var(--shine);
}
.tile img{width:26px;height:26px;border-radius:7px;display:block}
.tile span{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.e-main{min-width:0}
.e-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:17.5px;font-weight:800;line-height:1.35}
.tags{display:inline-flex;flex-wrap:wrap;gap:5px}
.tag{
  font-size:11px;color:var(--chip-ink);padding:2.5px 9px;border-radius:999px;
  background:var(--chip);border:1px solid var(--stroke-soft);white-space:nowrap;
}
.desc{margin:7px 0 0;color:var(--ink2);font-size:13.5px;line-height:1.72}
.note{margin:5px 0 0;color:var(--muted);font-size:12.5px;line-height:1.65}
.note::before{content:"· "}

.go{
  align-self:center;position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:14px;
  color:#fff;background:var(--btn);
  font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -8px rgba(59,110,246,.55);
  transition:transform .18s ease, box-shadow .2s ease, filter .18s ease;
}
.go::after{content:"";position:absolute;inset:-20px -22px;border-radius:inherit}
.entry:hover .go{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px -8px rgba(59,110,246,.6)}
.go:active{transform:translateY(1px)}
.go .arr{transition:transform .18s ease}
.entry:hover .arr{transform:translate(2px,-2px)}

/* ===== 置顶推荐卡 =====
   高度贴近普通条目：单行 head（图标 / 标题+徽章 / 右侧规格胶囊）+ 通栏 CTA。
   与普通条目的区分只靠三点：渐变描边、右侧数字胶囊组、通栏按钮。 */
.pinned-wrap{margin:0 0 2px}
.pinned{
  position:relative;isolation:isolate;overflow:hidden;
  padding:16px 20px;border-radius:var(--r);
  border:1.5px solid transparent;
  /* 双层背景：padding-box 铺玻璃，border-box 铺渐变，做出彩色描边 */
  background:
    linear-gradient(150deg,var(--glass-strong) 0%,var(--glass) 62%) padding-box,
    var(--pin-edge) border-box;
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:var(--shine), 0 18px 44px -18px var(--pin-glow), var(--shadow);
  transition:transform .2s ease, box-shadow .25s ease;
}
.pinned:hover{transform:translateY(-3px);box-shadow:var(--shine), 0 28px 60px -20px var(--pin-glow), var(--shadow-hover)}
.pinned::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 82% at 88% -22%, var(--pin-wash), transparent 60%),
    radial-gradient(92% 70% at 4% 118%, rgba(167,139,250,.16), transparent 58%);
}
.pinned>*{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .pinned{background:var(--glass-strong) padding-box, var(--pin-edge) border-box}
}

.pin-head{display:flex;align-items:center;gap:16px}
.pin-tile{
  width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(var(--glass-strong),var(--glass));
  border:1px solid var(--stroke);
  box-shadow:var(--shine), 0 8px 18px -10px var(--pin-glow);
}
.pin-tile img{width:26px;height:26px;border-radius:7px;display:block}
.pin-tile b{font-size:17px;font-weight:800;background:var(--pin-btn);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* 标题行放徽章和标签，副标题一行，右侧留给规格胶囊 */
.pin-id{min-width:0;flex:1}
.pin-title{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0;font-size:17.5px;font-weight:800;line-height:1.35}
.pin-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2.5px 10px;border-radius:999px;
  color:#fff;background:var(--pin-btn);
  font-size:11px;font-weight:800;letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 5px 13px -5px var(--pin-glow-s);
}
.pin-star{font-size:10px;line-height:1}
.pin-tag{
  display:inline-flex;padding:2.5px 10px;border-radius:999px;
  color:#fff;background:linear-gradient(135deg,#0ea5a4,#22c55e);
  font-size:11px;font-weight:800;
  box-shadow:0 4px 10px -4px rgba(14,165,164,.5);
}
.pin-sub{margin:5px 0 0;color:var(--ink2);font-size:13px;line-height:1.65}

/* 规格胶囊组：置顶卡独有，2×2 贴右对齐，高度正好吃掉标题行右侧的空白 */
.pin-perks{
  list-style:none;margin:0;padding:0;flex:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:6px;
}
.pin-perks li{
  padding:4px 11px;border-radius:999px;white-space:nowrap;
  background:var(--pin-cell);border:1px solid var(--stroke-soft);
  font-size:11.5px;color:var(--muted);line-height:1.55;
}
.pk-v{font-weight:800;color:var(--pin-ink);margin-right:4px}

/* 通栏 CTA */
.pin-go{
  margin-top:13px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:14px;
  color:#fff;background:var(--pin-btn);
  font-size:13.5px;font-weight:800;letter-spacing:.02em;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 9px 20px -9px var(--pin-glow-s);
  transition:transform .18s ease, box-shadow .2s ease, filter .18s ease;
}
.pin-go:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 13px 26px -9px var(--pin-glow-s)}
.pin-go:active{transform:translateY(1px)}
.pin-go .arr{transition:transform .18s ease}
.pin-go:hover .arr{transform:translate(2px,-2px)}

/* 页脚 */
.footer{
  margin-top:40px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
  padding:14px 18px;border-radius:16px;
  color:var(--muted);font-size:12.5px;
}
.footer p{margin:0}

/* 响应式 */
@media (max-width:620px){
  .page{width:min(100% - 24px,560px);padding:14px 0 44px}
  .dock{top:10px;margin-bottom:26px;padding:9px 13px}
  .group-head h2{font-size:17.5px}
  /* 手机上卡片改实色玻璃底，只保留顶栏/提示条的真模糊，滚动成本最低 */
  .entry{
    grid-template-columns:auto minmax(0,1fr);gap:10px 14px;padding:17px;
    -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-strong);
  }
  .tile{width:44px;height:44px;border-radius:14px}
  .tile img{width:22px;height:22px}
  .go{grid-column:1 / -1;justify-content:center;margin-top:6px}
  .go::after{inset:-17px}
  /* 置顶卡：手机上关模糊，规格胶囊掉到下一行铺满 */
  .pinned{
    padding:15px 16px;border-radius:20px;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--glass-strong) padding-box, var(--pin-edge) border-box;
  }
  .pin-head{flex-wrap:wrap;gap:11px 13px}
  .pin-tile{width:44px;height:44px;border-radius:14px}
  .pin-tile img{width:22px;height:22px}
  .pin-title{font-size:16.5px}
  .pin-perks{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pin-perks li{text-align:center}
  .pin-go{margin-top:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .liquid-bg span{animation:none}
}
@media print{
  body{background:#fff}
  .dock{position:static}
  .glass,.entry{border:1px solid #ddd;box-shadow:none;background:#fff}
  .go{color:#000;background:none;box-shadow:none}
  .go::after{display:none}
  .pinned{border:1px solid #ddd;box-shadow:none;background:#fff}
  .pinned::before{display:none}
  .pin-badge,.pin-go,.pin-tag{color:#000;background:none;box-shadow:none}
  .pin-tile b{background:none;-webkit-text-fill-color:#000}
  .pin-perks li{background:none}
  .pk-v{color:#000}
}