/* 内容线共用样式（电脑端）：栏目、列表、内容、搜索、标签、专题
   归属：cms 插件（页面由 cms 前台控制器渲染，模板在 theme-pc-fixed/）
   依赖：/static/frontend/css/tokens.css（令牌）、/static/frontend/css/pc.css（按钮、页头页脚、区块、进场） */

/* ---------- 块级按钮 ---------- */

.btn-block {
  display: flex;
  width: 100%;
  height: 46px;
}

/* ---------- 路径条 ---------- */

/* 区块上内距 64px，这里用负上边距把它抵到 24px，让路径条贴住顶栏 */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lr-space-2);
  margin-top: calc(var(--lr-space-6) - var(--lr-space-10));
  padding-bottom: var(--lr-space-6);
  font-size: var(--lr-text-xs);
  line-height: 1.6;
  color: var(--lr-text-muted);
}
.crumbs a {
  color: var(--lr-text-secondary);
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.crumbs a:hover {
  color: var(--lr-accent);
  border-bottom-color: var(--lr-accent);
}
.crumbs span[aria-current] {
  color: var(--lr-text);
  font-weight: 600;
}

/* 分隔符用小箭头，比斜杠轻 */
.crumbs-sep {
  width: 12px;
  height: 12px;
  font-size: 0;
  color: var(--lr-text-muted);
  opacity: .55;
}
.crumbs-sep::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 3px auto 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
}

/* ---------- 页面标题 ---------- */

.page-title {
  font-size: var(--lr-text-3xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.3px;
}

/* ---------- 两列骨架 ---------- */

.with-side {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 15px;
  align-items: start;
}

/* ---------- 列表工具条 ---------- */

.list-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lr-space-4);
  padding-bottom: var(--lr-space-4);
  border-bottom: 1px solid var(--lr-border);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lr-space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--lr-space-4);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  background: var(--lr-bg-raised);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
  cursor: pointer;
  transition: border-color .18s, color .18s, background-color .18s;
}
.chip:hover { border-color: var(--lr-accent-border); color: var(--lr-accent); }
.chip.is-on {
  background: var(--lr-accent-soft);
  border-color: var(--lr-accent-border);
  color: var(--lr-accent);
  font-weight: 600;
}

.list-count {
  flex: 0 0 auto;
  font-size: var(--lr-text-sm);
  color: var(--lr-text-muted);
}

body.page-channel .entry-list,
body.page-list .entry-list {
  margin-top: 0;
}

/* ---------- 文章卡片 ---------- */

.entry-list {
  display: flex;
  flex-direction: column;
  gap: var(--lr-space-4);
  margin-top: var(--lr-space-6);
}

.entry-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--lr-space-6);
  padding: var(--lr-space-6);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
  transition: border-color .2s, box-shadow .2s;
}
.entry-card:hover {
  border-color: var(--lr-accent-border);
  box-shadow: 0 16px 32px -28px rgba(29,78,216,.42);
}

.cover {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lr-accent-soft);
  border-radius: var(--lr-radius-md);
  color: var(--lr-accent);
  overflow: hidden;
}
.cover-mark {
  width: 44%;
  height: 62%;
  background: var(--lr-bg-raised);
  border-radius: 4px;
  box-shadow: 0 8px 20px -14px rgba(29,78,216,.5);
}
.cover-tag {
  position: absolute;
  left: var(--lr-space-2);
  bottom: var(--lr-space-2);
  padding: 2px var(--lr-space-2);
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  font-size: var(--lr-text-xs);
  color: var(--lr-accent);
}

.entry-body { min-width: 0; }

.entry-title {
  font-size: var(--lr-text-xl);
  font-weight: 700;
  line-height: 1.45;
  transition: color .18s;
}
.entry-card:hover .entry-title { color: var(--lr-accent); }

