/* 表单类通用组件（US-012）与展示类组件（US-013）：
 * 按钮、输入框、下拉、复选框、表单级错误摘要；徽标与内容卡片。
 *
 * 约定：
 * 1. 颜色、字体、字号、间距、圆角、动效一律取 `tokens.css` 的令牌，
 *    本文件不出现任何硬编码色值。
 * 2. 断点三档与 `base.css` 一致：≤639px 移动 / 640–1023px 平板 / ≥1024px 桌面。
 * 3. 下拉在桌面端用自绘箭头（`appearance: none` + `.select-wrap::after`），
 *    移动端回退为系统原生控件（`appearance: auto`）；复选框始终使用原生控件，
 *    只调整尺寸与 `accent-color`，保证移动端与键盘操作行为不变。
 */

/* --- 按钮：主 / 次 / 危险 / 幽灵 --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-summary);
  font-weight: 600;
  line-height: var(--leading-summary);
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.btn:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* 主按钮：品牌色填充 */
.btn--primary {
  color: var(--surface);
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.btn--primary:hover:not(:disabled) {
  background: var(--brand-700);
  border-color: var(--brand-700);
}

.btn--primary:active:not(:disabled) {
  background: var(--brand-700);
  border-color: var(--brand-700);
  transform: translateY(1px);
}

/* 次按钮：白底描边 */
.btn--secondary {
  color: var(--ink-900);
  background: var(--surface);
  border-color: var(--line);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--brand-100);
  border-color: var(--ink-300);
}

.btn--secondary:active:not(:disabled) {
  background: var(--brand-100);
  border-color: var(--ink-300);
  transform: translateY(1px);
}

/* 危险按钮：删除、隐藏等不可逆操作；hover 反转为浅底，避免误触时更醒目 */
.btn--danger {
  color: var(--surface);
  background: var(--danger-600);
  border-color: var(--danger-600);
}

.btn--danger:hover:not(:disabled) {
  color: var(--danger-600);
  background: var(--danger-100);
  border-color: var(--danger-600);
}

.btn--danger:active:not(:disabled) {
  color: var(--danger-600);
  background: var(--danger-100);
  border-color: var(--danger-600);
  transform: translateY(1px);
}

/* 幽灵按钮：低强调的辅助操作 */
.btn--ghost {
  color: var(--brand-700);
  background: transparent;
  border-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--brand-100);
}

.btn--ghost:active:not(:disabled) {
  background: var(--brand-100);
  transform: translateY(1px);
}

/* 禁用态：不可点、不可聚焦，鼠标样式提示不可用 */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}

/* 提交中：保留完整不透明度让 spinner 清楚可见，按钮本身已 disabled 防止重复提交。
 * 必须写在 `.btn:disabled` 之后：两者特异性相同（0-2-0），靠书写顺序决定胜出。 */
.btn.is-loading {
  opacity: 1;
  cursor: progress;
}

.btn__spinner {
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: btn-spin 720ms linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- 表单字段骨架 --- */

.field {
  margin-bottom: var(--space-4);
}

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink-900);
  font-size: var(--text-summary);
  font-weight: 600;
  line-height: var(--leading-summary);
}

.field__required {
  color: var(--danger-600);
}

.field__hint {
  margin: var(--space-1) 0 0;
  color: var(--ink-500);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
}

/* 错误文案固定在控件下方，控件通过 aria-describedby 关联到该 id */
.field__error {
  margin: var(--space-1) 0 0;
  color: var(--danger-600);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
}

.field--error .field__label {
  color: var(--danger-600);
}

/* --- 输入框 / 文本域 / 下拉 --- */

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-body);
  line-height: var(--leading-summary);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.form-textarea {
  min-height: calc(var(--tap-target) * 3);
  resize: vertical;
}

/* 占位文字用 --ink-500（在 --surface 上 5.06:1）：--ink-300 只有 2.23:1，
 * 作为输入提示读不清。 */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ink-500);
  opacity: 1;
}

/* 输入类控件不做 hover 换边色：`:hover`（0-3-0 含 :not）会盖掉错误态的
 * 危险色边框，让用户在悬停时看不出字段有问题。状态只保留 focus / error / disabled。 */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--brand-600);
}

/* 四类表单控件的键盘焦点：统一 2px 可见描边 */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
.form-checkbox:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* 错误态：边框与焦点环都用危险色 */
.form-input--error,
.form-input[aria-invalid="true"],
.form-textarea--error,
.form-textarea[aria-invalid="true"],
.form-select--error,
.form-select[aria-invalid="true"] {
  border-color: var(--danger-600);
}

