/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles —— 好物分享网站
   ========================================================================== */

/* ---------- 设计变量：集中管理配色，方便后续统一调整主题 ---------- */
:root {
  --color-primary: #4cb8e8;        /* 主色：天空蓝，用于主要按钮、强调元素 */
  --color-primary-dark: #2f9fd0;   /* 主色加深：hover 状态 */
  --color-secondary: #ffb6c9;      /* 辅助色：浅粉，与主色搭配 */
  --color-secondary-dark: #ff90ad; /* 辅助色加深：hover / 强调 */
  --color-text: #2b2b2b;           /* 正文文字 */
  --color-text-muted: #888;        /* 次要文字 */
  --color-border: #e6eef3;         /* 边框、分隔线（带一点蓝调） */
  --color-bg: #f3f9fd;             /* 页面背景：极浅蓝粉色调 */
  --color-card: #ffffff;           /* 卡片背景 */
  /* 渐变：天空蓝 → 浅粉，作为品牌主视觉 */
  --gradient-primary: linear-gradient(135deg, #4cb8e8 0%, #ffb6c9 100%);
  /* 柔和渐变：极浅蓝 → 极浅粉，用于背景铺底 */
  --gradient-soft: linear-gradient(135deg, #eaf6fd 0%, #fdeef3 100%);
  --radius: 12px;                  /* 统一圆角 */
  --shadow: 0 2px 12px rgba(76, 184, 232, 0.10);       /* 默认阴影（蓝调） */
  --shadow-hover: 0 6px 20px rgba(76, 184, 232, 0.18); /* 悬停阴影（蓝调） */
  --max-width: 1080px;             /* 内容区最大宽度 */
}

/* ---------- 基础重置 ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  background-image: var(--gradient-soft);
  background-attachment: fixed;
}

/* 居中内容容器 */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.05s ease;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

/* 主按钮：渐变填充（天空蓝 → 浅粉） */
.btn-primary {
  background: var(--gradient-primary);
  background-size: 150% 150%;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(76, 184, 232, 0.30);
  transition: background-position 0.3s ease, box-shadow 0.2s ease,
    transform 0.05s ease;
}

.btn-primary:hover {
  background-position: 100% 100%;
  box-shadow: 0 4px 16px rgba(255, 144, 173, 0.40);
}

/* 描边按钮 */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* 幽灵按钮：无边框，用于次要操作 */
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(243, 249, 253, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

/* 顶部细渐变线，强化品牌主视觉 */
.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--gradient-primary);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  text-decoration: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 已登录用户区 */
.auth-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.welcome {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- 标语区 ---------- */
.hero {
  text-align: center;
  padding: 48px 0 32px;
}

.hero-title {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 800;
  /* 渐变文字：天空蓝 → 浅粉；不支持时回退为主色 */
  color: var(--color-primary);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
}

/* ---------- 列表区 ---------- */
.feed-section {
  padding-bottom: 64px;
}

.feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.feed-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 窄屏时标签 / 排序 / 计数可换行，避免溢出 */
  gap: 16px;
}

/* 筛选标签 / 登录注册标签 通用 */
.tabs {
  display: inline-flex;
  background: #efeff1;
  border-radius: 999px;
  padding: 3px;
}

.tab {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab.is-active {
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow);
}

/* ---------- 首页板块切换（主导航，比 .tab 更醒目） ---------- */
/* 与 .tabs 同属切换控件，但作为首页一级导航更突出：激活态用主色渐变填充。
   配色全部取自 :root 变量，暗色模式下变量自动切换；仅激活态文字色需在
   暗色下改为深色以贴合更亮的主色（与 .tag-chip.is-active 暗色处理一致）。 */
.board-tabs {
  display: flex;
  flex-wrap: wrap;          /* 窄屏换行，避免溢出 */
  gap: 8px;
  margin: 4px 0 16px;
}

.board-tab {
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}

.board-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: rgba(76, 184, 232, 0.08); /* 主色淡染，明暗皆适用 */
}

.board-tab.is-active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow);
}

/* 暗色下主色渐变更亮，激活态文字改深色以保证可读性 */
[data-theme="dark"] .board-tab.is-active {
  color: #0f1520;
}

/* ---------- 卡片板块徽标（.board-badge） ---------- */
/* 渲染于 essentialBadge 之后、封面之前，是 .card 的直接子元素，.card 为
   position: relative。卡片左上角已被 .status-badge 占用、右上角被
   .essential-badge 占用，故板块徽标默认固定在封面【左上角】：
   首页仅展示已通过帖子，左上角恒空闲；仅作者本人的待审/未通过帖子才会
   出现 .status-badge，此时用兄弟选择器把板块徽标下移一行，彻底避免重叠。
   背景一律使用 token 颜色的 rgba 淡染（明暗皆安全，不会在暗色下露出白块），
   文字取 *-dark 变量随主题自动切换；叠加 backdrop-filter 让其覆盖封面图时
   仍清晰可读。 */
.board-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
}

/* 同时存在状态徽标（待审/未通过）时，板块徽标下移一行避让左上角 */
.status-badge ~ .board-badge {
  top: 38px;
}

/* 好物分享：主色（天空蓝）家族 */
.board-badge.board-share {
  background: rgba(76, 184, 232, 0.22);
  color: var(--color-primary-dark);
}

/* 经验之谈：辅助色（浅粉）家族，与好物分享在视觉上区分 */
.board-badge.board-talk {
  background: rgba(255, 144, 173, 0.22);
  color: var(--color-secondary-dark);
}

/* 暗色：改用暗色主题对应的主/辅色 rgba 淡染，文字色已随变量自动适配 */
[data-theme="dark"] .board-badge.board-share {
  background: rgba(92, 200, 245, 0.20);
}

[data-theme="dark"] .board-badge.board-talk {
  background: rgba(255, 154, 181, 0.20);
}

.auth-tabs {
  margin: 16px 20px 0;
}

/* 注册验证码行：题目 + 换题按钮 + 答案输入 */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.captcha-question {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--gradient-soft);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.captcha-refresh {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-text-muted);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.3s ease;
}

.captcha-refresh:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: rotate(180deg);
}

.captcha-row .text-input {
  flex: 1 1 auto;
}

.section-title {
  font-size: 22px;
  margin: 0;
}

.feed-count {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ---------- 排序下拉 ---------- */
/* 标签 + 下拉一行排列；颜色 / 边框 / 圆角全部复用 :root 变量，
   暗色模式下变量自动切换，无需额外覆盖。 */
.feed-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 复用 .feed-count 的弱化文字风格 */
.feed-sort-label {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* 下拉框：与 .text-input / .sidebar-search-input 同一套边框、圆角、配色 */
.feed-sort {
  padding: 7px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-card);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 聚焦样式与 .text-input 一致：主色描边 + 柔和外发光 */
.feed-sort:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(76, 184, 232, 0.14);
}

/* 空状态 */
.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 60px 20px;
}

.empty-emoji {
  font-size: 48px;
  margin: 0 0 12px;
}

/* 卡片网格：响应式自适应列数 */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* ---------- 好物卡片 ---------- */
.card {
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f0f0f0;
  display: block;
}

/* 无图占位 */
.card-image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: #d8d8d8;
}

.card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  /* 标题最多两行，超出省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
  /* 描述最多三行，超出省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* 作者 / 编号 */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* 卡片作者行：头像 + 名字横排 */
.card-author-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* 超小头像（卡片用，20px） */
.avatar-xs {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--gradient-soft);
}

/* 小头像（详情 / 评论用，28px） */
.avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--gradient-soft);
}

.card-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 评分展示 */
.card-rating {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary-dark);
}

.card-rating.muted {
  color: var(--color-text-muted);
  font-weight: 400;
}

.card-rating small {
  color: var(--color-text-muted);
  font-weight: 400;
}