.entry-summary {
  margin-top: var(--lr-space-2);
  font-size: var(--lr-text-sm);
  line-height: 1.8;
  color: var(--lr-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: var(--lr-space-4);
  margin-top: var(--lr-space-3);
  font-size: var(--lr-text-xs);
  color: var(--lr-text-muted);
}
.entry-kind {
  padding: 2px var(--lr-space-2);
  border-radius: 4px;
  background: var(--lr-accent-soft);
  color: var(--lr-accent);
}

/* ---------- 紧凑列表 ---------- */

.entry-rows { margin-top: var(--lr-space-2); }
.entry-row {
  display: block;
  padding: var(--lr-space-3) 0;
  border-bottom: 1px solid var(--lr-border);
}
.entry-row:last-child { border-bottom: 0; }
.entry-row-title {
  font-size: var(--lr-text-sm);
  line-height: 1.6;
  transition: color .18s;
}
.entry-row:hover .entry-row-title { color: var(--lr-accent); }
.entry-row-meta {
  margin-top: var(--lr-space-1);
  font-size: var(--lr-text-xs);
  color: var(--lr-text-muted);
}

/* ---------- 分页 ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lr-space-2);
  margin-top: var(--lr-space-9);
}
.pager-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--lr-space-2);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  background: var(--lr-bg-raised);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
  transition: border-color .18s, color .18s;
}
.pager-item:hover { border-color: var(--lr-accent-border); color: var(--lr-accent); }
.pager-item.is-on {
  background: var(--lr-accent);
  border-color: var(--lr-accent);
  color: var(--lr-text-inverse);
  font-weight: 600;
}
.pager-gap {
  min-width: 24px;
  text-align: center;
  font-size: var(--lr-text-sm);
  color: var(--lr-text-muted);
}

/* ---------- 空态 ---------- */

.empty {
  padding: var(--lr-space-10) var(--lr-space-7);
  background: var(--lr-bg-raised);
  border: 1px dashed var(--lr-border);
  border-radius: var(--lr-radius-xl);
  text-align: center;
}
.empty-title {
  font-size: var(--lr-text-base);
  font-weight: 700;
}
.empty-desc {
  margin-top: var(--lr-space-2);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
}
.empty .btn { margin-top: var(--lr-space-6); }
.empty-tags {
  justify-content: center;
  margin-top: var(--lr-space-6);
}

/* ---------- 侧栏 ---------- */

.side {
  display: flex;
  flex-direction: column;
  gap: var(--lr-space-4);
  position: sticky;
  top: 88px;
}

.side-card {
  padding: var(--lr-space-6);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
}
.side-title {
  font-size: var(--lr-text-base);
  font-weight: 700;
  padding-bottom: var(--lr-space-3);
  border-bottom: 1px solid var(--lr-border);
}

/* 侧栏内的组件间距，避免页内写内联样式 */
.side-card .tag-cloud { margin-top: var(--lr-space-3); }
.side-card .entry-summary { margin-top: var(--lr-space-3); }
.side-card .btn-block { margin-top: var(--lr-space-4); }
.side-more { margin-top: var(--lr-space-3); }
.side-more .link-more { margin-top: 0; }

/* ---------- 正文 ---------- */

.article {
  padding: var(--lr-space-7) 0;
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
}

.article-head {
  padding: 0 var(--lr-space-9);
}
.article-title {
  font-size: var(--lr-text-xl);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.3px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lr-space-6);
  margin-top: var(--lr-space-4);
  padding-bottom: var(--lr-space-6);
  border-bottom: 1px solid var(--lr-border);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-muted);
}

.article-body {
  padding: var(--lr-space-7) var(--lr-space-9) 0;
  font-size: var(--lr-text-lg);
  line-height: 1.9;
  color: var(--lr-text);
}
.article-body h2 {
  margin-top: var(--lr-space-9);
  font-size: var(--lr-text-2xl);
  font-weight: 700;
  line-height: 1.4;
}
.article-body h3 {
  margin-top: var(--lr-space-7);
  font-size: var(--lr-text-xl);
  font-weight: 700;
}
.article-body p {
  margin-top: var(--lr-space-4);
}
.article-body ul,
.article-body ol {
  margin-top: var(--lr-space-4);
  padding-left: var(--lr-space-6);
  list-style: disc;
}
.article-body ol { list-style: decimal; }
.article-body li { margin-top: var(--lr-space-2); }

.article-body blockquote {
  margin: var(--lr-space-6) 0;
  padding: var(--lr-space-4) var(--lr-space-6);
  background: var(--lr-bg-sunken);
  border-left: 3px solid var(--lr-accent-border);
  border-radius: 0 var(--lr-radius-md) var(--lr-radius-md) 0;
  font-size: var(--lr-text-base);
  color: var(--lr-text-secondary);
}

.article-body pre {
  margin: var(--lr-space-6) 0;
  padding: var(--lr-space-4) var(--lr-space-6);
  background: var(--lr-bg-sunken);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  overflow-x: auto;
  font-size: var(--lr-text-sm);
  line-height: 1.7;
  color: var(--lr-text-secondary);
}