/* 错误态 + 聚焦：`:focus` 是 0-2-0、`--error` 是 0-1-0，
 * 不在这条规则里重申 border-color 就会退回品牌色。 */
.form-input--error:focus,
.form-input[aria-invalid="true"]:focus,
.form-textarea--error:focus,
.form-textarea[aria-invalid="true"]:focus,
.form-select--error:focus,
.form-select[aria-invalid="true"]:focus {
  border-color: var(--danger-600);
  box-shadow: inset 0 0 0 1px var(--danger-600);
}

/* 禁用态 */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  color: var(--ink-500);
  background: var(--canvas);
  border-color: var(--line);
  cursor: not-allowed;
}

/* 桌面端自绘下拉箭头；移动端不写 appearance: none，保底走系统原生控件 */
.select-wrap {
  position: relative;
}

@media (min-width: 640px) {
  .form-select {
    padding-right: var(--space-6);
    appearance: none;
    -webkit-appearance: none;
  }

  .select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-3);
    width: 0;
    height: 0;
    margin-top: -2px;
    border-top: 6px solid var(--ink-500);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    pointer-events: none;
  }
}

/* --- 复选框 --- */

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
}

.form-checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand-600);
  cursor: pointer;
}

.form-checkbox:disabled {
  cursor: not-allowed;
}

/* 标签本身撑满 44px 触控高度，点文字也能勾选 */
.form-check__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--ink-900);
  font-size: var(--text-body);
  line-height: var(--leading-summary);
  cursor: pointer;
}

.form-checkbox:disabled + .form-check__label {
  color: var(--ink-500);
  cursor: not-allowed;
}

.fieldset {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.fieldset__legend {
  padding: 0;
  color: var(--ink-900);
  font-size: var(--text-summary);
  font-weight: 600;
  line-height: var(--leading-summary);
}

/* --- 表单级错误摘要 --- */

.form-errors {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--danger-100);
  border-left: 3px solid var(--danger-600);
  border-radius: var(--radius-sm);
}

.form-errors:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.form-errors__title {
  margin: 0 0 var(--space-1);
  color: var(--danger-600);
  font-size: var(--text-summary);
  font-weight: 600;
  line-height: var(--leading-summary);
}

.form-errors__list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--danger-600);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
}

.form-errors__list li {
  margin-bottom: 0;
}

.form-errors a {
  color: var(--danger-600);
}

/* --- 风险提示（US-024：AI 摘要外发确认） --- */

.callout {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-sm);
  background: var(--amber-100);
  color: var(--amber-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
}

.callout strong {
  color: var(--amber-700);
}

.callout__title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

/* --- 只读字段（US-025：个人资料页的用户名与角色） ---
 * 与 `.field` 同一排版节奏，但不渲染输入框：值的呈现用中性浅底 + 常规文字色，
 * 让「不可改」一眼可见，同时保持与可编辑字段对齐。 */

.field__readonly {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--ink-700);
  font-size: var(--text-body);
  line-height: var(--leading-summary);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}

/* --- 操作按钮组 --- */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* 移动端：主操作按钮占满一行，触控更容易；下拉回退为系统原生控件。
 * 复选框从不设置 appearance: none，因此始终是原生控件。 */
@media (max-width: 639px) {
  .form-select {
    appearance: auto;
    -webkit-appearance: auto;
  }

  .form-actions .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .form-input,
  .form-textarea,
  .form-select,
  .content-card,
  .content-card__cover,
  .content-card__title {
    transition: none;
  }
}

/* ==========================================================================
   展示类组件（US-013）：徽标与内容卡片
   ========================================================================== */

/* --- 徽标 ---
 * 文字色一律取「深色主色 + 对应浅底」成对使用，七组领域色对的对比度均 ≥ 4.5:1
 * （--domain-network / --domain-general 在 tokens.css 中已相对 PRD 建议值压暗）。
 * 徽标是纯展示元素，不可交互，因此不给它 tabindex 或 hover 态。 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: var(--leading-summary);
  letter-spacing: normal;
  white-space: nowrap;
}

/* 领域徽标：主色文字 + 同名浅底 */
.badge--domain-datacenter {
  color: var(--domain-datacenter);
  background: var(--domain-datacenter-soft);
}

.badge--domain-network {
  color: var(--domain-network);
  background: var(--domain-network-soft);
}

.badge--domain-compute {
  color: var(--domain-compute);
  background: var(--domain-compute-soft);
}