.card-date {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 购物链接按钮 */
.card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

/* 卡片底部统计 */
.card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-actions .stat {
  font-size: 12px;
  color: var(--color-text-muted);
}

.card-actions .stat.on {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- 发布弹窗 ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden; /* 滚动由内部 detail-body 负责 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* 详情用更宽的弹窗 */
.modal-wide {
  max-width: 640px;
}

/* 小号按钮 */
.btn-sm {
  padding: 5px 10px;
  font-size: 13px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  margin: 0;
  font-size: 18px;
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
}

.modal-close:hover {
  color: var(--color-text);
}

/* ---------- 表单 ---------- */
.share-form {
  padding: 20px;
}

.form-field {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.required {
  color: var(--color-primary);
}

.text-input,
.file-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  background: #fff;
}

.text-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

textarea.text-input {
  resize: vertical;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* 图片预览 */
.image-preview {
  position: relative;
  margin-top: 12px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  display: block;
  max-height: 240px;
  object-fit: cover;
}

.preview-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.preview-remove:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* 表单错误提示 */
.form-error {
  color: var(--color-primary);
  font-size: 13px;
  margin: 0 0 12px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 24px 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ---------- 帖子详情 ---------- */
.detail-loading {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.detail-image {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block;
  background: #f0f0f0;
}

.detail-main {
  padding: 20px;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.detail-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-wrap;
  margin: 0 0 14px;
}

.detail-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: 16px;
}

.detail-link:hover {
  text-decoration: underline;
}

/* 互动栏 */
.detail-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.react-btn {
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-muted);
  padding: 7px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.react-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.react-btn.on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 评分星级 */
.detail-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 帖主自评分：跟在详情元信息后面 */
.detail-author-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-author-rating .stars {
  font-size: 15px;
}

.rating-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.stars {
  display: inline-flex;
  font-size: 20px;
  color: #ddd;
  line-height: 1;
}

.stars .star {
  cursor: default;
}

.stars .star[data-score] {
  cursor: pointer;
}

.stars .star.on {
  color: #f5a623;
}

.rating-avg {
  font-size: 12px;
  color: var(--color-text-muted);
}

.detail-delete {
  margin-top: 14px;
  color: var(--color-primary);
}

/* ---------- 评论区 ---------- */
.comments {
  margin-top: 20px;
}

.comments-title {
  font-size: 16px;
  margin: 0 0 12px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.comment-form .btn {
  align-self: flex-end;
}

.comment-login-tip {
  font-size: 14px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

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

.comment {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}

/* 评论作者行：头像 + 名字横排 */
.comment-author-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.comment-author {
  font-size: 14px;
  font-weight: 600;
}

.comment-date {
  font-size: 12px;
  color: var(--color-text-muted);
}

.comment-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.comment-empty {
  padding: 16px 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 600px) {
  .hero-title {
    font-size: 26px;
  }

  /* 移动端隐藏注册按钮，保留登录与发帖 */
  #register-btn {
    display: none;
  }

  .feed-toolbar {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   动效与加载 —— 关键帧、卡片入场、弹窗、加载指示器
   ========================================================================== */

/* ---------- 关键帧 ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ---------- 入场动画 ---------- */
/* 标语区淡入 */
.hero {
  animation: fadeIn 0.5s ease both;
}

/* 卡片自下而上淡入 */
.card {
  animation: fadeInUp 0.4s ease both;
}

/* 前 6 张卡片错峰入场，营造轻盈的瀑布感 */
.card:nth-child(1) {
  animation-delay: 0.04s;
}
.card:nth-child(2) {
  animation-delay: 0.08s;
}
.card:nth-child(3) {
  animation-delay: 0.12s;
}
.card:nth-child(4) {
  animation-delay: 0.16s;
}
.card:nth-child(5) {
  animation-delay: 0.2s;
}
.card:nth-child(6) {
  animation-delay: 0.24s;
}

/* 弹窗：遮罩淡入 + 主体弹出 */
.modal-overlay {
  animation: fadeIn 0.2s ease both;
}

.modal {
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- 加载指示器 ---------- */
/* 圆形旋转加载器：天空蓝描边 + 顶部透明 */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(76, 184, 232, 0.25);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* 小号内联加载器，供按钮等紧凑场景使用 */
.spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(76, 184, 232, 0.25);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* 居中加载容器：用于信息流 / 详情的加载占位 */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* 按钮繁忙态：变暗、禁用点击，并显示内联小旋转器 */
.btn.is-loading {
  position: relative;
  opacity: 0.7;
  pointer-events: none;
  color: transparent !important;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---------- 尊重「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   发布页 与 富文本编辑器 —— 编辑器、作者评分、详情正文渲染
   ========================================================================== */

/* ---------- 发布页布局 ---------- */
.publish-page {
  padding: 24px 0 48px;
  min-height: calc(100vh - 64px);
}

/* 发布卡片：全宽，不再居中小卡片 */
.publish-card {
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  animation: fadeInUp 0.4s ease both;
}

/* ---------- 编辑器工具栏 ---------- */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: var(--gradient-soft);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

/* 工具栏按钮：小方按钮，hover 浅蓝，激活态填充 */
.editor-btn {
  min-width: 34px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.05s ease;
}

.editor-btn:hover {
  background: rgba(76, 184, 232, 0.12);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.editor-btn:active {
  transform: scale(0.95);
}

.editor-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---------- 可编辑正文区 ---------- */
.editor {
  min-height: 220px;
  padding: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0 0 8px 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(76, 184, 232, 0.18);
}

/* 空状态占位符 */
.editor:empty:before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
}

/* 编辑器内用户生成的富文本元素 */
.editor h2,
.editor h3 {
  margin: 0.8em 0 0.4em;
  line-height: 1.3;
  font-weight: 700;
}

.editor h2 {
  font-size: 1.4em;
}

.editor h3 {
  font-size: 1.2em;
}

.editor blockquote {
  margin: 0.8em 0;
  border-left: 3px solid var(--color-primary);
  padding-left: 12px;
  color: var(--color-text-muted);
}

.editor ul,
.editor ol {
  padding-left: 1.4em;
  margin: 0.6em 0;
}

.editor a {
  color: var(--color-primary);
}

/* ==========================================================================
   富文本编辑器（完整版）— RTE
   ========================================================================== */

/* ── 外层容器 ── */
.rte-wrap {
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rte-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(76, 184, 232, 0.14);
}

/* ── 工具栏 ── */
.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  background: var(--gradient-soft);
  border-bottom: 1.5px solid var(--color-border);
}

/* 分组分隔线 */
.rte-sep {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  margin: 0 3px;
  flex-shrink: 0;
}

/* 工具栏按钮 */
.rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #4a5568;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease,
              border-color 0.12s ease, transform 0.08s ease;
}

.rte-btn:hover {
  background: #fff;
  border-color: rgba(76, 184, 232, 0.35);
  color: var(--color-primary-dark);
}

.rte-btn:active {
  transform: scale(0.93);
}

.rte-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(76, 184, 232, 0.3);
}

/* 下拉选择框 */
.rte-select {
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
  font-family: inherit;
  color: #4a5568;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.rte-select:hover,
.rte-select:focus {
  background: #fff;
  border-color: rgba(76, 184, 232, 0.35);
}

/* 颜色选择按钮 */
.rte-color-btn {
  position: relative;
  cursor: pointer;
  gap: 0;
}

.rte-color-icon {
  font-size: 14px;
  font-weight: 900;
  pointer-events: none;
}

.rte-hl-icon {
  background: linear-gradient(transparent 60%, #ffff00 60%);
  padding: 0 1px;
}

.rte-color-btn input[type="color"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── 编辑区 ── */
.rte-editor {
  min-height: 280px;
  max-height: 600px;
  overflow-y: auto;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  background: #fff;
  outline: none;
  word-break: break-word;
}

/* 占位符 */
.rte-editor:empty::before {
  content: attr(data-placeholder);
  color: #b0bac8;
  pointer-events: none;
}

/* 编辑区内富文本样式 */
.rte-editor h1 { font-size: 1.8em; font-weight: 900; margin: 0.8em 0 0.4em; line-height: 1.25; }
.rte-editor h2 { font-size: 1.5em; font-weight: 800; margin: 0.8em 0 0.4em; line-height: 1.3; }
.rte-editor h3 { font-size: 1.25em; font-weight: 700; margin: 0.7em 0 0.35em; }
.rte-editor h4 { font-size: 1.1em; font-weight: 700; margin: 0.6em 0 0.3em; }
.rte-editor h5, .rte-editor h6 { font-size: 1em; font-weight: 700; margin: 0.5em 0 0.25em; }

.rte-editor p { margin: 0 0 0.75em; }

.rte-editor blockquote {
  margin: 1em 0;
  padding: 10px 16px;
  border-left: 4px solid var(--color-primary);
  background: var(--color-blue-soft, #edf7fd);
  border-radius: 0 8px 8px 0;
  color: #5a6a7a;
  font-style: italic;
}

.rte-editor pre {
  margin: 1em 0;
  padding: 14px 16px;
  background: #1e2433;
  color: #e2e8f0;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

.rte-editor code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(76, 184, 232, 0.1);
  color: var(--color-primary-dark);
  padding: 1px 5px;
  border-radius: 4px;
}

.rte-editor ul, .rte-editor ol {
  padding-left: 1.6em;
  margin: 0.5em 0 0.75em;
}

.rte-editor li { margin-bottom: 0.25em; }

.rte-editor a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rte-editor a:hover { color: var(--color-primary-dark); }

.rte-editor img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 8px auto;
}

.rte-editor figure {
  margin: 12px 0;
  text-align: center;
}

.rte-editor figcaption {
  font-size: 13px;
  color: #8a9ab0;
  margin-top: 5px;
}

.rte-editor iframe {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.rte-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}

.rte-editor th {
  background: var(--gradient-soft);
  font-weight: 700;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
}

.rte-editor td {
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.rte-editor tr:nth-child(even) td {
  background: rgba(76, 184, 232, 0.03);
}

.rte-editor hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: 16px 0;
}

.rte-editor mark {
  background: #fff176;
  border-radius: 2px;
  padding: 0 2px;
}

/* ── 底部字数统计 ── */
.rte-footer {
  display: flex;
  justify-content: flex-end;
  padding: 5px 12px;
  background: var(--gradient-soft);
  border-top: 1px solid var(--color-border);
}

.rte-wordcount {
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 发布页编辑区更高，充分利用全宽空间 */
.publish-page .rte-editor {
  min-height: 420px;
}

/* 详情页作者操作行（编辑 + 删除） */
.detail-author-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

/* 编辑链接去掉下划线，高度与按钮对齐 */
.detail-author-actions a.btn {
  text-decoration: none;
  line-height: 1;
}

[data-theme="dark"] .detail-author-actions {
  border-top-color: var(--color-border);
}
@media (max-width: 600px) {
  .rte-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    padding: 6px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rte-toolbar::-webkit-scrollbar { display: none; }
  .rte-sep { flex-shrink: 0; }
  .rte-editor { min-height: 200px; padding: 12px 14px; font-size: 14px; }
}

/* ---------- 作者评分选择器 ---------- */
.rating-input {
  display: inline-flex;
  gap: 4px;
}

.rating-input .star {
  font-size: 28px;
  line-height: 1;
  color: #ddd;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.rating-input .star:hover {
  transform: scale(1.1);
}

.rating-input .star.on {
  color: var(--color-secondary-dark);
}

/* ---------- 详情正文富文本渲染 ---------- */
/* 与 .editor 内部元素保持一致的排版 */
.detail-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}

.detail-content h2,
.detail-content h3 {
  margin: 0.8em 0 0.4em;
  line-height: 1.3;
  font-weight: 700;
}

.detail-content h2 {
  font-size: 1.4em;
}

.detail-content h3 {
  font-size: 1.2em;
}

.detail-content blockquote {
  margin: 0.8em 0;
  border-left: 3px solid var(--color-primary);
  padding-left: 12px;
  color: var(--color-text-muted);
}

.detail-content ul,
.detail-content ol {
  padding-left: 1.4em;
  margin: 0.6em 0;
}

.detail-content a {
  color: var(--color-primary);
}


/* ==========================================================================
   审核系统相关样式 —— 状态徽标、详情提示横幅、发布成功提示、后台入口
   沿用天空蓝 + 浅粉主题与 :root 变量
   ========================================================================== */

/* ---------- 卡片审核状态徽标 ---------- */
/* 绝对定位覆盖在卡片左上角（.card 已设为 position: relative） */
.status-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* 待审核：琥珀色 */
.status-pending {
  background: #fff4d6;
  color: #b8860b;
}

/* 未通过：偏红灰 */
.status-rejected {
  background: #f3d6d6;
  color: #c0392b;
}

/* ---------- 详情顶部审核提示横幅 ---------- */
.detail-notice {
  margin-bottom: 14px;
  padding: 10px 14px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
  background: #fff4d6;
  color: #b8860b;
}

/* 未通过：红灰提示 */
.detail-notice-rejected {
  background: #f3d6d6;
  color: #c0392b;
}

/* ---------- 发布成功提示 ---------- */
.form-success {
  color: #2e9e5b;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}

/* ---------- 页脚后台管理入口 ---------- */
/* 低调的小链接，hover 时变主色并加下划线 */
.admin-entry {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.admin-entry:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ==========================================================================
   作者链接 + 个人主页
   ========================================================================== */

/* 顶部「你好，xxx」链接化后去掉下划线 */
a.welcome {
  text-decoration: none;
}

a.welcome:hover {
  color: var(--color-primary);
}

/* 作者名链接（卡片 / 详情 / 评论） */
.author-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
}

.author-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ---------- 个人主页：资料卡 ---------- */
.profile-main {
  padding-top: 24px;
  padding-bottom: 48px;
}

.profile-error {
  margin: 40px auto;
  text-align: center;
  color: var(--color-primary);
  font-size: 15px;
}

.profile-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 28px;
  animation: fadeInUp 0.4s ease both;
}

/* 头图区：有图显示图，无图用品牌渐变兜底 */
.profile-header {
  height: 200px;
  background: var(--gradient-primary);
  position: relative;
}

.profile-header.is-empty {
  background: var(--gradient-primary);
}

.profile-header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 头像 + 昵称行：头像上移压住头图 */
.profile-info {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 24px;
  margin-top: -44px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-card);
  background: var(--color-card);
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}

.profile-identity {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 4px;
}

.profile-nickname {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  word-break: break-word;
}

.profile-username {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.profile-edit-btn {
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.profile-bio {
  margin: 14px 0 0;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.profile-bio.is-placeholder {
  color: var(--color-text-muted);
}

/* 粉丝 / 关注数统计行 */
.profile-stats {
  display: flex;
  gap: 20px;
  padding: 0 24px 18px;
  margin-top: -2px;
}

.profile-stat {
  font-size: 14px;
  color: var(--color-text-muted);
}

.profile-stat strong {
  color: var(--color-text);
  font-weight: 700;
}

/* 关注按钮 */
.profile-follow-btn {
  flex: 0 0 auto;
  margin-bottom: 6px;
  min-width: 80px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.profile-follow-btn.is-following {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.profile-follow-btn.is-following:hover {
  color: #e05;
  border-color: #e05;
  background: transparent;
}

/* 关注 / 粉丝列表区块 */
.profile-social-section {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 28px;
  overflow: hidden;
  animation: fadeInUp 0.4s ease both;
}

.profile-social-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.profile-social-tab {
  flex: 1;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.profile-social-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.profile-social-body {
  padding: 8px 16px 16px;
  min-height: 80px;
}

.profile-social-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 24px 0;
}

/* 用户列表条目 */
.social-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}

.social-user-item:last-child {
  border-bottom: none;
}

.social-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--gradient-soft);
}

.social-user-info {
  flex: 1;
  min-width: 0;
}

.social-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-user-handle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.social-mutual-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------- 编辑资料弹窗：图片选择行 ---------- */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.edit-image-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.edit-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  background: var(--gradient-soft);
  flex: 0 0 auto;
}

.edit-header-preview {
  width: 160px;
  height: 72px;
  border-radius: 10px;
  border: 2px solid var(--color-border);
  background: var(--gradient-soft);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.edit-header-preview.has-image {
  border-color: var(--color-primary);
}

.edit-image-placeholder {
  font-size: 12px;
  color: var(--color-text-muted);
}

.edit-image-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 个人主页移动端适配 */
@media (max-width: 600px) {
  .profile-header {
    height: 140px;
  }

  .profile-info {
    flex-wrap: wrap;
  }

  .profile-edit-btn {
    margin: 8px 0 0;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/* ==========================================================================
   在线用户悬浮窗
   ========================================================================== */

/* 悬浮窗容器：固定在右下角，z-index 高于页面内容但低于弹窗 */
.online-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* 触发按钮：胶囊形，带绿点 + 人数 */
.online-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-hover);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.online-toggle:hover {
  background: #fff;
  box-shadow: 0 6px 24px rgba(76, 184, 232, 0.22);
}

/* 绿色在线指示点，带脉冲动画 */
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  flex: 0 0 auto;
  animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  50% { opacity: 0.85; box-shadow: 0 0 0 4px rgba(46, 204, 113, 0); }
}

/* 展开面板 */
.online-panel {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 14px 16px;
  min-width: 160px;
  max-width: 220px;
  animation: fadeInUp 0.2s ease both;
}

.online-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.online-user-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 每条用户名：从右侧滑入 + 淡入，错峰延迟由 JS 写 style */
.online-user-list li {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: userSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  cursor: default;
  border-radius: 6px;
  padding: 2px 4px;
  margin: 0 -4px;
  transition: background 0.2s ease;
}

.online-user-list li:hover {
  background: rgba(76, 184, 232, 0.08);
}

/* 悬停时用户名渐变高亮 */
.online-user-list li:hover .online-name {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes userSlideIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 左侧绿点：彩虹色轮换 + 悬停时跳动 */
.online-user-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  animation: dotRainbow 4s linear infinite;
  transition: transform 0.2s ease;
}

.online-user-list li:hover::before {
  animation: dotRainbow 4s linear infinite, dotBounce 0.5s ease infinite;
}

@keyframes dotRainbow {
  0%   { background: #2ecc71; }
  20%  { background: #4cb8e8; }
  40%  { background: #a78bfa; }
  60%  { background: #ffb6c9; }
  80%  { background: #f5a623; }
  100% { background: #2ecc71; }
}

@keyframes dotBounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-4px); }
  70%       { transform: translateY(-2px); }
}

/* “还有 N 人”汇总行：弱化、无彩虹点、无悬停高亮 */
.online-user-list li.online-more {
  color: var(--color-text-muted);
  font-weight: 400;
}

.online-user-list li.online-more::before {
  display: none;
}

.online-user-list li.online-more:hover {
  background: transparent;
}

.online-guest-line {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}

/* 移动端：悬浮窗缩小到右下角 */
@media (max-width: 600px) {
  .online-widget {
    bottom: 16px;
    right: 16px;
  }

  .online-panel {
    max-width: 180px;
  }
}

/* ==========================================================================
   猫草钱包悬浮窗（货币系统）
   位于在线窗上方、屏幕右侧；面板向上展开，避免与在线窗重叠。
   ========================================================================== */
.wallet-widget {
  position: fixed;
  bottom: 76px;
  right: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
}

/* 触发按钮：胶囊形，带猫草图标 + 余额 */
.wallet-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-hover);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.wallet-toggle:hover {
  background: #fff;
  box-shadow: 0 6px 24px rgba(255, 144, 173, 0.28);
}

.wallet-icon {
  font-size: 15px;
  line-height: 1;
}

.wallet-balance {
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary-dark);
}

/* 余额变动时的高亮跳动 */
@keyframes walletBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); color: var(--color-primary); }
  100% { transform: scale(1); }
}

.wallet-balance.is-bump {
  animation: walletBump 0.5s ease;
}

/* 展开面板：向上展开 */
.wallet-panel {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 14px 16px;
  width: 260px;
  max-width: 78vw;
  animation: fadeInUp 0.2s ease both;
}

.wallet-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.wallet-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.wallet-panel-balance {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-secondary-dark);
  font-variant-numeric: tabular-nums;
}

.wallet-panel-balance::before {
  content: "🌿 ";
  font-size: 15px;
}

/* 面板内标签切换 */
.wallet-tabs {
  display: inline-flex;
  background: #efeff1;
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 12px;
  width: 100%;
}

.wallet-tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.wallet-tab.is-active {
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow);
}

/* 面板内容区：可滚动 */
.wallet-body {
  max-height: 280px;
  overflow-y: auto;
}

.wallet-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* 明细列表 */
.wallet-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-ledger li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.wallet-ledger-note {
  color: var(--color-text);
  line-height: 1.4;
  word-break: break-word;
}

.wallet-ledger-date {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.wallet-ledger-delta {
  flex: 0 0 auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wallet-ledger-delta.is-plus {
  color: #2e9e5b;
}

.wallet-ledger-delta.is-minus {
  color: var(--color-secondary-dark);
}

/* 已购买帖子列表 */
.wallet-unlocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-unlocks li {
  font-size: 13px;
}

.wallet-unlock-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-text);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.wallet-unlock-link:hover {
  background: rgba(76, 184, 232, 0.08);
  color: var(--color-primary-dark);
}

.wallet-unlock-cost {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-secondary-dark);
  font-weight: 700;
}

/* ==========================================================================
   精华帖封面模糊 + 解锁遮罩（货币系统）
   ========================================================================== */
/* 卡片图片容器：用于叠加解锁遮罩 */
.card-image-wrap {
  position: relative;
  overflow: hidden;
}

/* 上锁时封面模糊 */
.card-image.is-locked,
.detail-image.is-locked {
  filter: blur(16px);
  transform: scale(1.06); /* 放大一点，避免模糊后边缘透出 */
}

/* 卡片上的精华徽标（右上角，与审核徽标左上区分） */
.essential-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 999px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* 卡片封面上的解锁遮罩 */
.lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(43, 43, 43, 0.28);
  color: #fff;
  text-align: center;
  pointer-events: none; /* 卡片整体可点击进入详情 */
}

.lock-overlay .lock-emoji {
  font-size: 26px;
}

.lock-overlay .lock-text {
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 详情页：封面上的解锁遮罩（可点击解锁） */
.detail-lock {
  position: relative;
}

.detail-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(43, 43, 43, 0.35);
  color: #fff;
  text-align: center;
  padding: 20px;
}

.detail-lock-overlay .lock-emoji {
  font-size: 40px;
}

.detail-lock-title {
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.detail-lock-sub {
  font-size: 13px;
  opacity: 0.92;
}

/* 详情页正文被锁时的占位提示 */
.detail-locked-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 20px;
  margin: 14px 0;
  text-align: center;
  background: var(--gradient-soft);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.detail-locked-content .lock-emoji {
  font-size: 36px;
}

.detail-locked-text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* 解锁按钮（详情页） */
.btn-unlock {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(255, 144, 173, 0.35);
}

.btn-unlock:hover {
  box-shadow: 0 4px 16px rgba(255, 144, 173, 0.5);
}

/* 钱包窗移动端适配 */
@media (max-width: 600px) {
  .wallet-widget {
    bottom: 70px;
    right: 16px;
  }

  .wallet-panel {
    width: 240px;
  }
}

/* ==========================================================================
   左侧边栏 + 两列布局 + 分类树 + TAG 云 + 搜索 + 筛选状态栏
   ========================================================================== */

/* 两列布局容器 */
.page-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 64px;
}

/* 侧边栏 */
.sidebar {
  position: sticky;
  top: 80px;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 移动端折叠按钮：桌面端隐藏 */
.sidebar-toggle {
  display: none;
}

/* 搜索框 */
.sidebar-search-input {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}

.sidebar-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 侧边栏区块 */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 分类树 */
.cat-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 子分类列表默认收起 */
.cat-subtree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease,
              margin-top 0.2s ease;
}

/* 父项展开时显示子列表 */
.cat-item.is-open > .cat-subtree {
  max-height: 600px; /* 足够大，实际高度由内容决定 */
  opacity: 1;
  margin-top: 2px;
}

@keyframes catExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 每行：箭头 + 名字 */
.cat-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 折叠箭头 */
.cat-arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--color-text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.2s ease;
  user-select: none;
}

.cat-arrow:hover {
  background: rgba(76, 184, 232, 0.12);
  color: var(--color-primary);
}

/* 占位（无子分类时对齐） */
.cat-arrow-placeholder {
  flex: 0 0 auto;
  width: 20px;
}

.cat-item.is-open > .cat-item-row > .cat-arrow {
  color: var(--color-primary);
}

.cat-tree .cat-tree {
  padding-left: 14px;
  margin-top: 2px;
}

.cat-item {
  display: flex;
  flex-direction: column;
}

.cat-item-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.cat-item-label:hover {
  background: rgba(76, 184, 232, 0.08);
  color: var(--color-primary-dark);
}

.cat-item-label.is-active {
  background: rgba(76, 184, 232, 0.14);
  color: var(--color-primary-dark);
  font-weight: 700;
}

.cat-item-label.is-active::before {
  content: "▸";
  font-size: 10px;
  color: var(--color-primary);
}

/* TAG 云 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.tag-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.tag-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 筛选/搜索状态提示栏 */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(76, 184, 232, 0.08);
  border: 1px solid rgba(76, 184, 232, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-primary-dark);
}

.filter-bar-label {
  flex: 1 1 auto;
  font-weight: 600;
}

.filter-bar-clear {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.filter-bar-clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

/* 发帖页 TAG 多选 */
.pub-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.pub-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pub-tag-item:hover {
  border-color: var(--color-primary);
}

.pub-tag-item input[type="checkbox"] {
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* 卡片上的分类/TAG 小标签 */
.card-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(76, 184, 232, 0.12);
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.card-tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* 移动端：侧边栏折叠 */
@media (max-width: 768px) {
  .page-body {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
  }

  .sidebar {
    display: none;
    position: static;
    margin-bottom: 16px;
  }

  .sidebar.is-open {
    display: flex;
  }
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ==========================================================================
   ✦ CUTE REDESIGN — 主页卡片 + 帖子详情 可爱风格重构
   覆盖上方同名规则，保持其他页面不受影响。
   设计原则：黄金比例排版 · 圆润圆角 · 柔和配色 · 丰富微动画
   ========================================================================== */

/* ---------- 增强设计变量 ---------- */
:root {
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-sm: 10px;
  --shadow-card: 0 4px 24px rgba(76, 184, 232, 0.13), 0 1px 4px rgba(255, 182, 201, 0.10);
  --shadow-card-hover: 0 12px 40px rgba(76, 184, 232, 0.22), 0 4px 12px rgba(255, 144, 173, 0.18);
  --shadow-modal: 0 20px 60px rgba(44, 62, 80, 0.18), 0 4px 16px rgba(76, 184, 232, 0.12);
  --color-surface: #fafcff;
  --color-pink-soft: #fff0f5;
  --color-blue-soft: #edf7fd;
  --gradient-card-top: linear-gradient(180deg, rgba(76,184,232,0.06) 0%, transparent 60%);
  --gradient-hero: linear-gradient(135deg, #e8f6fd 0%, #fce8f0 50%, #f0f4ff 100%);
  --font-display: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- 页面背景升级 ---------- */
body {
  background: var(--gradient-hero);
  background-attachment: fixed;
}

/* ---------- 顶部导航升级 ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(76, 184, 232, 0.12);
}

.site-header::after {
  height: 2px;
  background: linear-gradient(90deg, #4cb8e8 0%, #ffb6c9 50%, #a78bfa 100%);
}

.logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Hero 区升级 ---------- */
.hero {
  padding: 56px 0 40px;
  text-align: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(76,184,232,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.hero-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #4cb8e8 0%, #ff90ad 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTitleIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0;
  animation: heroSubIn 0.7s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

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

/* ---------- 卡片网格 ---------- */
.feed-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

/* ---------- 卡片主体 ---------- */
.card {
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(76, 184, 232, 0.08);
  transition: box-shadow 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s ease;
  overflow: visible; /* 允许 hover 时阴影溢出 */
}

/* 卡片内容需要 overflow hidden，但 article 本身 overflow visible */
.card-image-wrap {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(76, 184, 232, 0.22);
}

.card:focus-visible {
  outline: 2.5px solid var(--color-primary);
  outline-offset: 3px;
}

/* 卡片入场动画升级 */
.card {
  animation: cardPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardPop {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card:nth-child(1)  { animation-delay: 0.04s; }
.card:nth-child(2)  { animation-delay: 0.09s; }
.card:nth-child(3)  { animation-delay: 0.14s; }
.card:nth-child(4)  { animation-delay: 0.19s; }
.card:nth-child(5)  { animation-delay: 0.24s; }
.card:nth-child(6)  { animation-delay: 0.29s; }
.card:nth-child(7)  { animation-delay: 0.34s; }
.card:nth-child(8)  { animation-delay: 0.39s; }

/* ---------- 卡片图片 ---------- */
.card-image {
  aspect-ratio: 16 / 10;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover .card-image {
  transform: scale(1.04);
}

.card-image-empty {
  aspect-ratio: 16 / 10;
  background: var(--gradient-soft);
  font-size: 40px;
  color: rgba(76, 184, 232, 0.35);
}

/* ---------- 卡片内容区 ---------- */
.card-body {
  padding: 14px 16px 16px;
  gap: 0;
  /* 黄金比例内边距：上14 左右16 下16 */
}

/* 分类标签 */
.card-category {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(76,184,232,0.15) 0%, rgba(167,139,250,0.12) 100%);
  color: var(--color-primary-dark);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}

/* 标题 */
.card-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 6px;
  color: #1a1a2e;
  letter-spacing: -0.1px;
  -webkit-line-clamp: 2;
}

/* 摘要 */
.card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #7a8499;
  margin: 0 0 10px;
  -webkit-line-clamp: 2;
}

/* TAG 小标签 */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.card-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-pink-soft);
  color: var(--color-secondary-dark);
  border: 1px solid rgba(255, 144, 173, 0.2);
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}

.card:hover .card-tag {
  background: rgba(255, 144, 173, 0.18);
}

/* 作者行 */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.card-author-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.avatar-xs {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(76, 184, 232, 0.25);
  box-shadow: 0 1px 4px rgba(76, 184, 232, 0.15);
  transition: transform 0.2s ease;
}

.card:hover .avatar-xs {
  transform: scale(1.12);
}

.card-no {
  font-size: 11px;
  color: #bcc5d0;
  font-family: ui-monospace, monospace;
}

/* 底部统计栏 */
.card-footer {
  padding-top: 10px;
  border-top: 1px solid rgba(76, 184, 232, 0.08);
  margin-top: auto;
}

.card-rating {
  font-size: 12.5px;
  font-weight: 700;
  color: #ff90ad;
  display: flex;
  align-items: center;
  gap: 3px;
}

.card-rating.muted {
  color: #c8d0da;
  font-weight: 400;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-actions .stat {
  font-size: 12px;
  color: #b0bac8;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.card-actions .stat.on {
  color: var(--color-primary);
  font-weight: 700;
}

.card:hover .card-actions .stat {
  color: #8fa8c0;
}

/* 精华徽标升级 */
.essential-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ff90ad 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(255, 144, 173, 0.4);
  letter-spacing: 0.03em;
  animation: badgeShimmer 3s ease-in-out infinite;
}

@keyframes badgeShimmer {
  0%, 100% { box-shadow: 0 2px 8px rgba(255, 144, 173, 0.4); }
  50%       { box-shadow: 0 2px 16px rgba(255, 215, 0, 0.5); }
}

/* 审核状态徽标 */
.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

/* ---------- 帖子详情弹窗 ---------- */
.modal-overlay {
  background: rgba(20, 30, 48, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  border-radius: 24px;
  box-shadow: var(--shadow-modal);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-wide {
  max-width: 680px;
}

.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(76, 184, 232, 0.1);
  background: linear-gradient(180deg, rgba(76,184,232,0.04) 0%, transparent 100%);
  border-radius: 24px 24px 0 0;
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.2px;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(76, 184, 232, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.modal-close:hover {
  background: rgba(255, 144, 173, 0.15);
  color: var(--color-secondary-dark);
  transform: rotate(90deg);
}

/* 详情图片 */
.detail-image {
  max-height: 340px;
  border-radius: 0;
  display: block;
  width: 100%;
  object-fit: cover;
}

/* 详情主体 */
.detail-main {
  padding: 20px 24px 24px;
}

/* 详情元信息行 */
.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(76, 184, 232, 0.08);
}

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(76, 184, 232, 0.2);
  box-shadow: 0 2px 8px rgba(76, 184, 232, 0.15);
}

.detail-author {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a2e;
}

/* 互动栏 */
.detail-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(76, 184, 232, 0.08);
  border-bottom: 1px solid rgba(76, 184, 232, 0.08);
  margin: 16px 0;
}

.react-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(76, 184, 232, 0.15);
  background: var(--color-blue-soft);
  font-size: 14px;
  font-weight: 600;
  color: #7a8499;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.react-btn:hover {
  border-color: var(--color-primary);
  background: rgba(76, 184, 232, 0.1);
  color: var(--color-primary-dark);
  transform: scale(1.05);
}

.react-btn.on {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 12px rgba(76, 184, 232, 0.35);
}

.react-btn.on:hover {
  transform: scale(1.07);
  box-shadow: 0 5px 18px rgba(76, 184, 232, 0.45);
}

/* 评分区 */
.detail-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-pink-soft);
  border: 1.5px solid rgba(255, 144, 173, 0.15);
}

.rating-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary-dark);
}

.stars {
  font-size: 18px;
  color: #e0e8f0;
  display: inline-flex;
  gap: 1px;
}

.stars .star.on {
  color: #ffc107;
  text-shadow: 0 1px 4px rgba(255, 193, 7, 0.4);
}

.stars .star[data-score] {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}

.stars .star[data-score]:hover {
  transform: scale(1.3);
  color: #ffc107;
}

.rating-avg {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---------- 评论区 ---------- */
.comments {
  margin-top: 20px;
}

.comments-title {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comments-title::before {
  content: "💬";
  font-size: 16px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px;
  background: var(--color-blue-soft);
  border-radius: 16px;
  border: 1.5px solid rgba(76, 184, 232, 0.12);
}

.comment-form .text-input {
  border-radius: 12px;
  border: 1.5px solid rgba(76, 184, 232, 0.15);
  background: #fff;
  font-size: 14px;
  resize: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-form .text-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(76, 184, 232, 0.12);
}

.comment-form .btn {
  align-self: flex-end;
  border-radius: var(--radius-pill);
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comment {
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  transition: background 0.15s ease;
  animation: commentIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.comment:hover {
  background: var(--color-blue-soft);
}

@keyframes commentIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.comment-author-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-author-wrap .avatar-xs {
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(76, 184, 232, 0.2);
}

.comment-author {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
}

.comment-date {
  font-size: 11px;
  color: #c0c8d4;
}

.comment-text {
  font-size: 14px;
  line-height: 1.65;
  color: #4a5568;
  margin: 0;
  padding-left: 34px; /* 与头像对齐 */
  white-space: pre-wrap;
}

.comment-empty {
  padding: 24px 0;
  text-align: center;
  color: #c0c8d4;
  font-size: 14px;
}

.comment-login-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-pink-soft);
  border-radius: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* ---------- 空状态升级 ---------- */
.empty-state {
  padding: 64px 20px;
  text-align: center;
}

.empty-emoji {
  font-size: 52px;
  margin: 0 0 14px;
  animation: emptyBounce 2s ease-in-out infinite;
}

@keyframes emptyBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ---------- 加载动画升级 ---------- */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(76, 184, 232, 0.15);
  border-top-color: var(--color-primary);
  border-right-color: var(--color-secondary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ---------- 按钮升级 ---------- */
.btn-primary {
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 14px rgba(76, 184, 232, 0.28);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(255, 144, 173, 0.38);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-outline {
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.btn-ghost {
  border-radius: var(--radius-pill);
}

/* ---------- 侧边栏升级 ---------- */
.sidebar {
  border-radius: 20px;
  border: 1px solid rgba(76, 184, 232, 0.1);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

.sidebar-search-input {
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(76, 184, 232, 0.15);
  background: var(--color-blue-soft);
  font-size: 13px;
  padding: 9px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sidebar-search-input:focus {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(76, 184, 232, 0.1);
}

.cat-item-label {
  border-radius: 10px;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cat-item-label:hover {
  transform: translateX(3px);
}

.tag-chip {
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tag-chip:hover {
  transform: scale(1.08) translateY(-1px);
}

.tag-chip.is-active {
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(76, 184, 232, 0.3);
}

/* ---------- 筛选状态栏升级 ---------- */
.filter-bar {
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(76,184,232,0.08) 0%, rgba(255,144,173,0.06) 100%);
  border: 1.5px solid rgba(76, 184, 232, 0.15);
  animation: filterBarIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes filterBarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 移动端适配 ---------- */

/* 手机（≤600px）：双列卡片 + 底部弹出弹窗 */
@media (max-width: 600px) {
  .hero-title { font-size: 26px; }
  .hero { padding: 32px 0 24px; }

  /* 双列卡片 */
  .feed-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* 卡片内容紧凑化 */
  .card-body { padding: 10px 11px 12px; }
  .card-title { font-size: 13px; -webkit-line-clamp: 2; }
  .card-desc { font-size: 12px; -webkit-line-clamp: 2; margin-bottom: 6px; }
  .card-meta { margin-bottom: 6px; }
  .card-footer { padding-top: 7px; }
  .card-rating { font-size: 11.5px; }
  .card-actions { gap: 7px; }
  .card-actions .stat { font-size: 11px; }
  .card-tags { gap: 3px; margin-bottom: 6px; }
  .card-tag { font-size: 10px; padding: 1px 6px; }
  .card-category { font-size: 10px; padding: 1px 7px; margin-bottom: 5px; }
  .avatar-xs { width: 18px; height: 18px; }

  /* 弹窗从底部滑入 */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { border-radius: 20px 20px 0 0; max-height: 92vh; }
  .modal-wide { max-width: 100%; }
  .detail-main { padding: 14px 16px 20px; }
}

/* 小平板（601px–900px）：自动 2–3 列 */
@media (min-width: 601px) and (max-width: 900px) {
  .feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

/* 中等屏幕（901px–1200px）：自动 3–4 列 */
@media (min-width: 901px) and (max-width: 1200px) {
  .feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
  }
}

/* ---------- 减少左右空白 ---------- */

/* 大屏（>1200px）：内容区更宽，左右留白更小 */
@media (min-width: 1201px) {
  :root { --max-width: 1480px; }
  .feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
  }
  .container { padding: 0 12px; }
}

/* 中等屏幕（901–1200px） */
@media (min-width: 901px) and (max-width: 1200px) {
  .container { padding: 0 12px; }
}

/* 小平板（601–900px） */
@media (min-width: 601px) and (max-width: 900px) {
  .container { padding: 0 10px; }
}

/* 手机（≤600px）：左右留白最小 */
@media (max-width: 600px) {
  .container { padding: 0 8px; }
}

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .card, .card-image, .react-btn, .tag-chip, .btn-primary,
  .empty-emoji, .essential-badge, .comment {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   暗色模式 — [data-theme="dark"]
   覆盖所有 CSS 变量，其余颜色通过变量自动适配。
   ========================================================================== */

/* ── 1. 变量覆盖 ── */
[data-theme="dark"] {
  --color-primary:       #5cc8f5;
  --color-primary-dark:  #7dd8f8;
  --color-secondary:     #ff9ab5;
  --color-secondary-dark:#ffb3c8;
  --color-text:          #e8edf2;
  --color-text-muted:    #8a9ab0;
  --color-border:        #2a3444;
  --color-bg:            #0f1520;
  --color-card:          #1a2233;
  --color-surface:       #1e2840;
  --color-blue-soft:     #1a2840;
  --color-pink-soft:     #2a1e28;
  --gradient-primary:    linear-gradient(135deg, #5cc8f5 0%, #ff9ab5 100%);
  --gradient-soft:       linear-gradient(135deg, #1a2840 0%, #2a1e28 100%);
  --gradient-hero:       linear-gradient(135deg, #0f1a28 0%, #1a1028 50%, #0f1520 100%);
  --gradient-card-top:   linear-gradient(180deg, rgba(92,200,245,0.06) 0%, transparent 60%);
  --shadow:              0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-hover:        0 6px 24px rgba(0, 0, 0, 0.55);
  --shadow-card:         0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:   0 12px 40px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(92,200,245,0.15);
  --shadow-modal:        0 20px 60px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ── 2. 页面背景 ── */
[data-theme="dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* ── 3. 顶部导航 ── */
[data-theme="dark"] .site-header {
  background: rgba(15, 21, 32, 0.88);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .logo {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 4. 按钮 ── */
[data-theme="dark"] .btn-ghost {
  color: var(--color-text-muted);
}
[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text);
}
[data-theme="dark"] .btn-outline {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme="dark"] .btn-outline:hover {
  background: var(--color-primary);
  color: #0f1520;
}

/* ── 5. 卡片 ── */
[data-theme="dark"] .card {
  background: var(--color-card);
  border-color: var(--color-border);
}
[data-theme="dark"] .card-title { color: #dde4ee; }
[data-theme="dark"] .card-desc  { color: var(--color-text-muted); }
[data-theme="dark"] .card-footer { border-top-color: var(--color-border); }
[data-theme="dark"] .card-image-empty { background: #1e2840; color: rgba(92,200,245,0.25); }
[data-theme="dark"] .card-tag {
  background: rgba(255, 154, 181, 0.12);
  border-color: rgba(255, 154, 181, 0.2);
  color: var(--color-secondary);
}
[data-theme="dark"] .card-category {
  background: rgba(92, 200, 245, 0.12);
  color: var(--color-primary);
}
[data-theme="dark"] .card-no { color: #3a4a5e; }
[data-theme="dark"] .card-actions .stat { color: #3a4a5e; }
[data-theme="dark"] .card-actions .stat.on { color: var(--color-primary); }

/* ── 6. 弹窗 ── */
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .modal {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .modal-header {
  background: linear-gradient(180deg, rgba(92,200,245,0.05) 0%, transparent 100%);
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .modal-title { color: #dde4ee; }
[data-theme="dark"] .modal-close { background: rgba(255,255,255,0.06); color: var(--color-text-muted); }
[data-theme="dark"] .modal-close:hover { background: rgba(255,154,181,0.15); color: var(--color-secondary); }
[data-theme="dark"] .modal-action-btn { background: rgba(255,255,255,0.06); color: var(--color-text-muted); }
[data-theme="dark"] .modal-action-btn:hover { background: rgba(92,200,245,0.12); color: var(--color-primary); }

/* ── 7. 详情页 ── */
[data-theme="dark"] .detail-meta { border-bottom-color: var(--color-border); }
[data-theme="dark"] .detail-bar  { border-color: var(--color-border); }
[data-theme="dark"] .detail-author { color: #dde4ee; }
[data-theme="dark"] .detail-desc { color: var(--color-text-muted); }
[data-theme="dark"] .detail-content { color: var(--color-text); }
[data-theme="dark"] .detail-link { color: var(--color-primary); }
[data-theme="dark"] .detail-notice { background: #2a2010; color: #d4a84b; }
[data-theme="dark"] .detail-notice-rejected { background: #2a1010; color: #e07070; }

/* ── 8. 互动按钮 ── */
[data-theme="dark"] .react-btn {
  background: rgba(92,200,245,0.07);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
[data-theme="dark"] .react-btn:hover {
  border-color: var(--color-primary);
  background: rgba(92,200,245,0.14);
  color: var(--color-primary);
}
[data-theme="dark"] .react-btn.on {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #0f1520;
}
[data-theme="dark"] .detail-rating {
  background: rgba(255,154,181,0.1);
  border-color: rgba(255,154,181,0.15);
}

/* ── 9. 评论区 ── */
[data-theme="dark"] .comment:hover { background: rgba(92,200,245,0.05); }
[data-theme="dark"] .comment-author { color: #dde4ee; }
[data-theme="dark"] .comment-text   { color: var(--color-text-muted); }
[data-theme="dark"] .comment-date   { color: #2a3a50; }
[data-theme="dark"] .comment-form {
  background: rgba(92,200,245,0.05);
  border-color: var(--color-border);
}
[data-theme="dark"] .comment-form .text-input {
  background: #0f1520;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .comment-login-tip { background: rgba(255,154,181,0.08); }

/* ── 10. 表单 & 输入框 ── */
[data-theme="dark"] .text-input,
[data-theme="dark"] .file-input {
  background: #0f1520;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .text-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(92,200,245,0.15);
}
/* 排序下拉：与暗色下的输入框保持同一深背景，避免成为偏亮的卡片色色块 */
[data-theme="dark"] .feed-sort {
  background: #0f1520;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .form-label { color: var(--color-text); }
[data-theme="dark"] .form-error { color: var(--color-secondary); }

/* ── 11. 侧边栏 ── */
[data-theme="dark"] .sidebar {
  background: rgba(26, 34, 51, 0.92);
  border-color: var(--color-border);
}
[data-theme="dark"] .sidebar-search-input {
  background: #0f1520;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .sidebar-search-input:focus {
  background: #0f1520;
  border-color: var(--color-primary);
}
[data-theme="dark"] .cat-item-label { color: var(--color-text); }
[data-theme="dark"] .cat-item-label:hover { background: rgba(92,200,245,0.08); }
[data-theme="dark"] .cat-item-label.is-active { background: rgba(92,200,245,0.14); }
[data-theme="dark"] .cat-arrow { color: var(--color-text-muted); }
[data-theme="dark"] .cat-arrow:hover { background: rgba(92,200,245,0.1); color: var(--color-primary); }
[data-theme="dark"] .cat-item.is-open > .cat-item-row > .cat-arrow { color: var(--color-primary); }
[data-theme="dark"] .tag-chip {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
[data-theme="dark"] .tag-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
[data-theme="dark"] .tag-chip.is-active { background: var(--gradient-primary); color: #0f1520; }

/* ── 12. 筛选状态栏 ── */
[data-theme="dark"] .filter-bar {
  background: rgba(92,200,245,0.07);
  border-color: rgba(92,200,245,0.15);
  color: var(--color-primary);
}

/* 切换标签（全部 / 我的发帖 / 我的收藏，及登录注册弹窗）：
   亮色下容器是浅灰、激活态是白底，暗色下改用深色底以贴合页面背景 */
[data-theme="dark"] .tabs {
  background: #0f1520;
}
[data-theme="dark"] .tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
}

/* ── 13. 悬浮窗（在线/钱包） ── */
[data-theme="dark"] .online-toggle,
[data-theme="dark"] .wallet-toggle {
  background: rgba(26,34,51,0.92);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .online-panel,
[data-theme="dark"] .wallet-panel {
  background: rgba(26,34,51,0.97);
  border-color: var(--color-border);
}
[data-theme="dark"] .online-user-list li { color: var(--color-text); }
[data-theme="dark"] .wallet-panel-head { border-bottom-color: var(--color-border); }
[data-theme="dark"] .wallet-tab { color: var(--color-text-muted); }
[data-theme="dark"] .wallet-tab.is-active { background: #0f1520; color: var(--color-primary); }
[data-theme="dark"] .wallet-ledger li { color: var(--color-text); }
[data-theme="dark"] .wallet-ledger-note { color: var(--color-text); }
[data-theme="dark"] .wallet-guest-line { border-top-color: var(--color-border); }

/* ── 14. 发布页 ── */
[data-theme="dark"] .publish-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
}
[data-theme="dark"] .rte-wrap { border-color: var(--color-border); }
[data-theme="dark"] .rte-toolbar {
  background: #1a2233;
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .rte-btn {
  background: rgba(255,255,255,0.05);
  color: var(--color-text-muted);
}
[data-theme="dark"] .rte-btn:hover {
  background: rgba(92,200,245,0.12);
  border-color: rgba(92,200,245,0.3);
  color: var(--color-primary);
}
[data-theme="dark"] .rte-btn.is-active {
  background: var(--color-primary);
  color: #0f1520;
}
[data-theme="dark"] .rte-select {
  background: rgba(255,255,255,0.05);
  color: var(--color-text-muted);
}
[data-theme="dark"] .rte-select:hover,
[data-theme="dark"] .rte-select:focus {
  background: rgba(92,200,245,0.1);
  border-color: rgba(92,200,245,0.3);
}
[data-theme="dark"] .rte-editor {
  background: #0f1520;
  color: var(--color-text);
}
[data-theme="dark"] .rte-editor:empty::before { color: #3a4a5e; }
[data-theme="dark"] .rte-editor blockquote {
  background: rgba(92,200,245,0.07);
  border-left-color: var(--color-primary);
  color: var(--color-text-muted);
}
[data-theme="dark"] .rte-editor pre { background: #0a0f1a; color: #c8d8e8; }
[data-theme="dark"] .rte-editor code { background: rgba(92,200,245,0.1); color: var(--color-primary); }
[data-theme="dark"] .rte-editor th { background: #1a2840; border-color: var(--color-border); }
[data-theme="dark"] .rte-editor td { border-color: var(--color-border); }
[data-theme="dark"] .rte-editor tr:nth-child(even) td { background: rgba(92,200,245,0.03); }
[data-theme="dark"] .rte-editor hr { border-top-color: var(--color-border); }
[data-theme="dark"] .rte-footer {
  background: #1a2233;
  border-top-color: var(--color-border);
}

/* ── 15. 个人主页 ── */
[data-theme="dark"] .profile-card { background: var(--color-card); }
[data-theme="dark"] .profile-header { background: linear-gradient(135deg, #1a2840 0%, #2a1e28 100%); }
[data-theme="dark"] .profile-nickname { color: #dde4ee; }
[data-theme="dark"] .profile-username { color: var(--color-text-muted); }
[data-theme="dark"] .profile-bio { color: var(--color-text-muted); }
[data-theme="dark"] .profile-avatar { border-color: var(--color-card); }
[data-theme="dark"] .profile-stat { color: var(--color-text-muted); }
[data-theme="dark"] .profile-stat strong { color: #dde4ee; }
[data-theme="dark"] .profile-social-section { background: var(--color-card); }
[data-theme="dark"] .profile-social-tab { color: var(--color-text-muted); }
[data-theme="dark"] .profile-social-tab.is-active { color: var(--color-primary); }
[data-theme="dark"] .social-user-name { color: #dde4ee; }
[data-theme="dark"] .social-user-item { border-color: var(--color-border); }

/* ── 16. 后台管理 ── */
[data-theme="dark"] .admin-header {
  background: rgba(15,21,32,0.92);
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .admin-panel { background: var(--color-card); }
[data-theme="dark"] .admin-tab { color: var(--color-text-muted); }
[data-theme="dark"] .admin-tab:hover { background: rgba(92,200,245,0.08); color: var(--color-primary); }
[data-theme="dark"] .admin-tab.is-active { background: var(--color-primary); color: #0f1520; }
[data-theme="dark"] .admin-table th { background: #1a2840; color: var(--color-text-muted); }
[data-theme="dark"] .admin-table td { border-bottom-color: var(--color-border); }
[data-theme="dark"] .admin-table tbody tr:hover { background: rgba(92,200,245,0.05); }
[data-theme="dark"] .admin-comment {
  background: var(--color-card);
  border-color: var(--color-border);
}
[data-theme="dark"] .admin-comment-text { color: var(--color-text); }
[data-theme="dark"] .admin-settings-form .text-input { background: #0f1520; }
[data-theme="dark"] .admin-check-field {
  background: rgba(92,200,245,0.05);
  border-color: var(--color-border);
}
[data-theme="dark"] .admin-msg.is-ok { background: rgba(92,200,245,0.1); }
[data-theme="dark"] .admin-msg.is-error { background: rgba(220,80,80,0.12); }
[data-theme="dark"] .tax-panel { background: rgba(92,200,245,0.04); border-color: var(--color-border); }
[data-theme="dark"] .tax-item-row,
[data-theme="dark"] .tax-tag-item { background: #0f1520; border-color: var(--color-border); }
[data-theme="dark"] .tax-item-name,
[data-theme="dark"] .tax-tag-name { color: var(--color-text); }

/* ── 17. 页脚 ── */
[data-theme="dark"] .site-footer { border-top-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .admin-footer { color: var(--color-text-muted); }

/* ── 18. 暗色模式切换按钮 ── */
.dark-toggle-btn {
  font-size: 16px;
  padding: 6px 8px;
  line-height: 1;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dark-toggle-btn:hover {
  background: rgba(92,200,245,0.12);
  transform: rotate(20deg) scale(1.1);
}
[data-theme="dark"] .dark-toggle-btn:hover {
  background: rgba(255,220,100,0.15);
}

/* ==========================================================================
   帖子详情弹窗：内置滚动条 + 全屏模式
   ========================================================================== */

/* modal-header 右侧操作区（全屏按钮 + 关闭按钮） */
.modal-header {
  flex-shrink: 0; /* 固定不随内容滚动 */
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 全屏/关闭等操作按钮统一样式 */
.modal-action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(76, 184, 232, 0.08);
  color: var(--color-text-muted);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  line-height: 1;
}

.modal-action-btn:hover {
  background: rgba(76, 184, 232, 0.16);
  color: var(--color-primary-dark);
  transform: scale(1.1);
}

/* detail-body：内置滚动，不让整个 modal 滚动 */
.detail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 自定义滚动条（Webkit） */
  scrollbar-width: thin;
  scrollbar-color: rgba(76, 184, 232, 0.25) transparent;
}

.detail-body::-webkit-scrollbar {
  width: 5px;
}

.detail-body::-webkit-scrollbar-track {
  background: transparent;
}

.detail-body::-webkit-scrollbar-thumb {
  background: rgba(76, 184, 232, 0.25);
  border-radius: 999px;
}

.detail-body::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 184, 232, 0.45);
}

/* 全屏模式：modal 撑满整个视口 */
.modal.is-fullscreen {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100vw;
  height: 100vh;
  border-radius: 0 !important;
  margin: 0;
}

/* 全屏时遮罩不需要 padding */
.modal-overlay:has(.is-fullscreen) {
  padding: 0;
  align-items: stretch;
}

/* 全屏时 detail-body 撑满剩余高度 */
.modal.is-fullscreen .detail-body {
  flex: 1 1 auto;
}

/* 全屏时 detail-image 可以更高 */
.modal.is-fullscreen .detail-image {
  max-height: 480px;
}

/* 全屏进入/退出动画 */
.modal {
  transition: border-radius 0.25s ease, max-width 0.25s ease, max-height 0.25s ease;
}

/* 暗色模式滚动条 */
[data-theme="dark"] .detail-body {
  scrollbar-color: rgba(92, 200, 245, 0.2) transparent;
}

[data-theme="dark"] .detail-body::-webkit-scrollbar-thumb {
  background: rgba(92, 200, 245, 0.2);
}

[data-theme="dark"] .detail-body::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 200, 245, 0.4);
}

/* 移动端全屏时也撑满 */
@media (max-width: 600px) {
  .modal.is-fullscreen {
    border-radius: 0 !important;
  }
}

/* ---------- 审核未通过原因弹窗 ---------- */
.rr-body {
  padding: 20px 24px 24px;
}

.rr-post-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.rr-label {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.rr-reason {
  background: #fff5f5;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: #c0392b;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 12px;
}

[data-theme="dark"] .rr-reason {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.4);
  color: #ff8080;
}

.rr-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

/* ---------- 公告横幅 ---------- */
.announcement-bar {
  background: linear-gradient(90deg, #fff8e1 0%, #fff3cd 100%);
  border-bottom: 1px solid #ffe082;
  padding: 10px 0;
}

.announcement-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.announcement-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.announcement-text {
  flex: 1 1 auto;
  font-size: 14px;
  color: #5a4000;
  line-height: 1.5;
  word-break: break-word;
}

.announcement-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #999;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

.announcement-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

[data-theme="dark"] .announcement-bar {
  background: linear-gradient(90deg, #2a2200 0%, #332900 100%);
  border-bottom-color: #5a4500;
}

[data-theme="dark"] .announcement-text {
  color: #ffd97a;
}

[data-theme="dark"] .announcement-close {
  color: #888;
}