.note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lr-space-3);
  margin: var(--lr-space-6) var(--lr-space-9);
  padding: var(--lr-space-3) var(--lr-space-4);
  background: var(--lr-accent-soft);
  border: 1px solid var(--lr-accent-border);
  border-radius: var(--lr-radius-lg);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
}
.note-icon {
  flex: 0 0 auto;
  color: var(--lr-accent);
}
.note-text {
  color: var(--lr-text-muted);
}
.note-link {
  padding: 2px var(--lr-space-3);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-accent-border);
  border-radius: var(--lr-radius-sm);
  font-size: var(--lr-text-xs);
  font-weight: var(--lr-weight-strong);
  color: var(--lr-accent);
  transition: border-color .18s;
}
.note-link:hover {
  border-color: var(--lr-accent);
}

.article-foot {
  padding: var(--lr-space-7) var(--lr-space-9);
  margin-top: var(--lr-space-7);
  border-top: 1px solid var(--lr-border);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lr-space-2);
}
.article-tags .chip { height: 28px; font-size: var(--lr-text-xs); }

.article-related { margin-top: var(--lr-space-4); }

/* ---------- 目录 ---------- */

.toc-list { margin-top: var(--lr-space-2); }
.toc-item {
  display: block;
  padding: var(--lr-space-2) 0 var(--lr-space-2) var(--lr-space-3);
  border-left: 2px solid var(--lr-border);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
  transition: color .18s, border-color .18s;
}
.toc-item:hover { color: var(--lr-accent); }
.toc-item.is-on {
  border-left-color: var(--lr-accent);
  color: var(--lr-accent);
  font-weight: 600;
}
.toc-item.is-sub { padding-left: var(--lr-space-6); font-size: var(--lr-text-xs); }

/* ---------- 上下篇 ---------- */

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lr-space-4);
  margin-top: var(--lr-space-6);
}
.post-nav-item {
  padding: var(--lr-space-4) var(--lr-space-6);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
  transition: border-color .2s;
}
.post-nav-item:hover { border-color: var(--lr-accent-border); }
.post-nav-label {
  font-size: var(--lr-text-xs);
  color: var(--lr-text-muted);
}
.post-nav-title {
  margin-top: var(--lr-space-1);
  font-size: var(--lr-text-sm);
  line-height: 1.6;
}
.post-nav-item:hover .post-nav-title { color: var(--lr-accent); }
.post-nav-item.is-next { text-align: right; }

/* ---------- 搜索 ---------- */

/* result-box 与 search-empty 是脚本切换显示的目标，本身不带样式 */
.search-form {
  display: flex;
  gap: var(--lr-space-3);
  margin-bottom: 15px;
  padding: var(--lr-space-6);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
}
.search-form-input {
  flex: 1;
  height: 48px;
  padding: 0 var(--lr-space-4);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  background: var(--lr-bg-sunken);
  font-family: inherit;
  font-size: var(--lr-text-base);
  color: var(--lr-text);
  outline: none;
  transition: border-color .18s, background-color .18s;
}
.search-form-input:focus {
  background: var(--lr-bg-raised);
  border-color: var(--lr-accent);
}
.search-form .btn-lg { flex: 0 0 auto; }

.result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lr-space-4);
  padding-bottom: var(--lr-space-3);
  border-bottom: 1px solid var(--lr-border);
}
.result-count {
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
}
.result-count strong {
  color: var(--lr-accent);
  font-weight: 700;
}
mark {
  padding: 0 2px;
  border-radius: 2px;
  background: var(--lr-accent-soft);
  color: var(--lr-accent);
}

/* ---------- 标签云 ---------- */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lr-space-3);
}
.tag-cloud-item {
  display: inline-flex;
  align-items: center;
  gap: var(--lr-space-2);
  padding: var(--lr-space-2) var(--lr-space-4);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
  transition: border-color .18s, color .18s;
}
.tag-cloud-item:hover { border-color: var(--lr-accent-border); color: var(--lr-accent); }
.tag-cloud-item.is-on {
  background: var(--lr-accent-soft);
  border-color: var(--lr-accent-border);
  color: var(--lr-accent);
  font-weight: 600;
}
.tag-cloud-count {
  font-size: var(--lr-text-xs);
  color: var(--lr-text-muted);
}

/* ---------- 专题详情 ---------- */