.badge--domain-cloud {
  color: var(--domain-cloud);
  background: var(--domain-cloud-soft);
}

.badge--domain-token-ai {
  color: var(--domain-token-ai);
  background: var(--domain-token-ai-soft);
}

.badge--domain-fde {
  color: var(--domain-fde);
  background: var(--domain-fde-soft);
}

.badge--domain-general {
  color: var(--domain-general);
  background: var(--domain-general-soft);
}

/* 状态徽标：已发布 / 已隐藏 / 已删除 / 重复 */
.badge--success {
  color: var(--success-600);
  background: var(--success-100);
}

.badge--amber {
  color: var(--amber-700);
  background: var(--amber-100);
}

.badge--danger {
  color: var(--danger-600);
  background: var(--danger-100);
}

.badge--neutral {
  color: var(--ink-700);
  background: var(--canvas);
  border-color: var(--line);
}

/* 示例徽标：琥珀色，与「已隐藏」的琥珀同色系但带描边区分 */
.badge--sample {
  color: var(--amber-700);
  background: var(--amber-100);
  border-color: var(--amber-500);
}

/* 待改密徽标：单独一种青色，不与四种内容状态重色 */
.badge--cyan {
  color: var(--cyan-700);
  background: var(--cyan-100);
}

/* --- 内容卡片 ---
 * 整卡一个链接：`.content-card__link` 是唯一的交互元素，hover 与 focus-visible
 * 都作用在它上面。卡片内部全部用 span 而不是块级元素，避免 <a> 里嵌块级标签。 */

.content-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    transform var(--duration-base) var(--easing-standard),
    box-shadow var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard);
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-300);
}

.content-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
}

/* 键盘焦点环画在卡片外沿（2px） */
.content-card__link:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* 封面区：16:9，占位背景走领域色浅底 */
.content-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--canvas);
  border-radius: var(--radius-md);
}

.content-card__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--domain-general-soft);
}

.content-card__domain-icon,
.domain-icon {
  width: 40px;
  height: 40px;
}

/* 「示例」徽标压在封面右上角 */
.content-card__sample {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.content-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.content-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* 标题最多 2 行，超出省略；完整标题在 title 属性里 */
.content-card__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-900);
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: var(--leading-heading);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 摘要最多 3 行（推荐卡片口径），次要文字色 */
.content-card__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-500);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  letter-spacing: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* 元信息：阅读时长 + 来源 + 时间，自动换行不溢出 */
.content-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: auto;
  color: var(--ink-500);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
  letter-spacing: normal;
}

.content-card__reading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.content-card__source {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 卡片在移动端仍是单列；触控与键盘行为不变 */
@media (max-width: 639px) {
  .content-card__link {
    padding: var(--space-3);
  }

  .content-card__title {
    font-size: var(--text-body);
  }
}

/* 减少动效偏好下取消上浮，只保留阴影变化 */
@media (prefers-reduced-motion: reduce) {
  .content-card:hover {
    transform: none;
  }
}

/* --- 图标按钮与预览页排版辅助 ---
 * `.icon-button` 是通用图标按钮（与外壳里的 `.app-icon-button` 分开：外壳那个是
 * 深色顶栏专用配色）。徽标行与卡片网格只服务于排版，不含颜色。 */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.icon-button:hover {
  color: var(--brand-700);
  background: var(--brand-100);
}

.icon-button:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* 卡片网格：移动端单列，平板两列，桌面三列（PRD 10.2 推荐卡片布局） */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   反馈类组件（US-014）：空状态、Toast、危险操作确认对话框
   ========================================================================== */

/* --- 空状态：图标 + 一句说明 + 一个下一步动作 ---
 * 只有这三样，不放第二个按钮或补充说明（PRD 10.3）。图标是装饰性的，
 * 语义由说明文字承担，因此可以用低对比的 --ink-300。 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.empty-state__icon {
  display: inline-flex;
  color: var(--ink-300);
}

.empty-state__message {
  max-width: 40em;
  margin: 0;
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  letter-spacing: normal;
}

.empty-state__action {
  margin-top: var(--space-2);
}

/* --- Toast ---
 * 容器 `.toast-region` 由 base.html 提供并带 aria-live="polite"（PRD 10.6），
 * 这里是逐条的视觉：左侧色条 + 图标 + 文案 + 关闭按钮。
 * 三类色调都取「深色文字 + 浅底」的成对令牌，对比度 ≥ 4.5:1。 */

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(360px, calc(100vw - var(--space-4) * 2));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  pointer-events: auto;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: opacity var(--duration-base) var(--easing-standard);
}

