/* ============================================================
 * Recallish 社区页样式（独立文件，v76）
 * - 抽出后社区页 HTML 体积 ~50KB → ~10KB，首屏渲染更快
 * - WKWebView 缓存 CSS 后第二次访问近乎秒开
 * - 完整暗色模式适配（html[data-theme="dark"]）
 * - iOS WKWebView 触屏基线 + skeleton 占位动画
 * ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ---- iOS WKWebView 触屏跟手基线 ---- */
html, body, * { -webkit-tap-highlight-color: transparent; }
button, a, .tab, .chip, .sort-btns button, .filter-toggle, .lang-btn, .back, .load-more, .reason-item, .more-item {
  touch-action: manipulation;
}
body { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }

/* ---- 嵌入模式（?embed=1）：隐藏自带顶栏 ---- */
html.embed .topbar { display: none; }
/* v107：不再给 body 补 env(safe-area-inset-top)。
 *
 * 宿主 index.html 的 .topbar 已经吃掉了刘海区域
 * （App 内它是 padding-top: calc(10px + env(safe-area-inset-top))，整条 90pt 里含 47pt 安全区），
 * iframe 顶在它下面还再加一次，就是重复计算。真机截图实测：顶栏底边 y=270、
 * 横幅顶边 y=441，中间 171px(=57pt) = 47pt 安全区 + 10pt hero 外边距，正是这 47pt 的空白。
 * 去掉后与非嵌入模式一致（页面自带顶栏 → hero 只隔 10px），非嵌入模式不受影响。 */
html.embed body { padding-top: 0; }

/* ============================================================
 * 主题变量（浅色默认；dark 覆盖见末尾 html[data-theme="dark"]）
 * ============================================================ */
:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #f5f6fa;          /* more-pop / toast 等次级面板 */
  --border: #e4e7ee;
  --border-strong: #d3d8e3;
  --text: #23272f;
  --text-2: #444c5c;
  --muted: #8a92a3;
  --primary: #4f6ef7;
  --primary-dark: #3b57d8;
  --primary-bg: #eef1ff;        /* primary 浅底（chip.active / reason-item.selected） */
  --primary-bg-hover: #f6f8ff;
  --red: #e5484d;
  --red-bg: #fdeaea;
  --red-bg-strong: #fbd5d5;
  --red-bg-hover: #fdf0f1;
  --green: #2f9e6e;
  --orange: #d9822b;
  --chip-bg: #eef0f6;           /* .badge 默认底 */
  --tag-bg: #f1f3f8;            /* .tag 底 */
  --hover: #fafbfd;
  --hover-strong: #f0f2f8;
  --shadow: 0 8px 24px rgba(20, 30, 60, 0.14);
  --shadow-sm: 0 2px 10px rgba(30, 40, 70, 0.07);
  --mask: rgba(20, 24, 38, 0.45);
  --skeleton: #ebedf3;          /* skeleton 占位色 */
  --skeleton-2: #f4f6fb;        /* skeleton 渐变高光 */
  --radius: 16px;
  --gradient-hero: linear-gradient(135deg, #4f6ef7 0%, #7c5cf0 55%, #9b5cf0 100%);
  color-scheme: light;
}

body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ============================================================
 * 顶栏
 * ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-size: 17px; font-weight: 700; color: var(--primary); }
.topbar .brand-icon { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.topbar .right { display: flex; align-items: center; gap: 14px; }
.topbar .back { color: var(--muted); text-decoration: none; font-size: 13px; }
.topbar .back:hover { color: var(--primary); }

.lang-btn {
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.lang-btn:hover { color: var(--primary); border-color: var(--primary); }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px 60px; }

/* ============================================================
 * Hero
 * ============================================================ */
.hero {
  margin: 22px 0 20px; padding: 30px 32px 26px; border-radius: 20px; color: #fff;
  background: var(--gradient-hero);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255, 255, 255, .09);
}
.hero::before {
  content: ''; position: absolute; right: 70px; bottom: -90px; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(255, 255, 255, .07);
}
.hero h1 { font-size: 24px; font-weight: 800; letter-spacing: .3px; }
.hero .sub { font-size: 13.5px; opacity: .85; margin-top: 6px; line-height: 1.7; }
.hero .stats { display: flex; gap: 26px; margin-top: 20px; flex-wrap: wrap; }
.hero .stat .num { font-size: 21px; font-weight: 800; }
.hero .stat .lbl { font-size: 12px; opacity: .8; margin-top: 2px; }