.topic-state {
  padding: 2px var(--lr-space-2);
  border-radius: 4px;
  background: var(--lr-accent-soft);
  color: var(--lr-accent);
  font-size: var(--lr-text-xs);
}

/* ---------- 专题 ---------- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lr-space-6);
}
.topic-card {
  display: block;
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.topic-card:hover {
  border-color: var(--lr-accent-border);
  box-shadow: 0 16px 32px -28px rgba(29,78,216,.42);
}
.topic-cover {
  aspect-ratio: 16 / 9;
  background: var(--lr-accent-soft);
  border-bottom: 1px solid var(--lr-border);
}
.topic-body { padding: var(--lr-space-4) var(--lr-space-6) var(--lr-space-6); }
.topic-title {
  font-size: var(--lr-text-xl);
  font-weight: 700;
  line-height: 1.45;
}
.topic-card:hover .topic-title { color: var(--lr-accent); }
.topic-desc {
  margin-top: var(--lr-space-2);
  font-size: var(--lr-text-sm);
  line-height: 1.8;
  color: var(--lr-text-secondary);
}
.topic-meta {
  margin-top: var(--lr-space-3);
  font-size: var(--lr-text-xs);
  color: var(--lr-text-muted);
}

/* 专题详情的目录 */
.topic-index {
  padding: var(--lr-space-6);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
}
.topic-index-item {
  display: flex;
  gap: var(--lr-space-4);
  padding: var(--lr-space-4) 0;
  border-bottom: 1px solid var(--lr-border);
}
.topic-index-item:last-child { border-bottom: 0; }
.topic-index-no {
  flex: 0 0 auto;
  width: 28px;
  font-size: var(--lr-text-sm);
  font-weight: 700;
  color: var(--lr-accent);
  font-variant-numeric: tabular-nums;
}
.topic-index-title {
  font-size: var(--lr-text-base);
  line-height: 1.6;
}
.topic-index-item:hover .topic-index-title { color: var(--lr-accent); }

/* ---------- 分页（cms 输出 Bootstrap 结构，这里复用 pager 视觉） ---------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lr-space-2);
  margin-top: var(--lr-space-9);
  padding: 0;
  list-style: none;
}
.pagination > li {
  display: inline-flex;
  list-style: none;
}
.pagination > li > a,
.pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--lr-space-2);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  background: var(--lr-bg-raised);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-secondary);
  transition: border-color .18s, color .18s;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  border-color: var(--lr-accent-border);
  color: var(--lr-accent);
}
.pagination > li.active > span,
.pagination > li.active > a,
.pagination > .active > span,
.pagination > li.is-active > span {
  background: var(--lr-accent);
  border-color: var(--lr-accent);
  color: var(--lr-text-inverse);
  font-weight: 600;
}
.pagination > li.disabled > span,
.pagination > li.disabled > a {
  opacity: .5;
  pointer-events: none;
}

/* ---------- 联系区（内容页复用首页视觉，渐变是装饰底不进令牌） ---------- */

.cta {
  background: linear-gradient(120deg, #1e50e8 0%, #2f6ff0 26%, #4f8ffb 50%, #2f6ff0 74%, #1e50e8 100%);
  background-size: 220% 100%;
  animation: cta-flow 14s linear infinite;
  color: var(--lr-text-inverse);
}
@keyframes cta-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lr-space-7);
  padding: var(--lr-space-10) 0;
}
.cta-title {
  font-size: var(--lr-text-2xl);
  font-weight: var(--lr-weight-strong);
}
.cta-desc {
  margin-top: var(--lr-space-2);
  font-size: var(--lr-text-base);
  color: rgba(255,255,255,.82);
}
.cta-actions {
  display: flex;
  gap: var(--lr-space-4);
  flex: 0 0 auto;
}

/* ============================================================
   工具总览 / 定价 / 工具详情（新设计组件，替代旧 lr-* 体系）
   依赖 tokens.css；卡片视觉对齐 .side-card / .topic-card。
   ============================================================ */

/* 区块内标题（替代旧 .lr-section-title / .lr-section-desc） */
.section-title {
  font-size: var(--lr-text-2xl);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.2px;
}
.section-desc {
  margin-top: var(--lr-space-3);
  max-width: 760px;
  font-size: var(--lr-text-base);
  line-height: 1.8;
  color: var(--lr-text-secondary);
}