/* 淡出阶段：由 feedback.js 在移除节点前加上 */
.toast.is-leaving {
  opacity: 0;
}

.toast--success {
  color: var(--success-600);
  background: var(--success-100);
  border-left-color: var(--success-600);
}

.toast--error {
  color: var(--danger-600);
  background: var(--danger-100);
  border-left-color: var(--danger-600);
}

.toast--info {
  color: var(--brand-700);
  background: var(--brand-100);
  border-left-color: var(--brand-600);
}

.toast__icon {
  display: inline-flex;
  flex: none;
  padding-top: 2px;
}

.toast__message {
  flex: 1 1 auto;
  margin: 0;
  color: inherit;
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  letter-spacing: normal;
}

/* 关闭按钮缩小视觉体积，但触控区仍是 44×44（.icon-button 的默认尺寸） */
.toast__close {
  flex: none;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
  color: inherit;
}

.toast__close:hover {
  background: transparent;
  color: inherit;
  opacity: 0.75;
}

/* 移动端把 Toast 抬到底部标签栏之上，并留出安全区 */
@media (max-width: 639px) {
  .toast-region {
    right: var(--space-3);
    bottom: calc(var(--tap-target) + var(--space-3) + env(safe-area-inset-bottom));
    left: var(--space-3);
    width: auto;
  }
}

/* --- 危险操作确认对话框 ---
 * 原生 <dialog>：Esc 关闭、焦点约束由浏览器负责；模板里「取消」位于「确认」之前
 * 且带 autofocus，打开后默认焦点落在「取消」。关闭后由 feedback.js 把焦点交回
 * 触发元素。 */

.confirm-dialog {
  width: min(440px, calc(100vw - var(--space-4) * 2));
  max-height: calc(100vh - var(--space-6));
  padding: 0;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.confirm-dialog::backdrop {
  background: var(--overlay-scrim);
}

.confirm-dialog__body {
  padding: var(--space-5) var(--space-5) 0;
}

.confirm-dialog__title {
  margin: 0 0 var(--space-2);
  color: var(--ink-900);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-heading);
}

.confirm-dialog__description {
  margin: 0 0 var(--space-3);
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  letter-spacing: normal;
}

/* 操作对象名称单独一行并加重，避免误删同名的另一条内容 */
.confirm-dialog__object {
  margin: 0;
  padding: var(--space-3);
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  overflow-wrap: anywhere;
  background: var(--canvas);
  border-radius: var(--radius-sm);
}

.confirm-dialog__object strong {
  color: var(--ink-900);
}

.confirm-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

