/*
 * lib-card.css — 配方卡片、封面（含现画的界面和动效）、文章行（v0.25，2026-10-23，B1）。
 * 首页、单件页 /lib/<id>/、产品页、超级个体页加载（v0.26 的配方页 /lib/ 不用它，见 p-lib.css）；HTML 由 tools/libgen.py 的 card()、cover()、art_row()、
 * live_stage() 生成，交互在 lib-card.js。照原型「卡片 B 版式」：左边 96px 方图（手机 72px），右边类型、标题、一句说明、
 * 获取档小标（.acc，样式在 fyro.css）、一环、工具。颜色、字号用 fyro.css 的变量。
 * 一组卡片：.cards（三列，1023 以下两列，639 以下一列）。
 */

/* ---------- 卡片 ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* 10-26 质感版：样稿的卡片材质（大圆角、淡细边、145° 极淡渐变面、很淡的影；悬停细边深一档、多一层短而软的影） */
.icard { position: relative; display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 16px; border: 1px solid var(--edge-soft); border-radius: var(--r-xl); background: var(--surface-card); box-shadow: var(--shadow-card); transition: border-color var(--t-base) ease-out, box-shadow 220ms ease-out; }
@media (hover: hover) and (pointer: fine) { .icard:hover { border-color: var(--edge); box-shadow: var(--shadow-card-hover); } }
.icard:has(.stretch:focus-visible) { outline: var(--focus-w) solid var(--focus-ring); outline-offset: 2px; }
.ic-cover { position: relative; z-index: 1; flex: 0 0 96px; width: 96px; height: 96px; --tile: 96; pointer-events: none; }
.ic-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.ic-top { display: flex; align-items: center; gap: 10px; min-height: 22px; margin-top: 8px; }
.ic-type { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ic-type .i { width: 15px; height: 15px; }
/* 角标（10-24 Leon：卡片角上标「需登录」「Solo 会员专享」等，公开的不写）：贴卡片右上角，字和底色同获取档小标 .acc；公开的不标。
   点不了（点到的是整张卡的链接）；类型那一行往下让了 8px：窄卡片上「类型 · 筹备中」会伸到角标底下（10-27 起卡片不再标「能预览」），要和角标上下错开 */
.ic-badge { position: absolute; top: 0; right: 0; z-index: 1; padding: 0 10px; border-radius: 0 calc(var(--r-xl) - 1px) 0 10px; pointer-events: none; }
/* 状态小字：筹备中、敬请期待（小而清楚，不抢标题） */
.ic-soon { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 22px; color: var(--muted); white-space: nowrap; }
.ic-soon::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line-3); }
.ic-title { margin-top: 6px; font-size: 16px; font-weight: var(--w-title); line-height: 1.5; letter-spacing: var(--track-tight); color: var(--ink); text-wrap: pretty; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.icard .stretch::after { border-radius: var(--r-xl); }
.stretch:focus-visible { outline: none; }
.ic-desc { margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.ic-tags:empty { display: none; }
.ic-tags a, .ic-top a { position: relative; z-index: 1; }
.icard .chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--surface-card); box-shadow: none; font-size: 12.5px; font-weight: 400; line-height: 24px; color: var(--ink-2); white-space: nowrap; transition: border-color 160ms; }
.icard .chip .no { font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .icard a.chip:hover { border-color: var(--line-3); } }
@media (max-width: 639px) {
  .icard { gap: 12px; padding: 14px; }
  .ic-cover { flex-basis: 72px; width: 72px; height: 72px; --tile: 72; }
}

/* ---------- 封面 ---------- */
.cv { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-tint); box-shadow: inset 0 0 0 1px var(--edge-soft); }
.cv img, .cv video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cv .ph { position: absolute; inset: 0; background: radial-gradient(120% 90% at 18% 12%, var(--p1), transparent 62%), radial-gradient(100% 80% at 90% 95%, var(--p3), transparent 60%), linear-gradient(135deg, var(--p1), var(--p2)); }
.cv-play { position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgb(255 255 255 / 0.92); filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.35)); transition: opacity 160ms; }
.cv.is-on .cv-play { opacity: 0; }
@media (max-width: 639px) { .cv { border-radius: 10px; } .cv-play { right: 5px; bottom: 5px; border-width: 4px 0 4px 7px; } }
@media (prefers-reduced-motion: reduce) { .cv-play { display: none; } }