/* 栅格 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lr-space-6);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lr-space-6);
}

/* 通用卡片（对齐 .side-card / .topic-card） */
.card {
  display: block;
  padding: var(--lr-space-6);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
  transition: border-color .2s, box-shadow .2s;
}
.card:hover {
  border-color: var(--lr-accent-border);
  box-shadow: var(--lr-shadow-card);
}

/* 图标盒（替代 FontAwesome） */
.tool-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lr-radius-md);
  background: var(--lr-accent-soft);
  color: var(--lr-accent);
}
.tool-card-icon svg { width: 22px; height: 22px; }

/* 工具卡片（总览页） */
.tool-card-head {
  display: flex;
  align-items: center;
  gap: var(--lr-space-3);
  margin-bottom: var(--lr-space-3);
}
.tool-card-name {
  font-size: var(--lr-text-lg);
  font-weight: 700;
}
.tool-card-desc {
  font-size: var(--lr-text-sm);
  line-height: 1.75;
  color: var(--lr-text-secondary);
}
.tool-card-steps {
  margin: var(--lr-space-4) 0 0;
  padding-left: var(--lr-space-5);
  color: var(--lr-text-secondary);
  font-size: var(--lr-text-sm);
  line-height: 1.7;
}
.tool-card-steps li { margin-top: var(--lr-space-1); }
.tool-card-output {
  margin-top: var(--lr-space-3);
  padding-top: var(--lr-space-3);
  border-top: 1px solid var(--lr-border-subtle);
  font-size: var(--lr-text-sm);
  color: var(--lr-text-muted);
}

/* 迷你工具卡片 */
.mini-card { text-decoration: none; color: inherit; }
.mini-card:hover { text-decoration: none; }
.mini-card:hover .tool-card-name { color: var(--lr-accent); }
.mini-card .tool-card-desc { margin-top: var(--lr-space-2); }

/* 对比表 */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--lr-space-5);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
  overflow: hidden;
}
.compare th,
.compare td {
  padding: var(--lr-space-4) var(--lr-space-5);
  text-align: left;
  border-bottom: 1px solid var(--lr-border-subtle);
  font-size: var(--lr-text-sm);
}
.compare thead th {
  background: var(--lr-bg-sunken);
  font-weight: 700;
  color: var(--lr-text-secondary);
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare a { color: var(--lr-accent); }

/* 工具详情英雄区 */
.tool-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--lr-space-7);
  align-items: center;
  padding: var(--lr-space-8) 0;
}
.tool-hero-head { display: flex; align-items: center; gap: var(--lr-space-4); }
.tool-hero-head .tool-card-icon { width: 56px; height: 56px; }
.tool-hero-head .tool-card-icon svg { width: 28px; height: 28px; }
.tool-hero-name { font-size: var(--lr-text-3xl); font-weight: 700; line-height: 1.25; }
.tool-hero-tagline { margin-top: var(--lr-space-3); font-size: var(--lr-text-lg); color: var(--lr-text-secondary); }
.tool-hero-audience { margin-top: var(--lr-space-2); font-size: var(--lr-text-sm); color: var(--lr-text-muted); }
.tool-hero-actions { display: flex; gap: var(--lr-space-3); flex-wrap: wrap; }

/* 解决前后对比 */
.solve-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--lr-space-3);
  padding: var(--lr-space-3) 0;
  border-bottom: 1px solid var(--lr-border-subtle);
}
.solve-row:last-child { border-bottom: 0; }
.solve-label {
  align-self: start;
  padding: 2px var(--lr-space-2);
  border-radius: var(--lr-radius-sm);
  background: var(--lr-bg-sunken);
  color: var(--lr-text-muted);
  font-size: var(--lr-text-xs);
}
.solve-label-after { background: var(--lr-accent-soft); color: var(--lr-accent); }

/* 步骤条 */
.stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lr-space-2);
  margin-top: var(--lr-space-5);
}
.stepper-item { display: inline-flex; align-items: center; gap: var(--lr-space-2); }
.stepper-index {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--lr-radius-pill);
  background: var(--lr-accent-soft);
  color: var(--lr-accent);
  font-size: var(--lr-text-xs);
  font-weight: 700;
}
.stepper-name { font-size: var(--lr-text-sm); color: var(--lr-text-secondary); }
.stepper-item + .stepper-item::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--lr-border-strong);
  margin-right: var(--lr-space-2);
}
.tool-output { margin-top: var(--lr-space-4); font-size: var(--lr-text-sm); color: var(--lr-text-secondary); }