@media (max-width: 639px) {
  .confirm-dialog__actions .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* 预览页排版辅助：把静态 Toast 按列排开（真正弹出时由 .toast-region 承载） */
.feedback-demo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 420px;
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   分页与加载骨架（US-015）
   ========================================================================== */

/* --- 分页 ---
 * 桌面：上一页 / 页码 / 下一页 + 「第 X / Y 页」；
 * ≤639px：页码行隐藏，只留「加载更多」（PRD 10.3），页码语义仍在 URL 的 page 参数里。
 * 当前页与禁用项都是 <span>，不是链接——翻页只发生在真正可去的页面上。 */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__pages li {
  margin: 0;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0 var(--space-2);
  color: var(--ink-700);
  font-size: var(--text-summary);
  font-weight: 600;
  line-height: var(--leading-summary);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

a.pagination__link:hover {
  color: var(--brand-700);
  background: var(--brand-100);
}

.pagination__link:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* 当前页：实心品牌色。用 span 渲染，因此不会命中上面的 a:hover 规则。 */
.pagination__link[aria-current="page"] {
  color: var(--surface);
  background: var(--brand-600);
}

.pagination__link.is-disabled {
  color: var(--ink-500);
  cursor: not-allowed;
}

.pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  color: var(--ink-500);
}

.pagination__status,
.pagination__end {
  margin: 0;
  color: var(--ink-500);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
  letter-spacing: normal;
}

/* 「加载更多」与「已显示全部」只在移动端出现；桌面用页码行翻页。
 * 双类选择器保证不会被 `.btn { display: inline-flex }` 反向盖掉（US-011 的教训）。 */
.pagination__form,
.pagination__end {
  display: none;
}

/* --- 加载骨架 ---
 * 列表在加载期间显示占位块，避免整页白屏。骨架是装饰性的（整块 aria-hidden），
 * 加载中状态由列表容器的 aria-busy 表达，不另建 live region。 */

.skeleton {
  display: block;
  background-color: var(--canvas);
  background-image: linear-gradient(
    90deg,
    var(--canvas) 0%,
    var(--line) 50%,
    var(--canvas) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1400ms var(--easing-standard) infinite;
}

@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.skeleton-card__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

.skeleton-lines {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.skeleton-line {
  height: 12px;
}

.skeleton-line--title {
  height: 20px;
}

.skeleton-line--short {
  width: 40%;
}

.skeleton-line--medium {
  width: 65%;
}

.skeleton-line--full {
  width: 100%;
}

.skeleton-list--row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.skeleton-row__thumb {
  flex: none;
  width: 96px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}

/* 移动端分页：页码行收起，只留「加载更多」按钮与页码语义（第 X / Y 页）。 */
@media (max-width: 639px) {
  .pagination {
    flex-direction: column;
    gap: var(--space-2);
  }

  .pagination__pages {
    display: none;
  }

  .pagination .pagination__more {
    display: inline-flex;
    width: 100%;
  }

  .pagination__form {
    display: block;
    width: 100%;
  }

  .pagination__end {
    display: block;
  }

  .skeleton-row__thumb {
    width: 72px;
  }
}

/* 减少动效偏好：分页过渡与骨架闪光都关掉，只留静态占位块。 */
@media (prefers-reduced-motion: reduce) {
  .pagination__link {
    transition: none;
  }

  .skeleton {
    background-image: none;
    animation: none;
  }
}

/* ==========================================================================
   管理端用户审批（US-022）：筛选条、批量工具条、账号列表
   ========================================================================== */

/* --- 筛选条：状态下拉 + 用户名搜索 + 按钮 ---
 * 移动端纵向堆叠，≥640px 起横向排开；控件本身的尺寸、焦点与错误样式沿用
 * `.form-input` / `.form-select`，这里只负责布局，不改控件外观。 */

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* 字段自带的 margin-bottom 由容器 gap 取代，避免间距翻倍 */
.filter-bar .field {
  margin-bottom: 0;
}

.filter-bar__field {
  min-width: 0;
}

.filter-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .filter-bar__field {
    flex: 0 0 200px;
  }

  .filter-bar__field--grow {
    flex: 1 1 260px;
  }

  .filter-bar__actions {
    flex: none;
  }
}

/* --- 批量工具条：条数与「批量通过」 ---
 * 放在列表上方的那张表单里；复选框通过 HTML `form` 属性挂到这张表单上，
 * 因此表格内不需要再嵌表单。 */

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.admin-toolbar__meta {
  margin: 0;
  color: var(--ink-500);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
  letter-spacing: normal;
}

/* --- 账号列表 ---
 * ≥1024px 是普通表格；≤1023px 整体转成卡片（模式基线「管理端表格转卡片，
 * 禁止横向滚动表格」）：表头隐藏、每行一张卡片，单元格用 `data-label` 在值
 * 前显示列名，窄屏不会出现横向滚动条。 */

.admin-table-wrap {
  margin-bottom: var(--space-4);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.user-table {
  width: 100%;
  border-collapse: collapse;
}

.user-table th,
.user-table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

.user-table thead th {
  color: var(--ink-500);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: var(--leading-summary);
  letter-spacing: normal;
  white-space: nowrap;
  background: var(--canvas);
}

.user-table tbody tr:last-child td {
  border-bottom: 0;
}

.user-table td {
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.user-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 表格里的操作按钮：收窄左右留白，触控高度仍是 44px */
.btn--compact {
  padding: 0 var(--space-3);
}

@media (max-width: 1023px) {
  .admin-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .user-table,
  .user-table tbody,
  .user-table tr,
  .user-table td {
    display: block;
    width: 100%;
  }

  .user-table thead {
    display: none;
  }

  .user-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .user-table tr {
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .user-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }

  .user-table td::before {
    flex: none;
    color: var(--ink-500);
    font-size: var(--text-small);
    font-weight: 600;
    content: attr(data-label);
  }

  /* 操作区换行到列名下方，按钮在窄屏上也能撑开 */
  .user-table td.user-table__actions-cell {
    display: block;
  }

  .user-table td.user-table__actions-cell::before {
    display: block;
    margin-bottom: var(--space-2);
  }

  .user-table__actions .btn {
    flex: 1 1 auto;
  }
}

/* --- 工具栏按钮组（US-074：来源列表的「全部立即采集」+「新建来源」） ---
 * `.admin-toolbar` 是两端对齐的，动作多于一两个时收进一个 flex 容器统一换行，
 * 避免按钮被拉到两行后左右错位。 */

.admin-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* --- 采集进度（US-074） ---
 * 一条常驻的进度带：左侧固定标签、右侧是服务端给的进度文案
 * （`第 N 期 · 采集中 · 已完成 2 / 5 个来源`）。文案会随轮询更新，因此
 * `aria-live="polite"` 由模板挂在容器上，这里只管排版。 */

.collector-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-100);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
}

.collector-progress__label {
  flex: none;
  color: var(--brand-700);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: var(--leading-summary);
}

.collector-progress__text {
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  overflow-wrap: anywhere;
}

/* --- 来源详情（US-088） ---
 * 基本信息与运行记录都复用 `.user-table` 的卡片转换（≤1023px）；
 * 基本信息只有一行单元格，桌面端按内容宽度排列、不铺满整行。 */

.source-info td {
  width: auto;
  white-space: nowrap;
}

.source-info td:nth-child(2) {
  white-space: normal;
  min-width: 12em;
}

/* --- 操作日志（US-059） ---
 * 详情列是脱敏后的 JSON 文本（可能整段），等宽字体 + 可换行；表格本身复用
 * `.user-table` 的结构与 ≤1023px 卡片转换，这里只管详情列的排版。 */

.log-detail {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* 错误摘要：类别一行小字引导，正文可折行；整格宽度在桌面端占满剩余空间。 */
.run-error-cell {
  min-width: 16em;
}

.run-error-cell__kind {
  margin: 0 0 var(--space-1);
  color: var(--ink-500);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
}

.run-error-cell__text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* --- 首页最新动态（US-048） ---
 * 欢迎区 + 两列布局：左侧「最新动态」列表占主要内容宽度，右侧窄栏放领域 /
 * 来源导航（PRD 10.2：左列表 8 列、右窄栏，移动端隐藏）。 */
.home-head {
  margin-bottom: var(--space-5);
}

.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.home-latest h2 {
  margin-bottom: var(--space-4);
}

.home-latest__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.home-aside {
  display: none;
}

@media (min-width: 1024px) {
  .home-layout {
    grid-template-columns: minmax(0, 8fr) minmax(220px, 4fr);
  }

  .home-aside {
    display: block;
    position: sticky;
    top: var(--space-5);
  }
}

/* 窄栏分组：标题小字引导 + 竖排链接列表，点击进入带筛选的内容库。 */
.home-aside__group {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.home-aside__group h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink-500);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-summary);
}

.home-aside__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-aside__links li + li {
  border-top: 1px solid var(--line);
}

.home-aside__links a {
  display: block;
  padding: var(--space-2) var(--space-1);
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}

.home-aside__links a:hover {
  color: var(--brand-700);
  background: var(--brand-100);
}

.home-aside__links a:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* --- 首页本周速览（US-049） ---
 * 欢迎区之下、最新动态之上的一张横向卡片：左侧标题 + 周期，中间三个聚合数字，
 * 底部固定模板汇总文案。≤639px 时数字一行排开、文案接在下方，不横向滚动。 */
.home-digest {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--brand-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.home-digest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.home-digest__head h2 {
  margin: 0;
}

.home-digest__period {
  color: var(--ink-500);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-caps);
}

.home-digest__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-3);
}

