/* =========================================================
   差一步 · yibu.cc 设计系统
   规范来源：重构策划书 5.3 节设计令牌
   结构：令牌 → 基础 → 布局 → 组件 → 响应式
   ========================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 颜色：深色 + 翡翠绿 */
  --bg: #0a0e17;
  --bg-grad-1: #0d1320;
  --bg-grad-2: #0a0e17;
  --surface: #121826;
  --surface-2: #1a2233;
  --surface-3: #222c40;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #e6eaf2;
  --text-dim: #8a94a6;
  --text-faint: #5b6577;

  --primary: #00d4aa;
  --primary-soft: rgba(0, 212, 170, 0.12);
  --primary-line: rgba(0, 212, 170, 0.35);
  --danger: #ff5c6c;
  --danger-soft: rgba(255, 92, 108, 0.12);

  /* 排版 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* 阴影 */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.45);
  --glow: 0 0 0 1px var(--primary-line), 0 8px 30px rgba(0, 212, 170, 0.15);

  --maxw: 1120px;
  --nav-h: 64px;
}

/* ---------- 2. 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0, 212, 170, 0.07), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; margin: 0 0 var(--sp-3); }
p { margin: 0 0 var(--sp-4); }
::selection { background: var(--primary-soft); color: var(--text); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. 布局 ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-8) 0; }
.section-head { margin-bottom: var(--sp-6); }
.section-head h2 { font-size: 1.7rem; letter-spacing: -0.02em; }
.section-head .eyebrow {
  color: var(--primary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: var(--sp-2); display: inline-block;
}
.section-head p { color: var(--text-dim); max-width: 60ch; margin: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------- 4. 组件 ---------- */

/* 导航 */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(10, 14, 23, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: 1.05rem; }
.brand .logo-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--primary), #00a3ff);
  display: grid; place-items: center; color: #04130f; font-weight: 800; font-size: 0.9rem;
}
.brand .brand-sub { color: var(--text-faint); font-weight: 500; font-size: 0.78rem; }
.nav-links { display: flex; align-items: center; gap: var(--sp-2); }
.nav-links a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--text-dim);
  font-size: 0.92rem; transition: color 0.18s, background 0.18s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--primary); background: var(--primary-soft); }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--text);
  width: 40px; height: 40px; border-radius: var(--r-sm); cursor: pointer; font-size: 1.2rem; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px 20px; border-radius: var(--r-md); border: 1px solid transparent;
  font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #04130f; box-shadow: var(--glow); }
.btn-primary:hover { box-shadow: 0 0 0 1px var(--primary-line), 0 12px 36px rgba(0, 212, 170, 0.28); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(255, 92, 108, 0.3); }
.btn-danger:hover { background: rgba(255, 92, 108, 0.2); }
.btn-sm { padding: 7px 13px; font-size: 0.85rem; }

/* 标签 */
.tag {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 0.78rem;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
.tag:hover, .tag.active { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 卡片 */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* 作品网格 */
.grid { display: grid; gap: var(--sp-5); }
.grid-works { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-notes { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.work-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.work-cover {
  aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  display: grid; place-items: center; color: var(--text-faint); font-size: 2.4rem; font-weight: 800;
  position: relative; overflow: hidden;
}
.work-cover img { width: 100%; height: 100%; object-fit: cover; }
.work-cover .initial { opacity: 0.5; }
.work-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.work-body h3 { font-size: 1.15rem; margin: 0; }
.work-body .summary { color: var(--text-dim); font-size: 0.92rem; margin: 0; flex: 1; }
.work-link { color: var(--primary); font-size: 0.9rem; font-weight: 600; }
.badge-featured {
  position: absolute; top: 12px; left: 12px; background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--primary-line); padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
}

.note-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.note-card .meta { color: var(--text-faint); font-size: 0.82rem; display: flex; gap: var(--sp-3); }
.note-card h3 { font-size: 1.1rem; margin: 0; }
.note-card .summary { color: var(--text-dim); font-size: 0.92rem; margin: 0; flex: 1; }

/* Hero */
.hero { padding: var(--sp-8) 0 var(--sp-7); text-align: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em; margin-bottom: var(--sp-4); }
.hero h1 .accent { color: var(--primary); }
.hero .lede { color: var(--text-dim); font-size: 1.1rem; max-width: 56ch; margin: 0 auto var(--sp-5); }
.hero .cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.hero .avatar {
  width: 92px; height: 92px; border-radius: 26px; margin: 0 auto var(--sp-5);
  background: linear-gradient(135deg, var(--primary), #00a3ff); display: grid; place-items: center;
  color: #04130f; font-size: 2rem; font-weight: 800; box-shadow: var(--glow);
}

/* 数据统计条 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.stat { text-align: center; padding: var(--sp-5) var(--sp-3); }
.stat .num { font-size: 2rem; font-weight: 800; color: var(--primary); font-family: var(--font-mono); }
.stat .label { color: var(--text-dim); font-size: 0.85rem; margin-top: var(--sp-1); }

/* CTA 区 */
.cta-band {
  text-align: center; padding: var(--sp-7); border: 1px solid var(--border);
  border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(0, 212, 170, 0.06), transparent);
}
.cta-band h2 { font-size: 1.8rem; }
.cta-band p { color: var(--text-dim); max-width: 48ch; margin: 0 auto var(--sp-5); }

/* 详情页 */
.detail-hero { padding: var(--sp-7) 0 var(--sp-5); }
.detail-hero .back { color: var(--text-dim); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--sp-4); }
.detail-hero .back:hover { color: var(--primary); }
.detail-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; }
.detail-hero .meta { color: var(--text-faint); font-size: 0.9rem; display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); }
.detail-cover { border-radius: var(--r-lg); overflow: hidden; margin: var(--sp-5) 0; max-height: 420px; }
.detail-cover img { width: 100%; object-fit: cover; }
.prose { max-width: 760px; color: var(--text); font-size: 1.02rem; }
.prose h2 { font-size: 1.4rem; margin-top: var(--sp-6); }
.prose h3 { font-size: 1.15rem; margin-top: var(--sp-5); }
.prose p { color: #cdd4e0; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { color: #cdd4e0; padding-left: 1.3em; }
.prose blockquote { border-left: 3px solid var(--primary-line); margin: var(--sp-4) 0; padding: 4px 0 4px var(--sp-4); color: var(--text-dim); }
.prose code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-family: var(--font-mono); font-size: 0.9em; }
.prose pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); overflow: auto; }
.prose pre code { background: none; padding: 0; }