/* 现画的界面：640×400 的设计稿；方图里取一块（--cx、--cy），按 --tile（方图边长）缩小 */
.lv-tile { position: absolute; inset: 0; overflow: hidden; background: #f4f1eb; }
.lv-tile .lv-stage { position: absolute; left: 0; top: 0; width: 640px; height: 400px; transform-origin: 0 0; transform: scale(calc(var(--tile) / 400)) translate(calc(var(--cx) * -1px), calc(var(--cy) * -1px)); }
.lv-tile .lv-stage.is-sq { width: 400px; height: 400px; }
.lv-stage { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); text-align: left; }
.lv-stage p, .lv-stage h4, .lv-stage blockquote, .lv-stage table { margin: 0; }
/* 放大的现画界面（单件页「成品」）：lib-card.js 按容器宽度设 --fs 和高度 */
.lv-fit { position: relative; width: 100%; max-width: 760px; aspect-ratio: 640 / 400; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #f4f1eb; }
.lv-fit .lv-stage { position: absolute; left: 0; top: 0; width: 640px; height: 400px; transform-origin: 0 0; transform: scale(var(--fs, 1)); }

.lv-win { position: absolute; inset: 18px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgb(27 29 30 / 0.12); border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgb(30 29 26 / 0.05), 0 18px 40px rgb(30 29 26 / 0.1); }
.lv-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fbfaf8; font-size: 12px; color: var(--ink-2); }
.lv-dots { display: flex; gap: 5px; }
.lv-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e2e0dc; }
.lv-body { flex: 1; padding: 18px 20px; font-size: 13px; }
.lv-field label { display: block; font-size: 11px; color: var(--muted); }
.lv-field b { display: block; margin-top: 2px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.lv-grid2 .lv-field { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.lv-stack { display: flex; height: 30px; margin-top: 18px; border-radius: 7px; overflow: hidden; }
.lv-stack i { width: var(--w); background: var(--c); color: var(--ink); font-style: normal; font-size: 11px; line-height: 30px; text-indent: 8px; white-space: nowrap; overflow: hidden; }
.lv-result { display: flex; gap: 14px; margin-top: 16px; }
.lv-result p { flex: 1; padding: 10px 14px; border-radius: 9px; background: #f6f3ee; font-size: 12px; color: var(--muted); }
.lv-result b { display: block; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lv-result .lv-tiers { flex: 1.3; display: flex; align-items: flex-end; gap: 8px; }
.lv-tiers span { align-self: flex-start; font-size: 11px; color: var(--muted); }
.lv-tiers em { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 54px; font-style: normal; font-size: 10px; color: var(--muted); text-align: center; }
.lv-tiers em i { display: block; height: var(--h); max-height: 34px; border-radius: 4px; background: #d6d2ca; }
.lv-tiers em.on { color: var(--ink); font-weight: 600; }
.lv-tiers em.on i { background: #8495a8; }
.lv-sum { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.lv-sum b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lv-sum i { height: 10px; border-radius: 10px; background: #eeebe5; overflow: hidden; }
.lv-sum i b { display: block; height: 100%; width: var(--w); background: #8495a8; }
.lv-th, .lv-tr { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.9fr; gap: 14px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.lv-th { font-size: 11px; color: var(--muted); padding-top: 0; }
.lv-tr .mono { font-size: 12px; }
.lv-tr .bar { height: 8px; border-radius: 8px; background: #eeebe5; overflow: hidden; }
.lv-tr .bar i { display: block; height: 100%; width: var(--w); background: #8495a8; border-radius: 8px; }
.lv-tr.late { background: rgb(169 106 95 / 0.07); }
.lv-tr.late span:last-child { color: #8f4a3f; font-weight: 600; }
.lv-wx { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 20px; }
.lv-md { width: 230px; padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; line-height: 2; color: var(--ink-soft); }
.lv-md .h { color: var(--ink); font-weight: 600; }
.lv-arrow { font-size: 22px; color: var(--muted); }
.lv-phone { position: relative; width: 210px; height: 360px; padding: 26px 12px 12px; border: 2px solid #2e3235; border-radius: 30px; background: #fff; overflow: hidden; }
.lv-notch { position: absolute; top: 8px; left: 50%; width: 60px; height: 8px; border-radius: 8px; background: #2e3235; translate: -50% 0; }
.lv-art h4 { font-size: 15px; line-height: 1.4; }
.lv-art .m { margin: 4px 0 8px; font-size: 10px; color: var(--muted); }
.lv-art .l { display: block; height: 6px; margin: 6px 0; border-radius: 4px; background: #e7e3dc; }
.lv-art .l.s { width: 60%; }
.lv-art blockquote { margin: 8px 0; padding: 4px 8px; border-left: 3px solid #93a08f; background: #f4f6f2; font-size: 11px; color: var(--ink-2); }
.lv-art table { width: 100%; border-collapse: collapse; font-size: 10px; }
.lv-art th, .lv-art td { padding: 3px 5px; border: 1px solid #e3dfd8; text-align: left; }
.lv-art th { background: #f7f5f0; }
.lv-dark { position: absolute; inset: 0; padding: 20px; background: #121417; color: #e6e4df; }
.lv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lv-kpis .k { padding: 12px 14px; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 10px; background: #1a1d21; }
.lv-kpis span { display: block; font-size: 11px; color: #8b8f93; }
.lv-kpis b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lv-dgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 12px; }
.lv-line { width: 100%; height: 250px; max-width: none; padding: 12px; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 10px; background: #1a1d21; }
.lv-hb { padding: 16px; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 10px; background: #1a1d21; }
.lv-hb p { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; margin: 12px 0; font-size: 12px; color: #8b8f93; }
.lv-hb i { display: block; height: 10px; width: var(--w); border-radius: 6px; background: #6f9ac7; }
.lv-glyph { position: absolute; inset: 0; background: var(--paper); }
.lv-glyph canvas { position: absolute; inset: 0; width: 640px; height: 400px; max-width: none; }
.lv-glyph-t { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; }
.lv-glyph-t b { display: block; font-size: 34px; font-weight: 600; line-height: 1.3; }
/* 仿真演示：鼠标移过去按一下，思考框打两行思路，收成一个勾 */
.lv-sim .lv-body { position: relative; display: flex; flex-direction: column; gap: 10px; }
.lv-msg { align-self: flex-end; padding: 7px 12px; border-radius: 12px 12px 4px 12px; background: #2e3235; color: #fff; font-size: 12px; }
.lv-think { position: relative; padding: 10px 12px 10px 40px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf8; font-size: 12px; }
.lv-think .g { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; background: repeating-linear-gradient(90deg, #b63a2b 0 3px, transparent 3px 5px), repeating-linear-gradient(0deg, transparent 0 3px, #fbfaf8 3px 5px); opacity: 0; }
.lv-think .ck { position: absolute; left: 14px; top: 13px; width: 13px; height: 7px; border-left: 2px solid #b63a2b; border-bottom: 2px solid #b63a2b; rotate: -45deg; }
.lv-think .t1 { display: none; }
.lv-think p { margin-top: 2px; color: var(--muted); }
.lv-reply { padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: #f1eee8; font-size: 12px; max-width: 80%; }
.lv-send { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 6px 6px 6px 12px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 12px; color: var(--muted); }
.btn-send { padding: 5px 12px; border-radius: 7px; background: var(--ink); color: #fff; font-style: normal; }
.lv-cursor { position: absolute; left: 520px; top: 300px; width: 18px; height: 21px; max-width: none; fill: #b63a2b; stroke: #fff; stroke-width: 1.2; opacity: 0; }
.lv-stage.is-play .lv-cursor { animation: lv-cursor 3.2s var(--ease) both; }
.lv-stage.is-play .btn-send { animation: lv-press 3.2s linear both; }
.lv-stage.is-play .lv-think .g { animation: lv-grid 3.2s steps(1) both; }
.lv-stage.is-play .lv-think .ck { animation: lv-ck 3.2s var(--ease) both; }
.lv-stage.is-play .lv-think .t1 { display: inline; animation: lv-hide-late 3.2s steps(1) both; }
.lv-stage.is-play .lv-think .t2 { animation: lv-show-late 3.2s steps(1) both; }
.lv-stage.is-play .lv-think .l1 { animation: lv-line1 3.2s steps(1) both; }
.lv-stage.is-play .lv-think .l2 { animation: lv-line2 3.2s steps(1) both; }
.lv-stage.is-play .lv-reply { animation: lv-reply 3.2s ease both; }
.lv-stage.is-play .lv-think { animation: lv-appear 3.2s steps(1) both; }
@keyframes lv-cursor { 0% { opacity: 0; translate: -160px -120px; } 12% { opacity: 1; } 30% { translate: 0 0; } 34% { scale: 0.9; } 38% { scale: 1; } 52% { opacity: 1; } 60%, 100% { opacity: 0; translate: 30px 30px; } }
@keyframes lv-press { 0%, 32% { translate: 0 0; } 34% { translate: 0 1px; } 38%, 100% { translate: 0 0; } }
@keyframes lv-appear { 0%, 36% { opacity: 0; } 37%, 100% { opacity: 1; } }
@keyframes lv-grid { 0%, 36% { opacity: 0; } 37%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes lv-ck { 0%, 72% { opacity: 0; scale: 0.4; } 80%, 100% { opacity: 1; scale: 1; } }
@keyframes lv-hide-late { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0; display: none; } }
@keyframes lv-show-late { 0%, 70% { opacity: 0; } 71%, 100% { opacity: 1; } }
@keyframes lv-line1 { 0%, 48% { opacity: 0; } 49%, 100% { opacity: 1; } }
@keyframes lv-line2 { 0%, 60% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes lv-reply { 0%, 78% { opacity: 0; translate: 0 6px; } 88%, 100% { opacity: 1; translate: 0 0; } }
/* 导航动效 */
.lv-nav { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; background: var(--paper); }
.lv-navbar { position: relative; display: flex; gap: 4px; padding: 4px; }
.lv-navbar span:not(.ind) { position: relative; z-index: 1; padding: 6px 16px; font-size: 15px; color: var(--ink-soft); }
.lv-navbar .ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 62px; border-radius: 999px; background: rgb(27 29 30 / 0.07); }
.lv-stage.is-play .lv-navbar .ind { animation: lv-slide 2.4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes lv-slide { 0%, 25% { translate: 0 0; width: 62px; } 45%, 100% { translate: 228px 0; width: 94px; } }
.lv-tags { display: flex; gap: 14px; }
.lv-tags .tg { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.lv-tags .tg span { font-size: 12px; opacity: 0.75; }
.lv-tags svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.lv-tags .solo { background: rgb(138 85 38 / 0.11); color: #8a5526; }
.lv-tags .concerto { background: rgb(47 107 85 / 0.11); color: #2f6b55; }
.lv-tags .symphony { background: rgb(45 90 132 / 0.11); color: #2d5a84; }
.lv-tags .solo ellipse { fill: currentColor; stroke: none; }
.lv-tags .stick { transform-origin: 3.6px 12.4px; }
.lv-tags .arc { opacity: 0.35; stroke-dasharray: 2 2; }
.lv-tags .seat, .lv-tags .note { fill: transparent; transform-box: fill-box; transform-origin: center; }
.lv-tags .scan { opacity: 0; }
.lv-tags .staff { opacity: 0.45; }
.lv-stage.is-play .lv-tags .stick { animation: lv-baton 0.5s 0.9s linear both; }
.lv-stage.is-play .lv-tags .seat { animation: lv-seat 0.15s ease both; }
.lv-stage.is-play .lv-tags .s0 { animation-delay: 1.6s; }
.lv-stage.is-play .lv-tags .s1 { animation-delay: 1.66s; }
.lv-stage.is-play .lv-tags .s2 { animation-delay: 1.72s; }
.lv-stage.is-play .lv-tags .s3 { animation-delay: 1.79s; }
.lv-stage.is-play .lv-tags .s4 { animation-delay: 1.85s; }
.lv-stage.is-play .lv-tags .scan { animation: lv-scan 0.6s 2.2s linear both; }
.lv-stage.is-play .lv-tags .n1 { animation: lv-note 0.15s 2.35s ease both; }
.lv-stage.is-play .lv-tags .n2 { animation: lv-note 0.15s 2.54s ease both; }
@keyframes lv-baton { 18% { rotate: -6deg; } 50% { rotate: 18deg; } 74% { rotate: 4deg; } 100% { rotate: 0deg; } }
@keyframes lv-seat { 0% { fill: transparent; scale: 1; } 60% { fill: currentColor; scale: 1.25; } 100% { fill: currentColor; scale: 1; } }
@keyframes lv-scan { 0% { opacity: 0; translate: 0 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: 11px 0; } }
@keyframes lv-note { 0% { fill: transparent; scale: 1; } 60% { fill: currentColor; scale: 1.2; } 100% { fill: currentColor; scale: 1; } }

/* 三件现画界面的方图只放大一块（400×400 的设计稿，96px 下也认得出） */
.sq { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px 34px; background: #fff; }
.sq > * { flex-shrink: 0; }
.sq .k { font-size: 40px; color: var(--muted); line-height: 1.2; }
.sq .big { margin-top: 6px; font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.sq .big small { margin-left: 6px; font-size: 32px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.sq-price .tiers { display: flex; align-items: flex-end; gap: 22px; height: 128px; margin-top: 26px; }
.sq-price .tiers p { flex: 1; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 8px; height: 128px; }
.sq-price .tiers i { display: block; flex-shrink: 0; height: var(--h); border-radius: 10px 10px 4px 4px; background: #d6d2ca; }
.sq-price .tiers span { font-size: 28px; color: var(--muted); text-align: center; }
.sq-price .tiers .on i { background: #8495a8; }
.sq-price .tiers .on span { color: var(--ink); font-weight: 600; }
.sq-recv .bar { height: 30px; margin-top: 34px; border-radius: 30px; background: #eeebe5; overflow: hidden; }
.sq-recv .bar i { display: block; height: 100%; width: var(--w); border-radius: 30px; background: #8495a8; }
.sq-recv .late { margin-top: 22px; font-size: 38px; font-weight: 600; color: #8f4a3f; }
.sq-wx { padding: 0; justify-content: flex-start; background: #f4f1eb; }
.sq-wx .scr { position: absolute; left: 44px; right: 44px; top: 34px; bottom: -40px; padding: 40px 36px; border: 6px solid #2e3235; border-bottom: 0; border-radius: 48px 48px 0 0; background: #fff; }
.sq-wx .ttl { font-size: 50px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.sq-wx .m { margin: 14px 0 20px; font-size: 24px; color: var(--muted); }
.sq-wx .l { display: block; height: 16px; margin: 14px 0; border-radius: 10px; background: #e2ded6; }
.sq-wx .l.s { width: 62%; }

@media (prefers-reduced-motion: reduce) {
  .lv-stage .lv-cursor { display: none; }
  .lv-stage.is-play *, .lv-stage.is-play { animation: none !important; }
}

/* ---------- 产品页「相关配方」一节（partial lib-p-*） ---------- */
.lib-sub-h, .lib-recipes .lib-sub-h { margin: 36px 0 16px; font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.lib-recipes .lib-none { max-width: 40em; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: 12px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- 文章行（首页「近期文章」、超级个体页「职场 AI 生存指南」） ---------- */
.rows { border-top: 1px solid var(--ink); }
.row { position: relative; display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 6px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.row-date { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.row-title { font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.row-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }
.row-cat { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.row .stretch::after { border-radius: 0; }
.row:has(.stretch:focus-visible) { outline: 2px solid var(--ink-2); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .row:hover .row-title { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 5px; } }
@media (max-width: 639px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; padding: 18px 0; }
  .row-date { grid-column: 1; }
  .row-main { grid-column: 1 / -1; grid-row: 2; }
  .row-cat { grid-column: 2; grid-row: 1; }
}