.home-digest__stat dt {
  color: var(--ink-500);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-summary);
}

.home-digest__stat dd {
  margin: 0;
  color: var(--ink-900);
  font-size: var(--text-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-heading);
}

.home-digest__summary {
  margin: 0;
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  overflow-wrap: anywhere;
}

/* --- 首页推荐卡片（US-050） ---
 * 速览卡片之下、最新动态之上的卡片网格：布局复用通用 `.card-grid`
 * （≤639px 单列、640–1023px 两列、≥1024px 三列，即 1440×900 下 3 列 × 2 行、
 * 390×844 下单列无横向滚动）；卡片本体与最新动态共用 `.content-card`。 */
.home-recommended {
  margin-bottom: var(--space-6);
}

.home-recommended h2 {
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   内容库（US-051）：筛选栏 / 底部抽屉 / 结果区 / 排序切换
   ========================================================================== */

/* --- 整体布局：≥640px 左筛选栏 + 右结果区；≤639px 单列、筛选收进抽屉 --- */
.library-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 640px) {
  .library-layout {
    grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr);
  }
}

.library-head {
  margin-bottom: var(--space-5);
}

/* --- 筛选栏：桌面常驻，≤639px 藏进抽屉（is-open 时以底部抽屉展开） --- */
.library-filters {
  display: none;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.library-layout.is-open .library-filters {
  display: block;
}

.library-filters__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.library-filters__title {
  margin: 0;
  color: var(--ink-500);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-summary);
}

