/* ============================================================
 * 全站共用样式：设计 token + 顶栏 + 共用组件
 *
 * 为什么必须是 <head> 里的静态 <link>：
 * 浏览器会等外链样式表加载完才画第一帧，所以这里的样式一定在首帧就生效。
 * 而 common.js 在每页 body 末尾，由它注入就是"先画一帧没样式的顶栏、再跳一下"：
 * 首帧顶栏只有 41px 高、背景透明、右上角空空，下一帧才变成 68px 深色栏 +
 * 两颗胶囊 + 用户区，整页随之往下蹿 28px、搜索框横移 113px。
 * 改这两块样式只在本文件里改，别再去页面 <style> 或 JS 里抄第二份。
 *
 * ⚠️ 本文件在 <head> 里先于各页的 <style> 加载，同特异性下**后者胜**。
 * 所以组件样式集中在 site.css；页面 <style> 里别再抄第二份——留着就盖住了。
 * ============================================================ */

/* ============================================================
 * 设计 token
 *
 * 三层深度靠**底色差**分层，不靠满屏描边：全站只有一种发丝线宽 1px、一个线色，
 * 卡片不再靠"边框"从背景里浮出来，而是靠面板色本身。
 *
 * 玫瑰灰粉是**信号色**，不是装饰色：只在「选中 / 命中 / 焦点」三处出现。
 * 别当装饰色到处涂（hover 边框、focus 环、标签底色、卡片描边都涂过）——
 * 每个元素都在喊，页面反而没有重点。要加新的粉色用法先问：这是信号吗？
 * ============================================================ */
:root {
  color-scheme: dark;

  --bg:      #0B0C0E;   /* 页面底 */
  --panel:   #121418;   /* 面板：卡片、帖子、表单块 */
  --raise:   #171A20;   /* 浮起：hover、输入框、骨架 */
  --raise-2: #1C2027;   /* 再上一层：选中态、缩略图底 */

  --line:      #22262E;   /* 唯一的线色 */
  --line-soft: #1A1D23;   /* 面板内部的次级分隔 */

  --text:  #E8E9EC;
  --dim:   #868D99;
  --faint: #5C6470;

  /* 报错 / 警告 / 成功。全站仅有的三种「有情绪」的颜色，而且只出现在提示文字上，
     不做按钮底色也不做描边——深色界面里彩色块一多，就回到之前那一档了。 */
  --err:  #E4796F;
  --warn: #D6B37A;
  --ok:   #8FBF9F;

  --accent:      #C98AA6;
  --accent-soft: rgba(201, 138, 166, .13);
  --accent-line: rgba(201, 138, 166, .38);

  --font-sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  /* 数字单独走等宽：下载量 / 点赞 / 时间戳对齐之后，整页立刻有"仪表"感，
     这是这套设计里最省事也最见效的一处。中文不要用等宽，Windows 上字形很硬。 */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

  --r-card: 10px;   /* 大块：卡片、面板 */
  --r-btn:  6px;    /* 按钮、输入框 */
  --r-chip: 5px;    /* 标签、徽章 */
}

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

/* 滚动条的位置恒定留着，不管这一页现在需不需要滚。
 *
 * 为什么：内容高度在加载过程中一定会变一次（骨架 -> 真卡片 / 空态 / 报错态），
 * 一变就可能从"能滚"翻到"不能滚"，滚动条随之出现或消失，**视口宽度跟着变 10px**
 * （宽度就写死在下面 ::-webkit-scrollbar 里）。于是 mx-auto 的正文和顶栏整体横移 5px——
 * 刷新时那 5px 横移就是这个，跟内容本身没关系，
 * 只要高度变过一次就横移一次。
 * 有模型时骨架和真卡片高度差不多、高度压根没变，所以没暴露；
 * 首页一空（骨架 731px 塌到空态 585px）就每次都抖。
 *
 * ⚠️ 别改成 overflow-y: scroll——那会在没有滚动条的页面上也画一条槽，
 * 深色底上很显眼。scrollbar-gutter 只占位不画。
 * 不认识这行的浏览器（Safari < 18.2）直接忽略，回到原来的行为，不会更糟。 */