/* 空状态 / 加载 */
.empty { text-align: center; color: var(--text-dim); padding: var(--sp-7) var(--sp-4); border: 1px dashed var(--border); border-radius: var(--r-lg); }
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r-md); }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 筛选条 */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); align-items: center; }
.search-box { flex: 1; min-width: 220px; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 var(--sp-3); }
.search-box input { background: none; border: none; outline: none; color: var(--text); padding: 11px 0; flex: 1; }
.search-box input::placeholder { color: var(--text-faint); }

/* 页脚 */
.footer { border-top: 1px solid var(--border); padding: var(--sp-6) 0; margin-top: var(--sp-8); color: var(--text-dim); font-size: 0.88rem; }
.footer .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.footer a:hover { color: var(--primary); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong);
  padding: 12px 20px; border-radius: var(--r-md); box-shadow: var(--shadow-2); opacity: 0;
  transition: opacity 0.25s, transform 0.25s; z-index: 200; pointer-events: none; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: rgba(255, 92, 108, 0.4); }
.toast.ok { border-color: var(--primary-line); }

/* ---------- 5. 响应式 ---------- */
@media (max-width: 760px) {
  .container { padding: 0 var(--sp-4); }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--sp-1);
    background: rgba(10, 14, 23, 0.97); border-bottom: 1px solid var(--border); padding: var(--sp-3); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--sp-3); }
  .nav-toggle { display: grid; place-items: center; }
  .section { padding: var(--sp-6) 0; }
  .hero { padding: var(--sp-6) 0; }
  .grid-works, .grid-notes, .grid-apps { grid-template-columns: 1fr; }
}

/* =========================================================
   软件作品集组件（软件卡片 / 徽章 / 详情 / 截图墙 / 关于页）
   ========================================================= */

/* 软件网格 */
.grid-apps { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* 软件卡片 */
.app-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.app-card-top { display: flex; gap: var(--sp-3); align-items: center; }
.app-icon {
  width: 48px; height: 48px; border-radius: 13px; flex: none; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface-3));
  border: 1px solid var(--primary-line);
  display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: var(--primary);
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-card-title h3 { font-size: 1.1rem; margin: 0 0 4px; }
.app-tagline { color: var(--text-dim); font-size: 0.9rem; margin: 0; line-height: 1.55; }
.app-feats { margin: 0; padding-left: 1.1em; color: var(--text-dim); font-size: 0.85rem; }
.app-feats li { margin: 2px 0; }
.app-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.app-more { color: var(--primary); font-size: 0.88rem; font-weight: 600; }
.mini-dl { font-size: 0.75rem; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary-line); padding: 2px 9px; border-radius: 999px; }

/* 徽章 */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); }
.badge-platform { color: var(--text); }
.badge-ver { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); font-family: var(--font-mono); }

/* 平台筛选 chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { font-size: 0.82rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; }
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.active { background: var(--primary); color: #04130f; border-color: var(--primary); font-weight: 600; }

/* 详情头 */
.back { color: var(--text-dim); font-size: 0.9rem; display: inline-block; margin: var(--sp-5) 0 var(--sp-4); }
.back:hover { color: var(--primary); }
.d-head { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) 0 var(--sp-5); }
.app-icon-lg { width: 72px; height: 72px; border-radius: 18px; font-size: 2rem; }
.d-head-main { flex: 1; }
.d-head-main h1 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 var(--sp-2); letter-spacing: -0.02em; }
.d-tagline { color: var(--text-dim); margin: var(--sp-2) 0 0; }
.d-head-action { flex: none; }
.btn-lg { padding: 13px 24px; font-size: 1rem; }