/* ============================================================
 * 控制区
 * ============================================================ */
.controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
/* v108：搜索框只留图标。包成了 <label for>，整块都可点（cursor:text 提示可输入）。 */
.search {
  display: flex; align-items: center; gap: 8px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; min-width: 250px; flex: 1;
  cursor: text;
}
.search .search-ic { font-size: 15px; line-height: 1; flex-shrink: 0; }
.search input { border: none; outline: none; background: none; padding: 11px 0; font-size: 14px; width: 100%; color: var(--text); }
.search:focus-within { border-color: var(--primary); }
.sort-btns { display: flex; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
/* v108：按钮只剩一个 emoji，所以字号提到 15px 保证图标不缩水，横向内边距给足点击面积 */
.sort-btns button {
  border: none; background: none; padding: 9px 14px; font-size: 15px; line-height: 1.2;
  cursor: pointer; color: var(--muted); font-weight: 600;
}
.sort-btns button.active { background: var(--primary); color: #fff; }

.tabs { display: flex; gap: 8px; }
.tab {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--panel); cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600;
  transition: color .15s, background-color .15s, transform 80ms ease-out;
}
.tab:active { transform: scale(.96); }
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.filter-toggle {
  display: none;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  /* v108：只剩一个图标，字号与排序按钮对齐（15px），并给足点击面积 */
  border-radius: 10px; padding: 9px 13px; font-size: 15px; line-height: 1.2;
  cursor: pointer; font-weight: 600;
}
.filter-toggle.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* v108：筛选用内联 SVG 漏斗（不吃 currentColor 的 emoji 在蓝底上发闷），尺寸对齐兄弟 emoji */
.filter-toggle svg { width: 18px; height: 18px; display: block; }
.filter-panel { transition: max-height .2s ease, opacity .18s ease, margin .2s ease; }
.filter-panel .lang-row { margin: 4px 0 12px; }

/* 语言筛选 */
.lang-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.chip {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--panel); cursor: pointer; font-size: 12.5px; color: var(--muted);
  transition: .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* ============================================================
 * 卡片网格
 * ============================================================ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: .18s; display: flex; flex-direction: column; cursor: pointer;
  /* v75/v76：长列表 GPU 虚拟化 */
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(79, 110, 247, .12); border-color: rgba(79, 110, 247, .35); }
.card:active { transform: scale(.98); transition-duration: 60ms; }
/* v104：卡片支持长按弹操作面板 —— 关掉 iOS 原生长按气泡（「拷贝 / 在新标签页打开」），
   否则长按会先冒出系统菜单把我们的面板挤掉。只影响长按，点按照常。 */