html { scrollbar-gutter: stable; }

body {
  font-family: var(--font-sans);
  /* 顶上那团光给整页一个"从上方照下来"的纵深 */
  background: radial-gradient(1100px 520px at 50% -12%, #14161B, transparent 68%), var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2A2F38; border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #363C47; }
::-webkit-scrollbar-track { background: transparent; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--accent-soft); }
/* 勾选框（注册同意协议等）走强调色。浏览器默认那个亮蓝在这套深色里非常跳 */
input[type="checkbox"] { accent-color: var(--accent); }

/* 键盘 Tab 走得进去的地方都得看得见焦点。鼠标点击不触发（:focus-visible），
   所以不用担心点一下按钮就多出一圈描边。 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 数字统一走等宽。行高按等宽字体的大写高度调窄，不然数字会显得吊在行中间 */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .92em; letter-spacing: -.02em; }

/* 三个文字层级 + 分隔线。要用灰字就从这三个里挑，
   需要第四种灰度说明层级没想清楚——别随手挑 Tailwind 的 text-gray-100/300/400/500/600/700，
   那样同一层级在不同页面会是不同灰度。 */
.t-text  { color: var(--text); }
.t-dim   { color: var(--dim); }
.t-faint { color: var(--faint); }
.t-err   { color: var(--err); }
.t-warn  { color: var(--warn); }
.t-ok    { color: var(--ok); }
.hair-t { border-top: 1px solid var(--line); }
.hair-b { border-bottom: 1px solid var(--line); }
/* 「删除」这类破坏性动作：平时是灰的（不主动招人点），指上去才亮成暖色 */
.hover-err { transition: color .15s; }
.hover-err:hover { color: var(--err); }

/* ---------- 字标 ----------
 * 粉紫渐变 + drop-shadow 光晕 + 6 秒流光动画 + 斜体蓝紫 sama 那四样一起上过，
 * 是整站"幼"感最重的一处，拆过一轮。现在回来的是**克制版**：一个方向的渐变、
 * 一份手写体，没有光晕、没有动画、没有第二组颜色。
 * 字体定义在**文件末尾**（那两行 base64 有七千多字符，放开头会把整个文件的第一屏糊掉）。
 *
 * 主字：粗宋 900。900 不是"比 800 更粗"——这份字库只有 900 这一档，
 * 字号字重都得跟着它走；也去掉了原来的 -.01em，那是给无衬线体压缝用的，
 * 宋体自带字边，再收紧「爱」的撇就要贴到「音」上了。
 *
 * 小字：手写连笔 Great Vibes，1em（= h1 上那句 text-[17px]）。它 x-height 很小，看着比同号的
 * 无衬线小一圈，所以尺寸不能跟着缩，反而要顶到跟主字一样大。
 * ⚠️ 字距必须是 0：连笔体的字母是**接**在一起的，加 letter-spacing 等于把它们切开。
 * 直立在 17px 下会糊成一道波浪（更细的 Sacramento 就是这样被淘汰的），
 * 现在这份还留着笔锋的粗细对比，勉强读得出是 sama——字标本来就是看一眼形状，
 * 不要求逐字辨认。 */
.logo-main { font-family: 'LogoSerif', var(--font-sans); font-weight: 900; color: var(--text); }
.logo-sub  { margin-left: 4px; font-family: 'LogoScript', var(--font-sans); font-size: 1em;
             font-weight: 400; letter-spacing: 0; color: var(--faint); }

