/* ============ youqu 展示站点 · 苹果白高端风格 ============ */

/* ---------- 基础变量与重置 ---------- */
:root{
  --bg:#f5f5f7;
  --bg-soft:#fbfbfd;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink2:#6e6e73;
  --ink3:#86868b;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --accent:#007aff;
  --accent-2:#5ac8fa;
  --accent-soft:#e8f1ff;
  --green:#34c759;
  --orange:#ff9500;
  --radius:20px;
  --radius-sm:14px;
  --radius-lg:30px;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.035),0 8px 20px rgba(0,122,255,.03);
  --shadow-md:0 2px 6px rgba(0,0,0,.04),0 10px 28px rgba(0,122,255,.05),0 14px 36px rgba(0,0,0,.05);
  --shadow-lg:0 4px 14px rgba(0,0,0,.05),0 20px 48px rgba(0,122,255,.07),0 28px 64px rgba(0,0,0,.07);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
}

/* ---------- 滚动进度条 ---------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,#007aff,#5ac8fa);
  z-index:1000;transition:width .1s linear;
  box-shadow:0 0 8px rgba(0,122,255,.4);
}

/* ---------- 通用容器 ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:980px;font-size:15px;font-weight:500;
  letter-spacing:-.01em;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  white-space:nowrap;cursor:pointer;border:none;
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(0,122,255,.3)}
.btn--primary:hover{background:#0066d6;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,122,255,.4)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:rgba(0,0,0,.045);color:var(--ink2);border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(0,122,255,.08);color:var(--accent);border-color:rgba(0,122,255,.2);transform:translateY(-1px)}
.btn--tint{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(0,122,255,.18)}
.btn--tint:hover{background:rgba(0,122,255,.14);color:#0066d6;border-color:rgba(0,122,255,.3);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,122,255,.15)}
.btn--lg{padding:14px 30px;font-size:16px}
.btn--sm{padding:0 16px;font-size:13px;height:36px}

/* ---------- 导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s var(--ease),backdrop-filter .3s var(--ease),box-shadow .3s var(--ease);
}
.nav.is-scrolled{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  height:48px;display:flex;align-items:center;justify-content:space-between;
}
.nav__brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.02em}
.nav__logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,#007aff,#5ac8fa);color:#fff;
  font-size:15px;font-weight:700;
}
.nav__name{font-family:-apple-system,"SF Pro Display","PingFang SC",sans-serif}
.nav__links{display:flex;align-items:center;gap:34px;font-size:14px;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.nav__links a{transition:color .2s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__gh{font-weight:500}

/* ---------- Hero ---------- */
.hero{
  position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:44px 24px 8px;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fafafd 30%,var(--bg) 70%,var(--bg) 100%);
}
.hero__orb{
  position:absolute;border-radius:50%;filter:blur(72px);
  pointer-events:none;will-change:transform;
}
.hero__orb--1{
  width:360px;height:360px;top:-80px;left:10%;
  background:radial-gradient(circle,rgba(0,122,255,.4),transparent 70%);
  opacity:.22;animation:float1 18s ease-in-out infinite;
}
.hero__orb--2{
  width:320px;height:320px;top:-50px;right:8%;
  background:radial-gradient(circle,rgba(90,200,250,.35),transparent 70%);
  opacity:.18;animation:float2 22s ease-in-out infinite;
}
.hero__orb--3{
  width:260px;height:260px;top:38%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(168,216,255,.45),transparent 70%);
  opacity:.14;animation:float3 26s ease-in-out infinite;
}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,30px) scale(1.08)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-24px) scale(1.1)}}
@keyframes float3{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,40px) scale(.92)}}