.card { -webkit-touch-callout: none; }
.cover {
  height: 76px; position: relative; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; font-weight: 800; letter-spacing: 1px;
}
.cover .lang-emoji { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 24px; opacity: .95; }
.cover .cover-letter { font-size: 32px; font-weight: 900; opacity: .35; position: absolute; right: 14px; bottom: 4px; }
.card-body { padding: 14px 16px 14px; display: flex; flex-direction: column; flex: 1; }
.card .name { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.badge { font-size: 11px; background: var(--chip-bg); color: var(--muted); padding: 2px 8px; border-radius: 10px; font-weight: 400; }
.badge.official { background: var(--primary-bg); color: var(--primary); }
.badge.aud-zh { background: var(--red-bg); color: var(--red); }
.badge.aud-en { background: #eaf0ff; color: var(--primary); }

.tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; min-height: 20px; }
.tag { font-size: 11.5px; background: var(--tag-bg); color: var(--muted); padding: 2px 9px; border-radius: 10px; }

.meta { font-size: 12.5px; color: var(--muted); margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.meta .exp { color: var(--orange); }

.ops { display: flex; gap: 6px; margin-top: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; border-radius: 10px; padding: 8px 14px; font-size: 12.5px;
  cursor: pointer; font-weight: 600; text-decoration: none; transition: .15s;
}
.btn:active { transform: scale(.96); transition-duration: 50ms; }
.btn.icon {
  width: 34px; height: 34px; padding: 0; justify-content: center;
  font-size: 14px; border-radius: 9px; flex: none; gap: 2px;
}
.btn.icon b { font-size: 11.5px; font-weight: 700; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.gray { background: var(--chip-bg); color: var(--text); }
.btn.gray:hover { background: var(--border); }
.btn.danger { background: var(--red-bg); color: var(--red); }
.btn.danger:hover { background: var(--red-bg-strong); }
.btn.like { background: var(--red-bg-hover); color: #d6336c; padding: 0 10px; width: auto; font-size: 13.5px; }
.btn.like:hover { background: var(--red-bg-strong); }
.btn.like.on { background: var(--red-bg-strong); color: #c2255c; }
.btn.spacer { flex: 1; background: none; cursor: default; padding: 0; }

/* ---- 更多菜单（举报等低频操作） ---- */
.btn-more {
  background: var(--tag-bg); border: none; color: var(--muted); cursor: pointer;
  width: 32px; height: 32px; border-radius: 9px; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: .15s;
  flex: none;
}
.btn-more:hover { background: var(--border); color: var(--text); }
.more-pop {
  position: fixed; z-index: 99999; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 4px; min-width: 132px;
}
.more-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; padding: 8px 10px; border-radius: 7px;
  font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap;
}
.more-item:hover { background: var(--hover); }
.more-item.danger { color: var(--red); }
.more-item.danger:hover { background: var(--red-bg-hover); }

/* ============================================================
 * 状态展示
 * ============================================================ */
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty .big { font-size: 44px; margin-bottom: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 12px 24px; border-radius: 10px;
  font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); z-index: 100; max-width: 86vw;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }

.footer-note { margin-top: 36px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.8; }

/* ============================================================
 * 举报弹窗
 * ============================================================ */
.modal-mask {
  position: fixed; inset: 0; background: var(--mask); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--panel); border-radius: 16px; width: 100%; max-width: 400px;
  padding: 22px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal h3 { font-size: 16px; margin-bottom: 6px; }
.modal .desc { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; word-break: break-all; }
.reason-list { display: flex; flex-direction: column; gap: 8px; }
.reason-item {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; transition: .12s;
}
.reason-item:hover { border-color: var(--primary); background: var(--primary-bg-hover); }
.reason-item.selected { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.reason-item input { accent-color: var(--primary); }
.modal-ops { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ============================================================
 * Skeleton 占位（v76：首屏即见，避免空白闪烁）
 * ============================================================ */
@keyframes skelShine {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skel-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.skel-card .skel-cover { height: 76px; background: var(--skeleton); }
.skel-card .skel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.skel-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-2) 50%, var(--skeleton) 100%);
  background-size: 200px 100%; background-repeat: no-repeat;
  animation: skelShine 1.2s ease-in-out infinite;
}
.skel-line.w-70 { width: 70%; }
.skel-line.w-50 { width: 50%; }
.skel-line.w-30 { width: 30%; }

/* ============================================================
 * prefers-reduced-motion 全局规则（v76：与主 app 对齐）
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skel-line { animation: none; background: var(--skeleton); }
}

/* ============================================================
 * 移动端
 * ============================================================ */
@media (max-width: 768px) {
  .topbar { padding: 10px 14px; }
  .topbar .brand { font-size: 15px; }
  .topbar .back { font-size: 12px; }
  .wrap { padding: 0 12px 50px; }

  .hero { padding: 14px 16px 12px; margin: 10px 0 10px; border-radius: 14px; }
  .hero h1 { font-size: 16px; letter-spacing: 0; }
  .hero .sub { font-size: 12px; margin-top: 3px; line-height: 1.5; opacity: .82; }
  .hero .stats { gap: 14px; margin-top: 10px; }
  .hero .stat .num { font-size: 16px; }
  .hero .stat .lbl { font-size: 11px; }

  /* v107：控制行必须允许换行。
   *
   * 这里原来是 flex-wrap: nowrap，与同一块里 .tabs{flex:1 1 100%} 互相矛盾 ——
   * basis 100% 的意思就是「我独占一整行」，nowrap 却禁止换行，于是 iPhone 宽度下
   * 搜索框 + 筛选 + 排序 + 分页被硬塞进一行：
   *   · .search（flex:1 且 min-width:0）被压到约 21px，里面的 🔍 溢出去盖住「筛选」，
   *     输入框自身宽度归 0（看起来像搜索功能消失了）
   *   · .sort-btns 被压到内容宽度以下，它带 overflow:hidden，把「🕒 最新」截成「New」，
   *     而且按钮内标签被迫折行（🔥/热门 各占一行）
   * 改回 wrap 后：第一行 = 搜索框 + 筛选 + 排序，第二行 = 分页（basis 100% 生效）。 */
  .controls { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  /* min-width 是「搜索框不许被压扁」的地板：真的放不下时宁可让别的项换行 */
  .search { min-width: 100px; flex: 1; padding: 0 10px; border-radius: 10px; }
  .search input { padding: 8px 0; font-size: 13px; }
  /* flex-shrink:0 —— 筛选/排序保持内容宽度，空间不够就整块换行，绝不裁切 */
  .filter-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 12px; white-space: nowrap; flex-shrink: 0;
  }
  .sort-btns { border-radius: 10px; flex-shrink: 0; }
  .sort-btns button { padding: 8px 13px; font-size: 15px; white-space: nowrap; }
  .tabs { gap: 6px; flex: 1 1 100%; margin-top: 2px; }
  .tab { padding: 6px 12px; font-size: 12px; white-space: nowrap; }
  .filter-panel { max-height: 0; opacity: 0; overflow: hidden; margin: 0; }
  .filter-panel.open { max-height: 260px; opacity: 1; margin: 2px 0 6px; }
  .filter-panel .lang-row { margin: 6px 0; }
  .filter-panel .chip { padding: 5px 10px; font-size: 11.5px; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { border-radius: 12px; }
  .card:hover { transform: none; box-shadow: none; }
  .cover { height: 48px; }
  .cover .lang-emoji { left: 10px; font-size: 18px; }
  .cover .cover-letter { right: 10px; bottom: 2px; font-size: 24px; }
  .card-body { padding: 10px 10px 10px; }
  .card .name { font-size: 13px; gap: 4px; }
  .badge { font-size: 10px; padding: 1px 5px; }
  .tags { margin-top: 6px; gap: 4px; min-height: 16px; }
  .tag { font-size: 10.5px; padding: 1px 6px; }
  .meta { font-size: 11px; margin-top: 8px; gap: 8px; }
  .ops { margin-top: 8px; }
  .btn.icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
  .btn.like { font-size: 12px; padding: 0 8px; height: 28px; }
  .btn.like b { font-size: 11px; }
  .btn-more { width: 28px; height: 28px; font-size: 14px; }

  .footer-note { font-size: 11px; margin-top: 24px; }
}

/* ============================================================
 * 暗色模式（v76：完整适配，与主 app html[data-theme="dark"] 一致）
 * ============================================================ */
html[data-theme="dark"] {
  --bg: #161922;
  --panel: #1f2330;
  --panel-2: #232838;
  --border: #2c3142;
  --border-strong: #3a4054;
  --text: #e6e8ee;
  --text-2: #c4c9d5;
  --muted: #7e8497;
  --primary: #6d85d8;
  --primary-dark: #5670c4;
  --primary-bg: #2a3556;
  --primary-bg-hover: #232d4a;
  --red: #ef5b5f;
  --red-bg: #3a2025;
  --red-bg-strong: #4a2a30;
  --red-bg-hover: #322028;
  --green: #4cc59a;
  --orange: #e89c5b;
  --chip-bg: #2a2f3d;
  --tag-bg: #262b38;
  --hover: #252a36;
  --hover-strong: #2c3142;
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .25);
  --mask: rgba(8, 10, 18, 0.6);
  --skeleton: #2a2f3d;
  --skeleton-2: #343a4b;
  --gradient-hero: linear-gradient(135deg, #4f6ef7 0%, #6a4fd9 55%, #8a4fd9 100%);
  color-scheme: dark;
}

/* 暗色模式下，hero 文字描边加深以保持可读 */
html[data-theme="dark"] .hero { color: #fff; }
html[data-theme="dark"] .hero::after { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .hero::before { background: rgba(255, 255, 255, .04); }

/* 暗色模式下，导入/预览按钮（白底）反白 */
html[data-theme="dark"] .btn.gray { color: var(--text); background: var(--chip-bg); }
html[data-theme="dark"] .btn.gray:hover { background: var(--border); }

/* 暗色模式：英文 audience 徽章背景微调（保持 #eaf0ff 在深色太亮） */
html[data-theme="dark"] .badge.aud-en { background: var(--primary-bg); color: var(--primary); }

/* 暗色模式：modal 投影调整 */
html[data-theme="dark"] .modal { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

/* 暗色模式：reason-item 选中态可读性 */
html[data-theme="dark"] .reason-item.selected { color: var(--primary); }