/* 渐变：从左到右「近白 -> 浅玫瑰 -> 站里的强调色 #C98AA6」，一口气扫过整个字标，
   所以 sama 是粉色收尾的那一截，不是另外涂上去的颜色。
   渐变挂在 h1 上、两个 span 设成透明——这样才是一道连续的坡；挂在各自的 span 上，
   每个字会自己重新起一道，接缝一眼看得出来。
   ⚠️ 必须包在 @supports 里：background-clip: text 不被支持时，
   color: transparent 会让整个字标**彻底消失**，而不是优雅降级。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #site-title {
    background: linear-gradient(100deg, #FAFBFC 0%, #EFD8E3 38%, #D3A7BC 72%, #C08CA6 100%);
    -webkit-background-clip: text; background-clip: text;
  }
  #site-title .logo-main,
  #site-title .logo-sub { color: transparent; -webkit-text-fill-color: transparent; }
}

/* ---------- 顶栏 ----------
 * 高度固定在 .header-inner 上；每个页面的顶栏容器都必须是 max-w-6xl，
 * 否则右上角那排按钮的右边缘对不齐（历史上在 948~1256px 之间跳）。 */
.site-header { background: rgba(11, 12, 14, .86); border-color: var(--line); }
.header-inner { height: 68px; }

/* 顶栏在窄屏挤不下时，只让昵称被截短，别的元素保持原样。
 * flex 子项默认 min-width:auto——昵称不肯缩，整排就顶出去：375px 上实测文档宽 399px，
 * 登录用户在手机上每一页都能横向滚，而且「投稿」「退出」被压成 36px / 12px 的碎片，
 * 「退出」两个字都挤出自己的按钮框了。加了 min-width:0 之后昵称变成唯一会被压缩的那个。 */
#auth-area, #auth-area > div, #my-profile-link, #my-profile-link > span { min-width: 0; }
#btn-submit-model, #btn-logout { flex-shrink: 0; }
/* 这一条是整个链条的闸门：它自己不缩，里面所有 min-width:0 都白加。
   `.ml-auto` 就是顶栏右侧那组的现成抓手（每个页面的顶栏结构都一样）。 */
.header-inner > .ml-auto { min-width: 0; }

/* 导航项，也是顶栏里所有「页面入口」的统一样子（资源下载 / 论坛 / 投稿）。
 * 「投稿」也走这一份，别用 .btn-head（填色 + 描边 + 字重 600 + 行高 16）——
 * 和旁边这颗透明的摆一起一个像链接一个像按钮。
 *
 * ⚠️ padding 和 line-height 不是随手定的：两个汉字的胶囊正好
 * 24(字) + 11×2 + 1×2 = 48px 宽、16(行高) + 5×2 + 1×2 = 28px 高，
 * 和首帧骨架（common.js 的 authSkeletonHtml）里写死的 48×28 一模一样——
 * 骨架换真内容、或「投稿」在投稿页上消失时，左边那排胶囊 1px 都不动。
 * 改这几个数之前先去看 authSkeletonHtml。
 *
 * idle 态不给边框色但**边框本身要在**（透明），否则 hover 时元素宽 2px、
 * 顶栏右边那整排会跟着跳一下。 */
.nav-pill {
  display: flex; align-items: center; gap: .375rem;
  padding: 5px 11px; border-radius: var(--r-chip);
  font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap;
  border: 1px solid transparent;
  color: var(--dim);
  transition: color .15s, border-color .15s, background-color .15s;
}
.nav-pill:hover { color: var(--text); background: var(--raise); }
.nav-pill.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent-line); }

/* ---------- 顶栏返回链接（「← 返回首页」/「← 返回论坛」） ----------
 * 和 .nav-pill 同一套语汇，但刻意做得更轻——它是"退出去"的动作，
 * 不该和右边的导航抢注意力；hover 时箭头往左挪 2px，给一个方向暗示。
 *
 * ⚠️ 三条容易踩的：
 * ① 隐藏写在 media query 里，不是 HTML 上的 Tailwind `hidden sm:inline`。Tailwind 是 CDN
 *    运行时扫 DOM 生成的，首帧未必已经有 `hidden` 这条规则——手机上会先闪一下再消失，
 *    顺带把顶栏撑出去。site.css 是静态外链，一定在首帧前生效。
 * ② 边框 idle 态就在（只是透明）：只靠 hover 才加边框的话，鼠标一上去元素宽 2px、
 *    顶栏右边那整排会跟着跳一下。hover 只改颜色，不动任何尺寸（实测宽度变化 0.00px）。
 * ③ flex-shrink: 0 也写在这里，同样是别依赖 Tailwind 首帧有没有生成 shrink-0。
 */