.hero__content{position:relative;z-index:2;max-width:820px}
.hero__badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 20px;border-radius:980px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 12px rgba(0,0,0,.05),0 0 0 1px rgba(255,255,255,.5) inset;
  font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.005em;
  opacity:0;animation:fadeUp .8s var(--ease-out) .1s forwards;
}
.hero__title{
  font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.05;
  letter-spacing:-.035em;margin:16px 0 10px;white-space:nowrap;
  opacity:0;animation:fadeUp .9s var(--ease-out) .25s forwards;
}
.hero__title-accent{
  /* 第十七轮：柔化渐变 —— 移除过亮的青色 #5ac8fa/#a8d8ff，改为深蓝到中蓝的柔和过渡，与整体浅色风格协调 */
  background:linear-gradient(110deg,#1d1d1f 0%,#007aff 45%,#3a8eff 55%,#1d1d1f 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:700;
  animation:titleShimmer 4.5s linear infinite;
}
@keyframes titleShimmer{0%{background-position:0% center}100%{background-position:220% center}}
.hero__sub{
  font-size:clamp(16px,2.2vw,20px);color:var(--ink2);line-height:1.65;
  letter-spacing:.005em;max-width:600px;margin:0 auto 20px;font-weight:400;
  opacity:0;animation:fadeUp .9s var(--ease-out) .4s forwards;
}
.hero__actions{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:fadeUp .9s var(--ease-out) .55s forwards;
}
.hero__stats{
  display:flex;gap:40px;justify-content:center;flex-wrap:wrap;
  margin-top:20px;
  opacity:0;animation:fadeUp 1s var(--ease-out) .75s forwards;
}
.stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:80px}
.stat__num{
  display:flex;align-items:center;justify-content:center;
  font-size:46px;font-weight:700;letter-spacing:-.035em;color:var(--ink);
  line-height:1;font-feature-settings:"tnum";
  background:linear-gradient(135deg,#1d1d1f,#007aff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  min-height:46px;
}
/* 主统计数字收敛：与次级数字尺寸接近，避免与主标题争夺视觉焦点 */
#stat-count{font-size:46px;letter-spacing:-.035em}
.stat__num--free{
  font-size:34px;letter-spacing:-.015em;
  background:linear-gradient(135deg,#34c759,#30b14e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat__label{display:block;font-size:12px;color:var(--ink3);margin-top:4px;letter-spacing:.04em;font-weight:500}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Hero 精选图标预览条 */
.hero__preview{
  position:relative;z-index:2;margin:36px auto 0;max-width:880px;text-align:center;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
  opacity:0;animation:fadeUp 1s var(--ease-out) .9s forwards;
  /* 全局隐藏：项目卡片墙紧接其后已完整展示工具，预览条徒增首屏密度且风格割裂 */
  display:none;
}
.hero__preview-label{
  display:block;font-size:12px;font-weight:600;color:var(--ink3);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;
}
.hero__preview-row{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.hero__chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px 8px 8px;border-radius:980px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 10px rgba(0,0,0,.04);
  font-size:13px;color:var(--ink2);font-weight:500;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.hero__chip:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.hero__chip-emoji{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:var(--accent-soft);
}

/* ---------- 段落标题 ---------- */
.section__title{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.section__desc{font-size:16px;color:var(--ink2);margin-top:8px;line-height:1.5}

/* ---------- 工具栏 ---------- */
.toolbar{padding:12px 0 16px;background:var(--bg);position:sticky;top:48px;z-index:50}
.toolbar.is-stuck{background:rgba(245,245,247,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.04);padding:16px 0 14px}
.toolbar__inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.toolbar__head{margin-bottom:14px;text-align:center;display:none}
.toolbar.is-stuck .toolbar__head{display:none}
.toolbar__head .section__title{font-size:clamp(22px,3vw,28px);font-weight:600}
.toolbar__head .section__desc{font-size:15px}
.toolbar__row{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin-bottom:20px;justify-content:center;
}
.search{
  position:relative;flex:1;min-width:260px;max-width:440px;
  display:flex;align-items:center;
}
.search__icon{position:absolute;left:14px;width:18px;height:18px;color:var(--ink3);pointer-events:none}
.search__input{
  width:100%;padding:12px 40px 12px 46px;
  border-radius:980px;border:1px solid var(--line);
  background:var(--card);font-size:15px;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  font-family:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.search__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 1px 3px rgba(0,0,0,.04);animation:searchGlow 2.6s ease-in-out infinite}
@keyframes searchGlow{0%,100%{box-shadow:0 0 0 4px var(--accent-soft),0 1px 3px rgba(0,0,0,.04)}50%{box-shadow:0 0 0 7px rgba(0,122,255,.13),0 1px 3px rgba(0,0,0,.04)}}
.search__input::placeholder{color:var(--ink3)}
.search__clear{
  position:absolute;right:10px;width:22px;height:22px;border-radius:50%;
  background:var(--line-soft);color:var(--ink2);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.search__clear:hover{background:var(--line)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:10px 18px 10px 14px;border-radius:980px;font-size:14px;font-weight:600;
  background:var(--card);color:var(--ink2);border:1px solid var(--line);
  transition:all .25s var(--ease-out);
  letter-spacing:-.005em;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  height:40px;display:inline-flex;align-items:center;gap:7px;
}
.chip::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ink3);
  transition:background .25s,transform .25s;flex-shrink:0;
}
.chip[data-filter="all"]::before{background:linear-gradient(135deg,#007aff,#34c759,#ff9500,#af52de)}
.chip[data-filter="dev"]::before{background:#007aff}
.chip[data-filter="system"]::before{background:#34c759}
.chip[data-filter="efficiency"]::before{background:#ff9500}
.chip[data-filter="design"]::before{background:#af52de}
.chip:hover{background:var(--bg-soft);color:var(--ink);border-color:var(--line);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.06)}
.chip:hover::before{transform:scale(1.2)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.18);transform:translateY(-1px);font-weight:600}
.chip.is-active::before{background:#fff;transform:scale(1)}

.toolbar__count{font-size:13px;color:var(--ink3);margin-bottom:8px;text-align:center}

/* ---------- 项目卡片墙 ---------- */
.grid-wrap{padding:40px 0 80px;background:var(--bg)}
.grid{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  column-gap:22px;row-gap:32px;
}
/* 超宽屏（≥1440px）提升最大宽度，让 4 列更舒展 */
@media (min-width:1440px){
  .grid{max-width:1320px;column-gap:24px;row-gap:36px}
}
.card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
  display:flex;flex-direction:column;cursor:pointer;
  border:1px solid rgba(0,0,0,.04);
  opacity:1;position:relative;height:100%;
}
.card.is-visible{opacity:1;transform:translateY(0)}
/* 入场动效：仅对 JS 标记的待动画卡片生效，确保 headless 截图与无 JS 时卡片始终可见 */
.card.is-pending{opacity:0;transform:translateY(24px)}
.card.is-pending.is-visible{opacity:1;transform:translateY(0)}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#007aff,#5ac8fa);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
  z-index:3;
}
.card[data-cat="dev"]::before{background:linear-gradient(90deg,#007aff,#5ac8fa)}
.card[data-cat="system"]::before{background:linear-gradient(90deg,#34c759,#30d158)}
.card[data-cat="efficiency"]::before{background:linear-gradient(90deg,#ff9500,#ffb340)}
.card[data-cat="design"]::before{background:linear-gradient(90deg,#af52de,#d478f0)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(0,122,255,.12)}
.card:hover::before{transform:scaleX(1)}
.card:hover .card__lightbox-btn{opacity:1;transform:scale(1)}

.card__media{
  position:relative;height:150px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* 媒体区文字：分类标签 + 项目名，居中排列 */
.card__media-watermark{
  position:absolute;font-size:90px;line-height:1;z-index:0;
  opacity:.12;right:-12px;bottom:-18px;pointer-events:none;
  filter:grayscale(.3);
}
.card__media-cat{
  font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 12px;border-radius:980px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
}
.card__media-name{
  font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  line-height:1.2;text-shadow:0 1px 2px rgba(255,255,255,.6);
  max-width:100%;word-break:break-word;
}
/* 装饰性背景图案 */
.card__media::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 50%);
}
.card__media::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 70% 70%,rgba(255,255,255,.3),transparent 50%);
}
.card__version{
  position:absolute;top:12px;right:12px;z-index:3;
  padding:4px 10px;border-radius:980px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.05);
  font-size:11px;font-weight:600;color:var(--ink2);letter-spacing:.01em;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.card__score{
  position:absolute;bottom:12px;left:12px;z-index:3;
  display:inline-flex;align-items:center;gap:3px;
  padding:4px 9px;border-radius:980px;
  font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#34c759,#30b14e);
  box-shadow:0 1px 6px rgba(52,199,89,.3);
  letter-spacing:.02em;
}
.card__score::before{content:"★";font-size:10px}
.card__score[data-low="1"]{background:linear-gradient(135deg,#ff9500,#f08300);box-shadow:0 1px 6px rgba(255,149,0,.3)}
.card__score[data-low="2"]{background:linear-gradient(135deg,#ff3b30,#e02e24);box-shadow:0 1px 6px rgba(255,59,48,.3)}
.card__lightbox-btn{
  position:absolute;bottom:12px;right:12px;z-index:3;
  width:32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  color:var(--ink2);font-size:16px;cursor:pointer;border:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.8);transition:all .3s var(--ease);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.card__lightbox-btn:hover{background:#fff;color:var(--accent)}
.card__cat{
  position:absolute;top:12px;left:14px;z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  padding:3px 10px;border-radius:980px;border:1px solid rgba(0,0,0,.05);
}

.card__body{padding:18px 20px 18px;display:flex;flex-direction:column;flex:1;gap:8px}
.card__title{
  font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  line-height:1.3;margin:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.card__desc{
  font-size:13.5px;color:var(--ink2);line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;letter-spacing:.005em;margin:0;
}
.card__actions{display:flex;gap:10px;align-items:center;margin-top:auto}
.card__actions .btn{flex:1;min-width:0}
/* 获取按钮：auto 宽度，避免全宽过重；保留蓝色 CTA 强度 */
.card__actions .card__cta{flex:0 1 auto;min-width:96px;padding:0 22px}
.tag{
  font-size:11px;font-weight:500;padding:3px 10px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent);border:1px solid transparent;
  letter-spacing:.01em;
}
.tag--web{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.card__zoom{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:transparent;color:var(--ink3);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.card__zoom svg{width:15px;height:15px}
.card__zoom:hover{background:var(--bg);color:var(--ink2)}

/* ---------- 空状态 ---------- */
.empty{
  max-width:var(--maxw);margin:0 auto;padding:80px 24px;text-align:center;color:var(--ink3);
}
.empty__icon{font-size:48px;display:block;margin-bottom:16px}
.empty p{margin-bottom:20px;font-size:16px}

/* ---------- 更新日志 ---------- */
.changelog{padding:96px 0;background:var(--bg-soft);border-top:1px solid var(--line-soft)}
.changelog .section__title{margin-bottom:8px}
.timeline{margin-top:48px;position:relative;padding-left:28px}
.timeline::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2),transparent);
}
.tl__item{position:relative;padding-bottom:32px}
.tl__item:last-child{padding-bottom:0}
.tl__dot{
  position:absolute;left:-28px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;
  box-shadow:0 0 0 4px var(--accent-soft);
}
/* 最新一条更新日志的圆点呼吸光环，暗示「新鲜」 */
.tl__item:first-child .tl__dot{animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-soft)}50%{box-shadow:0 0 0 9px rgba(0,122,255,.10)}}
.tl__date{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:6px}
.tl__card{
  background:var(--card);border-radius:var(--radius-sm);padding:18px 22px;
  box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.tl__card:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.tl__card h3{font-size:16px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.tl__card p{font-size:14px;color:var(--ink2);line-height:1.6}
.tl__card code{background:var(--bg);padding:1px 6px;border-radius:4px;font-size:13px;color:var(--accent)}

/* ---------- 支持我们 ---------- */
.support{padding:96px 0;background:var(--bg)}
.support__inner{
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start;
}
.support__text .section__desc{margin-bottom:28px}
.support__thanks{
  background:var(--card);border-radius:var(--radius);padding:32px;
  box-shadow:var(--shadow);border:1px solid var(--line-soft);
}
.support__thanks h3{font-size:20px;margin-bottom:12px}
.support__thanks p{font-size:14px;color:var(--ink2);margin-bottom:16px}
.thanks__list{font-size:14px;color:var(--ink3);line-height:1.8}
.thanks__empty{font-style:italic;color:var(--ink3)}

/* ---------- 页脚 ---------- */
.footer{background:#1d1d1f;color:#a1a1a6;padding:56px 0 32px}
.footer__inner{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;align-items:start;
}
.footer__brand{display:flex;gap:14px;align-items:center}
.footer__brand strong{display:block;font-size:15px;color:#f5f5f7;font-weight:600}
.footer__brand p{font-size:13px;color:#86868b;margin-top:2px}
.footer__links{display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer__links a{color:#a1a1a6;transition:color .2s}
.footer__links a:hover{color:#f5f5f7}
.footer__copy{font-size:13px;color:#86868b;text-align:right}
.footer__copy p{margin-bottom:6px}
.footer__made{color:#6e6e73 !important}

/* ---------- 返回顶部 ---------- */
.to-top{
  position:fixed;bottom:28px;right:28px;z-index:90;
  width:44px;height:44px;border-radius:50%;
  background:var(--card);color:var(--ink);box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.to-top:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.to-top__arrow{width:20px;height:20px;position:relative;z-index:1}
.to-top__ring{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}
.to-top__ring circle{transition:stroke-dashoffset .12s linear}
.to-top[hidden]{display:none}

/* ---------- 详情弹窗 ---------- */
.modal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px)}
.modal__panel{
  position:relative;z-index:1;width:100%;max-width:640px;max-height:85vh;
  background:var(--card);border-radius:var(--radius-lg);overflow:auto;
  box-shadow:var(--shadow-lg);
  transform:scale(.95) translateY(20px);transition:transform .35s var(--ease-out);
}
.modal.is-open .modal__panel{transform:scale(1) translateY(0)}
.modal__close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.05);color:var(--ink);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.modal__close:hover{background:rgba(0,0,0,.1)}
.modal__media{
  height:200px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
/* 媒体区装饰光晕（与 Hero 风格统一） */
.modal__orb{
  position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none;
}
.modal__orb--1{
  width:200px;height:200px;top:-60px;left:-30px;
  background:radial-gradient(circle,rgba(0,122,255,.30),transparent 70%);opacity:.55;
}
.modal__orb--2{
  width:180px;height:180px;bottom:-50px;right:-20px;
  background:radial-gradient(circle,rgba(90,200,250,.28),transparent 70%);opacity:.5;
}
/* 大 emoji 视觉锚点（玻璃容器） */
.modal__big-emoji{
  position:relative;z-index:2;
  width:96px;height:96px;border-radius:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:52px;line-height:1;
  background:rgba(255,255,255,.78);backdrop-filter:blur(12px);
  box-shadow:0 12px 36px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.9);
  animation:modalEmojiIn .5s var(--ease-out);
}
@keyframes modalEmojiIn{from{opacity:0;transform:scale(.7) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
/* 媒体区分类标签（顶部居中） */
.modal__media-cat{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 14px;border-radius:980px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.05);color:var(--ink2);
}
/* 媒体区底部徽章组（版本 / 技术栈 / 评分） */
.modal__media-badges{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.modal__badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1;
  padding:6px 12px;border-radius:980px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06);color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.modal__badge--stack{color:var(--ink2);font-weight:600}
.modal__badge--score{background:linear-gradient(135deg,#34c759,#30b14e);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(52,199,89,.3)}
.modal__body{padding:28px 32px 36px}
.modal__cat{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.modal__title{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.modal__desc{font-size:15px;color:var(--ink2);line-height:1.65;margin-bottom:20px}
.modal__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.modal__actions{display:flex;gap:10px;flex-wrap:wrap}
.modal__features{margin-top:24px}
.modal__features h4{font-size:15px;font-weight:600;margin-bottom:12px}
.modal__features ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.modal__features li{font-size:14px;color:var(--ink2);padding-left:22px;position:relative;line-height:1.5}
.modal__features li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

/* ---------- 滚动出现动画 ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .support__inner{grid-template-columns:1fr;gap:32px}
  .footer__inner{grid-template-columns:1fr;gap:24px}
  .footer__copy{text-align:left}
  .nav__links{gap:14px;font-size:13px}
  .nav__links a:not(.nav__gh){display:none}
  .hero__stats{gap:28px;margin-top:48px}
  .stat__num{font-size:26px}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr;gap:20px;padding:0 16px}
  .toolbar__inner{padding:0 16px}
  .container{padding:0 16px}
  .hero{padding:48px 16px 8px}
  .hero__actions .btn{flex:1;min-width:140px}
  .modal__panel{max-height:90vh;border-radius:20px}
  .modal__body{padding:22px 20px 28px}
  .modal__title{font-size:22px}
  .changelog,.support{padding:64px 0}
  .timeline{padding-left:24px}
}

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .hero__orb{animation:none}
  .hero__title-accent{animation:none;background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}
  .card__shot{opacity:1 !important}
  .search__input:focus{animation:none}
  .tl__item:first-child .tl__dot{animation:none}
}

/* ---------- 截图 Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:32px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.lightbox__close{
  position:absolute;top:20px;right:24px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  color:#fff;font-size:24px;line-height:1;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.lightbox__close:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)}
.lightbox__img{
  position:relative;z-index:1;max-width:92%;max-height:88vh;
  border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.5);
  transform:scale(.9);transition:transform .35s var(--ease-out);
}
.lightbox.is-open .lightbox__img{transform:scale(1)}

@media (max-width:600px){
  .lightbox{padding:16px}
  .lightbox__close{top:12px;right:12px;width:38px;height:38px;font-size:20px}
  .lightbox__img{max-width:96%;max-height:80vh;border-radius:8px}
}

/* ============ 第二轮细节打磨 ============ */

/* 卡片 hover 鼠标光晕 spotlight（跟随鼠标的柔和蓝色光晕） */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(0,122,255,.10),transparent 55%);
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:4;
}
.card:hover::after{opacity:1}

/* 筛选切换淡入淡出 */
.grid{transition:opacity .15s var(--ease)}
.grid.is-fading{opacity:0}

/* 计数器跳动反馈 */
.toolbar__count{display:inline-block;transition:color .2s}
.count-tick{animation:countTick .35s var(--ease-out)}
@keyframes countTick{0%{transform:translateY(-5px);opacity:.4}100%{transform:translateY(0);opacity:1}}

/* 返回顶部圆形进度环（基础规则见上方 .to-top 区块） */

/* 卡片键盘焦点可见增强 */
.card:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
  box-shadow:0 0 0 6px var(--accent-soft),var(--shadow-md);
}

/* 时间线圆点呼吸动画 */
.tl__dot{
  animation:dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 4px var(--accent-soft)}
  50%{box-shadow:0 0 0 7px rgba(0,122,255,.10)}
}

/* 鸣谢空状态卡片化（虚线占位 + 温馨文案） */
.thanks__empty{
  display:block;font-style:normal;color:var(--ink3);
  padding:20px 24px;border:1.5px dashed var(--line);border-radius:var(--radius-sm);
  background:var(--bg-soft);text-align:center;line-height:1.7;
}

/* 页脚链接 hover 下划线微动效 */
.footer__links a{position:relative}
.footer__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:#f5f5f7;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.footer__links a:hover::after{transform:scaleX(1)}

/* 中等平板断点（768px iPad）补充 */
@media (max-width:768px) and (min-width:601px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
  .hero__stats{gap:24px}
  .stat__num{font-size:28px}
}

/* ============ 第四轮细节打磨 ============ */

/* Hero 统计条分隔点 */
.stat__sep{
  width:5px;height:5px;border-radius:50%;background:var(--line);
  align-self:center;flex-shrink:0;
}

/* 卡片 monogram 圆形徽标 */
.card__monogram{
  position:absolute;top:14px;left:14px;z-index:3;
  width:42px;height:42px;border-radius:13px;
  display:none; /* 全局隐藏：减少卡片视觉密度，让 emoji 独占视觉焦点 */
  align-items:center;justify-content:center;
  font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.25);
  background:linear-gradient(135deg,var(--mc1,#007aff),var(--mc2,#5ac8fa));
  transition:transform .3s var(--ease-out);
}
.card:hover .card__monogram{transform:scale(1.08) rotate(-3deg)}
.card[data-cat="dev"] .card__monogram{--mc1:#007aff;--mc2:#5ac8fa}
.card[data-cat="system"] .card__monogram{--mc1:#34c759;--mc2:#30d158}
.card[data-cat="efficiency"] .card__monogram{--mc1:#ff9500;--mc2:#ffb340}
.card[data-cat="design"] .card__monogram{--mc1:#af52de;--mc2:#d478f0}

/* 卡片大 emoji 图标（视觉锚点，统一容器保证视觉重量一致） */
.card__emoji{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  z-index:1;font-size:40px;line-height:1;
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
  pointer-events:none;
}
.card:hover .card__emoji{transform:translate(-50%,-50%) scale(1.12) rotate(-5deg);box-shadow:0 10px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.8)}

/* 媒体区文字：底部对齐，与 emoji 分层 */
.card__media-text{
  position:absolute;bottom:14px;left:0;right:0;z-index:2;
  text-align:center;padding:0 16px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}

/* 卡片 3D 微倾斜（hover 时跟随鼠标的精致透视） */
.card{transform-style:preserve-3d;will-change:transform}
.card.is-tilting{transition:none}
.card__media,.card__body{transform:translateZ(0)}

/* 搜索框聚焦时显示快捷键提示 */
.search__hint{
  position:absolute;right:40px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--ink3);font-weight:600;
  padding:2px 7px;border-radius:6px;background:var(--bg);
  border:1px solid var(--line-soft);pointer-events:none;
  transition:opacity .2s;
}
.search__input:focus ~ .search__hint{opacity:0}
.search__input:not(:placeholder-shown) ~ .search__hint{opacity:0}

/* 精选预览胶囊条动效衔接 */
.hero__chip{
  opacity:0;animation:fadeUp .5s var(--ease-out) forwards;
}
.hero__chip:nth-child(1){animation-delay:1.0s}
.hero__chip:nth-child(2){animation-delay:1.08s}
.hero__chip:nth-child(3){animation-delay:1.16s}
.hero__chip:nth-child(4){animation-delay:1.24s}
.hero__chip:nth-child(5){animation-delay:1.32s}
.hero__chip:nth-child(6){animation-delay:1.40s}

/* Hero 统计数字分隔点响应式收敛 */
@media (max-width:600px){
  .hero__stats{gap:20px}
  .stat__sep{display:none}
  .card__monogram{width:38px;height:38px;font-size:17px;border-radius:11px}
}

/* ============ 第五轮细节打磨（针对 mimo 审美反馈） ============ */

/* 1. Hero 间距优化：统计区间距加大，避免视觉拥挤 */
.hero__stats{gap:44px;margin-top:40px}
.stat__num{font-variant-numeric:tabular-nums}

/* 2. 工具栏间距收紧：搜索框与筛选按钮更紧凑 */
.toolbar__row{gap:26px}
.toolbar__count{margin-top:6px;letter-spacing:.01em}

/* 3. 卡片图标加大：增强视觉重量 */
.card__emoji{font-size:46px;width:84px;height:84px}

/* 4. 版本号徽章：保持轻盈通透，hover 时轻微上浮 + 蓝色描边强化（mimo 反馈视觉权重过高，回调） */
.card__version{
  padding:4px 10px;font-size:11px;font-weight:600;
  color:var(--ink2);background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.05);
  letter-spacing:.01em;opacity:1;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)
}
.card:hover .card__version{
  transform:translateY(-1px);
  color:var(--accent);border-color:rgba(0,122,255,.22);
  box-shadow:0 3px 10px rgba(0,122,255,.12)
}

/* 5. 卡片内容区 padding 优化：按钮不贴边 */
.card__body{padding:18px 20px 22px}

/* 6. 统一卡片顶栏为蓝色渐变：降低多色噪点 */
.card::before{background:linear-gradient(90deg,#007aff,#5ac8fa)}
.card[data-cat="dev"]::before,
.card[data-cat="system"]::before,
.card[data-cat="efficiency"]::before,
.card[data-cat="design"]::before{background:linear-gradient(90deg,#007aff,#5ac8fa)}

/* 7. 技术栈徽章：三色区分（Web蓝/Electron默认/Python绿） */
.card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:0}
.card__stack{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  color:var(--ink2);padding:3px 9px 3px 7px;border-radius:980px;
  background:rgba(0,0,0,.045);border:1px solid var(--line-soft);
  letter-spacing:.01em;line-height:1;white-space:nowrap;
}
.card[data-stack="web"] .card__stack{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.card[data-stack="python"] .card__stack{color:#0a7d4d;background:rgba(52,199,89,.12);border-color:transparent}
.card__body{gap:7px}
.card__desc{margin-top:1px}

/* 8. 新项目脉冲标签：橙色视觉锚点 */
.card__new{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;padding:3px 8px;border-radius:980px;
  line-height:1;background:linear-gradient(135deg,#ff9500,#ff6a00);
  box-shadow:0 2px 6px rgba(255,149,0,.35);letter-spacing:.06em;
  animation:newPulse 2.4s ease-in-out infinite;
}
@keyframes newPulse{0%,100%{box-shadow:0 2px 6px rgba(255,149,0,.35)}50%{box-shadow:0 2px 14px rgba(255,149,0,.6)}}
.card:has(.card__new)::before{background:linear-gradient(90deg,#ff9500,#ffb340)}

/* 9. 分类筛选增强：active 状态用分类色填充，"全部"用品牌蓝统一基调 */
.chip[data-filter="all"].is-active{background:#007aff;border-color:#007aff}
.chip[data-filter="dev"].is-active{background:#007aff;border-color:#007aff}
.chip[data-filter="system"].is-active{background:#34c759;border-color:#34c759}
.chip[data-filter="efficiency"].is-active{background:#ff9500;border-color:#ff9500}
.chip[data-filter="design"].is-active{background:#af52de;border-color:#af52de}

/* ============ 第六轮细节打磨（新项目收录 + 视觉层次） ============ */

/* 1. Hero 标题"集合"渐变流光动效：增强首屏视觉焦点 */
.hero__title-accent{
  background:linear-gradient(110deg,#007aff 0%,#3a9bff 35%,#007aff 70%,#3a9bff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titleShimmer 6s ease-in-out infinite;
}
@keyframes titleShimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
  .hero__title-accent{animation:none;background:#007aff;-webkit-text-fill-color:#007aff}
}

/* 2. 卡片索引序号：meta 区精致序号，丰富信息层次（弱化降噪） */
.card__index{
  font-size:10px;font-weight:600;color:var(--ink3);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  font-family:-apple-system,"SF Mono","Menlo",monospace;
  padding:2px 6px;border-radius:5px;
  background:rgba(0,0,0,.025);line-height:1;
  opacity:.7;transition:color .25s,background .25s,opacity .25s;
  /* 全局隐藏：减少卡片信息密度 */
  display:none;
}
.card:hover .card__index{color:var(--accent);background:var(--accent-soft);opacity:1}

/* 3. 分类筛选 chips 数量徽标：实时显示各分类工具数 */
.chip[data-count]::after{
  content:attr(data-count);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:17px;padding:0 5px;border-radius:980px;
  font-size:10px;font-weight:700;line-height:1;
  background:rgba(0,0,0,.06);color:var(--ink3);
  margin-left:2px;transition:background .25s,color .25s;
  font-variant-numeric:tabular-nums;
}
.chip[data-filter="all"][data-count]::after{background:rgba(0,122,255,.1);color:var(--accent)}
.chip[data-filter="dev"][data-count]::after{background:rgba(0,122,255,.1);color:var(--accent)}
.chip[data-filter="system"][data-count]::after{background:rgba(52,199,89,.12);color:#1a9e3e}
.chip[data-filter="efficiency"][data-count]::after{background:rgba(255,149,0,.12);color:#cc6f00}
.chip[data-filter="design"][data-count]::after{background:rgba(175,82,222,.12);color:#8b3eb5}
.chip.is-active[data-count]::after{background:rgba(255,255,255,.22);color:#fff}
.chip.is-active[data-filter="all"][data-count]::after,
.chip.is-active[data-filter="dev"][data-count]::after{background:rgba(255,255,255,.22);color:#fff}

/* 4. 卡片 meta 区间距微调：容纳索引号 */
.card__meta{gap:7px}

/* 5. 卡片源码链接：浅蓝灰填充按钮，与主按钮主次平衡（提升源码入口可见性） */
.card__src{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--ink);
  padding:0 14px;border-radius:980px;white-space:nowrap;height:36px;
  background:rgba(0,122,255,.08);border:1px solid rgba(0,122,255,.18);
  transition:all .2s var(--ease);
}
.card__src-icon{width:14px;height:14px;flex-shrink:0;opacity:.85;color:var(--ink2)}
.card__src:hover{color:var(--accent);background:rgba(0,122,255,.14);border-color:rgba(0,122,255,.3)}
.card__src:hover .card__src-icon{opacity:1;color:var(--accent)}
.card__actions{gap:8px}
.card__actions .btn--sm{height:36px}

/* ============ 第七轮细节打磨（modal 修复 + 首屏质感 + 时间线增强） ============ */

/* 1. Hero 信任支柱条：三列玻璃卡片，强化首屏信任感与质感 */
.hero__pillars{
  list-style:none;margin:48px auto 0;padding:14px;
  max-width:780px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  opacity:0;animation:fadeUp 1s var(--ease-out) 1.1s forwards;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(248,250,255,.4));
  border:1px solid rgba(0,0,0,.04);border-radius:22px;
  box-shadow:0 4px 24px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.6);
}
.hero__pillar{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-radius:16px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
.hero__pillar:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:rgba(0,122,255,.14)}
.hero__pillar-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#007aff,#5ac8fa);color:#fff;
  box-shadow:0 4px 10px rgba(0,122,255,.25),inset 0 1px 0 rgba(255,255,255,.3);
}
.hero__pillar-icon svg{width:18px;height:18px}
.hero__pillar-text{display:flex;flex-direction:column;gap:1px;line-height:1.25;min-width:0}
.hero__pillar-text strong{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.hero__pillar-text em{font-size:11.5px;color:var(--ink3);font-style:normal;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){
  .hero__pillars{grid-template-columns:repeat(3,1fr);gap:6px;max-width:360px;margin-top:22px}
  .hero__pillar{flex-direction:column;gap:6px;padding:10px 6px;text-align:center;align-items:center}
  .hero__pillar-icon{width:28px;height:28px;border-radius:8px}
  .hero__pillar-icon svg{width:15px;height:15px}
  .hero__pillar-text{align-items:center;gap:0}
  .hero__pillar-text strong{font-size:11px}
  .hero__pillar-text em{display:none}
  /* 移动端隐藏精选工具预览条：项目卡片墙已完整展示，预览条在窄屏徒增首屏高度 */
  .hero__preview{display:none}
}

/* 2. 段落 eyebrow 小标签：标题上方的小标签，增强层次与专业感 */
.section__eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent);margin-bottom:10px;
  padding:5px 14px;border-radius:980px;background:var(--accent-soft);
  border:1px solid rgba(0,122,255,.12);
}
.toolbar__head .section__eyebrow{margin-bottom:8px}

/* 3. 页脚渐变顶边：替代硬切，柔和过渡 */
.footer{position:relative;border-top:1px solid transparent}
.footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,122,255,.4),rgba(90,200,250,.4),transparent);
}
.footer::after{
  content:"";position:absolute;top:0;left:0;right:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,122,255,.04),transparent);
}

/* 4. 时间线增强：最新条目高亮 + 日期胶囊化 + 入场动画 */
.tl__item:first-child .tl__card{
  border:1px solid rgba(0,122,255,.18);
  box-shadow:0 2px 8px rgba(0,122,255,.06),0 12px 32px rgba(0,0,0,.07);
}
.tl__item:first-child .tl__card::before{
  content:"最新";position:absolute;top:14px;right:16px;
  font-size:10px;font-weight:700;color:#fff;letter-spacing:.06em;
  padding:3px 9px;border-radius:980px;
  background:linear-gradient(135deg,#007aff,#5ac8fa);
  box-shadow:0 2px 6px rgba(0,122,255,.3);
}
.tl__card{position:relative}
.tl__date{
  display:inline-block;width:auto;
  padding:4px 12px;border-radius:980px;
  background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-weight:700;letter-spacing:.01em;
}
.tl__item:first-child .tl__dot{animation:dotPulse 2.2s ease-in-out infinite}
.tl__item:not(:first-child) .tl__dot{animation:none;box-shadow:0 0 0 4px var(--accent-soft)}

/* 5. 卡片媒体区精化：高度微增 + emoji 背后分类色光晕 */
.card__media{height:164px}
.card__emoji-glow{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  width:120px;height:120px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--glow,rgba(0,122,255,.16)),transparent 65%);
  pointer-events:none;filter:blur(2px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.card:hover .card__emoji-glow{transform:translate(-50%,-50%) scale(1.15)}
/* 统一为单一中性蓝光晕：避免 4 色光晕在网格中产生杂乱感（mimo 反馈） */
.card[data-cat="dev"] .card__emoji-glow,
.card[data-cat="system"] .card__emoji-glow,
.card[data-cat="efficiency"] .card__emoji-glow,
.card[data-cat="design"] .card__emoji-glow{--glow:rgba(0,122,255,.10)}
/* emoji 轻微呼吸 */
.card__emoji{animation:none}
@keyframes emojiBreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.04)}}
.card:hover .card__emoji{animation:none}
@media (prefers-reduced-motion:reduce){.card__emoji{animation:none}}

/* 6. 段落标题区居中容器（配合 eyebrow） */
.changelog .section__head,.support .section__head{text-align:center;margin-bottom:8px}
.support__text .section__head{text-align:left}

/* 7. 卡片媒体区名称描边收敛（避免与 emoji 重叠时模糊） */
.card__media-name{text-shadow:0 1px 1px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.6)}

/* 8. 移动端卡片名称可读性：缩小字号 + 允许两行换行 + emoji 上移避让 */
@media (max-width:600px){
  .card__media{height:156px}
  .card__media-name{font-size:17px;line-height:1.25;max-width:88%}
  .card__emoji{width:70px;height:70px;font-size:38px;top:40%}
  .card__emoji-glow{width:104px;height:104px;top:40%}
  .card__media-text{bottom:12px;gap:3px}
  .card__media-cat{font-size:10px;padding:3px 10px}
  /* 筛选 chips 紧凑化，确保 5 个分类完整可见不截断 */
  .chip{padding:8px 12px 8px 10px;font-size:13px;height:36px}
  .chip::before{width:6px;height:6px}
  .chip[data-count]::after{min-width:16px;height:15px;font-size:9px}
  .chips{gap:6px}
  /* 移动端 chips 横向滚动，避免换行挤压搜索栏 */
  .toolbar__row{flex-direction:column;align-items:stretch;gap:10px}
  .search{min-width:0;flex:1 1 100%;max-width:100%}
  .chips{flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;width:100%;
    /* 右侧单侧柔和渐隐，暗示可横向滑动而不切断标签 */
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.4) calc(100% - 14px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.4) calc(100% - 14px),transparent 100%);
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0}
  /* 卡片描述在移动端限制 2 行，避免内容过长导致单卡过高 */
  .card__desc{-webkit-line-clamp:2}
  /* 描述与按钮间距收敛 */
  .card__body{padding:16px 16px}
  /* 移动端卡片标题加大，强化信息层级 */
  .card__title{font-size:16px;font-weight:700}
  /* 移动端卡片阴影增强，提升高端感 */
  .card{box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.04)}
  /* 移动端卡片媒体区高度收敛，减少单卡高度 */
  .card__media{height:140px}
  .card__emoji{width:64px;height:64px;font-size:36px}
}

/* ============ 第八轮细节打磨（按钮权重 / 视觉焦点 / 微交互暗示） ============ */

/* 1. 统计分隔点升级为竖线分隔，更优雅高级 */
.stat__sep{
  width:1px;height:32px;border-radius:1px;
  background:linear-gradient(180deg,transparent,var(--line) 30%,var(--line) 70%,transparent);
}
@media (max-width:860px){.stat__sep{height:24px}}

/* 2. Hero 主 CTA 按钮加箭头图标暗示 */
.hero__actions .btn--primary::after{
  content:"→";display:inline-block;margin-left:2px;
  transition:transform .25s var(--ease-out);
  font-weight:600;
}
.hero__actions .btn--primary:hover::after{transform:translateX(3px)}

/* 3. 统计数字下方加柔光强调短线 */
.stat{position:relative;padding-bottom:6px}
.stat::after{
  content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:24px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;
}

/* 4. 卡片 hover 显示「查看详情」角标，暗示可点击 */
.card__hint{
  position:absolute;top:14px;left:14px;z-index:4;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:980px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;
  opacity:0;transform:translateY(-4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  pointer-events:none;
}
.card:hover .card__hint,.card:focus-visible .card__hint{opacity:1;transform:translateY(0)}

/* 5. Hero badge 加状态点动效（脉冲呼吸） */
.hero__badge{position:relative}
.hero__badge::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#34c759;margin-right:4px;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(52,199,89,.5);
  animation:badgePulse 2.4s ease-out infinite;
}
@keyframes badgePulse{
  0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}
  70%{box-shadow:0 0 0 8px rgba(52,199,89,0)}
  100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}
}

/* 6. 卡片标题区与正文间增加细分隔线，强化层次 */
.card__meta{
  padding-bottom:8px;margin-bottom:2px;
  border-bottom:1px solid var(--line-soft);
}

/* 7. 主按钮微光扫过动效（hover 时） */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::before{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .6s var(--ease-out);
}
.btn--primary:hover::before{left:120%}

/* 8. 移动端导航 GitHub 链接改为图标按钮，避免文字截断 */
@media (max-width:600px){
  .nav__gh{width:32px;height:32px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);font-size:0}
  .nav__gh::before{
    content:"";display:block;width:16px;height:16px;
    background-color:var(--ink);
    -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .nav__brand{font-size:16px;gap:8px}
  .nav__logo{width:26px;height:26px;font-size:14px}
}

/* 9. 主 CTA 按钮加图标到 hero secondary 按钮，增强可识别性 */
/* 已删除红心装饰：与 HTML 内 ☕ emoji 重复，避免视觉杂乱 */

/* ============ 第九轮细节打磨（呼吸感 / 滚动提示 / 空状态 / 版本号间距） ============ */

/* 1. 移动端 Hero 压缩高度，让工具卡片更早出现 */
@media (max-width:600px){
  .hero{padding:48px 16px 8px}
  .hero__title{margin:8px 0 6px;font-size:26px;letter-spacing:-.025em}
  .hero__sub{margin-bottom:12px;font-size:13px}
  .hero__actions{gap:8px;justify-content:center;margin-bottom:6px;flex-direction:column;width:100%}
  .hero__actions .btn{width:100%;padding:11px 18px;font-size:14px}
  .hero__actions .btn--ghost{padding:9px 18px;font-size:13px}
  .hero__stats{gap:16px;margin-top:8px}
  .stat__num{font-size:26px;min-height:26px}
  .stat__num--free{font-size:20px}
  .stat__label{font-size:10.5px;margin-top:2px}
  /* 移动端隐藏滚动暗示：手机用户天然滑动，hint 徒增视觉噪声 */
  .hero__hint{display:none}
  .hero__preview{margin-top:18px}
  .hero__pillars{margin-top:18px;padding:10px;gap:8px}
  .hero__pillar{padding:9px 10px;gap:8px}
  .hero__pillar-icon{width:26px;height:26px;border-radius:8px}
  .hero__pillar-icon svg{width:14px;height:14px}
  .hero__pillar-text strong{font-size:11px}
  .hero__pillar-text em{display:none}
}

/* 2. 极窄屏（≤400px）pillars 隐藏，避免文字截断（信息已在 hero__stats 表达） */
@media (max-width:400px){
  .hero__pillars{display:none}
}

/* 2b. Hero preview 横向滚动渐隐遮罩，暗示可滑动（移动端可见） */
.hero__preview-row{
  position:relative;max-width:100%;
  overflow-x:auto;overflow-y:hidden;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:4px 24px;margin:0 -24px;
  justify-content:flex-start;
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.hero__preview-row::-webkit-scrollbar{display:none}
.hero__preview-row .hero__chip{flex-shrink:0}
@media (min-width:861px){
  .hero__preview-row{overflow:visible;mask-image:none;-webkit-mask-image:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center}
  .hero__preview-row .hero__chip{flex-shrink:0}
}

/* 3. 卡片版本号内移 + 边距优化 */
.card__version{top:14px;right:14px;padding:5px 13px}

/* 4. 移动端卡片间距收紧：16px → 12px，避免单列堆叠疏离 */
@media (max-width:600px){
  .grid{gap:12px}
  /* 隐藏卡片索引号，减少信息密度 */
  .card__index{display:none}
  /* 隐藏 mimo 评分徽标，避免视觉杂乱 */
  .card__score{display:none}
  /* 卡片 monogram 在移动端隐藏，让 emoji 独占视觉焦点 */
  .card__monogram{display:none}
}

/* 5. 空状态视觉升级：图标背景柔光圈 + 主色按钮 */
.empty{
  padding:96px 24px;
}
.empty__icon{
  font-size:56px;display:inline-block;width:96px;height:96px;line-height:96px;
  margin:0 auto 20px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%);
  filter:drop-shadow(0 4px 12px rgba(0,122,255,.08));
}
.empty p{font-size:15px;color:var(--ink2);margin-bottom:24px}

/* 6. 卡片底部按钮区与描述间距统一 */
.card__body{gap:10px}
.card__actions{margin-top:6px}

/* 7. chip 选中态柔化：深色保留但稍降饱和度，与描边态差异更和谐 */
.chip.is-active{
  background:var(--ink);color:#fff;border-color:var(--ink);
  box-shadow:0 4px 14px rgba(29,29,31,.22);transform:translateY(-1px);font-weight:600;
}

/* 8. 搜索框与 chips 高度统一为 40px（原 chips 已是 40，搜索框 padding 调整对齐） */
.search__input{height:40px;padding:0 40px 0 42px;box-sizing:border-box}
.search__clear{top:9px}

/* 9. 卡片描述行高微调，让 3 行更舒展 */
.card__desc{line-height:1.55}

/* 10. Hero 副标题字号在 860px 以下略降，避免与标题比例失衡 */
@media (max-width:860px){
  .hero__sub{font-size:15px;line-height:1.6}
  .hero__title{letter-spacing:-.025em}
}

/* ============ 第十轮细节打磨（Lightbox 导航 / 滚动暗示 / Timeline hover / DOM 清理配套） ============ */

/* 1. Hero 滚动暗示按钮：底部居中柔和提示，滚动 80px 后淡出 */
.hero{position:relative}
.hero__hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:3;display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 14px 6px;border-radius:980px;
  background:rgba(255,255,255,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.05);
  color:var(--ink3);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  opacity:0;animation:heroHintIn .8s var(--ease-out) 1.4s forwards, heroHintBob 2.4s ease-in-out 2.2s infinite;
  transition:opacity .4s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.hero__hint:hover{color:var(--accent);background:rgba(255,255,255,.85)}
.hero__hint-arrow{display:inline-flex;width:16px;height:16px;color:var(--ink3);transition:color .2s}
.hero__hint:hover .hero__hint-arrow{color:var(--accent)}
.hero__hint-arrow svg{width:100%;height:100%}
.hero__hint.is-hidden{opacity:0 !important;pointer-events:none;animation:none}
@keyframes heroHintIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:.85;transform:translate(-50%,0)}}
@keyframes heroHintBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}
@media (prefers-reduced-motion:reduce){
  .hero__hint{animation:none;opacity:.85}
  .hero__hint.is-hidden{opacity:0}
}
@media (max-width:600px){
  .hero__hint{bottom:10px;padding:6px 12px 4px;font-size:10px}
  .hero__hint-arrow{width:14px;height:14px}
}

/* 2. Lightbox caption：底部居中玻璃条，项目名 + 分类色点 + 分类名 */
.lightbox__caption{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;font-size:13px;font-weight:500;letter-spacing:.005em;
  max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .35s var(--ease-out) .1s;
}
.lightbox.is-open .lightbox__caption{opacity:1}
.lb-caption__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}
.lb-caption__name{font-weight:600;color:#fff}
.lb-caption__cat{font-size:11px;color:rgba(255,255,255,.6);padding-left:10px;border-left:1px solid rgba(255,255,255,.15)}

/* 3. Lightbox 计数器：右上角小胶囊「3 / 57」 */
.lightbox__counter{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:2;
  padding:5px 12px;border-radius:980px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);font-size:11px;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .35s var(--ease-out) .1s;
}
.lightbox.is-open .lightbox__counter{opacity:1}

/* 4. Lightbox 上一张/下一张导航按钮 */
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),transform .25s var(--ease-out),opacity .25s var(--ease);
  opacity:0;
}
.lightbox.is-open .lightbox__nav{opacity:.85}
.lightbox__nav:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.08);opacity:1}
.lightbox__nav:active{transform:translateY(-50%) scale(.96)}
.lightbox__nav:disabled{opacity:.25 !important;cursor:not-allowed;pointer-events:none}
.lightbox__nav svg{width:22px;height:22px}
.lightbox__nav--prev{left:24px}
.lightbox__nav--next{right:24px}
@media (max-width:600px){
  .lightbox__nav{width:38px;height:38px}
  .lightbox__nav svg{width:18px;height:18px}
  .lightbox__nav--prev{left:10px}
  .lightbox__nav--next{right:10px}
  .lightbox__caption{bottom:14px;font-size:12px;padding:6px 12px;max-width:80%}
  .lightbox__counter{top:12px;font-size:10px;padding:4px 10px}
}

/* 5. Timeline 卡片 hover 时左侧分类色条（视觉反馈强化） */
.tl__card{position:relative;overflow:hidden}
.tl__card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease-out);
  border-radius:0 3px 3px 0;
}
.tl__card:hover::after{transform:scaleY(1)}
.tl__item:first-child .tl__card::after{background:linear-gradient(180deg,#ff9500,#ffb340)}

/* 6. Modal 关闭按钮更柔和的旋转 + 悬停背景 */
.modal__close{transition:background .25s var(--ease),transform .35s var(--ease-out),color .2s}
.modal__close:hover{background:rgba(0,122,255,.12);color:var(--accent);transform:rotate(90deg) scale(1.05)}

/* 7. 搜索清除按钮：点击时旋转 90° 反馈 */
.search__clear{transition:background .2s var(--ease),transform .25s var(--ease-out),color .2s}
.search__clear:hover{background:var(--accent-soft);color:var(--accent);transform:rotate(90deg)}

/* 8. 卡片源码按钮：纯图标圆形按钮（与主按钮形成主次对比） */
.card__src{
  width:36px;height:36px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.04);border:1px solid var(--line-soft);
  color:var(--ink2);flex:0 0 auto;
  transition:all .2s var(--ease);
}
.card__src:hover{color:var(--accent);background:var(--accent-soft);border-color:transparent;transform:translateY(-1px)}
/* 第十七轮：GitHub 源码图标加大 15→17px，与「获取」按钮高度更协调（mimo 反馈：图标偏小） */
.card__src-icon{width:17px;height:17px;opacity:.88;transition:opacity .2s,transform .2s}
.card__src:hover .card__src-icon{opacity:1;transform:scale(1.06)}

/* 9. 卡片 meta 区无索引号后的间距精简 */
.card__meta{gap:8px}

/* 10. 卡片描述在桌面端恢复 3 行（移动端保持 2 行） */
.card__desc{-webkit-line-clamp:3}
@media (max-width:600px){
  .card__desc{-webkit-line-clamp:2}
}

/* ============ 第十一轮细节打磨（网格密度 / 日志折叠 / 鸣谢升级 / 搜索高亮 / 页脚年份） ============ */

/* 1. 更新日志折叠：仅展示最新 4 条，其余收起，减少页面长度提升阅读节奏 */
.timeline.is-collapsed .tl__item:nth-child(n+5){
  display:none;
}
.tl__toggle{
  display:inline-flex;align-items:center;gap:8px;
  margin:8px auto 0;padding:11px 24px;border-radius:980px;
  background:var(--card);border:1px solid var(--line);
  color:var(--ink2);font-size:14px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:all .25s var(--ease-out);
  box-shadow:var(--shadow);
}
.tl__toggle:hover{
  color:var(--accent);border-color:rgba(0,122,255,.25);
  background:var(--accent-soft);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,122,255,.12);
}
.tl__toggle-icon{
  display:inline-flex;width:16px;height:16px;transition:transform .3s var(--ease-out);
}
.tl__toggle-icon svg{width:100%;height:100%}
.timeline:not(.is-collapsed) .tl__toggle-icon{transform:rotate(180deg)}
.tl__toggle-wrap{text-align:center;margin-top:8px}
.tl__toggle-count{
  font-size:12px;color:var(--ink3);margin-left:4px;font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* 2. 鸣谢空状态升级：温暖邀请卡，替代冷冰冰的虚线空盒 */
.thanks__empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-style:normal;color:var(--ink3);
  padding:28px 24px;border:1px solid var(--line-soft);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--bg-soft),rgba(232,241,255,.35));
  text-align:center;line-height:1.7;
}
.thanks__empty-icon{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff9500,#ff6a00);color:#fff;font-size:22px;
  box-shadow:0 6px 18px rgba(255,149,0,.28);
  animation:thanksBeat 3s ease-in-out infinite;
}
@keyframes thanksBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.thanks__empty-icon{animation:none}}
.thanks__empty-text{font-size:14px;color:var(--ink2);max-width:280px}
.thanks__empty-text strong{color:var(--ink);font-weight:600}
.thanks__empty-hint{font-size:12px;color:var(--ink3);letter-spacing:.02em}

/* 3. 搜索关键词高亮：在标题/描述中柔和标记匹配文本 */
.card__title mark,.card__desc mark{
  background:linear-gradient(180deg,transparent 55%,rgba(0,122,255,.22) 55%);
  color:inherit;padding:0 1px;border-radius:2px;font-weight:700;
}
.card__title mark{color:var(--accent)}

/* 4. 页脚年份胶囊化，强化版权信息层次 */
.footer__year{
  display:inline-flex;align-items:center;gap:6px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.footer__year::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.7;
}

/* 5. 卡片网格 4 列后，移动端卡片间距与最小宽度收敛 */
@media (max-width:600px){
  .grid{grid-template-columns:1fr;gap:14px;padding:0 16px;column-gap:14px;row-gap:14px}
}
/* 平板端 2 列稳定 */
@media (min-width:601px) and (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);gap:18px}
}

/* ============ 第十一轮 · mimo 反馈修复 ============ */

/* 6. 卡片描述区最小高度：保证 3 行等高，消除截断位置不一致导致的重心参差 */
.card__desc{min-height:4.65em}
@media (max-width:600px){
  .card__desc{min-height:3.1em;-webkit-line-clamp:2}
}

/* 7. Hero 到工具栏柔和过渡：渐变收尾 + 工具栏顶部细线渐隐 */
.hero{padding-bottom:24px}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg));
}
.toolbar{position:relative}
.toolbar::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);
  opacity:.7;
}

/* 8. 导航品牌与链接间留白增强（呼吸感） */
.nav__inner{padding:0 28px}
@media (max-width:600px){.nav__inner{padding:0 16px}}

/* 9. 卡片媒体区高度统一收敛，配合 4 列窄卡更协调 */
.card__media{height:150px}
@media (min-width:1440px){.card__media{height:156px}}

/* 10. Hero 间距收紧：减少留白落差，让首屏内容密度更均衡 */
.hero{padding-top:32px}
.hero__title{margin:10px 0 6px}
.hero__sub{margin:0 auto 14px}
.hero__stats{margin-top:24px !important}
.hero__pillars{margin:22px auto 0 !important;padding:10px !important;gap:10px !important}
.hero__pillar{padding:10px 12px !important;gap:9px !important}
.hero__pillar-icon{width:30px !important;height:30px !important;border-radius:9px !important}
.hero__pillar-icon svg{width:16px !important;height:16px !important}

/* 11. 筛选 chips 配色统一：默认中性灰点，仅 hover/active 显分类色，降低视觉噪点 */
.chip::before{background:var(--ink3);opacity:.5}
.chip[data-filter="all"]::before{background:var(--accent);opacity:.55}
.chip:hover::before{opacity:1}
.chip[data-filter="all"]:hover::before{background:var(--accent);opacity:1}
.chip[data-filter="dev"]:hover::before{background:#007aff;opacity:1}
.chip[data-filter="system"]:hover::before{background:#34c759;opacity:1}
.chip[data-filter="efficiency"]:hover::before{background:#ff9500;opacity:1}
.chip[data-filter="design"]:hover::before{background:#af52de;opacity:1}
.chip.is-active::before{background:#fff !important;opacity:1}

/* 12. Hero 按钮对比度增强：主按钮加深蓝、副按钮文字加深 */
.hero__actions .btn--primary{background:#0066d6;box-shadow:0 6px 18px rgba(0,102,214,.35)}
.hero__actions .btn--primary:hover{background:#0058bd;box-shadow:0 8px 22px rgba(0,102,214,.42)}
.hero__actions .btn--ghost{background:rgba(0,0,0,.06);color:var(--ink);border-color:var(--line)}
.hero__actions .btn--ghost:hover{background:rgba(0,122,255,.1);color:var(--accent);border-color:rgba(0,122,255,.25)}

/* 13. 卡片正文固定最小高度：跨行等高，消除描述密度不均导致的网格重量失衡 */
.card__body{min-height:178px}
@media (min-width:1440px){.card__body{min-height:184px}}

/* 14. 工具栏搜索与筛选分组收紧：减小间距增强关联感 */
.toolbar__row{gap:16px !important}

/* 15. 卡片操作区呼吸感：按钮与源码图标间距加大 */
.card__actions{gap:10px !important}

/* 16. 卡片描述行高放松，缓解连续阅读压迫感 */
.card__desc{line-height:1.62}

/* 17. 工具栏到卡片墙留白加大，平衡首屏与中段呼吸感 */
.grid-wrap{padding-top:24px}

/* 18. 卡片描边精化：更细更柔，配合软化阴影呈现轻盈感 */
.card{border:1px solid rgba(0,0,0,.05)}

/* 19. 网格固定行高：强制所有行等高，彻底消除卡片高度不齐 */
.grid{grid-auto-rows:360px}
@media (min-width:1440px){.grid{grid-auto-rows:368px}}
@media (max-width:900px){.grid{grid-auto-rows:auto}}
.card{height:100%}

/* 20. Hero 精简：隐藏信任支柱条（保留统计条增加 Hero 分量，避免顶部空白感） */
.hero__pillars{display:none !important}
.hero__stats{display:flex !important;margin-top:24px !important}

/* 21. 卡片 emoji 收敛：从 84px 降至 64px，降低视觉重量，让文字信息呼吸 */
.card__emoji{font-size:38px;width:64px;height:64px}
.card__emoji-glow{width:96px;height:96px}
@media (max-width:600px){.card__emoji{width:58px;height:58px;font-size:34px}}

/* 22. chips 激活态统一：所有分类激活时均为深色填充，消除「全部蓝/其他彩」的不一致 */
.chip.is-active{background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important}
.chip.is-active[data-count]::after{background:rgba(255,255,255,.22) !important;color:#fff !important}
/* chips 圆点全部统一中性灰，消除彩色圆点的视觉竞争（分类色已由卡片顶条表达） */
.chip::before,.chip[data-filter="all"]::before,.chip:hover::before,
.chip[data-filter="dev"]:hover::before,.chip[data-filter="system"]:hover::before,
.chip[data-filter="efficiency"]:hover::before,.chip[data-filter="design"]:hover::before{background:var(--ink3);opacity:.55}
.chip:hover::before{opacity:.9}
.chip.is-active::before{background:#fff !important;opacity:1}

/* 23. 卡片正文行高与字重层次增强：标题更重、描述更轻，强化 3 级层次 */
.card__title{font-weight:700;letter-spacing:-.02em}
.card__desc{color:var(--ink2);font-weight:400}

/* 24. Hero 收紧：精简后减小上下留白，让卡片墙更早出现 */
.hero{padding-top:20px;padding-bottom:12px}
.hero__sub{margin:0 auto 18px}
.hero__actions{margin-bottom:4px}
.hero__badge{margin-top:4px}

/* 25. 卡片阴影层次回调：软化过度导致漂浮感不足，恢复精致多层投影 */
.card{box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.05),0 10px 24px rgba(0,122,255,.04);border:1px solid rgba(0,0,0,.06)}

/* 26. 描述行高进一步放松，增强中文阅读呼吸感 */
.card__desc{line-height:1.68}

/* 27. 版本号适度增强可见性：字重回升、颜色加深，信息层级更清晰 */
.card__version{font-weight:650;color:var(--ink);font-size:11.5px}

/* ============ 第十二轮 · mimo 反馈修复 ============ */

/* 28. 卡片描述底部柔和渐隐：用 .card__body::before 绝对定位渐变蒙层覆盖描述底部 18px，
   从 30% 透明渐变到纯白，过渡克制自然 */
.card__body{position:relative}
.card__body::before{
  content:'';position:absolute;left:20px;right:20px;bottom:60px;height:18px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,#fff 100%);
  pointer-events:none;z-index:1;border-radius:0 0 4px 4px;
}
.card:hover .card__body::before{background:linear-gradient(180deg,rgba(251,251,253,0) 0%,rgba(251,251,253,.55) 50%,var(--bg-soft) 100%)}

/* 29. 版本号 pill 强化：浅灰填充 rgba(.06) + 字号 12px + 字重 700，
   hover 变品牌蓝，避免被误读为抢眼色 */
.card__version{
  background:rgba(0,0,0,.06);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(0,0,0,.07);
  padding:5px 11px;
  font-size:12px;font-weight:700;color:var(--ink);
  letter-spacing:.005em;
  box-shadow:none;
}
.card:hover .card__version{
  background:var(--accent-soft);
  border-color:rgba(0,122,255,.22);
  color:var(--accent);
}

/* 30. chips 激活态增强 + 搜索与 chips 间距收紧到 14px */
.chip{font-size:13.5px;padding:8px 16px;transition:all .25s var(--ease);position:relative}
.chip.is-active{
  font-size:14px !important;font-weight:700 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.24),0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform:translateY(-2px) !important;
}
.toolbar__row{gap:14px !important}

/* 31. 底部滚动暗示：grid-wrap 末尾加 90px 渐变遮罩，起点 50% 提示感更强 */
.grid-wrap{position:relative;padding-bottom:110px}
.grid-wrap::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg,rgba(245,245,247,0) 0%,rgba(245,245,247,.7) 50%,var(--bg) 100%);
  pointer-events:none;z-index:1;
}
.grid{position:relative;z-index:2}

/* 32. 描述字号微增 + 行高保持，配合渐隐蒙层让阅读更舒适 */
.card__desc{font-size:13.5px;letter-spacing:.003em}

/* 33. 移动端适配：版本号与 chips 适配，描述渐隐蒙层在小屏关闭 */
@media (max-width:600px){
  .card__body::before{display:none}
  .chip.is-active{font-size:13px !important;transform:translateY(-1px) !important}
}

/* 34. 非激活态 chip 背景稍微加深，增强与白色卡片底色的对比 */
.chip{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06)}
.chip:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1)}

/* 35. Hero 副标题放大 + 字重微增，缩小与主标题视觉落差 */
.hero__sub{font-size:clamp(17px,2.4vw,22px);font-weight:500;line-height:1.6;letter-spacing:.003em}

/* 36. toolbar__count 与 chips 间距收紧：margin-top 减小 */
.toolbar__count{margin-top:2px !important;margin-bottom:0 !important;font-size:12.5px;letter-spacing:.02em;color:var(--ink3);font-weight:500}

/* 37. Hero 标题/副标题层级拉开：标题放大、副标题字重 400 + 字号回调 */
.hero__title{font-size:clamp(36px,5.5vw,60px);font-weight:700;letter-spacing:-.04em}
.hero__sub{font-size:clamp(15px,2vw,18px);font-weight:400;color:var(--ink3);line-height:1.6}

/* 38. 卡片标题加重 + 描述减淡，建立清晰视觉扫描路径 */
.card__title{font-size:17.5px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.card__desc{color:rgba(110,110,115,.85);font-weight:400}

/* 39. 搜索框圆角增大 + 边框加粗，提升存在感与圆润风格匹配 */
.search__input{
  border-radius:980px !important;
  border:1.5px solid var(--line) !important;
  padding:13px 44px 13px 46px !important;
  font-size:15px;
}
.search__input:focus{border:1.5px solid var(--accent) !important}

/* 40. Hero 统计区与 CTA 之间加细分隔留白 + Hero 整体收紧 */
.hero__actions{margin-bottom:8px}
.hero__stats{margin-top:24px !important}
.hero{padding-top:16px !important;padding-bottom:8px !important}

/* 41. chips 激活态改浅色填充（品牌蓝 8% + 蓝色文字）替代深色填充，
   更贴合苹果白轻量美学，降低对比度冲击 */
.chip.is-active{
  background:rgba(0,122,255,.1) !important;
  border-color:rgba(0,122,255,.25) !important;
  color:var(--accent) !important;
  box-shadow:0 4px 14px rgba(0,122,255,.15),0 1px 4px rgba(0,122,255,.08) !important;
  transform:translateY(-2px) !important;
  font-weight:600 !important;
}
.chip.is-active::before{background:var(--accent) !important;opacity:1 !important}
.chip.is-active[data-count]::after{background:rgba(0,122,255,.18) !important;color:var(--accent) !important}

/* 42. 获取按钮饱和度降低，融入整体低饱和度配色 */
.card__cta{
  background:linear-gradient(135deg,#007aff 0%,#3a8eff 100%) !important;
  box-shadow:0 3px 10px rgba(0,122,255,.22) !important;
}

/* 43. 网格间距统一：列间距=行间距=24px，消除行列节奏断裂 */
.grid{column-gap:24px !important;row-gap:24px !important}
@media (min-width:1440px){.grid{column-gap:26px !important;row-gap:26px !important}}

/* 44. 主标题渐变改单色蓝，回归苹果白克制风格 */
.hero__title-accent{
  background:none !important;
  -webkit-text-fill-color:#007aff !important;
  color:#007aff !important;
  animation:none !important;
}

/* ============ 第十三轮细节打磨（squircle 图标 / 边框光晕 / 搜索图标 / 时间轴最新条目 / Hero 分隔线） ============ */

/* 1. 卡片 emoji 容器升级为 iOS 应用图标 squircle 风格 + 渐变描边
   原圆形过于柔和缺乏精致感，改 22px 圆角方形 + 1px 渐变内描边 + 双层阴影，
   呈现类 macOS 应用图标的悬浮质感，强化苹果白高端调性 */
.card__emoji{
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,247,252,.78)) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.08),
    0 2px 6px rgba(0,122,255,.06),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(0,122,255,.10) !important;
}
.card:hover .card__emoji{
  box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0 4px 10px rgba(0,122,255,.12),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(0,122,255,.22) !important;
}
/* 移动端 squircle 圆角同步收敛 */
@media (max-width:600px){
  .card__emoji{border-radius:18px !important}
}

/* 2. 卡片 hover 时整体柔和蓝色边框光晕
   原仅顶条变色，hover 反馈偏弱；增加 1px 蓝色描边 + 外层柔光，
   让选中态更清晰但不喧宾夺主 */
.card{
  border:1px solid rgba(0,0,0,.06) !important;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s var(--ease) !important;
}
.card:hover{
  border-color:rgba(0,122,255,.28) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 12px 32px rgba(0,0,0,.07),
    0 20px 48px rgba(0,122,255,.08),
    0 0 0 1px rgba(0,122,255,.04) !important;
}

/* 3. 搜索框聚焦时搜索图标变蓝 + 双层柔光环
   原聚焦仅边框变蓝，图标始终灰色缺乏一致性；图标随聚焦变蓝形成视觉呼应，
   双层光环（内实外柔）替代单层呼吸，提升精致感 */
.search__icon{
  transition:color .25s var(--ease) !important;
}
.search__input:focus ~ .search__icon,
.search:focus-within .search__icon{
  color:var(--accent) !important;
}
.search__input:focus{
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 0 0 1px rgba(0,122,255,.12),
    0 2px 8px rgba(0,122,255,.10) !important;
  animation:searchGlowRefined 2.8s ease-in-out infinite !important;
}
@keyframes searchGlowRefined{
  0%,100%{box-shadow:0 0 0 4px var(--accent-soft),0 0 0 1px rgba(0,122,255,.12),0 2px 8px rgba(0,122,255,.10)}
  50%{box-shadow:0 0 0 6px rgba(0,122,255,.10),0 0 0 1px rgba(0,122,255,.18),0 2px 8px rgba(0,122,255,.10)}
}
@media (prefers-reduced-motion:reduce){
  .search__input:focus{animation:none !important}
}

/* 4. 时间轴最新条目加蓝色渐变背景 + 精化「最新」徽标
   原仅边框区分，最新条目存在感不足；加柔和蓝色渐变背景让最新更新视觉锚点更强，
   「最新」徽标改为左上角浮出式 + 阴影，更精致 */
.tl__item:first-child .tl__card{
  background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%) !important;
  border:1px solid rgba(0,122,255,.22) !important;
  box-shadow:0 2px 8px rgba(0,122,255,.06),0 12px 32px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.tl__item:first-child .tl__card::before{
  content:"最新" !important;
  position:absolute;top:-9px;left:18px !important;
  right:auto !important;
  font-size:10px;font-weight:700;color:#fff;letter-spacing:.08em;
  padding:3px 11px;border-radius:980px;
  background:linear-gradient(135deg,#007aff,#5ac8fa);
  box-shadow:0 3px 10px rgba(0,122,255,.32),inset 0 1px 0 rgba(255,255,255,.3);
  z-index:2;
}
.tl__item:first-child .tl__card{padding-top:24px}

/* 5. Hero 标题下方加品牌蓝渐变分隔短线 + 统计数字下方短线精化
   原标题与副标题间仅靠间距区分，加细分隔短线让标题区有收束感，
   呈现苹果发布会式克制分隔 */
.hero__title{
  position:relative;
  padding-bottom:14px;
}
.hero__title::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:48px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#007aff,#5ac8fa);
  opacity:.7;
}
/* 统计数字下方短线收敛（避免与新分隔线重复视觉） */
.stat::after{
  width:20px !important;height:2px !important;opacity:.4 !important;
}

/* 6. squircle 图标内 emoji 微调垂直对齐（圆角方形容器内视觉重心略上移） */
.card__emoji{
  display:flex;align-items:center;justify-content:center;
  padding-top:2px;
}

/* 7. 卡片媒体区背景微增层次：原单一渐变偏平，加对角柔光叠加 */
.card__media{
  background-image:
    radial-gradient(circle at 25% 25%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(circle at 75% 75%,rgba(0,122,255,.04),transparent 55%) !important;
}

/* ============ 第十三轮 · mimo 反馈修复（行距 / chips 权重 / 底部渐隐） ============ */

/* 8. 卡片行间距加大：mimo 反馈呼吸感不足，row-gap 24px → 32px，
   列间距保持 24px 维持横向紧凑，让纵向扫描更有节奏 */
.grid{row-gap:32px !important;column-gap:24px !important}
@media (min-width:1440px){.grid{row-gap:34px !important;column-gap:26px !important}}

/* 9. chips 视觉权重增强：mimo 反馈与搜索框重心不匹配，
   加大高度 + 增强背景 + 描边，让左右两侧视觉重量平衡 */
.chip{
  height:44px !important;
  padding:0 18px 0 14px !important;
  font-size:14px !important;
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.chip:hover{
  background:#fff !important;
  border-color:rgba(0,122,255,.2) !important;
  box-shadow:0 3px 10px rgba(0,122,255,.08),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
/* chips 圆点稍大，增强存在感 */
.chip::before{width:8px !important;height:8px !important}
/* chips 数量徽标同步增大，与加大后的 chips 匹配 */
.chip[data-count]::after{
  min-width:20px !important;height:19px !important;font-size:11px !important;padding:0 6px !important;
}
/* 搜索框高度同步到 44px，与 chips 完全对齐 */
.search__input{height:44px !important;padding:0 44px 0 46px !important;line-height:44px}
.search__clear{top:11px !important}

/* 10. 底部渐隐遮罩前移 + 增强：mimo 反馈截断处无滚动暗示，
   将 grid-wrap::after 高度从 90px → 140px，起点透明度提前，
   并在 toolbar 下方加一处微弱渐隐，让首屏底部的卡片渐变更柔和 */
.grid-wrap::after{
  height:140px !important;
  background:linear-gradient(180deg,rgba(245,245,247,0) 0%,rgba(245,245,247,.5) 35%,rgba(245,245,247,.85) 70%,var(--bg) 100%) !important;
}

/* ============ 第十三轮 · mimo v2 反馈修复（Hero 压缩 / 图标等高 / CTA 间距） ============ */

/* 11. Hero 压缩：mimo 反馈标题与搜索栏间空旷地带，收紧 Hero 上下留白 + 统计区上移 */
.hero{padding-top:12px !important;padding-bottom:0 !important}
.hero__badge{margin-top:0 !important}
.hero__title{margin:8px 0 4px !important}
.hero__sub{margin:0 auto 12px !important}
.hero__actions{margin-bottom:4px !important}
.hero__stats{margin-top:16px !important}
/* Hero 底部渐变收尾高度收敛，减少与工具栏间的空旷感 */
.hero::after{height:24px !important}
/* 工具栏顶部留白收敛，紧贴 Hero */
.grid-wrap{padding-top:8px !important}
.toolbar{padding-top:6px !important;padding-bottom:10px !important}

/* 12. 卡片 emoji 等高约束：mimo 反馈不同 emoji 视觉面积不一，
   强制固定 line-height + overflow 可见 + 居中对齐，消除 glyph 大小差异 */
.card__emoji{
  font-size:36px !important;
  line-height:1 !important;
  width:60px !important;
  height:60px !important;
  overflow:visible;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
.card__emoji-glow{width:92px !important;height:92px !important}
@media (max-width:600px){
  .card__emoji{width:54px !important;height:54px !important;font-size:32px !important}
  .card__emoji-glow{width:84px !important;height:84px !important}
}

/* 13. CTA 按钮与 GitHub 图标间距加大：mimo 反馈过近，
   gap 10px → 14px，并给 GitHub 图标增加右侧呼吸留白 */
.card__actions{gap:14px !important}
.card__src{margin-right:2px}
/* 获取按钮 min-width 略增，增强主操作存在感 */
.card__actions .card__cta{min-width:100px !important;padding:0 22px !important}

/* ============ 第十三轮 · mimo v4 反馈修复（搜索权重 / GitHub 按钮平衡 / 媒体区精化） ============ */

/* 14. 搜索框视觉权重增强：mimo 反馈搜索区略显单薄，
   加浅灰底色 + 加深边框 + 双层阴影，让搜索区与卡片墙视觉分量匹配 */
.search__input{
  background:var(--bg-soft) !important;
  border:1.5px solid rgba(0,0,0,.1) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.search__input:hover{border-color:rgba(0,0,0,.16) !important;background:#fff !important}
.search__input:focus{
  background:#fff !important;
  border:1.5px solid var(--accent) !important;
}

/* 15. GitHub 图标按钮与 CTA 按钮比例协调：mimo 反馈 GitHub 图标过小孤立，
   略增大尺寸 36→40px + 加深背景 + 蓝色 hover 描边，让次要操作更显眼 */
.card__src{
  width:40px !important;height:40px !important;
  background:rgba(0,0,0,.05) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.card__src-icon{width:17px !important;height:17px !important;opacity:.7 !important}
.card__src:hover{
  background:var(--accent-soft) !important;
  border-color:rgba(0,122,255,.22) !important;
  box-shadow:0 3px 10px rgba(0,122,255,.1) !important;
}
.card__src:hover .card__src-icon{opacity:1 !important;color:var(--accent) !important}
/* CTA 按钮高度同步到 40px，与 GitHub 图标按钮等高 */
.card__actions .btn--sm{height:40px !important}

/* 16. 卡片媒体区顶部加微弱分类色顶条光晕：增强分类辨识度，
   在 squircle 图标上方加一道极淡的分类色渐变线，提升精致感 */
.card__media::before{
  background:radial-gradient(circle at 50% 0%,rgba(0,122,255,.06),transparent 60%) !important;
}

/* 17. chips 激活态微调：当前浅蓝填充在白底上对比度略低，
   加深填充至 12% + 增强字重，让选中态更明确 */
.chip.is-active{
  background:rgba(0,122,255,.12) !important;
  border-color:rgba(0,122,255,.3) !important;
  color:#0066d6 !important;
  box-shadow:0 3px 10px rgba(0,122,255,.12),inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ============ 第十三轮 · mimo v5 反馈修复（标题层级 / 卡片密度 / 版本徽标统一） ============ */

/* 18. 主标题字号收敛：mimo 反馈标题与卡片内容层级落差过大，
   clamp(36px,5.5vw,60px) → clamp(32px,4.8vw,52px)，缩小落差建立中间过渡 */
.hero__title{font-size:clamp(32px,4.8vw,52px) !important;letter-spacing:-.035em !important}
/* Hero 副标题略增字重，作为标题到卡片的中间层级过渡 */
.hero__sub{font-weight:500 !important;color:var(--ink2) !important}

/* 19. 卡片高度收紧：mimo 反馈底部留白过多显"空"，
   grid-auto-rows 360px → 340px，card__body min-height 178px → 158px */
.grid{grid-auto-rows:340px !important}
@media (min-width:1440px){.grid{grid-auto-rows:348px !important}}
.card__body{min-height:158px !important}
@media (min-width:1440px){.card__body{min-height:164px !important}}
/* 卡片媒体区高度同步收敛 */
.card__media{height:140px !important}
@media (min-width:1440px){.card__media{height:146px !important}}

/* 20. 版本徽标统一：mimo 反馈部分卡片版本角标不一致，
   强制固定 min-width + 等宽字体 + 统一字号，消除宽度差异 */
.card__version{
  min-width:48px !important;
  text-align:center !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:0 !important;
}

/* 21. 卡片描述区最小高度同步收敛，配合卡片收紧 */
.card__desc{min-height:4.2em !important}
@media (max-width:600px){.card__desc{min-height:3.1em !important}}

/* 22. 卡片正文 padding 收敛，配合整体紧凑化 */
.card__body{padding:14px 18px 16px !important}
.card__actions{margin-top:4px !important}

/* ============ 第十三轮 · Hero 极致压缩（解决 mimo 反复反馈留白过大） ============ */

/* 23. Hero 极致压缩：mimo 多轮反馈顶部留白过大，
   统计区字号收敛 + 间距最小化 + 标题区间距收紧，让首屏内容更紧凑 */
.hero{padding-top:8px !important}
.hero__badge{padding:7px 16px !important;font-size:13px !important}
.hero__title{margin:6px 0 2px !important;font-size:clamp(30px,4.2vw,46px) !important}
.hero__title::after{width:40px !important;height:2px !important;bottom:8px !important}
.hero__title{padding-bottom:14px !important}
.hero__sub{margin:0 auto 10px !important;font-size:clamp(14px,1.8vw,17px) !important}
.hero__actions{margin-bottom:2px !important;gap:10px !important}
.hero__actions .btn{padding:9px 20px !important;font-size:14px !important}
.hero__stats{margin-top:12px !important;gap:32px !important}
.stat__num{font-size:32px !important;min-height:32px !important}
.stat__num--free{font-size:24px !important}
.stat__label{font-size:11px !important;margin-top:2px !important}
.stat__sep{height:24px !important}
.hero::after{height:16px !important}
.grid-wrap{padding-top:4px !important}
.toolbar{padding-top:4px !important;padding-bottom:8px !important}
.toolbar__row{margin-bottom:12px !important}

/* ============ 第十四轮 · 细节打磨（favicon 配套 / 空状态升级 / skip-link / kbd 脉冲 / 功能数徽标） ============ */

/* 24. skip-to-content 链接：键盘用户跳过导航直达主内容，默认 visually-hidden，Tab 聚焦时浮现 */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:2000;
  transform:translateY(-200%);opacity:0;
  padding:10px 18px;border-radius:980px;
  background:#fff;color:var(--accent);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  border:1px solid rgba(0,122,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,122,255,.1);
  transition:transform .25s var(--ease-out),opacity .2s var(--ease-out);
}
.skip-link:focus{
  transform:translateY(0);opacity:1;
  outline:2px solid var(--accent);outline-offset:2px;
}

/* 25. 空状态升级：从冷冰冰的「没找到」改为温暖引导卡，加副标题 + 搜索建议 chips */
.empty{padding:72px 24px !important}
.empty__icon{
  font-size:44px;display:block;margin-bottom:14px;
  animation:emptyFloat 3.2s ease-in-out infinite;
}
@keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.empty__title{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:6px !important}
.empty__sub{font-size:13px;color:var(--ink3);margin-bottom:16px !important;letter-spacing:.02em}
.empty__chips{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  max-width:520px;margin:0 auto 22px;
}
.empty__chip{
  padding:7px 16px;border-radius:980px;
  background:#fff;border:1px solid var(--line);
  color:var(--ink2);font-size:13px;font-weight:500;font-family:inherit;
  cursor:pointer;transition:all .2s var(--ease);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.empty__chip:hover{
  background:var(--accent-soft);color:var(--accent);
  border-color:rgba(0,122,255,.28);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,122,255,.1);
}
.empty__chip:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.empty__chip:active{transform:translateY(0)}

/* 26. 搜索 "/" kbd 提示呼吸脉冲：用户首次交互前柔和脉冲引导快捷键发现 */
.search__hint.is-pulsing{
  animation:kbdPulse 2.4s ease-in-out infinite;
}
@keyframes kbdPulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(0,122,255,0);
    background:var(--bg-soft);
    color:var(--ink3);
  }
  50%{
    box-shadow:0 0 0 4px rgba(0,122,255,.12);
    background:var(--accent-soft);
    color:var(--accent);
  }
}

/* 27. 卡片功能数徽标：在 meta 行 stack 后追加「· N 项功能」，提升信息密度 */
.card__feat-count{
  font-size:12px;color:var(--ink3);font-weight:500;
  letter-spacing:-.005em;
  transition:color .2s var(--ease);
}
.card:hover .card__feat-count{color:var(--ink2)}
/* 移动端字号略缩避免拥挤 */
@media (max-width:600px){
  .card__feat-count{font-size:11px}
  .empty__chips{gap:6px}
  .empty__chip{padding:6px 13px;font-size:12px}
}

/* 28. prefers-reduced-motion：尊重用户偏好，关闭新增的脉冲与浮动动画 */
@media (prefers-reduced-motion:reduce){
  .search__hint.is-pulsing{animation:none}
  .empty__icon{animation:none}
}

/* ============ 第十四轮 · mimo 反馈修复（卡片高度对齐 / 图标统一 / 移动端间距） ============ */

/* 29. 卡片 meta 行强制单行：新增功能数徽标后可能换行导致卡片高度不一致，
   改 flex-wrap:nowrap + overflow:hidden + 子元素 nowrap，保证所有卡片 meta 等高单行 */
.card__meta{flex-wrap:nowrap !important;overflow:hidden;white-space:nowrap}
.card__feat-count{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 新徽标不收缩，保证可见 */
.card__new{flex-shrink:0}

/* 30. 卡片 emoji 字体标准化：消除不同 emoji 渲染引擎导致的视觉风格不一致，
   统一使用 Apple Color Emoji 优先，回退到 Segoe UI Emoji / Noto Color Emoji */
.card__emoji,
.modal__big-emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
}

/* 31. 移动端头部间距收紧：mimo 反馈 Logo 与搜索栏之间空白过大，
   hero 顶部 padding 48px→32px，pillars 间距收紧，stats 上下间距收敛 */
@media (max-width:600px){
  .hero{padding-top:32px !important;padding-bottom:16px !important}
  .hero__pillars{gap:10px !important;margin-top:14px !important}
  .hero__pillar{padding:8px 12px !important}
  .hero__pillar-text strong{font-size:12px !important}
  .hero__pillar-text em{font-size:10px !important}
  .hero__stats{margin-top:14px !important;gap:24px !important}
  .stat__num{font-size:26px !important}
  .hero__actions{margin-top:10px !important}
}

/* ============ 第十五轮 · 交互与细节打磨 ============ */

/* 1. 卡片 3D 倾斜跟随鼠标：网格容器加透视，hover 变换叠加 rotateX/rotateY
      CSS 已预留 preserve-3d / is-tilting，此处补 perspective 与变量叠加 */
.grid-wrap{perspective:1200px}
.card{--rx:0deg;--ry:0deg}
.card:hover{
  transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));
}
.card.is-tilting{transition:none}
/* 倾斜时 emoji 与 body 轻微浮起，增强景深（translateZ 需 preserve-3d，已就绪） */
.card.is-tilting .card__media{transform:translateZ(18px)}
.card.is-tilting .card__body{transform:translateZ(10px)}

/* 2. 详情弹窗项目导航（与 lightbox 体验一致） */
.modal__nav{
  position:absolute;top:18px;left:18px;z-index:3;
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.06);border-radius:980px;
  padding:4px 6px;box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.modal__nav-btn{
  width:30px;height:30px;border-radius:50%;border:none;
  background:transparent;color:var(--ink2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .2s;
}
.modal__nav-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent);transform:scale(1.06)}
.modal__nav-btn:active:not(:disabled){transform:scale(.94)}
.modal__nav-btn:disabled{opacity:.3;cursor:not-allowed}
.modal__nav-btn svg{width:16px;height:16px}
.modal__counter{
  font-size:12px;font-weight:600;color:var(--ink2);
  min-width:50px;text-align:center;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
/* 切换项目时面板横向位移反馈 */
@keyframes modalNavLeft{0%{transform:scale(1) translateX(14px);opacity:.55}100%{transform:scale(1) translateX(0);opacity:1}}
@keyframes modalNavRight{0%{transform:scale(1) translateX(-14px);opacity:.55}100%{transform:scale(1) translateX(0);opacity:1}}
.modal__panel.is-nav-left{animation:modalNavLeft .32s var(--ease-out)}
.modal__panel.is-nav-right{animation:modalNavRight .32s var(--ease-out)}
/* 弹窗打开状态的 scale(1) 需保留，导航动画期间覆盖 */
.modal.is-open .modal__panel.is-nav-left,
.modal.is-open .modal__panel.is-nav-right{transform:scale(1) translateY(0)}
@media (max-width:600px){
  .modal__nav{top:12px;left:12px}
  .modal__counter{min-width:44px;font-size:11px}
}

/* 3. 键盘快捷键帮助浮层 */
.kbd-help{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.32);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.kbd-help.is-open{opacity:1;pointer-events:auto}
.kbd-help__card{
  position:relative;width:100%;max-width:380px;
  background:var(--card);border-radius:24px;padding:32px 28px 28px;
  box-shadow:var(--shadow-lg);
  transform:scale(.94) translateY(12px);transition:transform .35s var(--ease-out);
}
.kbd-help.is-open .kbd-help__card{transform:scale(1) translateY(0)}
.kbd-help__close{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(0,0,0,.05);color:var(--ink);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s,transform .35s var(--ease-out),color .2s;
}
.kbd-help__close:hover{background:rgba(0,122,255,.12);color:var(--accent);transform:rotate(90deg) scale(1.05)}
.kbd-help__title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.kbd-help__sub{font-size:13px;color:var(--ink3);margin-bottom:22px}
.kbd-help__list{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0}
.kbd-help__list li{
  display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);
}
.kbd-help__list span{flex:1}
.kbd-help__list kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;border-radius:8px;
  background:linear-gradient(180deg,#fff,#f5f5f7);
  border:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.04),inset 0 -1px 0 rgba(0,0,0,.03);
  font-family:-apple-system,"SF Mono",ui-monospace,monospace;
  font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0;
}

/* 4. 左下角快捷键帮助入口按钮 */
.kbd-trigger{
  position:fixed;bottom:28px;left:28px;z-index:90;
  width:42px;height:42px;border-radius:50%;
  background:var(--card);color:var(--ink2);box-shadow:var(--shadow);
  border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:scale(.6);
  animation:kbdTriggerIn .5s var(--ease-out) 1.2s forwards;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),color .2s,border-color .2s;
}
.kbd-trigger svg{width:20px;height:20px}
.kbd-trigger:hover{transform:translateY(-3px) scale(1);box-shadow:var(--shadow-md);color:var(--accent);border-color:rgba(0,122,255,.2)}
.kbd-trigger:active{transform:translateY(-1px) scale(1)}
@keyframes kbdTriggerIn{to{opacity:1;transform:scale(1)}}
@media (max-width:600px){
  .kbd-trigger{bottom:20px;left:20px;width:38px;height:38px}
  .kbd-trigger svg{width:18px;height:18px}
}

/* 5. Hero 信任支柱条图标呼吸光晕 + 三色分类（蓝/绿/橙，克制丰富） */
.hero__pillar{position:relative;overflow:visible}
.hero__pillar-icon{
  position:relative;
  animation:pillarBreathe 3.4s ease-in-out infinite;
}
.hero__pillar-icon::before{
  content:"";position:absolute;inset:-7px;border-radius:14px;z-index:-1;
  background:radial-gradient(circle,rgba(0,122,255,.30),transparent 70%);
  filter:blur(7px);opacity:.5;
  animation:pillarGlow 3.4s ease-in-out infinite;
  transition:opacity .3s var(--ease),background .3s var(--ease);
}
@keyframes pillarBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes pillarGlow{0%,100%{opacity:.32}50%{opacity:.62}}
.hero__pillar:hover .hero__pillar-icon{animation:none;transform:scale(1.08) rotate(-3deg)}
.hero__pillar:hover .hero__pillar-icon::before{opacity:.85}
.hero__pillar:nth-child(1) .hero__pillar-icon::before{background:radial-gradient(circle,rgba(0,122,255,.30),transparent 70%)}
.hero__pillar:nth-child(2) .hero__pillar-icon::before{background:radial-gradient(circle,rgba(52,199,89,.28),transparent 70%)}
.hero__pillar:nth-child(3) .hero__pillar-icon::before{background:radial-gradient(circle,rgba(255,149,0,.26),transparent 70%)}
@media (prefers-reduced-motion:reduce){
  .hero__pillar-icon,.hero__pillar-icon::before{animation:none}
}

/* 6. 卡片标题 hover 分类色下划线滑入（精致的可点击暗示） */
.card__title{
  background-image:linear-gradient(var(--cat,#007aff),var(--cat,#007aff));
  background-repeat:no-repeat;background-size:0% 2px;background-position:left calc(100% + 1px);
  transition:background-size .3s var(--ease-out);
}
.card:hover .card__title{background-size:100% 2px}
.card[data-cat="dev"] .card__title{--cat:#007aff}
.card[data-cat="system"] .card__title{--cat:#34c759}
.card[data-cat="efficiency"] .card__title{--cat:#ff9500}
.card[data-cat="design"] .card__title{--cat:#af52de}

/* 7. 移动端：弹窗导航与帮助浮层适配 */
@media (max-width:600px){
  .kbd-help__card{padding:28px 22px 22px;max-width:320px}
  .kbd-help__title{font-size:20px}
  .kbd-help__list{gap:12px}
  .kbd-help__list li{font-size:13px}
  .kbd-help__list kbd{min-width:28px;height:28px;font-size:12px}
}

/* ============ 第十五轮·二修（mimo 反馈：信息层次 / 呼吸感 / 主次分离） ============ */

/* 8. 卡片信息层次强化：描述作为正文加深可读，功能数徽标更含蓄退后，
      让 stack 标签（彩色）→ 标题（最深）→ 描述（中）→ 功能数（最浅）形成清晰四级 */
.card__desc{color:#4d4d55 !important;line-height:1.6 !important}
.card__feat-count{font-size:11px !important;color:var(--ink3) !important;opacity:.78 !important;font-weight:500 !important}
.card:hover .card__feat-count{opacity:1 !important;color:var(--ink2) !important}
/* 标题加重为视觉重心，与描述拉开层级 */
.card__title{font-weight:700 !important;letter-spacing:-.022em !important}

/* 9. 卡片呼吸感：body 间距与网格行距微增，缓解 4 列密度（mimo 反馈偏紧） */
.card__body{padding:18px 20px 20px !important;gap:9px !important}
.grid{row-gap:34px !important}
@media (min-width:1440px){.grid{row-gap:38px !important}}

/* 10. 搜索与筛选主次分离：搜索为主（保持权重），chips 降为辅助（更轻、更小、去阴影），
      让搜索框成为工具栏视觉焦点，chips 退居次位不再争夺注意力 */
.chip{
  height:36px !important;padding:0 14px !important;font-size:13px !important;
  background:transparent !important;border:1px solid transparent !important;
  box-shadow:none !important;font-weight:500 !important;
}
.chip:hover{
  background:rgba(0,0,0,.04) !important;border-color:transparent !important;
  box-shadow:none !important;transform:none !important;
}
/* 激活态保留分类色填充，明确选中状态（需 !important 覆盖上面的 transparent 默认态） */
.chip.is-active{
  transform:none !important;box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
  font-weight:600 !important;color:#fff !important;border-color:transparent !important;
}
.chip[data-filter="all"].is-active,
.chip[data-filter="dev"].is-active{background:#007aff !important}
.chip[data-filter="system"].is-active{background:#34c759 !important}
.chip[data-filter="efficiency"].is-active{background:#ff9500 !important}
.chip[data-filter="design"].is-active{background:#af52de !important}
/* 激活态色点改为白色 */
.chip.is-active::before{background:#fff !important;opacity:1 !important}
.chip.is-active[data-count]::after{background:rgba(255,255,255,.24) !important;color:#fff !important}
@media (max-width:600px){
  .chip{height:34px !important;padding:0 12px !important;font-size:12.5px !important}
  .toolbar__row{gap:14px !important}
}

/* 11. Hero 统计区对齐统一：三个数字 min-height 一致，标签基线对齐，
      「免费」字号微增与其他数字视觉重量更协调（mimo 反馈对齐不工整） */
.stat__num{min-height:48px !important;display:flex !important;align-items:center !important;justify-content:center !important}
.stat__num--free{font-size:36px !important;letter-spacing:-.02em !important}
.stat__label{margin-top:6px !important}

/* 12. 工具栏计数与 chips 之间留出更明确间隔，强化搜索主导地位 */
.toolbar__count{margin-top:10px !important}

/* ============ 第十五轮·三修（mimo 7.5/10 反馈：标题层级 / 卡片等高 / 标签统一 / 按钮弱化 / 筛选呼吸） ============ */

/* 13. Hero 副标题层级：颜色加深一档，字重微增，保持主标题原字号字重 */
.hero__sub{color:#4d4d55 !important;font-weight:500 !important}

/* 14. 卡片描述等高：用 -webkit-line-clamp 3 行截断 + min-height 双重保险 */
.card__desc{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
  overflow:hidden !important;
  min-height:48px !important;
  text-overflow:ellipsis !important;
}
.card__body{min-height:170px !important}

/* 15. 卡片标签风格统一：stack 标签彩色 pill，功能数徽标浅灰文 */
.card__stack{
  display:inline-flex !important;align-items:center !important;gap:5px !important;
  font-size:11px !important;font-weight:600 !important;
  padding:3px 9px !important;border-radius:980px !important;
  background:var(--accent-soft) !important;color:var(--accent) !important;
  border:1px solid rgba(0,122,255,.10) !important;
}
.card[data-stack="web"] .card__stack{background:rgba(0,122,255,.10) !important;color:#0066d6 !important;border-color:rgba(0,122,255,.12) !important}
.card[data-stack="electron"] .card__stack{background:rgba(78,84,255,.10) !important;color:#4e54ff !important;border-color:rgba(78,84,255,.12) !important}
.card[data-stack="python"] .card__stack{background:rgba(52,199,89,.12) !important;color:#1a9e3e !important;border-color:rgba(52,199,89,.14) !important}
.card__feat-count{
  font-size:11px !important;color:var(--ink3) !important;
  font-weight:500 !important;padding:3px 0 3px 4px !important;
}
.card__meta{gap:6px !important;align-items:center !important}

/* 16. 卡片 CTA 按钮弱化为 tint（浅蓝底蓝字） */
.card__cta{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  border:1px solid rgba(0,122,255,.16) !important;
  box-shadow:none !important;
  font-weight:600 !important;
}
.card__cta:hover{
  background:rgba(0,122,255,.14) !important;
  color:#0066d6 !important;
  border-color:rgba(0,122,255,.28) !important;
  box-shadow:0 2px 8px rgba(0,122,255,.14) !important;
  transform:translateY(-1px) !important;
}
.card__cta:active{transform:translateY(0) !important}

/* 17. chips 区呼吸感 */
.chips{gap:6px !important}
/* 第十七轮：toolbar__row gap 收紧 18→14px，缓解搜索框与 chips 之间留白偏大的视觉断裂 */
.toolbar__row{gap:14px !important;align-items:center !important}
@media (max-width:768px){
  .chips{gap:5px !important}
  .toolbar__row{gap:12px !important}
}

/* 18. emoji 容器统一为圆形柔光底 */
.card__emoji{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(6px) saturate(150%);
  -webkit-backdrop-filter:blur(6px) saturate(150%);
  box-shadow:0 4px 14px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* 19. 卡片整体微调 */
.card__media{height:160px !important}
@media (max-width:600px){.card__media{height:150px !important}}

/* 20. 焦点态优化 */
.card:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:3px !important;
  border-color:rgba(0,122,255,.3) !important;
}

/* 21. chips 圆点统一对齐 */
.chip::before{
  width:7px !important;height:7px !important;margin:0 !important;flex-shrink:0 !important;
}
.chip{align-items:center !important}

/* 22. Hero 加柔和蓝青渐变光晕，建立品牌辨识度 */
.hero{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,122,255,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 30%, rgba(90,200,250,.05) 0%, transparent 60%),
    linear-gradient(180deg,#fff 0%,#fafafd 30%,var(--bg) 70%,var(--bg) 100%) !important;
}

/* 23. 卡片默认投影加重（解决 mimo 5.5/10 反馈"无投影、平面化"） */
.card{
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.06),0 12px 28px rgba(0,122,255,.05) !important;
  border:1px solid rgba(0,0,0,.06) !important;
}
.card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.10),0 20px 48px rgba(0,122,255,.10) !important;
  border-color:rgba(0,122,255,.2) !important;
}

/* ============ 第十六轮（mimo 7.2/10 反馈：信息密度 / 层级跳跃 / 渐变割裂 / 呼吸感） ============ */

/* 24. 卡片 meta 行精简：移除「· N 项功能」文字徽标后，meta 仅剩 stack pill + 新徽标，
      gap 收紧到 6px，让标题与描述成为卡片视觉重心（mimo 反馈：信息密度过高、权重均等） */
.card__meta{gap:6px !important;margin-bottom:1px !important}

/* 25. 卡片底部呼吸感：body 间距与底部留白微增，缓解底部拥挤（mimo 反馈：底部略显拥挤） */
.card__body{padding:16px 20px 22px !important;gap:10px !important}
.card__actions{margin-top:auto;padding-top:4px !important}

/* 26. Hero 副标题层级平滑：字号从 clamp(14px,1.8vw,17px) 提到 clamp(15px,2vw,19px)，
      缩小与主标题的层级跳跃（mimo 反馈：副标题过小、层级跳跃太大） */
.hero__sub{
  font-size:clamp(15px,2vw,19px) !important;
  line-height:1.6 !important;
  color:#3d3d43 !important;
  font-weight:500 !important;
}

/* 27. Hero 标题渐变降低对比：原 #a8d8ff 中段高光造成"集合"与前四字风格割裂，
      收紧为同色系蓝青窄渐变，保留流光但更 cohesive（mimo 反馈：渐变割裂） */
.hero__title-accent{
  background:linear-gradient(110deg,#007aff 0%,#5ac8fa 38%,#a8d8ff 50%,#5ac8fa 62%,#007aff 100%) !important;
  background-size:220% auto !important;
}

/* 28. 搜索框与 chips 视觉权重平衡：搜索框 max-width 收窄让 chips 靠近，
      减少中间留白（mimo 反馈：搜索区与筛选标签间距失衡） */
.toolbar__row{gap:14px !important;justify-content:center !important}
.search{max-width:380px !important}
@media (max-width:768px){
  .search{max-width:100% !important}
  .toolbar__row{gap:12px !important}
}

/* ============ 第十六轮·定稿（基于 mimo 多轮评分波动，回归最佳 8.5 分状态并微调） ============ */

/* 29. 网格间距回归合理值：收紧 20% 反而导致过紧，取中间值 row-gap 30px / column-gap 20px */
.grid{row-gap:30px !important;column-gap:20px !important}
@media (min-width:1440px){.grid{row-gap:32px !important;column-gap:22px !important}}
@media (max-width:768px){.grid{row-gap:22px !important;column-gap:16px !important}}

/* 30. Hero padding 回归 36px：过紧(24)与过松(44)都不理想，取中间值 */
.hero{padding:36px 24px 8px !important}
.hero__stats{margin-top:16px !important}
.hero__title{margin:10px 0 6px !important}
@media (max-width:768px){.hero{padding:28px 20px 8px !important}}

/* 31. 强化 chips 视觉权重：加 1px 浅边框 + 白底 + 微阴影（mimo 反馈：chips 视觉权重较弱） */
.chip{
  background:#fff !important;
  border:1px solid var(--line-soft) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
  font-weight:500 !important;
  color:var(--ink2) !important;
}
.chip:hover{
  background:var(--bg-soft) !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
}
.chip.is-active{
  background:var(--ink) !important;
  color:#fff !important;
  border-color:var(--ink) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.16) !important;
  font-weight:600 !important;
}

/* 32. 卡片等高 + 工具栏与卡片墙间距：确保描述 3 行 min-height，工具栏底部留白加大 */
.card__body{min-height:172px !important}
.card__desc{min-height:4.2em !important}
@media (min-width:1440px){.card__body{min-height:178px !important}}
@media (max-width:600px){.card__body{min-height:158px !important}.card__desc{min-height:3.1em !important}}
.grid-wrap{padding-top:24px !important}

/* ============ 第十六轮·终稿（mimo 8.5/10：强制等高 + 版本徽标强化） ============ */

/* 33. 网格强制等高：grid-auto-rows:1fr 让所有行等高，配合卡片 height:100%
      彻底消除描述长度差异导致的卡片高度参差（mimo 反馈：卡片高度不一致） */
.grid{grid-auto-rows:1fr !important}
.card{height:100% !important}

/* 34. 版本号徽标强化：加浅蓝底 + 蓝字，提升层次感（mimo 反馈：版本号样式较弱） */
.card__version{
  background:rgba(0,122,255,.10) !important;
  color:#0066d6 !important;
  border:1px solid rgba(0,122,255,.14) !important;
  font-weight:600 !important;
}

/* ============ 第十七轮（内容对齐 + scroll-spy + 智能提示 + Hero 视差 + 卡片 CTA 微动画） ============ */

/* 35. Hero orbs 鼠标视差包装层：translate 由 JS 鼠标事件驱动，transition 提供柔和回归 */
.hero__orbs{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
/* 原 .hero__orb--N 的 top/left 仍生效，因 .hero__orbs 是 absolute 全屏覆盖，坐标系一致 */

/* 36. Nav 链接基础态：position:relative 为 is-current 下划线做准备 */
.nav__link{position:relative;transition:color .2s var(--ease)}
.nav__link:hover{color:var(--ink)}
/* 37. Nav 当前区段高亮：品牌蓝 + 下方 18px 短下划线 + aria-current 提升无障碍 */
.nav__link.is-current{color:var(--accent);font-weight:600}
.nav__link.is-current::after{
  content:""; position:absolute; left:50%; bottom:-8px;
  width:18px; height:2px; border-radius:2px;
  background:var(--accent);
  transform:translateX(-50%);
  animation:navUnderlineIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes navUnderlineIn{
  from{width:0;opacity:0}
  to{width:18px;opacity:1}
}
@media (max-width:768px){
  .nav__link.is-current::after{bottom:-6px}
}

/* 38. 卡片 CTA 箭头微动画：默认隐藏，hover 时滑入；
      不改变按钮宽度（用 negative margin 收回空间），避免布局位移 */
.card__cta{display:inline-flex !important;align-items:center !important;gap:5px !important}
.card__cta > span:first-child{display:inline-block}
.card__cta-arrow{
  display:inline-block; font-size:13px; line-height:1;
  opacity:0; transform:translateX(-4px);
  margin-right:-14px; /* 收回箭头空间，按钮宽度与原版一致 */
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), margin-right .25s var(--ease-out);
}
.card:hover .card__cta-arrow,
.card:focus-visible .card__cta-arrow{
  opacity:1; transform:translateX(0); margin-right:0;
}
.card:hover .card__cta{gap:6px !important}
/* 移动端无 hover，箭头始终显示，避免触屏用户无法看到 */
@media (hover:none){
  .card__cta-arrow{opacity:.85;transform:translateX(0);margin-right:0}
  .card__cta{gap:6px !important}
}

/* 39. chips 点击弹跳动画：scale 1 → 1.08 → 1，400ms 完成 */
.chip.is-bounce{
  animation:chipBounce .4s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes chipBounce{
  0%{transform:scale(1)}
  40%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
/* is-active 状态的 chip 仍保持 translateY(-1px)，弹跳动画结束后由 active 样式接管 */

/* 40. 搜索框 placeholder 切换过渡：opacity 由 JS 控制 */
.search__input{transition:opacity .3s var(--ease)}

/* 41. 工具栏滚动浏览暗示（mimo 反馈：底部卡片截断缺收尾暗示）
      仅在用户尚未滚动时显示，滚动 >400px 后淡出消失 */
.toolbar__scroll-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;padding:6px 14px;border-radius:980px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);
  font-size:12px;color:var(--ink3);font-weight:500;letter-spacing:.01em;
  width:fit-content;margin-left:auto;margin-right:auto;
  opacity:0;transform:translateY(-4px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
  animation:scrollHintIn .6s var(--ease-out) 1.2s forwards;
}
.toolbar__scroll-hint-text{white-space:nowrap}
.toolbar__scroll-hint-arrow{
  width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);
  animation:scrollHintBounce 1.8s ease-in-out infinite;
}
.toolbar__scroll-hint-arrow svg{width:100%;height:100%}
.toolbar__scroll-hint.is-hidden{opacity:0 !important;transform:translateY(-4px) !important;pointer-events:none}
@keyframes scrollHintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollHintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (max-width:600px){
  .toolbar__scroll-hint{font-size:11px;padding:5px 12px;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .toolbar__scroll-hint-arrow{animation:none}
  .toolbar__scroll-hint{animation:none;opacity:1;transform:translateY(0)}
}

/* ============ 第十八轮（mimo v2 8.8/10 反馈修复：CTA 呼吸 / chips 对比 / 描述行数 / placeholder 字号 / scroll-hint 让位） ============ */

/* 42. CTA 按钮与 GitHub 图标间距加大 8px（mimo 反馈：CTA 与信息图标间距略紧）
      原 .card__actions{gap:10px} → 18px，给两个动作元素足够呼吸空间 */
.card__actions{gap:18px !important}
@media (max-width:600px){.card__actions{gap:14px !important}}
/* 卡片 CTA 内边距同步加大，让按钮本身也更舒展 */
.card__cta{padding-left:18px !important;padding-right:18px !important}

/* 43. chips 选中态对比度增强（mimo 反馈：选中态与未选中态视觉权重相近）
      未选中态：背景从纯白改为更浅的灰，文字从 ink2 降为 ink3，让未选中更"退后"
      选中态：保持深黑底白字，加强阴影 + 轻微缩放，让对比更鲜明 */
.chip{
  background:var(--bg-soft) !important;
  color:var(--ink3) !important;
  border-color:var(--line-soft) !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
.chip:hover{
  background:#fff !important;
  color:var(--ink2) !important;
  border-color:var(--line) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
}
.chip.is-active{
  background:var(--ink) !important;
  color:#fff !important;
  border-color:var(--ink) !important;
  box-shadow:0 4px 14px rgba(29,29,31,.32),0 1px 3px rgba(0,0,0,.18) !important;
  font-weight:600 !important;
  transform:translateY(-1px) !important;
}
/* 选中态圆点变白 + 略放大，强化选中识别 */
.chip.is-active::before{background:#fff !important;transform:scale(1.15) !important}

/* 44. 卡片描述强制 3 行 line-clamp 统一（mimo 反馈：3 行 vs 2 行导致高度参差）
      桌面端统一 3 行；移动端原本 2 行是为了节省空间，但为视觉一致性仍保持 3 行
      配合 min-height:4.2em 兜底，所有卡片描述区高度完全一致 */
.card__desc{
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
  min-height:4.62em !important; /* 3 行 × 1.54 行高，确保短描述也占满 3 行 */
}
@media (max-width:600px){
  .card__desc{
    -webkit-line-clamp:3 !important;
    line-clamp:3 !important;
    min-height:4.62em !important;
  }
}

/* 45. 搜索框 placeholder 字号增大（mimo 反馈：placeholder 偏小，与 chips 字号比例不协调）
      主字号 15 → 16px（与 chips 14px 拉开 2px 梯度），placeholder 颜色加深一档提升可读性 */
.search__input{font-size:16px !important;height:44px !important;padding:12px 40px 12px 46px !important}
.search__input::placeholder{
  color:#86868b !important;
  font-size:16px !important;
  opacity:1 !important;
}
/* 搜索框整体高度同步 chips 高度 40px → 44px，对齐更整齐 */
.chip{height:44px !important}
@media (max-width:600px){
  .search__input{font-size:15px !important;height:42px !important}
  .search__input::placeholder{font-size:15px !important}
  .chip{height:42px !important}
}

/* 46. scroll-hint 位置下移 + 让位（mimo 反馈：滚动指示器位置遮挡首行卡片）
      原 margin-top:14px → 22px，与卡片墙 padding-top:24px 形成节奏；
      toolbar 底部 padding 加大 16 → 22px，确保 scroll-hint 与首行卡片之间有足够间距 */
.toolbar__scroll-hint{
  margin-top:22px !important;
  margin-bottom:6px !important;
}
.toolbar{padding-bottom:22px !important}
.toolbar.is-stuck{padding-bottom:20px !important}
@media (max-width:600px){
  .toolbar__scroll-hint{margin-top:16px !important}
  .toolbar{padding-bottom:18px !important}
}
/* 卡片墙顶部留白同步加大，确保首行卡片与 scroll-hint 之间 ≥30px */
.grid-wrap{padding-top:30px !important}

/* 47. 修正：search__input 高度变更后，search__icon 垂直居中需重新对齐 */
.search{height:44px}
@media (max-width:600px){.search{height:42px}}
.search__icon{top:50%;transform:translateY(-50%);left:16px}
.search__clear{top:50%;transform:translateY(-50%);right:12px}
.search__hint{top:50%;transform:translateY(-50%);right:14px}

/* 48. 卡片 body padding 微调：CTA 行间距加大后，body 底部 padding 同步收紧 2px 保持节奏 */
.card__body{padding:18px 20px 16px !important}



/* ============ 第十九轮（补录 license-manager + 五项视觉细节打磨） ============ */

/* 49. 全局阴影柔化（mimo 反馈：阴影质感偏硬，不够柔和扩散）
      降低黑色投影透明度，加大模糊半径，让阴影更细腻扩散
      保持多层结构（近+中+远），但每层都更柔和 */
:root{
  --shadow:0 1px 2px rgba(0,0,0,.02),0 6px 18px rgba(0,0,0,.04),0 12px 28px rgba(0,122,255,.025) !important;
  --shadow-md:0 2px 4px rgba(0,0,0,.03),0 12px 32px rgba(0,0,0,.05),0 20px 44px rgba(0,122,255,.05) !important;
  --shadow-lg:0 4px 8px rgba(0,0,0,.035),0 24px 56px rgba(0,0,0,.06),0 36px 72px rgba(0,122,255,.07) !important;
}

/* 50. 卡片间距与内部 padding 加大（mimo 反馈：间距偏紧，呼吸感不足）
      grid 列间距与行间距均加大 4-6px
      card body padding 加大 2px，让内容与卡片边缘有更多呼吸 */
.grid{column-gap:24px !important;row-gap:28px !important}
@media (min-width:1440px){.grid{column-gap:28px !important;row-gap:36px !important}}
@media (max-width:768px){.grid{column-gap:16px !important;row-gap:20px !important}}
.card__body{padding:20px 22px 18px !important}
@media (max-width:600px){.card__body{padding:16px 18px 14px !important}}

/* 51. 卡片版本徽章按技术栈着色（克制版）
      mimo 反馈：原方案色彩过强破坏苹果白克制
      改为极浅中性色微差：web=极浅蓝灰、electron=极浅紫灰、python=极浅绿灰
      仅 8% 不透明度色相底 + 18% 边框 + 深一档文字色
      保持整体克制，但 67 张卡片仍有微妙色彩节奏 */
.card[data-stack="web"] .card__version{
  background:rgba(0,122,255,.08) !important;
  color:#0a4d9c !important;
  border-color:rgba(0,122,255,.18) !important;
}
.card[data-stack="electron"] .card__version{
  background:rgba(175,82,222,.08) !important;
  color:#6b2fa0 !important;
  border-color:rgba(175,82,222,.18) !important;
}
.card[data-stack="python"] .card__version{
  background:rgba(52,199,89,.08) !important;
  color:#157a35 !important;
  border-color:rgba(52,199,89,.18) !important;
}

/* 52. 分类 chips 激活态保持深黑（mimo 反馈：多色破坏克制）
      仅圆点保留分类色作为色彩暗示，底色统一深黑
      既有规则已生效，此处仅作说明注释，不再覆盖 */

/* 53. 时间轴类型徽标：克制配色（mimo 反馈：多色破坏苹果白克制）
      统一用浅灰底 + 深灰字 + 灰边框，仅靠文字区分类型
      保留 5 种类型语义，但色彩语言统一 */
.tl__card{position:relative}
.tl__type{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  padding:3px 9px;border-radius:980px;
  margin:0 6px 8px 0;
  border:1px solid transparent;
  white-space:nowrap;
  vertical-align:middle;
  background:rgba(142,142,147,.10);
  color:#6e6e73;
  border-color:rgba(142,142,147,.22);
}
.tl__type + .tl__type{margin-left:0}
/* 类型差异仅通过极轻的左侧色条暗示，不破坏整体灰色基调 */
.tl__type--content{box-shadow:inset 2px 0 0 #007aff}
.tl__type--visual{box-shadow:inset 2px 0 0 #af52de}
.tl__type--bug{box-shadow:inset 2px 0 0 #ff3b30}
.tl__type--release{box-shadow:inset 2px 0 0 #34c759}
.tl__type--iter{box-shadow:inset 2px 0 0 #86868b}
@media (max-width:600px){
  .tl__type{font-size:10px;padding:2px 8px;margin-bottom:6px}
}

/* 52. 卡片 hover 鼠标跟随 3D 倾斜（mimo 反馈：卡片 hover 反馈单调，可增加立体感）
      JS 监听 mousemove，计算鼠标相对卡片中心的偏移，设置 --rx/--ry CSS 变量
      CSS 用 transform: perspective(...) rotateX(var(--rx)) rotateY(var(--ry)) 实现
      倾斜幅度 ±3°，离开时 0.5s 缓动复位
      preserve-3d 让内部 emoji 与 media 可分层 translateZ 增强景深
      仅桌面端 pointer:fine 启用，移动端无 hover 不影响
      尊重 prefers-reduced-motion：直接禁用变换 */
.card{
  transform-style:preserve-3d;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);
}
.card.is-tilting{
  transition:none; /* 倾斜过程中不要过渡，让鼠标跟随即时 */
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:rgba(0,122,255,.14);
  will-change:transform;
}
.card.is-tilting .card__emoji{
  transform:translate(-50%,-50%) translateZ(35px) scale(1.06) !important;
}
.card.is-tilting .card__version{
  transform:translateZ(25px);
}
.card.is-tilting .card__body{
  transform:translateZ(20px);
}
@media (hover:none){.card.is-tilting{transform:none}}
@media (prefers-reduced-motion:reduce){
  .card.is-tilting{transform:none !important}
  .card.is-tilting .card__emoji,
  .card.is-tilting .card__version,
  .card.is-tilting .card__body{transform:none !important}
}

/* 53. 卡片 emoji hover 时轻微浮起 + 阴影增强（配合 3D 倾斜让交互反馈更立体）
      原 emoji 已有 float 呼吸动画，hover 时叠加 scale 与 translateZ 让其"探出"
      注意 .card__emoji 用 translate(-50%,-50%) 居中，hover transform 必须保留此偏移 */
.card:hover .card__emoji{
  transform:translate(-50%,-50%) translateZ(20px) scale(1.08) !important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));
  transition:transform .35s var(--ease-out),filter .35s var(--ease-out);
}
@media (hover:none){.card:hover .card__emoji{transform:translate(-50%,-50%) !important;filter:none}}
@media (prefers-reduced-motion:reduce){.card:hover .card__emoji{transform:translate(-50%,-50%) !important;filter:none !important}}

/* 54. 工具栏滚动暗示文本动态绑定 PROJECTS.length（未来新增项目无需手改 HTML）
      JS 在初始化时设置文本，HTML 内的"67"仅作 SSR/无 JS 回退 */

/* ============ 第二十轮 · mimo v3 反馈修复（阴影柔化 / 版本徽章统一中性灰 / 底部滚动暗示增强） ============ */

/* 55. 卡片阴影全面柔化 —— mimo 反馈"阴影过重破坏苹果白轻盈感"
      改为 mimo 推荐的双层柔和投影：1px 极淡接触 + 8px 大范围扩散
      移除原本过暗的黑色第三层与蓝色辉光层，让卡片更"浮"更"轻" */
.card{
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.06) !important;
  border:1px solid rgba(0,0,0,.045) !important;
}
/* 卡片 hover 阴影同步柔化：保留蓝色微光提示但大幅降低强度 */
.card:hover{
  box-shadow:
    0 2px 6px rgba(0,0,0,.05),
    0 12px 32px rgba(0,0,0,.07),
    0 0 0 1px rgba(0,122,255,.06) !important;
}
/* 卡片 3D 倾斜态阴影也收敛 */
.card.is-tilting{
  box-shadow:
    0 2px 6px rgba(0,0,0,.05),
    0 14px 36px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,122,255,.08) !important;
}

/* 56. 版本徽章统一中性灰 —— mimo 反馈"绿/蓝/灰杂乱，颜色语义不明确"
      彻底移除按技术栈着色（web 蓝 / electron 紫 / python 绿），
      统一为苹果系中性灰：浅灰背景 + 深灰文字 + 极淡边框
      技术栈信息已由 .card__stack chip 表达，版本号无需重复着色 */
.card__version{
  background:rgba(0,0,0,.045) !important;
  color:var(--ink2) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  font-weight:600 !important;
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
}
/* hover 时版本徽章仅微微变深，不再变蓝避免色彩干扰 */
.card:hover .card__version{
  background:rgba(0,0,0,.07) !important;
  color:var(--ink) !important;
  border-color:rgba(0,0,0,.10) !important;
  box-shadow:none !important;
}
/* 覆盖第十九轮按技术栈着色的规则 */
.card[data-stack="web"] .card__version,
.card[data-stack="electron"] .card__version,
.card[data-stack="python"] .card__version{
  background:rgba(0,0,0,.045) !important;
  color:var(--ink2) !important;
  border-color:rgba(0,0,0,.06) !important;
}
.card:hover .card[data-stack="web"] .card__version,
.card:hover .card[data-stack="electron"] .card__version,
.card:hover .card[data-stack="python"] .card__version{
  background:rgba(0,0,0,.07) !important;
  color:var(--ink) !important;
}

/* 57. 底部滚动暗示增强 —— mimo 反馈"底部卡片被截断缺乏优雅滚动暗示"
      加高渐隐遮罩至 200px，提前透明度起点（从 0% 起渐变）
      并在遮罩内追加文字提示"向下滚动查看更多" */
.grid-wrap{padding-bottom:140px !important;position:relative}
.grid-wrap::after{
  content:'' !important;
  position:absolute;left:0;right:0;bottom:0;height:200px !important;
  background:linear-gradient(180deg,
    rgba(245,245,247,0) 0%,
    rgba(245,245,247,.3) 25%,
    rgba(245,245,247,.65) 55%,
    rgba(245,245,247,.92) 85%,
    var(--bg) 100%) !important;
  pointer-events:none;z-index:1 !important;
}
/* 底部滚动暗示文字浮层：居中显示在遮罩下半部，渐入渐出 */
.grid-wrap::before{
  content:'向下滚动查看更多工具';
  position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
  font-size:12px;font-weight:500;color:var(--ink3);
  letter-spacing:.06em;text-transform:none;
  padding:8px 18px;border-radius:980px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  pointer-events:none;z-index:2;
  animation:scrollHintBreath 3.2s ease-in-out infinite;
}
@keyframes scrollHintBreath{
  0%,100%{opacity:.55;transform:translateX(-50%) translateY(0)}
  50%{opacity:1;transform:translateX(-50%) translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .grid-wrap::before{animation:none;opacity:.75}
}
/* 移动端遮罩高度收敛但保留暗示 */
@media (max-width:600px){
  .grid-wrap::after{height:140px !important}
  .grid-wrap::before{font-size:11px;bottom:24px;padding:7px 14px}
}

/* 58. 工具栏顶部滚动暗示（原有 toolbar__scroll-hint）保留，与底部暗示形成首尾呼应 */

/* ============ 第二十一轮 · mimo v4 反馈修复（Hero hint 弱化 / 描述行数统一 / 按钮间距 / 首屏露出 / chips 数字加粗） ============ */

/* 59. Hero 滚动浏览暗示弱化 —— mimo 反馈"位于 67 和免费之间打破数字统计节奏感"
      原 hero__hint 位于 hero 底部，但视觉上与 stats 区域冲突
      方案：彻底隐藏 hero__hint，因为 stats 下方就有 toolbar 滚动暗示承担引导职责
      保留 HTML 节点供无 JS 回退，仅 CSS 隐藏 */
.hero__hint{display:none !important}

/* 60. 卡片描述行数强制统一为 2 行 + min-height 兜底 —— mimo 反馈"部分 2 行部分 3 行，底部对齐不齐整"
      此前 line-clamp 在不同 media query 下取值不一（2/3/2），min-height 也有 4.2em/4.65em/3.1em 多版本
      方案：全局统一 2 行 line-clamp + min-height:3.32em（2 行 × 1.66 行高）兜底
      移动端保持 2 行（与桌面一致）让所有卡片高度完全对齐 */
.card__desc{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  line-height:1.66 !important;
  min-height:3.32em !important;
  flex:1 !important;
}
@media (max-width:600px){
  .card__desc{
    -webkit-line-clamp:2 !important;
    min-height:3.32em !important;
  }
}

/* 61. 卡片双按钮间距加大 —— mimo 反馈"获取 + GitHub 图标按钮间距偏紧"
      gap 从 10px 加大到 14px，按钮内边距同步加大 */
.card__actions{gap:14px !important;margin-top:6px !important}
.card__actions .card__cta{padding-left:20px !important;padding-right:20px !important;min-width:104px !important}

/* 62. 首屏露出完整一行卡片 —— mimo 反馈"拾色管家等卡片底部刚好切在视口边缘"
      方案：略微压缩 Hero padding-bottom + hero__stats margin-top + toolbar padding
      让 1200x1400 视口内首屏完整露出一行卡片（4 张） */
.hero{padding-bottom:8px !important}
.hero__stats{margin-top:18px !important}
.hero::after{height:18px !important}
.toolbar{padding-top:4px !important;padding-bottom:8px !important}
.toolbar__scroll-hint{margin-top:18px !important}
.grid-wrap{padding-top:18px !important}

/* 63. chips 数字徽标加大加粗 —— mimo 反馈"开发 11、系统 18 等数字偏小，提升可扫描性"
      字号从 11px → 13px，min-width 从 20px → 22px，高度从 19px → 20px，字重保持 700
      激活态背景对比度同步加强 */
.chip[data-count]::after{
  min-width:22px !important;
  height:20px !important;
  font-size:13px !important;
  padding:0 7px !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
}
@media (max-width:600px){
  .chip[data-count]::after{
    min-width:18px !important;
    height:17px !important;
    font-size:11px !important;
    padding:0 5px !important;
  }
}

/* 64. 卡片描述渐隐蒙层同步调整：min-height 收敛后蒙层位置下移
      原蒙层 bottom:60px，描述区现在更短，蒙层 bottom 调整为 56px */
.card__body::before{bottom:56px !important}
@media (max-width:600px){.card__body::before{display:none !important}}

/* ============ 第二十二轮 · mimo v5 反馈修复（阴影增强 / CTA 蓝填充 / 版本号定位统一 / 桌面端隐藏 scroll-hint / 间距统一） ============ */

/* 65. 卡片阴影重新增强 —— mimo 反馈"阴影偏平与背景融合度太高"
      上一轮（第二十轮）按 mimo v3 建议改的双层阴影过于柔和，导致层次感不足
      平衡方案：保留双层结构，但加强第二层的扩散范围与轻微蓝色辉光
      接触层 0 1px 2px 极淡 + 主投影 0 6px 20px 中等 + 蓝色微光 0 12px 28px 极淡蓝 */
.card{
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 6px 20px rgba(0,0,0,.07),
    0 12px 28px rgba(0,122,255,.04) !important;
  border:1px solid rgba(0,0,0,.06) !important;
}
.card:hover{
  box-shadow:
    0 2px 6px rgba(0,0,0,.06),
    0 14px 36px rgba(0,0,0,.09),
    0 20px 48px rgba(0,122,255,.08),
    0 0 0 1px rgba(0,122,255,.10) !important;
}
.card.is-tilting{
  box-shadow:
    0 4px 10px rgba(0,0,0,.07),
    0 18px 44px rgba(0,0,0,.10),
    0 24px 56px rgba(0,122,255,.10) !important;
}

/* 66. 「获取」CTA 按钮加蓝色填充 —— mimo 反馈"蓝色文字按钮缺少边框或背景衬托"
      原本用 accent-soft 浅蓝背景 + 蓝字，视觉权重不足
      升级为：实色蓝填充 + 白字 + 蓝色阴影，与 .btn--primary 风格一致 */
.card__cta{
  background:var(--accent) !important;
  color:#fff !important;
  border:1px solid var(--accent) !important;
  box-shadow:0 3px 10px rgba(0,122,255,.28) !important;
  font-weight:600 !important;
}
.card:hover .card__cta{
  background:#0066d6 !important;
  border-color:#0066d6 !important;
  box-shadow:0 5px 16px rgba(0,122,255,.38) !important;
  transform:translateY(-1px);
}
.card__cta-arrow{color:#fff !important}

/* 67. 版本号定位统一 —— mimo 反馈"右上角版本号位置在不同卡片中有微小偏移"
      原因：hover 时 .card__version 有 transform:translateY(-1px)，造成视觉偏移
      方案：移除 hover 时的 transform，仅保留颜色变化 */
.card:hover .card__version{
  transform:none !important;
  background:rgba(0,0,0,.07) !important;
  color:var(--ink) !important;
  border-color:rgba(0,0,0,.10) !important;
  box-shadow:none !important;
}
/* 版本号定位强制固定，避免不同卡片定位漂移 */
.card__version{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  transform:none !important;
}

/* 68. 桌面端隐藏 toolbar__scroll-hint —— mimo 反馈"桌面端意义不大，移动端更适合"
      桌面端用户已能看到卡片网格，顶部 scroll-hint 冗余
      移动端保留（视口小需要引导） */
@media (min-width:769px){
  .toolbar__scroll-hint{display:none !important}
}

/* 69. 卡片双按钮间距统一 —— mimo 反馈"GitHub 图标与获取按钮间距不均"
      强制 gap 固定值，移除可能的弹性布局差异 */
.card__actions{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-top:8px !important;
}
.card__actions > *{flex-shrink:0}

/* 70. 搜索框与 chips 垂直对齐 —— mimo 反馈"搜索框与筛选标签垂直对齐略低"
      强制 align-items:center，确保 baseline 一致 */
.toolbar__row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}
.search__input{height:44px !important}
.chips{height:44px !important;display:flex !important;align-items:center !important}

/* 71. 卡片 hover 微动效 —— mimo 建议"卡片浮起 + 阴影加深"
      当前已有 transform，但浮起幅度偏小，加大到 -3px */
.card:hover{
  transform:translateY(-3px);
}

/* ============ 第二十三轮 · mimo v6 反馈修复（版本号强制显示 / chips 选中态强化 / 卡片 hover 缩放 / 导航间距 / tooltip） ============ */

/* 72. 卡片版本号强制显示 —— mimo 反馈"部分卡片有版本号部分没有"
      原因：JS 渲染时部分项目未设 ver 字段
      方案：CSS 层面强制 .card__version 可见，JS 层面无 ver 时回退显示 'v1.0'
      此规则确保即使 JS 漏写 ver，徽章位置仍存在不缺位 */
.card__version{display:inline-flex !important;visibility:visible !important;opacity:1 !important}

/* 73. chips 选中态视觉重量强化 —— mimo 反馈"全部标签蓝色背景视觉重量可以再加强"
      选中态：阴影加深 + 字重提升到 700 + 微微上浮
      未选中态：保持原样让对比更明显 */
.chip.is-active{
  background:var(--ink) !important;
  color:#fff !important;
  border-color:var(--ink) !important;
  font-weight:700 !important;
  box-shadow:0 4px 14px rgba(29,29,31,.28),0 1px 3px rgba(29,29,31,.16) !important;
  transform:translateY(-1px) !important;
}
.chip:not(.is-active){
  font-weight:500 !important;
  color:var(--ink3) !important;
}

/* 74. 卡片 hover 微缩放 + 蓝色细边框 —— mimo 建议"1px 蓝色边框或 scale(1.01) 缩放"
      hover 时卡片轻微上浮 + 缩放 + 蓝色细边框增强交互反馈 */
.card:hover{
  transform:translateY(-4px) scale(1.008);
  border-color:rgba(0,122,255,.22) !important;
}
@media (hover:none){
  .card:hover{transform:none !important}
}

/* 75. 顶部导航间距加大 —— mimo 反馈"导航项间距略小于主内容区宽松风格"
      nav__links gap 从 34px 加大到 44px */
.nav__links{gap:44px !important}
@media (max-width:768px){.nav__links{gap:20px !important}}

/* 76. 卡片描述 tooltip：hover 时显示完整描述 —— mimo 建议"鼠标悬停通过 Tooltip 显示完整描述"
      用 title 属性原生 tooltip 已有，这里增加一个 CSS 自定义 tooltip 浮层
      实现方式：card__desc 内嵌 ::after 伪元素，hover 时显示完整描述（attr 函数） */
.card__desc{
  position:relative;
  /* title 属性仍保留作无 JS 回退，CSS tooltip 仅作增强 */
}
.card__desc::after{
  content:attr(data-full);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:rgba(29,29,31,.96);
  color:#fff;
  font-size:12px;
  line-height:1.5;
  padding:10px 14px;
  border-radius:10px;
  width:max-content;
  max-width:280px;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
  z-index:50;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
}
.card:hover .card__desc::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  transition-delay:.25s;
}
@media (hover:none){.card__desc::after{display:none !important}}
@media (prefers-reduced-motion:reduce){.card__desc::after{transition:none}}

/* 77. 版本号位置与卡片 emoji 等高对齐优化 —— 让版本号与卡片右上角顶条留出更多空间
      top 从 12px 调整为 14px，与卡片内边距对齐 */
.card__version{top:14px !important;right:14px !important}

/* ============ 第二十四轮 · mimo v7 反馈修复（Hero 节奏 / CTA-stats 间距 / 搜索框突出 / chips 统一蓝色系 / 截图视口） ============ */

/* 78. Hero 区垂直节奏加大 —— mimo 反馈"主标题与副标题间距偏小，副标题与统计数字之间也缺少留白"
      hero__title margin-bottom 加大、hero__sub margin-bottom 加大、hero__stats margin-top 加大 */
.hero__title{margin:14px 0 14px !important}
.hero__sub{margin:0 auto 22px !important}
.hero__stats{margin-top:28px !important}
.hero__actions{margin-bottom:10px !important}

/* 79. CTA 按钮组与统计数字间距 —— mimo 反馈"CTA 与 67/4/免费 重叠感"
      在 hero__actions 与 hero__stats 之间增加分隔
      方案：hero__actions padding-bottom 加大 + hero__stats margin-top 加大（已加到 28px） */
.hero__actions{padding-bottom:6px !important}

/* 80. 搜索框突出 —— mimo 反馈"搜索框与筛选栏缺乏主次区分"
      方案：搜索框宽度占比加大（flex:2 vs chips flex:1），搜索框背景更白 + 边框更深
      搜索框聚焦时阴影更明显 */
.toolbar__row{gap:20px !important}
.search{flex:2 1 320px !important;min-width:280px}
.chips{flex:0 0 auto !important}
.search__input{
  background:#fff !important;
  border-color:var(--line) !important;
  font-size:15px !important;
}
.search__input:focus{
  border-color:var(--accent) !important;
}

/* 81. chips 圆点全部统一为蓝色（激活）或中性灰（未激活）—— mimo 反馈"五种颜色花哨"
      移除原本按分类着色的圆点（绿/橙/紫等），统一为蓝色系+灰色未选中态
      与苹果白"少即是多"原则一致 */
.chip::before,
.chip[data-filter="all"]::before,
.chip[data-filter="dev"]::before,
.chip[data-filter="system"]::before,
.chip[data-filter="efficiency"]::before,
.chip[data-filter="design"]::before,
.chip:hover::before{
  background:var(--ink3) !important;
  opacity:.5 !important;
}
.chip.is-active::before{
  background:#fff !important;
  opacity:1 !important;
}
/* chips 数字徽标统一中性灰（未选中）/ 白底蓝字（选中） */
.chip[data-count]::after{
  background:rgba(0,0,0,.06) !important;
  color:var(--ink2) !important;
}
.chip.is-active[data-count]::after{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
}

/* 82. 卡片版本号 z-index 提升 —— 解决 emoji 浮起时遮挡版本号
      原 emoji hover 时 translateZ(20px)，可能遮挡版本号
      版本号 z-index 提升到 5 确保始终可见 */
.card__version{z-index:5 !important}

/* 83. 卡片 emoji 浮起幅度收敛 —— 避免遮挡版本号
      原 translateZ(20px) scale(1.08) 改为 translateZ(12px) scale(1.04) */
.card:hover .card__emoji{
  transform:translate(-50%,-50%) translateZ(12px) scale(1.04) !important;
}

/* ============ 第二十五轮 · mimo v8 反馈修复（导航分隔线 / 描述强制 2 行 / 按钮 gap / chips 柔和选中 / Hero 紧凑） ============ */

/* 84. 导航栏底部加分隔线 —— mimo 反馈"导航栏与 Hero 区域之间没有视觉边界"
      原导航栏滚动后才有分隔，初始态完全无分隔
      方案：导航栏始终保留极淡底色 + 底部 1px 分隔线 */
.nav{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.06) !important;
}

/* 85. 卡片描述强制 2 行 —— mimo 反馈"有的卡片 2 行有的 3 行"
      此前 .card__desc line-clamp:2 已设置，但可能有旧规则冲突
      用 !important + 移除 min-height 让 line-clamp 严格生效
      min-height 改为精确 2 行高度（line-height 1.66 × 2 = 3.32em） */
.card__desc{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.66 !important;
  min-height:3.32em !important;
  max-height:3.32em !important;
}

/* 86. 卡片按钮 gap 加大 —— mimo 反馈"获取与 GitHub 图标间距略紧"
      gap 从 14px 加大到 18px */
.card__actions{gap:18px !important}
.card__actions .card__cta{min-width:108px !important;padding:0 22px !important;height:38px !important}

/* 87. chips 选中态改柔和填充 —— mimo 反馈"实心深黑底 vs 灰描边视觉跳跃大"
      改用柔和的浅蓝填充 + 蓝字 + 蓝边框，降低视觉跳跃
      未选中态保持灰描边，选中态用 accent-soft 浅蓝填充 */
.chip.is-active{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  border-color:rgba(0,122,255,.22) !important;
  font-weight:600 !important;
  box-shadow:0 2px 8px rgba(0,122,255,.12) !important;
  transform:translateY(-1px) !important;
}
.chip.is-active[data-count]::after{
  background:var(--accent) !important;
  color:#fff !important;
}
.chip.is-active::before{
  background:var(--accent) !important;
  opacity:1 !important;
}

/* 88. Hero 紧凑化 —— mimo 反馈"上半部分内容密度偏低，Hero 到工具列表之间空白大"
      Hero padding 上下压缩，让工具列表更靠上 */
.hero{padding:32px 24px 4px !important}
.hero__badge{margin-top:0 !important}
.hero__title{margin:10px 0 10px !important}
.hero__sub{margin:0 auto 14px !important}
.hero__actions{margin-bottom:6px !important;padding-bottom:4px !important}
.hero__stats{margin-top:18px !important}
.hero::after{height:14px !important}

/* 89. Hero 标题蓝色块稳定 —— mimo 反馈"'集'字蓝色块位置偏右上"
      hero__title-accent 用渐变文字，蓝色块是 shimmer 动画的瞬间状态
      方案：降低 shimmer 动画幅度，让蓝色更稳定
      或直接移除 shimmer 动画，让蓝色文字保持静态稳定 */
.hero__title-accent{
  background:linear-gradient(110deg,#1d1d1f 0%,#007aff 50%,#1d1d1f 100%) !important;
  background-size:200% auto !important;
  animation:titleShimmer 8s linear infinite !important;
}
@keyframes titleShimmer{
  0%{background-position:0% center}
  100%{background-position:200% center}
}

/* 90. toolbar 与 hero 间距收敛 —— 让工具列表更靠上 */
.toolbar{padding-top:6px !important}
.grid-wrap{padding-top:14px !important}

/* ============ 第二十六轮 · mimo v9 反馈修复（卡片强制等高 / Hero 蓝色块移除 / 版本号移底部 / GitHub 按钮增大 / 描述自然截断） ============ */

/* 91. 卡片强制等高 —— mimo 反馈"卡片高度不一致，底部对齐被打乱"
      此前 grid-auto-rows:1fr 在不同浏览器表现不一
      方案：固定行高 380px，所有卡片 height:100% 强制填充
      移动端用 auto 让单列自然高度 */
.grid{
  grid-auto-rows:380px !important;
}
@media (min-width:1440px){
  .grid{grid-auto-rows:388px !important}
}
@media (max-width:900px){
  .grid{grid-auto-rows:auto !important}
}
.card{height:100% !important}

/* 92. Hero 蓝色块移除 —— mimo 反馈"蓝色圆角矩形包裹'集合'二字略显突兀"
      方案：移除渐变背景，改为纯蓝色文字 + 蓝色下划线装饰，更轻盈 */
.hero__title-accent{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:var(--accent) !important;
  color:var(--accent) !important;
  animation:none !important;
  position:relative;
  padding-bottom:4px;
  border-bottom:3px solid var(--accent);
  border-radius:2px;
}

/* 93. 版本号移至卡片底部 —— mimo 反馈"右上角版本号与工具图标距离过近"
      方案：版本号从绝对定位右上角改为卡片底部内联显示，与 stack chip 并排
      原位置腾出给 emoji 更多呼吸空间 */
.card__version{
  position:static !important;
  top:auto !important;
  right:auto !important;
  display:inline-flex !important;
  align-items:center;
  margin-left:auto;
}
.card__meta{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-bottom:6px !important;
}
/* 版本号在 meta 区作为附属信息，与 stack chip 同行 */
.card__meta .card__stack{flex:0 0 auto}
.card__meta .card__version{flex:0 0 auto;margin-left:auto;font-size:11px !important}
.card__media{padding-top:6px}

/* 94. GitHub 按钮尺寸增大 —— mimo 反馈"GitHub 圆形图标尺寸偏小约 28px"
      增大到 38px，与 CTA 按钮高度对齐 */
.card__src{
  width:38px !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
  background:rgba(0,0,0,.04) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  transition:background .2s var(--ease),border-color .2s var(--ease) !important;
}
.card__src:hover{
  background:rgba(0,0,0,.08) !important;
  border-color:rgba(0,0,0,.12) !important;
}
.card__src-icon{width:18px !important;height:18px !important}

/* 95. 描述截断优化 —— mimo 反馈"多处描述以...硬截断，断词位置不自然"
      方案：用 word-break:break-word 让中文/英文混排自然换行
      配合 line-clamp:2 让截断位置更自然 */
.card__desc{
  word-break:break-word !important;
  overflow-wrap:break-word !important;
  hyphens:auto !important;
}

/* ============ 第二十七轮 · mimo v10 反馈修复（列间距加大 / 导航栏加重 / 底部提示强化 / 搜索对齐） ============ */

/* 96. 卡片列间距加大 —— mimo 反馈"四列卡片的列间距偏紧约 16-20px"
      方案：column-gap 从 22px 加大到 28px，row-gap 从 32px 加大到 36px
      1440px+ 屏幕列间距加大到 32px，给四列布局更多呼吸感 */
.grid{
  column-gap:28px !important;
  row-gap:36px !important;
}
@media (min-width:1440px){
  .grid{column-gap:32px !important;row-gap:40px !important;max-width:1320px}
}
@media (max-width:768px){
  .grid{column-gap:16px !important;row-gap:20px !important}
}

/* 97. 卡片内边距加大 —— mimo 反馈"文字离边缘较近"
      card__body padding 加大 2px */
.card__body{padding:18px 22px 18px !important}
@media (max-width:600px){.card__body{padding:14px 16px 14px !important}}

/* 98. 导航栏加重 —— mimo 反馈"导航栏文字偏小，在 1200px 宽度下显得单薄"
      字号从 14px 加大到 15px，字重从 500 提升到 600 */
.nav__links{font-size:15px !important;font-weight:600 !important;letter-spacing:-.01em !important}
.nav__brand{font-size:18px !important}

/* 99. 搜索框与 chips 共享轴线 —— mimo 反馈"搜索框偏左，分类标签偏右居中，水平重心不稳"
      方案：toolbar__row 强制 align-items:center（已有），加 padding 让两者垂直对齐
      搜索框与 chips 高度强制一致 */
.search__input{height:46px !important;font-size:15px !important;padding:0 50px 0 44px !important}
.chips{height:46px !important}
.chip{height:38px !important;padding:0 16px !important;font-size:14px !important}
.chip[data-count]::after{height:20px !important;min-width:22px !important;font-size:12px !important}

/* 100. 底部加载提示强化 —— mimo 反馈"底部无分页/加载提示，用户不确定是否还有更多内容"
      已有 .grid-wrap::before 文字浮层"向下滚动查看更多工具"
      本次强化：加粗字号 + 加深颜色 + 加图标箭头 + 更明显的胶囊背景 */
.grid-wrap::before{
  content:'向下滚动查看更多 ↓' !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--ink2) !important;
  padding:10px 22px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(0,122,255,.18) !important;
  box-shadow:0 4px 16px rgba(0,122,255,.10),0 1px 3px rgba(0,0,0,.06) !important;
  bottom:48px !important;
}
@media (max-width:600px){
  .grid-wrap::before{font-size:11px !important;padding:8px 16px !important;bottom:32px !important}
}

/* 101. 卡片媒体区上下文留白 —— 让 emoji 与版本号不冲突
      版本号已移到 meta 区，原右上角版本号位置空出
      给 emoji 更多呼吸空间 */
.card__media{padding:6px 0 0}

/* ============ 第二十八轮 · mimo v10 反馈修复（图标视觉统一 / 版本号胶囊化 / CTA-GitHub 分组 / Hero 分隔线 / 末行渐变遮罩 / 描述等高兜底） ============ */

/* 102. 图标视觉语言统一 —— mimo 反馈"卡片图标混用写实/扁平/卡通风格"
      方案：不修改 67 个项目源码，通过 CSS 给 .card__emoji 强制统一容器语言
      (a) 圆角从 50% 改为 20px，让所有 emoji 落在统一的"圆角方形"容器中（苹果 App 图标范式）
      (b) 容器背景统一为浅灰 #f5f5f7 + 内嵌微光，弱化 emoji 自身风格差异
      (c) 加 filter:grayscale(.18) contrast(1.02) 轻度灰度统一视觉调性
      (d) 尺寸从 72px 加大到 80px，配合 40px 字号让图标更稳 */
.card__emoji{
  width:80px !important;
  height:80px !important;
  border-radius:20px !important;
  font-size:40px !important;
  background:#f5f5f7 !important;
  backdrop-filter:none !important;
  filter:grayscale(.18) contrast(1.02) saturate(.95);
  box-shadow:0 4px 14px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.9) !important;
  border:1px solid rgba(0,0,0,.04) !important;
}
.card:hover .card__emoji{
  transform:translate(-50%,-50%) scale(1.06) !important;
  filter:grayscale(.08) contrast(1.04) saturate(1);
  box-shadow:0 8px 22px rgba(0,122,255,.10),0 2px 4px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.card__emoji-glow{display:none !important}
@media (max-width:600px){
  .card__emoji{width:64px !important;height:64px !important;font-size:32px !important;border-radius:16px !important}
}

/* 103. 版本号统一胶囊 —— mimo 反馈"灰色小字存在感弱，像半隐藏状态"
      方案：做成统一的浅灰胶囊，与 stack chip 视觉对齐
      浅灰背景 + 圆角 + 等宽数字，让版本号有明确形态 */
.card__version{
  background:rgba(0,0,0,.045) !important;
  color:var(--ink2) !important;
  padding:3px 9px !important;
  border-radius:8px !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1.4 !important;
  border:1px solid rgba(0,0,0,.04) !important;
}
.card__meta .card__version{margin-left:auto !important}

/* 104. CTA 与 GitHub 图标分组 —— mimo 反馈"获取按钮与 GitHub 图标间距偏紧"
      方案：GitHub 按钮推到右侧 margin-left:auto，与 CTA 拉开视觉距离
      card__actions gap 已经 18px，再让 .card__src 贴右 */
.card__actions{
  gap:10px !important;
  justify-content:flex-start !important;
}
.card__actions .card__cta{flex:0 0 auto !important}
.card__actions .card__src{
  margin-left:auto !important;
  flex:0 0 auto !important;
}

/* 105. Hero 与筛选栏分隔线 —— mimo 反馈"Hero 底部直接衔接搜索栏，稍显突兀"
      方案：在 .toolbar 顶部加 1px 极淡分隔线，让两区有明确边界感
      sticky 时分隔线保持可见 */
.toolbar{
  border-top:1px solid rgba(0,0,0,.05) !important;
  background:rgba(245,245,247,.92) !important;
  backdrop-filter:saturate(180%) blur(12px);
}
.toolbar.is-stuck{
  border-top-color:rgba(0,0,0,.08) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.04) !important;
}

/* 106. 末行卡片渐变遮罩 —— mimo 反馈"最底部一排卡片只露出图标顶部，截断位置不美观"
      方案：.grid-wrap::after 在底部加 120px 渐变遮罩，从透明到背景色
      暗示"还有更多内容可滚动"，配合已有的滚动提示胶囊 */
.grid-wrap{
  position:relative !important;
}
.grid-wrap::after{
  content:'' !important;
  position:absolute !important;
  left:0;right:0;bottom:0 !important;
  height:120px !important;
  background:linear-gradient(to bottom,rgba(245,245,247,0) 0%,rgba(245,245,247,.6) 50%,rgba(245,245,247,.95) 100%) !important;
  pointer-events:none !important;
  z-index:1 !important;
}
@media (max-width:600px){
  .grid-wrap::after{height:80px !important}
}

/* 107. 描述等高兜底 —— mimo 反馈"描述截断点不统一"
      方案：所有断点强制 line-clamp:2 + min-height:3.32em（2 行 × 1.66）
      移除历史上 3 行 / 4.2em / 4.65em 等冲突规则 */
.card__desc{
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  display:-webkit-box !important;
  overflow:hidden !important;
  min-height:3.32em !important;
  max-height:3.32em !important;
  text-overflow:ellipsis !important;
}
@media (max-width:600px){
  .card__desc{
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    min-height:3.1em !important;
    max-height:3.1em !important;
  }
}

/* 108. 卡片 hover 微交互增强 —— mimo 反馈"卡片缺乏微交互暗示"
      方案：hover 时卡片整体上浮 2px + 阴影加深 + 边框淡蓝
      配合 emoji 缩放形成统一的"浮起"反馈 */
.card{
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out) !important;
  border:1px solid rgba(0,0,0,.04) !important;
}
.card:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.07),0 1px 3px rgba(0,122,255,.04) !important;
  border-color:rgba(0,122,255,.15) !important;
}
.card:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(0,122,255,.4) !important;
  box-shadow:0 4px 12px rgba(0,122,255,.10),0 12px 32px rgba(0,0,0,.06) !important;
  outline:none !important;
}
@media (prefers-reduced-motion:reduce){
  .card:hover,.card:focus-visible{transform:none !important}
}

/* 109. stack chip 统一中性灰 —— 配合版本号胶囊，让 meta 区视觉一致 */
.card__stack{
  background:rgba(0,0,0,.045) !important;
  color:var(--ink2) !important;
  padding:3px 9px !important;
  border-radius:8px !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  border:1px solid rgba(0,0,0,.04) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
}
.card__new{
  background:rgba(0,122,255,.12) !important;
  color:var(--accent) !important;
  padding:3px 9px !important;
  border-radius:8px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  border:1px solid rgba(0,122,255,.18) !important;
}