.library-filters__close {
  display: none;
}

.library-layout.is-open .library-filters__close {
  display: inline-flex;
}

.library-filters__form .form-actions {
  margin-top: var(--space-3);
}

.library-filters__dates {
  display: flex;
  gap: var(--space-2);
}

.library-filters__dates .form-input {
  flex: 1 1 50%;
  min-width: 0;
}

/* 抽屉遮罩：只在 ≤639px 且展开时出现，点击可收起（脚本负责） */
.library-filters__scrim {
  display: none;
}

@media (max-width: 639px) {
  .library-layout.is-open .library-filters {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: calc(100vh - var(--space-7));
    overflow-y: auto;
    margin-bottom: 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-md);
  }

  .library-layout.is-open .library-filters__scrim {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    background: var(--overlay-scrim);
  }
}

/* ≥640px 常驻筛选栏，不再需要关闭按钮 */
@media (min-width: 640px) {
  .library-filters {
    display: block;
    position: sticky;
    top: calc(64px + var(--space-4));
    margin-bottom: 0;
  }

  .library-filters__close,
  .library-layout.is-open .library-filters__close {
    display: none;
  }
}

/* --- 结果区：移动端「筛选」按钮 + 计数 + 排序切换 --- */
.library-results__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.library-filters-toggle {
  display: inline-flex;
}

.library-results__meta {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  letter-spacing: normal;
}

.library-sort {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.library-sort__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-2);
  color: var(--ink-500);
  font-size: var(--text-summary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.library-sort__item:hover {
  color: var(--brand-700);
  background: var(--brand-100);
}

.library-sort__item.is-active {
  color: var(--brand-700);
  font-weight: 600;
}

.library-sort__item:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.library-results__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* 桌面端「筛选」按钮没有存在的意义：筛选栏常驻 */
@media (min-width: 640px) {
  .library-filters-toggle {
    display: none;
  }
}

/* 减少动效偏好：抽屉与排序链接不做过渡（本组件本就未加动画，保守起见一并声明） */
@media (prefers-reduced-motion: reduce) {
  .library-sort__item {
    transition: none;
  }
}


/* --- 内容详情页（US-052）---
 * 排版口径（AC 2）：正文列最大宽 720px（--article-max）、字号 17px、行高 1.85、
 * 段落间距 1.2em；base.css 的默认段落间距是 16px，这里按 AC 显式覆盖。
 * 表格（AC 6）：横向滚动只发生在表格自身（display: block + overflow-x: auto），
 * 页面本身不出现横向滚动。本节只用 tokens 变量，不写裸色值。 */

.article-detail {
  max-width: var(--article-max);
  margin-inline: auto;
}

.article-detail__head {
  margin-bottom: var(--space-5);
}

.article-detail__badge {
  margin-bottom: var(--space-3);
}

.article-detail__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  color: var(--ink-900);
}

.article-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--ink-500);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
}

.article-detail__meta-item {
  display: inline-flex;
  align-items: center;
}

.article-detail__summary {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
  background: var(--brand-100);
  border-radius: var(--radius-md);
}

.article-detail__cover {
  margin: 0 0 var(--space-5);
}

.article-detail__cover img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* 正文排版：段落间距 1.2em 是本页的 AC 值，覆盖 base.css 的默认 16px。 */
.article-detail__body {
  margin-bottom: var(--space-6);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink-700);
  overflow-wrap: anywhere;
}

.article-detail__body p {
  margin-bottom: 1.2em;
}

.article-detail__body h2,
.article-detail__body h3,
.article-detail__body h4 {
  margin: 1.6em 0 0.6em;
  color: var(--ink-900);
  line-height: var(--leading-heading);
}

.article-detail__body ul,
.article-detail__body ol {
  margin: 0 0 1.2em;
  padding-inline-start: 1.6em;
}

.article-detail__body li {
  margin-bottom: var(--space-1);
}

.article-detail__body blockquote {
  margin: 0 0 1.2em;
}

.article-detail__body a {
  color: var(--brand-700);
}

/* 表格横向滚动（AC 6）：display: block 让 table 自己成滚动容器，长表格
   不会把页面撑出横向滚动条。 */