.back-pill { display: none; }
@media (min-width: 640px) {
  .back-pill {
    display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
    padding: .35rem .7rem .35rem .55rem; border-radius: var(--r-chip);
    font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
    color: var(--faint);
    border: 1px solid transparent;
    transition: color .18s, background-color .18s;
  }
  .back-pill:hover { color: var(--text); background: var(--raise); }
  .back-pill svg { transition: transform .18s; }
  .back-pill:hover svg { transform: translateX(-2px); }
}

/* ============================================================
 * 共用组件
 * 集中在 site.css，别在页面 <style> 里抄副本（.panel / .field / .btn-primary
 * 光 .field 抄三份，改一次要改三处，必然改漏）。
 * ============================================================ */

/* ---------- 面板 ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
/* 顶部一条比线亮一点的高光边，让大面板有个"顶面"。只给页面里最主要的那一块用 */
.panel-top { border-top-color: #2C323B; }

/* ---------- 按钮 ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: var(--r-btn);
  font-size: 12px; font-weight: 600; line-height: 1;
  color: #1A1116; background: var(--accent);
  transition: background-color .15s, opacity .15s;
}
.btn-primary:hover { background: #D69AB4; }
.btn-primary:active { background: #BE7E9A; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary svg { width: 15px; height: 15px; }

/* 顶栏里的登录按钮（未登录时那颗唯一填色的）。「投稿」不走这里——它是 .nav-pill。
 * ⚠️ padding 和 line-height 是按盒子尺寸量出来的，为的是 1px 都不变：
 * 顶栏用户区的宽度直接决定左边那两颗导航胶囊的位置，而首帧骨架（authSkeletonHtml）
 * 里写死的 48×28 那个占位是按 .nav-pill 量的（见上）。
 * 登录 = 字 + 13×2 + 1×2 */
.btn-head {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 11px; border-radius: var(--r-chip);
  font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
  color: var(--dim); background: var(--raise); border: 1px solid var(--line);
  transition: color .15s, background-color .15s, border-color .15s;
}
.btn-head:hover { color: var(--text); border-color: #2C323B; }
.btn-head-brand { padding: 5px 13px; color: #1A1116; background: var(--accent); border-color: transparent; font-weight: 700; }
.btn-head-brand:hover { color: #1A1116; background: #D69AB4; border-color: transparent; }

/* 次级动作：同一形状，不填色 */
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: var(--r-btn);
  font-size: 12px; font-weight: 500; line-height: 1;
  color: var(--dim); border: 1px solid var(--line); background: var(--panel);
  transition: color .15s, background-color .15s, border-color .15s;
}
.btn-quiet:hover { color: var(--text); background: var(--raise); border-color: #2C323B; }
.btn-quiet:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 表单控件 ---------- */
.field {
  width: 100%; padding: .6rem .75rem;
  border-radius: var(--r-btn);
  font-size: 13px; color: var(--text);
  background: var(--raise); border: 1px solid var(--line);
  transition: border-color .15s, background-color .15s;
}
.field::placeholder { color: var(--faint); }
.field:hover { border-color: #2C323B; }
.field:focus { outline: none; border-color: var(--accent); background: var(--raise-2); }

/* ---------- 标签 / 徽章 ---------- */
/* 直角一点的方标签，不是药丸。全站不再有 rounded-full 的小色块 */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .45rem; border-radius: var(--r-chip);
  font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  color: var(--dim); background: var(--raise); border: 1px solid var(--line);
}
.chip-on { color: #E4C6D4; background: var(--accent-soft); border-color: var(--accent-line); }
.chip-sm { padding: .1rem .35rem; font-size: 10px; }

/* ---------- 折叠块（.fold） ----------
 * 「想自己动手的人再看」的那一层。投稿页成功页和详情页的下载区都用它。
 * 为什么要有这个东西：普通用户只用做两件事——把文件传上来、把文件下下去。
 * 「文件存在哪」「怎么用命令行拉」是实现细节，摊在正文里只会让人犹豫；
 * 但真想知道的人（自建仓库的作者、要下 4GB 模型的人）必须找得到，所以收起来而不是删掉。
 * 用的是原生 <details>，键盘可达、不用 JS。 */
.fold { border-top: 1px solid var(--line-soft); padding-top: .75rem; margin-top: .75rem; }
.fold > summary { cursor: pointer; list-style: none; font-size: 11px; color: var(--faint); transition: color .18s; }
.fold > summary::-webkit-details-marker { display: none; }   /* Safari 默认那个三角跟排版对不上 */
.fold > summary:hover { color: var(--dim); }
.fold > summary::after { content: ' ▾'; font-size: .85em; opacity: .7; }
.fold[open] > summary::after { content: ' ▴'; }
.fold > *:not(summary) { margin-top: .5rem; }

/* ---------- 头像 ---------- */
/* 方形（6px 圆角）不是圆形：这套设计里除了状态点没有正圆，
   圆头像单独出现会显得是从别的模板里搬过来的。 */
.avatar { border-radius: var(--r-chip); object-fit: cover; background: var(--raise-2); flex-shrink: 0; }
.avatar-fallback {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--r-chip); background: var(--accent-soft); color: var(--accent); font-weight: 700;
}

/* ---------- 弹窗 ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(6, 7, 9, .8); }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }

/* ---------- 直传进度条 ----------
   一条文件一行，细到不抢视线。走强调色，因为它是页面上唯一在动的东西。
   投稿页的提交进度、管理弹窗里追加文件的进度都用这一份。 */
.up-bar { height: 3px; border-radius: 2px; background: var(--raise-2); overflow: hidden; }
.up-bar > i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--accent); transition: width .18s ease-out; }

/* ---------- 页签 ---------- */
.tab { flex: 1; padding: .35rem 0; border-radius: var(--r-chip); font-size: 13px; font-weight: 500; color: var(--dim); transition: color .15s, background-color .15s; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); background: var(--raise); font-weight: 600; }

/* ---------- 收藏按钮 ---------- */
.fav-btn { display: inline-flex; align-items: center; gap: .25rem; font-size: 11px; color: var(--faint); transition: color .15s; }
.fav-btn:hover { color: var(--accent); }
.fav-btn.on { color: var(--accent); }

.model-like-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 1.8rem; padding: .25rem .45rem; border: 1px solid transparent;
  border-radius: var(--r-btn); color: var(--faint); background: transparent;
  font-size: 11px; transition: color .15s, border-color .15s, background-color .15s;
}
.model-like-btn svg { width: .85rem; height: .85rem; flex: none; }
.model-like-btn:hover, .model-like-btn.on { color: var(--accent); border-color: var(--accent-line); background: var(--raise-2); }
.model-like-btn:disabled { opacity: .55; cursor: wait; }