/* 截图墙 */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-5); }
.shot { display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.shot img { width: 100%; height: 150px; object-fit: cover; transition: transform 0.2s; }
.shot:hover img { transform: scale(1.03); }

/* 详情主体：左描述 右信息 */
.d-body { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-6); align-items: start; }
.d-side { display: flex; flex-direction: column; gap: var(--sp-5); }
.d-side h3, .d-body .prose h3 { font-size: 0.95rem; color: var(--text); margin: 0 0 var(--sp-2); }
.feat-list { margin: 0; padding-left: 1.1em; color: var(--text-dim); font-size: 0.9rem; }
.feat-list li { margin: 4px 0; }
.changelog { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-dim); }
.log-line { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.log-line:last-child { border-bottom: none; }
.muted { color: var(--text-dim); font-size: 0.9rem; }

/* 关于页 */
.about-hero { text-align: center; padding-top: var(--sp-8); }
.about-hero .avatar { margin: 0 auto var(--sp-4); }
.about-hero .lede { max-width: 56ch; margin: 0 auto; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.about-card h3 { font-size: 1.1rem; }
.about-card p { color: var(--text-dim); font-size: 0.95rem; }
.about-card a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: var(--sp-3); padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.contact-list li span { color: var(--text-faint); width: 84px; flex: none; }
.contact-list li em { color: var(--text-faint); font-style: normal; }

/* 关于页微信二维码 */
.wx-card {
  display: flex; gap: var(--sp-4); align-items: center;
  margin-top: var(--sp-4); padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}
.wx-qr {
  width: 168px; flex: none; border-radius: 8px; overflow: hidden;
  background: #fff; line-height: 0;
}
.wx-qr img { width: 100%; height: auto; display: block; }
.wx-txt strong { display: block; font-size: 0.95rem; margin-bottom: 4px; color: var(--text); }
.wx-txt span { color: var(--text-dim); font-size: 0.85rem; line-height: 1.6; }

@media (max-width: 420px) {
  .wx-card { flex-direction: column; align-items: stretch; text-align: center; }
  .wx-qr { width: 100%; max-width: 210px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .d-head { flex-wrap: wrap; }
  .d-head-action { width: 100%; }
  .d-head-action .btn { width: 100%; }
  .d-body { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   更新日志 / 版本记录（2026-11 架构调整新增）
   ========================================================= */

/* 通用页头 */
.page-head { padding: var(--sp-8) 0 var(--sp-6); }
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); letter-spacing: -0.025em; margin-bottom: var(--sp-3); }
.page-head p { color: var(--text-dim); max-width: 58ch; margin: 0; }
.page-head .eyebrow {
  color: var(--primary); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: var(--sp-2); display: block;
}

/* 详情页侧栏：版本历史 */
.rel-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.rel-list li { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.rel-list li:last-child { border-bottom: none; }
.rel-ver {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--primary);
  background: var(--primary-soft); border: 1px solid var(--primary-line);
  padding: 1px 8px; border-radius: 999px;
}
.rel-date { font-size: 0.76rem; color: var(--text-faint); margin-left: var(--sp-2); }
.rel-notes { font-size: 0.84rem; color: var(--text-dim); margin: 6px 0 0; line-height: 1.6; }
.rel-all { font-size: 0.82rem; color: var(--primary); }

/* 更新日志页：按软件分组的竖向时间线 */
.release-group { margin-bottom: var(--sp-7); }
.release-group-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4);
}
.release-group-head h2 { font-size: 1.25rem; margin: 0; }
.release-group-head h2 a:hover { color: var(--primary); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-5); position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border);
}
.tl-item { position: relative; padding: 0 0 var(--sp-5) var(--sp-3); }
.tl-item:last-child { padding-bottom: 0; }
.tl-mark {
  position: absolute; left: calc(-1 * var(--sp-5) + 1px); top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.14);
}
.tl-item:first-child .tl-mark { box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.22); }
.tl-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.tl-ver { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 700; color: var(--text); }
.tl-head time { font-size: 0.78rem; color: var(--text-faint); font-family: var(--font-mono); }
.tl-notes { margin: 6px 0 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.7; }

/* 首页「最近更新」条 */
.home-releases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.home-releases li { border-bottom: 1px solid var(--border); }
.home-releases a {
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-3);
  align-items: center; padding: 13px 4px; transition: background 0.18s, padding-left 0.18s;
}
.home-releases a:hover { background: var(--surface); padding-left: 12px; }
.hr-ver { font-family: var(--font-mono); font-size: 0.82rem; color: var(--primary); }
.hr-app { font-size: 0.92rem; color: var(--text); }
.hr-note {
  display: none; font-size: 0.85rem; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-releases time { font-size: 0.76rem; color: var(--text-faint); font-family: var(--font-mono); }

@media (min-width: 760px) {
  .home-releases a { grid-template-columns: 96px 160px 1fr auto; }
  .hr-note { display: block; }
}

@media (max-width: 760px) {
  .tl-item { padding-left: var(--sp-2); }
}