.article-detail__body table {
  display: block;
  width: 100%;
  margin: 0 0 1.2em;
  overflow-x: auto;
  border-collapse: collapse;
}

.article-detail__body th,
.article-detail__body td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border: 1px solid var(--line);
}

.article-detail__body th {
  background: var(--canvas);
  color: var(--ink-900);
  font-weight: 600;
}

/* 「查看原文」独立动作行（顶部）：与正文拉开距离，触控目标 ≥ 44px。 */
.article-detail__view-origin {
  display: flex;
  margin-bottom: var(--space-5);
}

.article-detail__origin-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  color: var(--brand-700);
  font-size: var(--text-summary);
  text-decoration: none;
  background: var(--brand-100);
  border-radius: var(--radius-md);
}

.article-detail__origin-link:hover {
  color: var(--brand-700);
  background: var(--brand-100);
  text-decoration: underline;
}

.article-detail__origin-link:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* 标签列表：只读展示，不做链接。 */
.article-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.article-detail__tag {
  padding: var(--space-1) var(--space-3);
  color: var(--ink-700);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

/* 文末动作区：查看原文 + 回到顶部（AC 3 / AC 6）。 */
.article-detail__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  margin-bottom: var(--space-7);
}

.article-detail__back-top {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-2);
  color: var(--ink-500);
  font-size: var(--text-summary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.article-detail__back-top:hover {
  color: var(--brand-700);
  background: var(--brand-100);
}

.article-detail__back-top:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* 移动（≤639px）：标题与摘要缩小一档，保持单列无横向滚动。 */
@media (max-width: 639px) {
  .article-detail__title {
    font-size: var(--text-h3);
  }

  .article-detail__summary {
    padding: var(--space-3);
  }
}


/* --- 管理端内容预览（US-079）---
 * 顶部状态横幅：状态徽标 + 返回列表按钮左右分布，≤639px 换行堆叠。
 * 颜色全部走令牌，不写裸色值。 */

.preview-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.preview-banner__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.preview-banner__label {
  color: var(--ink-500);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
}

.preview-banner__note {
  color: var(--ink-700);
  font-size: var(--text-summary);
  line-height: var(--leading-summary);
}

.preview-banner__back {
  flex-shrink: 0;
}

/* --- 管理端内容编辑（US-055）---
 * 预览片段区：与表单同宽，标题 + 净化后的正文；颜色全部走令牌。 */

.edit-preview {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.edit-preview__heading {
  margin: 0 0 var(--space-3);
  color: var(--ink-900);
  font-size: var(--text-summary);
  font-weight: 600;
  line-height: var(--leading-summary);
}

.edit-preview__body {
  max-width: none;
}


/* --- 管理概览页（US-076）---
 * 四张待办计数卡片 + 批次/体量两块信息表。布局复用 `.card-grid`（1/2/3 列），
 * 这里只补卡片自身的形态：整卡可点、数字大号 `.tnum`，颜色全部走令牌。 */

.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.overview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--tap-target);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    box-shadow var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.overview-card:hover {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.overview-card:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* 减少动效偏好下取消上浮（模式基线：动效 ≤ 200ms，reduce 下关闭） */
@media (prefers-reduced-motion: reduce) {
  .overview-card {
    transition: none;
  }

  .overview-card:hover {
    transform: none;
  }
}

.overview-card__label {
  color: var(--ink-500);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
}

.overview-card__value {
  color: var(--ink-900);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
}

.overview-card__value--alert {
  color: var(--danger-600);
}


/* --- 封面手动上传（US-061）---
 * 编辑页封面区块：当前封面预览 + 上传表单 + 移除/恢复入口。布局参考
 * `.edit-preview`（同宽面板），图片预览定高、按宽裁切；颜色全部走令牌。 */

.cover-admin {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.cover-admin__heading {
  margin: 0 0 var(--space-2);
  color: var(--ink-900);
  font-size: var(--text-summary);
  font-weight: 600;
  line-height: var(--leading-summary);
}

.cover-admin__summary {
  margin: 0 0 var(--space-4);
  color: var(--ink-500);
  font-size: var(--text-small);
  line-height: var(--leading-summary);
}

.cover-admin__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.cover-admin__preview {
  flex: 0 1 auto;
  min-width: 0;
}

.cover-admin__image {
  display: block;
  max-width: 320px;
  max-height: 180px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cover-admin__preview--empty .field__hint {
  margin: 0;
}

.cover-admin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cover-admin__upload {
  margin: 0;
}

.cover-admin__upload .form-actions {
  margin-top: var(--space-3);
}