/* ---------- 评论区（模型详情页 / 论坛共用，逻辑在 comments.js） ----------
 * 两页共用 comments.js，评论样式必须放 site.css，否则谁先加载谁赢不了。 */

/* 顶层评论是个盒子；回复不是（回复靠下面的竖线缩进区分层级，再套盒子会糊成一团） */
.comment-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-btn); }

/* 楼中楼：一条竖线 + 缩进表示层级。只做两层，所以固定缩进就够，不需要按深度算。
   用 border-left 而不是 box-shadow 描边——这里没有首帧骨架要对齐，border 更直白。 */
.cmt-replies { border-left: 2px solid var(--line); padding-left: .75rem; margin-top: .5rem; }

/* 评论里那排小按钮（点赞 / 回复 / 删除）。形态统一，只用颜色区分状态：
   点过赞是强调色；删除按钮进确认态也是强调色（跟帖子的 .ghost-btn.confirm 一个意思）。 */
.cmt-act { font-size: 12px; color: var(--faint); transition: color .15s; }
.cmt-act:hover { color: var(--text); }
.cmt-act.on,
.cmt-act.confirm { color: var(--accent); }
.cmt-act:disabled { cursor: default; opacity: .6; }

/* ---------- 轻量提示条 ---------- */
#toast-box {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
#toast-box > div {
  background: var(--raise-2); border: 1px solid var(--line); color: var(--text);
  font-size: 12px; padding: 8px 14px; border-radius: var(--r-btn);
  animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 正文里的链接 ---------- */