/* 功能清单 */
.feature-list { margin-top: var(--lr-space-5); display: flex; flex-direction: column; gap: var(--lr-space-3); }
.feature-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lr-space-4);
  padding: var(--lr-space-3) var(--lr-space-5);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-lg);
}
.feature-name { font-size: var(--lr-text-sm); }
.tag {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 var(--lr-space-3);
  border-radius: var(--lr-radius-pill);
  background: var(--lr-bg-sunken);
  color: var(--lr-text-muted);
  font-size: var(--lr-text-xs);
}
.tag.is-free { background: var(--lr-success-soft); color: var(--lr-success); }

/* 教程链接 */
.tutorial-link {
  display: block;
  padding: var(--lr-space-3) 0;
  border-bottom: 1px solid var(--lr-border);
  color: var(--lr-text-secondary);
  transition: color .18s;
}
.tutorial-link:hover { color: var(--lr-accent); }

/* 常见问题 */
.faq { margin-top: var(--lr-space-5); }
.faq dt { margin-top: var(--lr-space-4); font-weight: 700; font-size: var(--lr-text-base); }
.faq dd { margin-top: var(--lr-space-2); color: var(--lr-text-secondary); line-height: 1.8; font-size: var(--lr-text-sm); }

/* 套餐 */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lr-space-6); }
.plan-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--lr-space-7);
  background: var(--lr-bg-raised);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
  transition: border-color .2s, box-shadow .2s;
}
.plan-card:hover { border-color: var(--lr-accent-border); box-shadow: var(--lr-shadow-card); }
.plan-name { font-size: var(--lr-text-xl); font-weight: 700; }
.plan-price { margin-top: var(--lr-space-3); font-size: var(--lr-text-lg); color: var(--lr-text-secondary); }
.plan-price strong { font-size: var(--lr-text-3xl); color: var(--lr-text); }
.plan-desc { margin-top: var(--lr-space-2); font-size: var(--lr-text-sm); color: var(--lr-text-secondary); }
.plan-card .btn { margin-top: var(--lr-space-6); }

/* 成本计算器（保留 lr-calc 类名，JS 仅依赖 ID 与 data-config） */
.lr-calc-body {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--lr-space-7);
  margin-top: var(--lr-space-6);
  padding: var(--lr-space-7);
  background: var(--lr-bg-sunken);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-xl);
}
.lr-calc-form { display: flex; flex-direction: column; gap: var(--lr-space-3); }
.lr-calc-label { display: flex; align-items: center; gap: var(--lr-space-2); font-size: var(--lr-text-sm); color: var(--lr-text-secondary); }
.lr-calc-label input {
  width: 96px; height: 44px; padding: 0 var(--lr-space-4);
  border: 1px solid var(--lr-border-control);
  border-radius: var(--lr-radius-md);
  background: var(--lr-bg-raised);
  font: inherit; font-size: var(--lr-text-base); color: var(--lr-text);
  outline: none; transition: border-color .18s;
}
.lr-calc-label input:focus { border-color: var(--lr-accent); }
.lr-calc-hint { font-size: var(--lr-text-xs); color: var(--lr-text-muted); }
.lr-calc-result { display: flex; flex-direction: column; gap: var(--lr-space-3); }
.lr-calc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--lr-space-4);
  padding-bottom: var(--lr-space-3); border-bottom: 1px solid var(--lr-border-subtle);
}
.lr-calc-key { font-size: var(--lr-text-sm); color: var(--lr-text-secondary); }
.lr-calc-value { font-size: var(--lr-text-base); color: var(--lr-text); }
.lr-calc-value strong { color: var(--lr-accent); font-size: var(--lr-text-xl); }
.lr-calc-save { font-size: var(--lr-text-sm); color: var(--lr-success); }
.lr-calc-note { font-size: var(--lr-text-xs); color: var(--lr-text-muted); line-height: 1.7; }
.lr-calc-actions { display: flex; gap: var(--lr-space-3); flex-wrap: wrap; margin-top: var(--lr-space-2); }

/* 窄屏适配（PC 固定主题下笔记本等） */
@media (max-width: 960px) {
  .grid-2, .grid-3, .plan-grid { grid-template-columns: 1fr; }
  .tool-hero { grid-template-columns: 1fr; }
  .lr-calc-body { grid-template-columns: 1fr; }
}