.link { color: var(--accent); transition: color .15s; }
.link:hover { color: #DCA7BE; text-decoration: underline; text-underline-offset: 3px; }

/* 想低调一点的文字按钮（页脚《用户协议》、忘记密码）：平时是灰的，指上去才变白。
   别写成 Tailwind 的 hover:t-dim 之类——t-* 不是 Tailwind 生成的类，那个变体不会生效。 */
.link-quiet { color: var(--dim); transition: color .15s; }
.link-quiet:hover { color: var(--text); }

/* ---------- 空态 / 报错 ---------- */
.empty-state { min-height: 240px; border: 1px dashed var(--line); background: rgba(255, 255, 255, .012); border-radius: var(--r-card); }

/* ---------- 搜索框 / 下拉 ---------- */
.search-box {
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-btn);
  transition: border-color .15s, background-color .15s;
}
.search-box:focus-within { background: var(--raise-2); border-color: var(--accent); }
.search-box input::placeholder { color: var(--faint); }
.search-box input:focus { outline: none; }

.sort-select {
  color: var(--dim); background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--r-btn); transition: color .15s, border-color .15s;
}
.sort-select:hover { color: var(--text); border-color: #2C323B; }
.sort-select:focus { outline: none; border-color: var(--accent); color: var(--text); }

/* ---------- 次级文字 ----------
 * .muted / .subtle 全站只在这一处定义——别在页面 <style> 里再定义，
 * 落空成默认白字细看才发现。 */
.muted  { color: var(--dim); }
.subtle { color: var(--faint); }
.hint   { font-size: 11px; color: var(--faint); }

/* ---------- 页脚 ---------- */
.footer-copy { color: var(--faint); line-height: 1.9; }

/* ---------- 入场动画 ----------
 * 全站共用这一份 fade-in + @keyframes fadeIn。 */
.fade-in { animation: fadeIn .22s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 模型卡片（首页 / 个人主页共用） ----------
 * 首页和个人主页共用，要改只改这里。 */
.model-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .2s, background-color .2s;
}
/* 只提一层底 + 描边变亮，不再上浮 4px、不再发光。
   那三个动作同时发生是"模板味"最重的一处，而且会让整行卡片跟着抖。 */
.model-card:hover { background: var(--raise); border-color: #2C323B; }
.cover-frame { background: var(--raise-2); aspect-ratio: 16 / 10; }
.model-card img.cover { transition: transform .45s ease; }
.model-card:hover img.cover { transform: scale(1.03); }
.card-title { color: var(--text); }
.card-author, .card-meta { color: var(--dim); }
/* 封面上的小标。底必须是半透明的深色——它们压在任意封面上，
   没有这层底就总有一张图会让字看不清。方形不是药丸。 */
.card-badge {
  display: inline-flex; align-items: center;
  padding: .15rem .4rem; border-radius: var(--r-chip);
  font-size: 10px; font-weight: 600; line-height: 1.6; white-space: nowrap;
  color: var(--dim); background: rgba(11, 12, 14, .74); border: 1px solid rgba(255, 255, 255, .13);
}
.card-badge-new { color: var(--accent); border-color: var(--accent-line); }
/* 搜到的字。浏览器的默认是黄底黑字，在这套深色里像画了道荧光笔 */
.card-title mark { color: #EBD3DE; background: var(--accent-soft); border-radius: 3px; }

/* 标签筛选行。选中态是粉的；右上角那个数是「几个模型用过」，不是装饰——
   它决定了标签的先后顺序，也让点下去的后果可预期。 */
.tag-pill {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .55rem; border-radius: var(--r-chip); font-size: 12px;
  color: var(--dim); background: var(--raise); border: 1px solid var(--line);
  transition: color .18s, border-color .18s, background .18s;
}
.tag-pill:hover { color: var(--text); border-color: #2C323B; }
.tag-pill.on { color: #E4C6D4; background: var(--accent-soft); border-color: var(--accent-line); }
.tag-pill i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.tag-pill.on i { color: var(--accent); }

/* ---------- README / 协议正文排版 ----------
 * common.js 的《用户协议》弹窗跨页借用了 .readme，所以它必须待在每个页面都会加载的
 * site.css 里，别搬回某一页去（别的页面没这份规则，弹窗正文就退回浏览器默认排版）。 */
/* ⚠️ word-break 不能删：README 是模型作者写的自由文本，里面出现一条 90 字符的长链接
 * 或一个超长文件名，整个详情页就会被撑出横向滚动（实测 340px 容器外溢到 714px）。
 * 模型卡 README 里表格也不算罕见，同理给 table 单独的横向滚动兜底——不兜的话
 * 一张 4 列表格能外溢到 1235px，破的是整页而不只是这个框。（post.html 的 .md-body
 * 早就有这两条，.readme 一直漏着。） */
.readme { word-break: break-word; }
.readme img { max-width: 100%; border-radius: 8px; }
.readme h1, .readme h2, .readme h3 { font-weight: 700; margin: 1em 0 .5em; }
.readme h1 { font-size: 1.35em; } .readme h2 { font-size: 1.15em; } .readme h3 { font-size: 1em; }
.readme p { margin: .6em 0; line-height: 1.75; }
.readme ul, .readme ol { margin: .6em 0 .6em 1.4em; line-height: 1.75; }
.readme ul { list-style: disc; } .readme ol { list-style: decimal; }
.readme code { background: var(--raise-2); padding: 2px 6px; border-radius: 4px; font-size: .85em; }
.readme pre { background: var(--bg); padding: 12px; border-radius: 8px; overflow-x: auto; margin: .8em 0; }
.readme pre code { background: none; padding: 0; }
.readme a { color: var(--accent); text-decoration: underline; }
/* display:block 是给 overflow-x 用的：table 不转 block 的话 max-width 之外还是会把
   父元素撑开（表格的自动布局不受 width 约束）。宽表格在自己框里横滚，不破整页。 */
.readme table { border-collapse: collapse; margin: .8em 0; display: block; max-width: 100%; overflow-x: auto; }
.readme th, .readme td { border: 1px solid var(--line); padding: 6px 12px; }
.readme blockquote { border-left: 3px solid var(--line); padding-left: 12px; color: var(--dim); margin: .8em 0; }

/* ---------- 首帧骨架 ----------
 * ⚠️ 骨架只能用这里（或页面 <style> 里）的普通 CSS，不能套 Tailwind 类：
 * Tailwind 是 CDN 运行时扫 DOM 生成的，首帧未必已经有那段样式，骨架会塌成 0 高、等于没占位。
 * .sk-b 是全站共用的灰条原子（尺寸写在使用处的行内 style），外层容器样式各页自己定义。 */
/* 必须是 block：这些灰条多数直接放在普通块容器里（.sk-body / .sk-post），
 * 用 inline-block 会并排排成一行而不是上下堆叠；放在 flex 容器里时 block 也照常工作。 */
.auth-sk, .sk-b {
  display: block; background: var(--raise);
  animation: sk-pulse 1.6s ease-in-out infinite;
}
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ============================================================
 * 字标字体
 *
 * LogoSerif（主字「爱音」）= 诺特宋体 Noto Serif SC 900
 *   Copyright 2017 Google Inc.，SIL Open Font License 1.1
 * LogoScript（小字「sama」）= Great Vibes
 *   Copyright 2012 The Great Vibes Project Authors (TypeSETit / Rob Leuschke)，
 *   SIL Open Font License 1.1，全文见 https://scripts.sil.org/OFL
 * 两份都是 OFL：可以自由使用、修改、随站点再分发（下面这行 base64 就算再分发），
 * 但**版权声明和许可证要跟着走**（就是上面这两行，别删），
 * 也不能只嵌这一份就当字体软件卖出去，或改个名字当别的字库出版。
 *
 * 都是 Google Fonts 的**服务端子集**（请求时用 text= 指定要哪几个字符）：
 *   LogoSerif  1876 字节  <- text=爱音sama
 *   LogoScript 3596 字节  <- text=sama
 * 子集里没有的字符不会变成方框，font-family 的兜底会接住，只是会换一种字体。
 * 所以改 CONFIG.siteTitle 里的**中文**部分就得重新生成 LogoSerif 那份，否则新字会
 * 掉回系统字体，跟「爱音」两个字不是一款。取法：给 fonts.googleapis.com/css2?
 * family=Noto+Serif+SC:wght@900&text=要的字 配一个桌面 Chrome 的 UA，
 * CSS 里 fonts.gstatic.com 那个链接就是 woff2。
 *
 * 想改字体就从本文件里把 woff2 倒出来（base64 直接可逆，别处没留副本）：
 *   python -c "import re,base64,pathlib;s=pathlib.Path('site.css').read_text('utf-8');d=[x for x in re.findall(r'base64,([A-Za-z0-9+/=]+)',s) if len(x)>999];[pathlib.Path('f%d.woff2'%i).write_bytes(base64.b64decode(x)) for i,x in enumerate(d)]"
 * ⚠️ len(x)>999 那道筛子不能省：上面这行命令自己就含 base64, 这四个字符，
 * 正则会在同一份文件里把自己也抓出来（抓到的是一串变量名，解出来直接报
 * padding 错）。真字体是 2504 / 4796 字符，用长度一刀切开最省事。
 * 倒出来两个文件：f0.woff2 = LogoSerif，f1.woff2 = LogoScript，
 * 直接丢进浏览器或 https://fonts.google.com 的子集工具里就能预览。
 *
 * 为什么内联成 data URI，而不是往 website/ 里放 .woff2 文件：
 * 这是个 17px 的字标，位置就在首屏左上角，第一眼就看得到。外链字体要多一次网络往返，
 * 浏览器这段时间只有两个选择——先空着（font-display: block）或者先画兜底字、
 * 等字体到了再跳一下（swap），两个都是首帧就错。而这个站的规矩是**首帧即终态**。
 * data URI 没有往返：site.css 一解析完，字形就已经在内存里了。
 * 两份加起来让 site.css 大 6KB（一次就缓存住），比首屏跳一下便宜。
 *
 * ⚠️ font-weight 必须写成**区间**，不能省：
 * 这两份都是单档字重的静态字库。@font-face 不声明字重时默认按 400 算，
 * 于是别处写 font-weight: 900 就成了「匹配到 400 的字面 + 浏览器合成加粗」——
 * 宋体的笔锋和手写体的连笔会被糊成一坨。写成区间 = 告诉浏览器
 * 「这一档够用，别自己动手」。
 * ============================================================ */
@font-face {
  font-family: 'LogoSerif';
  src: url(data:font/woff2;base64,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) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'LogoScript';
  src: url(data:font/woff2;base64,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) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}