/*
   style.css —— 白牌鞋服货源图册 · 全站样式（四个版式各不相同的页面）
   浅色主题 / 移动端优先 / 零外部依赖（无字体、无图标库、无框架、无 CDN）

   版式自上而下：
     ① .topbar      顶部工具条（logo + 铃铛 + 语言下拉）
     ② .masthead    站点大字标题 + 居中搜索框
     ③ .menus       导航行（首页 / 相册 / 联系档案 / 全部分类 ▾ + 扫码区）
                    .catepanel      为「全部分类」下拉面板，默认隐藏
                    .menus__tabflag 为当前页指示条（aria-current 才显示）
     ④ 主体（四个页面各一套容器，见 CONTRACT.md 的页面路由表）：
          .showindex__gallerycardwrap  首页 / 相册：卡片栅格外包裹（1440px）
            .categroup                 首页：一个分类一组（标题 + 该组网格）
          .categories__box             全部分类：左 192px 侧边栏 + 右内容
          .usercontact__main           联系档案：680px 虚线绿框资料卡
     ⑤ .site-footer 页脚（风险提示免责声明 + 版权行）

   .showindex 栅格断点（列数 / 卡片宽 / 右边距；首页与相册共用）：
     0–400px     2 列  45%       5%
     400–560px   3 列  30%       3.33333%
     560–720px   4 列  22.5%     2.5%
     720–1240px  6 列  15%       1.66667%
     ≥1240px     8 列  11.25%    1.25%
   侧边栏断点：≤640px 隐藏（与参考站一致），≥641px 显示。
   卡片外层包裹 .showindex__gallerycardwrap：≤640px 时 padding 收成 1em。

   网格用 inline-block + 容器 font-size:0 消除行内间隙（这是原站的做法），
   容器负右边距抵消「每张卡片都带右边距」造成的右侧空档。
   */

/*
   --------------------------------------------------------------------------
   1. 设计令牌（配色集中在这里）
   --------------------------------------------------------------------------
   */
:root {
  /* 主色：参考站的青绿；用于 hover 边框 / 分类 hover 底色 / 选中态 */
  --c-primary: #49bc85;
  --c-primary-hover: #3aa972;
  --c-primary-soft: #e9f7f0;
  --c-primary-ring: rgba(73, 188, 133, 0.35);
  --c-accent: #b4791f;
  --c-danger: #b3261e;

  /* 中性色（按参考站取值） */
  --c-0: #ffffff;
  --c-1: #f7f8f8;
  --c-2: #f0f1f1;
  --c-3: #ebebeb;          /* 边框 */
  --c-4: #d3d3d3;
  --c-5: #9f9f9f;
  --c-6: #7f7f7f;          /* 次要文字灰 */
  --c-7: #4a4a4a;
  --c-8: #333333;          /* 正文深色 */

  --c-text: var(--c-8);
  --c-text-muted: var(--c-6);
  --c-text-faint: var(--c-5);
  --c-bg: var(--c-0);
  --c-surface: var(--c-0);
  --c-surface-alt: #fafbfb;
  --c-border: var(--c-3);
  --c-border-soft: #e7e9eb;
  --c-sidebar-bg: #f3f7f7;  /* 侧边栏底色 */
  --c-card-shadow: 0 1px 2px #9f9f9f;   /* 卡片默认阴影（分类页置为 none） */

  /* 排版 */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;         /* 与参考站卡片字号一致（.showindex__children 里恢复的也是 14px） */
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 26px;

  /* 站点标题（②）：大字号，随视口缩放 */
  --fs-title: clamp(26px, 5.2vw, 46px);

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 26, 32, 0.06);
  --shadow: 0 2px 8px rgba(20, 26, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 26, 32, 0.18);

  --header-h: 52px;          /* 顶部工具条高度（详情页 sticky 定位用） */
  --wrap-max: 1240px;
  --wrap-pad: 12px;

  /* 侧边栏与主体间距（192px 侧边栏 + 24px 间距 = 216px） */
  --sidebar-w: 192px;
  --sidebar-gap: 24px;

  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/*
   --------------------------------------------------------------------------
   2. 基础重置
   --------------------------------------------------------------------------
   */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a {
  color: var(--c-text);
  text-decoration: none;
}
a:hover { color: var(--c-primary); }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button[disabled] { cursor: not-allowed; }

h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* 键盘焦点必须可见 */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 视觉隐藏但保留标题语义（各页 h1 用） */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 跳到主内容（键盘用户） */
.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -60px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* 页内 SVG symbol 定义块（占位但不占空间） */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 内联 SVG 图标统一走 currentColor */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
   --------------------------------------------------------------------------
   3. 通用按钮 / 表单
   --------------------------------------------------------------------------
   */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:hover { background: var(--c-2); border-color: var(--c-4); color: var(--c-text); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; }

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

.btn--block { width: 100%; }

.btn--sm {
  min-height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
}

/*
   --------------------------------------------------------------------------
   4. ① 顶部工具条（四个页面完全一致）
   --------------------------------------------------------------------------
   */
.topbar {
  position: relative;
  z-index: 30;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

/* logo 占位：自绘 SVG + 站点名 */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.logo:hover { color: var(--c-primary); }
.logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius);
  background: var(--c-primary);
  color: #fff;
}
.logo__mark .icon { width: 19px; height: 19px; stroke-width: 1.9; }
.logo__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.iconbtn:hover { background: var(--c-2); color: var(--c-text); }
.iconbtn__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-danger);
  border: 1.5px solid var(--c-surface);
}

/* 导航行当前页高亮（各页按 <html data-page> 决定哪一项带 aria-current） */
/*
 导航项「当前页」样式见下方 .menus 区块（绿色文字 + 2px 指示条 .menus__tabflag） 
*/

/* 联系档案页：面板之间的间距 */
.main--contact .panel + .panel { margin-top: var(--sp-5); }
.main--contact .btn--block { margin-top: var(--sp-5); }

/*
 语言选择：收在右上角的下拉里，不再单独占一整行。
   参数对齐原站 .language__link：inline-block + 相对定位，菜单绝对定位、
   白底、1px 边框、4px 圆角、1px 4px rgba(0,0,0,.1) 阴影、项 padding .3em 1.125em、
   hover 底色 #f3f7f7、三角 hover 时旋转 180°。
*/
.langsel {
  position: relative;
  display: inline-block;
  margin-left: var(--sp-4);
  vertical-align: middle;
}
.langsel__btn {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.langsel__btn:hover { color: var(--c-primary); }
.langsel__current { white-space: nowrap; }
.langsel__caret {
  width: .72em;
  height: .72em;
  transition: transform .3s;
}
.langsel[data-open="1"] .langsel__caret { transform: rotate(180deg); }

.langsel__menu {
  position: absolute;
  z-index: 40;
  right: 0;
  top: 100%;
  margin-top: .4em;
  min-width: 8.5em;
  padding: .3em 0;
  border: 1px solid var(--c-3);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
  text-align: left;
}
.langsel__menu li { list-style: none; }
.langsel__menu .lang {
  display: block;
  padding: .3em 1.125em;
  font-size: .875em;
  white-space: nowrap;
  color: var(--c-text);
  cursor: pointer;
}
.langsel__menu .lang:hover { background: #f3f7f7; color: var(--c-text); }
.langsel__menu .lang[aria-current="true"] {
  color: var(--c-primary);
  font-weight: 700;
}

/*
   --------------------------------------------------------------------------
   5. ② 站点大字标题 + 居中搜索框
   --------------------------------------------------------------------------
   */
.masthead {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-6) 0 var(--sp-5);
}
.masthead__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}

/* 站点名：大字号、醒目、居中 */
.masthead__title {
  font-size: var(--fs-title);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--c-text);
}

.masthead__tagline {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* 搜索框：居中、加宽 */
.search {
  position: relative;
  width: min(100%, 620px);
  margin-top: var(--sp-3);
}
.search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-faint);
  pointer-events: none;
}
.search__input {
  width: 100%;
  height: 46px;
  padding: 0 118px 0 42px;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--c-text);
  background: var(--c-1);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.search__input::placeholder { color: var(--c-text-faint); }
.search__input:focus {
  background: var(--c-surface);
  border-color: var(--c-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.search__clear {
  position: absolute;
  right: 84px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-muted);
}
.search__clear:hover { background: var(--c-2); }
.search__clear[data-visible="1"] { display: inline-flex; }

/* 「搜索」按钮：嵌在胶囊右侧的主色按钮（原站只有可点图标，这里做成明确按钮） */
.search__go {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.search__go:hover { background: var(--c-primary-hover); }
.search__go:active { transform: translateY(calc(-50% + 1px)); }
.search__go:focus-visible { outline: 2px solid var(--c-primary-ring); outline-offset: 2px; }

/* 窄屏：按钮与内边距一起收，别把输入区挤没 */
@media (max-width: 480px) {
  .search__go { height: 32px; padding: 0 12px; font-size: var(--fs-xs); }
  .search__clear { right: 72px; }
  .search__input { padding: 0 108px 0 38px; font-size: var(--fs-base); }
}

/* 详情页的紧凑标题区 */
.masthead--compact { padding: var(--sp-5) 0 var(--sp-4); }
.masthead--compact .masthead__title { font-size: clamp(22px, 3.6vw, 32px); }
.masthead__searchlink { margin-top: var(--sp-2); }

/*
   --------------------------------------------------------------------------
   6. ③ 导航行 .menus（链接 + 全部分类下拉 + 扫码区）
   链接参数照参考站：color:#7f7f7f / line-height:1.5em / display:inline-block /
   position:relative / padding-bottom:1.25em / white-space:nowrap；
   相邻链接与下拉按钮之间 margin-left:2em。
   --------------------------------------------------------------------------
   */
.menus {
  position: relative;            /* 下拉面板的定位上下文 */
  z-index: 3;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.menus__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: var(--sp-3);
}

.menus__inner > .menus__link,
.menus__cate {
  flex: none;
}

.menus__link {
  display: inline-block;
  position: relative;
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  padding-top: .1em;
  padding-bottom: 1.25em;
  line-height: 1.3;
  white-space: nowrap;
}
.menus__link:hover { color: var(--c-primary); }

/*
 当前页指示条 —— 对齐原站 .showheader__tabflag：
   display:none / position:absolute / bottom:0 / height:2px / width:100% / background:#49bc85。
   原站只有「当前项」才显示它，不是 hover 下划线。
*/
.menus__tabflag {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-primary);
  z-index: 1;
}
/* 当前项 = 绿色文字 + 绿条；原站 .showheader__active 只改颜色，不加粗 */
.menus__link[aria-current] { color: var(--c-primary); }
.menus__link[aria-current] .menus__tabflag { display: block; }
.menus__link + .menus__link { margin-left: 2em; }
.menus__cate {
  display: inline-flex;
  align-items: flex-start;
  margin-left: 2em;
}

/*
 「全部分类」= 文字链接 + 独立箭头按钮（对齐原站 <a>全部分类</a> + 下拉图标）。
 文字链接只管跳转；箭头按钮只管开合面板，两者都不抢对方的点击区域。
*/
.menus__link--cate {
  padding: 0;
  padding-top: .1em;
  padding-bottom: 1.25em;
  border: 0;
  background: transparent;
  color: var(--c-text-muted);
  text-align: left;
}
/* 箭头按钮：与文字同一基线，只有 1em 宽的点击区，另加左右一点内边距 */
.menus__catebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .1em;
  padding: .1em .2em 1.25em;
  border: 0;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}
.menus__catebtn:hover { color: var(--c-primary); }
.menus__caret {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  transition: transform .3s;
}
.menus__inner[data-menus-open="1"] .menus__caret { transform: rotate(180deg); }
.menus__inner[data-menus-open="1"] .menus__link--cate,
.menus__inner[data-menus-open="1"] .menus__catebtn { color: var(--c-primary); }

/* 右侧二维码区 */
.qrcodewrap {
  display: inline-block;
  margin-left: auto;
  text-align: right;
  position: relative;
}
.qrcodewrap__handle {
  position: relative;
  display: inline-block;
  line-height: 1.5em;
  padding-bottom: 1.25em;
  cursor: default;
}
.qrcodewrap__text {
  font-size: .8em;
  color: var(--c-text-muted);
}
.qrcodewrap__icon {
  width: 1.3em;
  height: 1.3em;
  margin-left: .3em;
  vertical-align: middle;
  color: var(--c-text-muted);
}
/* hover 时弹出二维码浮层（图由 config.js 的 CONTACT.wechat.qr 提供） */
.qrcodewrap__code {
  display: none;
  position: absolute;
  top: 2em;
  right: 0;
  width: 10em;
  height: 10em;
  background: #fff;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
  overflow: hidden;
}
.qrcodewrap__handle:hover .qrcodewrap__code { display: block; }
.qrcodewrap__codeimg { width: 100%; height: 100%; object-fit: contain; }
.qrcodewrap__codetip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  width: 100%;
  height: 100%;
  padding: .6em;
  text-align: center;
  color: var(--c-text-muted);
  font-size: .72em;
  line-height: 1.4;
}
.qrcodewrap__codetip .icon { width: 3.2em; height: 3.2em; color: var(--c-text-faint); }

/*
   --------------------------------------------------------------------------
   7. ③b 「全部分类」下拉面板
   top:140px / left:1em / right:1em / 白底 / 1px #ebebeb / 阴影；
   面板里两列排布分类（每项带图集数量），底部一行说明文案。
   --------------------------------------------------------------------------
   */
.catepanel {
  position: absolute;
  top: 140px;
  left: 1em;
  right: 1em;
  z-index: 3;
  background: #fff;
  margin-top: -1px;
  border: 1px solid #b9b9b9;
  box-shadow: 0 .5px .5px hsla(0, 0%, 62%, .5);
  white-space: normal;
}
.catepanel__list { padding: .5em 0; }
.catepanel__list::after { content: ""; display: block; clear: both; }
.catepanel__list > li {
  margin: 0 1em;
  padding: .57em .43em;
  font-size: .875em;
  line-height: 1;
}
.catepanel__list > li:hover { background: var(--c-primary); color: #fff; }
.catepanel__list > li:hover a { color: #fff; }
.catepanel__list > li > a {
  display: inline-block;
  float: left;
  width: 50%;
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catepanel__count {
  float: left;
  margin-left: .5em;
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
.catepanel__list > li:hover .catepanel__count { color: rgba(255, 255, 255, .82); }
.catepanel__list > li::after { content: ""; display: block; clear: both; }
/* 面板中缝竖线 */
.catepanel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.375em;
  bottom: 1.375em;
  margin: auto;
  display: block;
  border-left: 1px solid var(--c-4);
}
/* 面板底部说明：本站自己的措辞 */
.catepanel__note {
  padding: .5em 1em .75em;
  border-top: 1px dashed var(--c-border);
  color: var(--c-text-faint);
  font-size: .75em;
  line-height: 1.6;
}

/*
   --------------------------------------------------------------------------
   8. ④ 主体两栏（全部分类页：左固定分类侧边栏 + 右内容）
   --------------------------------------------------------------------------
   */
.main { padding: var(--sp-5) 0 var(--sp-8); }
.main--album { padding-top: var(--sp-4); }

.categories__box {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  column-gap: var(--sidebar-gap);
  align-items: start;
}

/* 左侧分类侧边栏：≥641px 显示 / width:192px / 1px #ebebeb / 底色 #f3f7f7 */
.categories__box-left {
  width: var(--sidebar-w);
  border: 1px solid var(--c-border);
  background-color: var(--c-sidebar-bg);
  min-height: 320px;
}

.categories__list { width: 100%; }

.cateitem {
  display: block;
  margin: 0;
  padding: .7em 1em;
  border-bottom: 1px solid var(--c-border);
  line-height: 1.4;
  color: var(--c-text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cateitem:last-child { border-bottom: 0; }
.cateitem > a {
  display: block;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cateitem:hover { background: var(--c-primary-soft); color: var(--c-text); }
.cateitem:hover > a { color: var(--c-primary); }
/* 选中项：左侧色条 + 主色文字 + 加粗，明显但不刺眼 */
.cateitem--selected {
  border-left: 3px solid var(--c-primary);
  padding-left: calc(1em - 3px);
  background: var(--c-surface);
  color: var(--c-primary);
  font-weight: 700;
}
.cateitem--selected > a { color: var(--c-primary); }

.cateitem__count {
  float: right;
  margin-left: .5em;
  color: var(--c-text-faint);
  font-size: .85em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.cateitem--selected .cateitem__count { color: var(--c-primary); }

.categories__box-right { min-width: 0; }

/* 面包屑：当前分类名 */
.crumbs {
  margin-bottom: var(--sp-3);
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
}
.crumbs > a { color: var(--c-text-muted); }
.crumbs > a:hover { color: var(--c-primary); }
.crumbs__sep { color: var(--c-4); margin: 0 .35em; }
.crumbs__current { color: var(--c-text); font-weight: 600; }

/*
   --------------------------------------------------------------------------
   9. 顶部汇总条 .pagebar（只保留「共 N 个图集」）

   原来这里还放着「上一页 x / y 下一页」的翻页控件，现在整块翻页挪到网格下方、
   改成页码按钮 + 跳页框（见第 9b 节 .pager）。顶部只剩一行总数，所以不再需要
   左右分布 / float 清除那套写法。
   --------------------------------------------------------------------------
   */
.pagebar {
  margin-bottom: 16px;
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  min-height: 1.8em;
}
.pagebar__total { color: var(--c-text-muted); }

/*
   --------------------------------------------------------------------------
   9b. 分页控件 .pager（网格下方、页脚上方，水平居中；四个页面完全一致）

   目标形态（照老板给的截图逐项量过）：
     [<] [1] [2] [3] [4] [5] [>]      共209页      到第 [    ] 页  [确定]
   * 整块：一行 flex、水平居中；与上方网格间距 ~30px，下方留 ~30px 接页脚
   * 页码方块（含 < >）：36px × 36px、1px solid #ddd、白底、圆角 3px、
     灰字 #555、水平垂直居中
   * 当前页：绿底白字（var(--c-primary)），边框同色
   * 其它页码 hover：边框与文字变主色（不做大面积色块）
   * 首/末页箭头：更浅的灰 #ccc、not-allowed、不可点
   * 「共N页」：#888 小字、不加空格、两侧约 16px 间距
   * 「到第 [ ] 页」：标签灰字；输入框 70px × 36px、1px solid #ddd、圆角 3px、
     数字居中
   * 「确定」：白底 + 1px solid #ddd + 灰字（不是绿色主按钮）
   * 顺序：左箭头 → 页码序列 → 右箭头 → 共N页 → 到第[ ]页 确定
   区间用 px 写死（不跟字号缩放），因为这几组尺寸是照截图量的固定值。
   --------------------------------------------------------------------------
   */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 30px 0;
  color: #555;
  font-size: var(--fs-base);
}
/* 翻页箭头 + 页码共用同一个方块外观 */
.pager__btn,
.pager__num {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: #555;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* hover 只改边框与文字颜色，不做大面积色块 */
.pager__btn:hover,
.pager__num:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
/* 当前页：绿底白字 */
.pager__num[aria-current="page"],
.pager__num[aria-current="page"]:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
/* 首/末页：箭头更浅的灰 + 禁点 */
.pager__btn.disabled,
.pager__btn[aria-disabled="true"] {
  color: #ccc;
  border-color: #eee;
  cursor: not-allowed;
  pointer-events: none;
}
.pager__list {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pager__item { display: block; }
/* 「共N页」：左右各留约 16px */
.pager__count {
  margin: 0 16px;
  color: #888;
  font-size: var(--fs-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 跳页表单：「到第 [ ] 页 [确定]」 */
.pager__jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pager__jumplabel { color: #888; font-size: var(--fs-sm); }
.pager__jumpinput {
  box-sizing: border-box;
  width: 70px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: #555;
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pager__jumpinput:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
/* 「确定」：白底浅边框灰字的小按钮 */
.pager__jumpbtn {
  box-sizing: border-box;
  height: 35px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: #555;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pager__jumpbtn:hover { border-color: var(--c-primary); color: var(--c-primary); }
/* 非法输入的可见提示（aria-live） */
.pager__msg {
  flex-basis: 100%;
  margin: 0;
  color: var(--c-danger);
  font-size: var(--fs-sm);
  text-align: center;
}
.pager__msg:empty { display: none; }
/* 窄屏：允许换行；页码序列只显示当前页附近 3 个（第 4/5 个藏起来，但仍在 DOM 里） */
@media (max-width: 640px) {
  .pager { gap: 4px; margin: 20px 0; }
  .pager__list { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .pager__btn,
  .pager__num { min-width: 32px; height: 32px; }
  .pager__count { margin: 0 8px; flex-basis: 100%; text-align: center; }
  .pager__jump { flex-basis: 100%; justify-content: center; }
  .pager__num[data-window="4"],
  .pager__num[data-window="5"] { display: none; }
}

/*
   --------------------------------------------------------------------------
   10. ④ 卡片网格 .showindex__parent（inline-block + font-size:0，断点见文件头）
   卡片结构：.showindex__children > a.card__link > .card__imgwrap
             > img.card__img + i.card__space + .card__photonumber，标题在封面下方。
   首页 / 相册 / 全部分类 三个列表页共用这一套栅格与卡片。
   --------------------------------------------------------------------------
   */
.showindex__parent {
  font-size: 0;                 /* 消除 inline-block 之间的空白间隙（原站做法） */
  text-align: left;
  margin-right: -5%;            /* 0–400px 的默认值，断点里逐级覆盖 */
}
.showindex__parent::after { content: ""; display: block; clear: both; }

/*
 栅格单元：首页 / 相册 / 全部分类 三个列表页的卡片外层。
 实测参数（对齐目标站 showindex）：inline-block / vertical-align:top /
 font-size:14px / position:relative / transition:width .3s；
 尺寸与断点见文件头第 16 节。卡片本体 .card 只提供封面与标题的视觉，
 不参与宽度计算（这里显式覆盖掉 .card 的 width 与 margin 默认值）。
*/
.showindex__children {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  transition: width .3s;
  width: 45%;                   /* 0–400px 的默认值（2 列），断点里逐级覆盖 */
  margin: 0 5% 5% 0;
}
/*
 全局兜底：作者样式里的 display（如 .album-skeleton{display:grid}）会盖掉浏览器默认的
   [hidden]{display:none}，导致「骨架屏 / 灯箱 / 下拉面板」明明设了 hidden 却还占着版面。
   实测骨架屏漏隐时把真实内容顶下去了 1278px。这条规则让 hidden 属性永远生效。 
*/
[hidden] { display: none !important; }
.showindex__parent[hidden] { display: none; }
.showindex__parent--skeleton { margin-bottom: 0; }

.card {
  position: relative;
  display: inline-block;
  vertical-align: top;          /* 消除行内基线造成的额外行高 */
  font-size: var(--fs-base);    /* 网格 font-size:0 后卡片自己恢复字号 */
  background: transparent;
}

/* 列表页卡片：默认无阴影，hover 时封面边框变主色 */
.showindex__parent .card__link {
  display: block;
  box-shadow: none;
  color: inherit;
}

.card__imgwrap {
  position: relative;
  color: #fff;
  overflow: hidden;
  max-width: 100%;
}
.card__space {
  display: block;
  padding-bottom: 100%;         /* 1:1 占位 */
}
.card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}
.card__img--failed { visibility: hidden; }

/* 封面缺失 / 加载失败：留一个灰底占位块，避免塌成空白 */
.card__link--empty .card__imgwrap { background: var(--c-2); }

/* 角标：右下角 + 底部渐变遮罩 */
.card__photonumber {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: right;
  padding: .3em .5em;
  line-height: 1.4;
  color: #fff;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .3) 0, transparent);
  pointer-events: none;
}

.card__title {
  background: #fff;
  line-height: 1.3;
  padding: .5em;
  margin-bottom: 3%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: var(--c-text);
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--c-primary); }

/*
 --------------------------------------------------------------------------
 10b.「更多相册」框 —— 分组版式里每组的最后一格

 它和封面方块**完全同尺寸**（同一套 .showindex__children 栅格 + 同一个
 .card__space 1:1 占位块），所以 23 张卡片 + 这 1 格 = 24 格，8 列铺 3 行。
 外观：浅灰底（不用纯白）、无封面、无标题条，居中两行「更多相册 / N个」。
 --------------------------------------------------------------------------
 */
.card--more .card__morelink {
  display: block;
  color: var(--c-text-muted);
}
.card--more .card__imgwrap {
  background: #f5f5f5;
  box-shadow: none;
}
.card--more .card__morebody {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2em;
  padding: .5em;
  text-align: center;
  line-height: 1.3;
}
.card--more .card__moretitle {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}
.card--more .card__morecount {
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
/* hover 反馈与卡片一致：边框变主色（.card__imgwrap::after 已经统一处理） */
.card--more:hover .card__moretitle { color: var(--c-primary); }

/* hover：封面边框变主色（用一个不占空间的描边层实现） */
.card__imgwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--dur) var(--ease);
}
.card:hover .card__imgwrap::after { border-color: var(--c-primary); }

/* 骨架卡片 */
.showindex__parent--skeleton .card__img,
.showindex__parent--skeleton .card__title,
.skeleton .sk-line {
  background: linear-gradient(100deg, var(--c-2) 30%, #f4f5f6 50%, var(--c-2) 70%);
  background-size: 260% 100%;
  animation: shimmer 1.25s ease-in-out infinite;
}
.showindex__parent--skeleton .card__img { opacity: 0; }
.showindex__parent--skeleton .card__space {
  background: linear-gradient(100deg, var(--c-2) 30%, #f4f5f6 50%, var(--c-2) 70%);
  background-size: 260% 100%;
  animation: shimmer 1.25s ease-in-out infinite;
}
.showindex__parent--skeleton .card__imgwrap { background: var(--c-2); }
.showindex__parent--skeleton .card { pointer-events: none; }
.skeleton { pointer-events: none; }
.sk-line { height: 12px; border-radius: 4px; }
@keyframes shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .showindex__parent--skeleton .card__space,
  .skeleton .sk-line { animation: none; }
}

/* 分类标签（详情页用） */
.tag {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.tag:hover { background: var(--c-primary); color: #fff; }

/*
   --------------------------------------------------------------------------
   11. 状态块（空结果 / 错误）
   --------------------------------------------------------------------------
   */
.state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.state[data-visible="1"] { display: flex; }
.state__icon { width: 40px; height: 40px; color: var(--c-text-faint); }
.state__title { font-size: var(--fs-md); font-weight: 700; }
.state__desc { color: var(--c-text-muted); font-size: var(--fs-sm); max-width: 34em; }
.state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.state--error { border-color: #f0c9c6; background: #fdf6f5; }
.state--error .state__icon { color: var(--c-danger); }

/*
   --------------------------------------------------------------------------
   12. 详情页
   --------------------------------------------------------------------------
   */
.album {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

/* 大图区 */
.stage {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stage__crumb {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage__crumb:empty { display: none; }

.stage__media {
  position: relative;
  background: var(--c-2);
  border-bottom: 1px solid var(--c-border);
}
/* 大图居中 */
.stage__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-height: 74vh;
  margin: 0 auto;
  width: 100%;
  background: var(--c-2);
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.stage__frame:disabled { cursor: default; }
.stage__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stage__img--failed { visibility: hidden; }
.stage__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 22, 26, 0.5);
  color: #fff;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.stage__nav:hover { background: rgba(18, 22, 26, 0.75); }
.stage__nav[disabled] { opacity: 0.3; }
.stage__nav--prev { left: var(--sp-2); }
.stage__nav--next { right: var(--sp-2); }

.stage__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}
.stage__count {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stage__hint { color: var(--c-text-faint); font-size: var(--fs-xs); text-align: right; }
.stage__hint-mobile { display: inline; }
.stage__hint-desktop { display: none; }

/* 缩略图条（大图下方，横向可滚动） */
.thumbs {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-top: 1px solid var(--c-border);
}
.thumbs::-webkit-scrollbar { height: 6px; }
.thumbs::-webkit-scrollbar-thumb { background: var(--c-4); border-radius: 3px; }
.thumb {
  flex: none;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--c-2);
  overflow: hidden;
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 1; }
.thumb[aria-current="true"] {
  border-color: var(--c-primary);
  opacity: 1;
}

/* 信息栏 */
.album__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.album__title {
  font-size: var(--fs-xl);
  line-height: 1.35;
  font-weight: 700;
}
.album__subtitle {
  color: var(--c-text-muted);
  font-size: var(--fs-base);
}
.album__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}
.album__desc {
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  /* ★ 以前这里是 `white-space: pre-line`，为的是让纯文本描述的多行原样展示。
     正文改成富文本之后**必须去掉**：净化后的 HTML 在块级标签之间带换行，
     pre-line 会把这些换行也渲染出来 → 段落之间凭空多出空行。
     纯文本描述现在由服务端转成 <p>（见 server/htmlsafe.py），不再依赖这个属性。
     详细的图文排版规则见文件末尾「前台 · 正文富文本渲染」。 */
}
.album__desc:empty { display: none; }

.panel {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  font-weight: 700;
}
.panel__title .icon { color: var(--c-primary); }
.panel__note {
  margin-top: var(--sp-3);
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
}

/* 咨询 CTA —— 唯一的转化动作 */
.cta-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cta:hover { background: var(--c-1); border-color: var(--c-4); color: var(--c-text); }
.cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.cta__text { display: flex; flex-direction: column; min-width: 0; }
.cta__label { font-size: var(--fs-sm); font-weight: 700; }
.cta__value {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cta--primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.cta--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; }
.cta--primary .cta__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.cta--primary .cta__value { color: rgba(255, 255, 255, 0.82); }

.copy-state {
  min-height: 18px;
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* 详情页骨架 */
.album-skeleton { display: grid; gap: var(--sp-5); }
.album-skeleton__stage {
  aspect-ratio: 1 / 1;
  max-height: 74vh;
  border-radius: var(--radius-lg);
}
.album-skeleton__bar { height: 14px; width: 40%; margin-top: var(--sp-3); }

/*
   --------------------------------------------------------------------------
   13. 全屏查看
   --------------------------------------------------------------------------
   */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  background: rgba(12, 14, 16, 0.94);
}
.lightbox[data-open="1"] { display: flex; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: #fff;
  font-size: var(--fs-sm);
}
.lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.12); }
.lightbox__body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--sp-2) var(--sp-4);
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox__nav[disabled] { opacity: 0.28; }
.lightbox__nav--prev { left: var(--sp-2); }
.lightbox__nav--next { right: var(--sp-2); }
.lightbox__count { font-variant-numeric: tabular-nums; }

/*
   --------------------------------------------------------------------------
   14. ⑤ 页脚（风险提示免责声明 + 版权行，四个页面完全一致）
   --------------------------------------------------------------------------
   */
.site-footer {
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-8);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.site-footer__top { text-align: center; }
.site-footer__brand {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
}
.site-footer__tagline { font-size: var(--fs-sm); margin-top: 2px; }

.site-footer__block {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-border-soft);
}
.site-footer h2 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.site-footer__list { display: grid; gap: 6px; }
.site-footer__list li { display: flex; gap: 6px; }
.site-footer__list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.site-footer__label { color: var(--c-text-faint); min-width: 4.5em; }
.site-footer__list--inline .site-footer__label { min-width: 0; }

.disclaimer {
  max-width: 62em;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-faint);
}

.site-footer__bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}
.site-footer__copy { font-variant-numeric: tabular-nums; }

/*
   --------------------------------------------------------------------------
   15. 占位提示条（通知 / 语言切换）
   --------------------------------------------------------------------------
   */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  max-width: min(92vw, 460px);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: rgba(18, 22, 26, 0.9);
  color: #fff;
  font-size: var(--fs-sm);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}
.toast[data-visible="1"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/*
   --------------------------------------------------------------------------
   15b. 四个页面的主体容器（每个版式一套，互不干扰）

   ① 首页 / 相册：.showindex__gallerycardwrap
      实测参数：table-layout:fixed / display:table / padding:1.3em 2em 0 /
      margin:0 auto / width:100% / flex-grow:1 / max-width:1440px /
      position:relative；再叠 flex + column（原站 @media (min-width:0px) 那条）。
      ≤640px 时 padding 收成 1em（见下方 @media (max-width:640px)）。
   ② 首页分组：.categroup（一组 = 标题 + 该组网格）
      实测参数：width:100% / padding:1.6em 1.4em .7em / margin:0 auto；
      标题 1.37em / margin-bottom:1.5em / inline-block；标题前 4px 绿竖条。
      ≤640px 时 padding 归零、标题 1em / margin .3em 0 1em。
   ③ 全部分类：.categories__box（左 192px 侧边栏 + 右内容），见第 8 节。
   ④ 联系档案：.usercontact__main（虚线绿框资料卡）
      实测参数：margin:40px auto / width:100% / max-width:680px / line-height:1.5 /
      padding:1em / 1px dashed #49bc85 / rgba(243,247,247,.5) 底 / 圆角 4px；
      ≤640px 去边框去底色、margin 归零（见下方 @media (max-width:640px)）。
   --------------------------------------------------------------------------
   */
.showindex__gallerycardwrap {
  table-layout: fixed;
  display: table;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.3em 2em 0;
  position: relative;
}
/* 分组版式里的整组容器 */
.categroup {
  width: 100%;
  padding: 1.6em 1.4em .7em;
  margin: 0 auto;
}
/* 分类标题是个链接（点了按分类筛选列表） */
.categroup__title {
  text-transform: none;
  font-size: 1.37em;
  margin-bottom: 1.5em;
  display: inline-block;
  color: var(--c-text);
  line-height: 1.3;
}
.categroup__title:hover { color: var(--c-primary); }
/* 标题前的竖条：content:"" / inline-block / height:1em / vertical-align:-.13em /
   width:4px / margin-right:.45em / background:#49bc85 */
.categroup__title::before {
  content: "";
  display: inline-block;
  height: 1em;
  vertical-align: -.13em;
  width: 4px;
  margin-right: .45em;
  background: #49bc85;
}
/* 首页顶部的汇总条（共 N 个分类 · M 个图集）在 1440px 容器里也留出内边距 */
.showindex__gallerycardwrap > .pagebar { padding: 0 1.4em; margin-top: 1.4em; }

/* 联系档案页：虚线框资料卡 */
.usercontact__main {
  margin: 40px auto;
  width: 100%;
  max-width: 680px;
  line-height: 1.5;
  padding: 1em;
  border: 1px dashed #49bc85;
  background-color: rgba(243, 247, 247, .5);
  border-radius: 4px;
  position: relative;
}
.main--contact { padding-bottom: var(--sp-8); }
.main--contact .crumbs { margin-bottom: var(--sp-4); }

/*
   --------------------------------------------------------------------------
   16. .showindex 栅格断点（列数 / 卡片宽 / 右边距；容器负右边距抵消最后一列的右边距）
   首页与相册共用这一套；数字逐条对齐目标站 showindex 的实测值。
   --------------------------------------------------------------------------
   */

/* 0–400px：2 列，卡片 45%，右边距 5% */
.showindex__parent { margin-right: -5%; }
.card { width: 45%; margin: 0 5% 5% 0; }

/* 400–560px：3 列，卡片 30%，右边距 3.33333% */
@media (min-width: 400px) and (max-width: 560px) {
  .showindex__parent { margin-right: -3.33333%; }
  .card { width: 30%; margin: 0 3.33333% 3.33333% 0; }
}

/* 560–720px：4 列，卡片 22.5%，右边距 2.5% */
@media (min-width: 560px) and (max-width: 720px) {
  .showindex__parent { margin-right: -2.5%; }
  .card { width: 22.5%; margin: 0 2.5% 2.5% 0; }
}

/* 720–1240px：6 列，卡片 15%，右边距 1.66667% */
@media (min-width: 720px) and (max-width: 1240px) {
  .showindex__parent { margin-right: -1.66667%; }
  .card { width: 15%; margin: 0 1.66667% 1.66667% 0; }
}

/* ≥1240px：8 列，卡片 11.25%，右边距 1.25% */
@media (min-width: 1240px) and (max-width: 4000px) {
  .showindex__parent { margin-right: -1.25%; }
  .card { width: 11.25%; margin: 0 1.25% 1.25% 0; }
}

/*
   --------------------------------------------------------------------------
   ≥641px：左侧固定侧边栏 + 右侧内容（全部分类页版式）
   ★ 这里必须保持 display:grid。曾经写成 display:block + .categories__box-left{float:left}，
     结果右侧内容里的 .pagebar::after{clear:both} 会连侧边栏那个 320px 高的浮动一起清掉，
     整个内容区被顶到侧边栏底部 —— 实测多出约 260px 空白。
   --------------------------------------------------------------------------
   */
@media (min-width: 641px) {
  .categories__box { display: grid; }
  .categories__box-left {
    width: 192px;
    border: 1px solid var(--c-border);
    background-color: var(--c-sidebar-bg);
    min-height: 320px;
  }
}

/* ≤640px：侧边栏隐藏；导航行间距收紧；下拉面板贴顶并限制高度；
   首页/相册的卡片包裹 padding 收成 1em；分组标题缩小；
   联系档案卡去边框去底色、margin 归零（对齐参考站的移动端处理） */
@media (max-width: 640px) {
  .categories__box { display: block; }
  .categories__box-left { display: none; }

  .menus__link + .menus__link,
  .menus__cate { margin-left: 1em; }
  .menus__link { padding-bottom: 1.5em; }
  .menus__link--cate { padding-bottom: 1.5em; }
  .qrcodewrap { display: none; }

  .catepanel { top: 100px; z-index: 30; }
  .catepanel__list { max-height: calc(72vh - 100px); overflow-y: auto; }

  .showindex__gallerycardwrap { padding: 1em; }
  .showindex__gallerycardwrap > .pagebar { padding: 0; margin-top: 0; }

  .categroup { padding: 0; }
  .categroup__title { font-size: 1em; margin: .3em 0 1em; }

  .usercontact__main { border: none; background: none; margin: 0; }
}

/* ≥768px：内容区放宽 + 详情页两栏 */
@media (min-width: 768px) {
  :root { --wrap-pad: 20px; --header-h: 56px; --fs-2xl: 30px; }

  .masthead { padding: var(--sp-8) 0 var(--sp-6); }
  .card__title { font-size: var(--fs-base); }

  .thumb { width: 74px; height: 74px; }
  .stage__frame { aspect-ratio: 4 / 3; }
  .stage__hint-mobile { display: none; }
  .stage__hint-desktop { display: inline; }
}

@media (min-width: 1000px) {
  :root { --wrap-pad: 24px; }
}

/* 触摸设备不依赖 hover 反馈 */
@media (hover: none) {
  .card:hover .card__imgwrap::after { border-color: transparent; }
}

/* 极窄屏：工具条只留 logo 图标 + 语言下拉，避免挤压 */
@media (max-width: 380px) {
  .logo__text { display: none; }
  .langsel { margin-left: var(--sp-2); }
}

/*
   --------------------------------------------------------------------------
   16b. 后台管理页 /admin（与前台同一套设计语言，只加管理页需要的那几块）

   组成：登录卡（.admin__login）→ 默认密码警告（.admin__alert）→ 标签页（.tabs）
        → 面板（.tabs__panel）→ 表单 / 表格（.admin__form / .admin__table）
   --------------------------------------------------------------------------
   */
.main--admin { padding-top: var(--sp-5); }
.admin__who {
  margin-right: var(--sp-3);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.admin__note,
.admin__hint {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.admin__field {
  display: block;
  margin-bottom: var(--sp-3);
}
.admin__label {
  display: block;
  margin-bottom: 4px;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.admin__input {
  width: 100%;
  max-width: 420px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
}
.admin__input:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
.admin__input--wide { max-width: 520px; }
.admin__textarea { max-width: 100%; resize: vertical; }
.admin__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.admin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.admin__msg {
  min-height: 1.4em;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.admin__msg[data-kind="ok"] { color: var(--c-primary-hover); }
.admin__msg[data-kind="err"] { color: var(--c-danger); }
.admin__msg--block { margin: var(--sp-3) 0; }
.admin__footlink { margin-top: var(--sp-6); }
.admin__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* 后台关键警告（默认密码提示）：黄底 + 左侧色条，一眼能看到 */
.admin__alert {
  margin: 0 0 var(--sp-4);
  padding: .8em 1em;
  border: 1px solid #fbedc4;
  border-left: 4px solid #e0a63a;
  border-radius: var(--radius-sm);
  background: #fffaeb;
  color: #7a5a12;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.admin__alert strong { color: #b3261e; }

/* 标签页 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.tabs__tab {
  padding: 8px 16px;
  border: 1px solid var(--c-border);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--c-1);
  color: var(--c-text-muted);
  font: inherit;
  cursor: pointer;
}
.tabs__tab:hover { color: var(--c-primary); }
.tabs__tab[aria-current="true"] {
  background: #fff;
  color: var(--c-primary);
  font-weight: 700;
  box-shadow: inset 0 2px 0 var(--c-primary);
}
.tabs__panel { padding-top: var(--sp-3); }
.tabs__panel .panel + .panel { margin-top: var(--sp-4); }

/* 表格 */
.admin__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.admin__table th,
.admin__table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: middle;
}
.admin__table th {
  background: var(--c-1);
  color: var(--c-text-muted);
  font-weight: 700;
  white-space: nowrap;
}
.admin__table tr.is-hidden { background: #fdf6f5; }
.admin__table tr.is-hidden td { color: var(--c-text-faint); }
.admin__table .admin__input { max-width: 260px; }
.admin__cell--ops { white-space: nowrap; }
.admin__cell--ops .btn { margin-right: 4px; }

@media (max-width: 640px) {
  .admin__input { max-width: 100%; }
  .admin__table { display: block; overflow-x: auto; }
  .tabs__tab { padding: 8px 12px; }
}

/*
   --------------------------------------------------------------------------
   17. 打印（把详情页当图册打印时保持整洁）
   --------------------------------------------------------------------------
   */
@media print {
  .topbar, .masthead__searchlink, .menus, .catepanel, .pagebar, .toast,
  .site-footer, .stage__nav, .thumbs, .lightbox { display: none !important; }
  body { background: #fff; }
  .card, .stage, .panel { break-inside: avoid; }
}

/*
   --------------------------------------------------------------------------
   16c. 图集编辑弹层（新建 / 编辑：字段 + 拖拽排序 + 上传进度）
   --------------------------------------------------------------------------
   */
.admin__req { color: #d9480f; }

.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 28, 24, .55); }
.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.modal__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.modal__title { margin: 0; font-size: var(--fs-lg); }
.modal__body { padding: var(--sp-4); overflow-y: auto; }
.modal__body .admin__field { margin-bottom: var(--sp-3); }
.modal__body .admin__input { max-width: 100%; }
.modal__foot {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-1);
}
.modal__spacer { flex: 1; }

/* 拖拽区 */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-5) var(--sp-4);
  border: 2px dashed var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-1);
  color: var(--c-text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-over { border-color: var(--c-primary); background: #f2fbf6; }
.dropzone__icon { width: 26px; height: 26px; color: var(--c-primary); }
.dropzone__text { font-size: var(--fs-base); }
.dropzone__hint { font-size: 12px; color: var(--c-text-faint, #999); }

/* 已选图片：网格 + 拖动排序 */
.thumblist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}
.thumb-item {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  cursor: grab;
}
.thumb-item.is-cover { border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(73, 188, 133, .25); }
.thumb-item.is-dragging { opacity: .45; }
.thumb-item.is-over { outline: 2px dashed var(--c-primary); outline-offset: -2px; }
.thumb-item__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--c-1); }
.thumb-item__noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; background: var(--c-1);
  color: #aaa; font-size: 22px;
}
.thumb-item__badge {
  position: absolute; top: 4px; left: 4px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--c-primary); color: #fff;
  font-size: 11px; line-height: 18px;
}
.thumb-item__order {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; padding: 1px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
}
.thumb-item__ops { display: flex; border-top: 1px solid var(--c-border); }
.thumb-item__ops button {
  flex: 1; padding: 4px 2px; border: 0; background: #fff;
  color: var(--c-text-muted); font: inherit; font-size: 11px; cursor: pointer;
}
.thumb-item__ops button:hover { color: var(--c-primary); background: var(--c-1); }
.thumb-item__ops button + button { border-left: 1px solid var(--c-border); }
.thumb-item__ops button.is-cover { color: var(--c-primary); font-weight: 700; }

/* 上传状态（进度 / 失败重试） */
.thumb-item__state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px;
  background: rgba(255, 255, 255, .86);
  font-size: 11px; text-align: center;
}
.thumb-item__state[hidden] { display: none; }
.thumb-item__bar { width: 80%; height: 4px; border-radius: 2px; background: #e6ebe8; overflow: hidden; }
.thumb-item__bar > i { display: block; height: 100%; width: 0; background: var(--c-primary); }
.thumb-item.is-error { border-color: #d94a3d; }
.thumb-item.is-error .thumb-item__state { color: #d94a3d; background: rgba(255, 246, 245, .93); }
.thumb-item.is-ok .thumb-item__state { display: none; }
.thumb-item__retry {
  padding: 2px 8px; border: 1px solid currentColor; border-radius: 3px;
  background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer;
}

@media (max-width: 640px) {
  .modal { padding: 0; }
  .modal__panel { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
  .thumblist { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* 后台强警告：数据库设置与 .env 不一致这类「会静默改坏配置」的情况 */
.admin__alert--strong {
  border-color: #f3c2ba !important;
  border-left-color: #d94a3d !important;
  background: #fff6f5 !important;
  color: #8c2f26 !important;
  font-weight: 600;
}

/* 对象路径实时预览 */
.admin__keypreview {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; white-space: pre-wrap;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  background: #f4f7f5; color: #2f6b4f; border: 1px solid #dbe7e0;
}
.admin__keypreview[data-kind="err"] { display: none; }

/* 后台批量操作条 + 危险按钮 + 黑名单区 */
.admin__bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0; padding: 8px 12px; border-radius: 6px;
  background: #eef6f1; border: 1px solid #cfe6da;
}
.admin__bulkbar[hidden] { display: none; }
.admin__bulkcount { font-weight: 700; color: #2f6b4f; }
.admin__bulkactions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin__btn {
  padding: 5px 12px; border-radius: 5px; border: 1px solid #cfd8d3;
  background: #fff; color: #26443a; cursor: pointer; font-size: 13px;
}
.admin__btn:hover { background: #f4f7f5; }
.admin__btn--danger { border-color: #e6b3ab; background: #fff5f4; color: #b3261e; font-weight: 600; }
.admin__btn--danger:hover { background: #ffe9e6; }
.admin__btn--ghost { border-color: transparent; background: transparent; color: #6b7a73; }
.admin__blocklist .panel__title { cursor: pointer; user-select: none; }
.admin__caret { color: #7b8a83; }
.admin__blocklist-body { padding-top: 8px; }

/* 标题字数提示（超过上限变红） */
.admin__charcount {
  margin-left: 8px; font-size: 12px; font-weight: 400; color: #7b8a83;
  font-variant-numeric: tabular-nums;
}
.admin__charcount.is-over { color: #b3261e; font-weight: 700; }
.admin__charcount.is-max { color: #a2621a; font-weight: 600; }

/* 后台图集管理：最近同步时间列（等宽、不换行、淡一点） */
.admin__cell--time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted, #6b7280); font-size: 13px; }

/* 后台图集管理：批量栏里的「移到分类」下拉 + 按钮 */
.admin__bulkmove { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.admin__bulkmove select { height: 30px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line, #d8dde5); background: #fff; font-size: 13px; }

/* ================================================================== */
/* 后台 · 正文富文本编辑器                                             */
/*                                                                     */
/* 为什么自己写而不引 Quill/TinyMCE：本项目零构建、只加载自己的资源，  */
/* 引库要么加体积要么走 CDN（国内不一定通）。这里只要段落/小标题/加粗/  */
/* 列表/贴图/超链接，浏览器原生 execCommand 就够。                      */
/* ================================================================== */
.rte {
  border: 1px solid var(--line, #d8dde5);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.rte__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  background: #f7f9fb;
  border-bottom: 1px solid var(--line, #d8dde5);
}
.rte__btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #374151;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.rte__btn:hover { background: #e8eef6; border-color: #cfd9e6; }
.rte__btn:active { background: #dbe6f3; }
.rte__btn.is-on { background: #d9e8ff; border-color: #9dc0f0; color: #1d4ed8; }
.rte__btn--key { background: #eef7f1; border-color: #cfe7d9; color: #1f7a4d; font-weight: 600; }
.rte__btn--key:hover { background: #dcf0e5; border-color: #a9d8bf; }
.rte__sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line, #d8dde5);
}
.rte__area {
  min-height: 190px;
  max-height: 460px;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: var(--fs-base, 15px);
  line-height: 1.75;
  color: var(--c-text, #1f2937);
  outline: none;
}
.rte__area:empty::before {
  content: attr(data-placeholder);
  color: #9aa4b2;
  pointer-events: none;
}
/* 编辑器内的富文本预览：和前台尽量一致，所见即所得 */
.rte__area h2 { font-size: 1.25em; font-weight: 700; margin: 18px 0 8px; line-height: 1.4; }
.rte__area h3 { font-size: 1.1em;  font-weight: 700; margin: 14px 0 6px; line-height: 1.4; }
.rte__area p { margin: 0 0 10px; }
.rte__area ul, .rte__area ol { margin: 0 0 10px; padding-left: 1.6em; }
.rte__area li { margin: 4px 0; }
.rte__area blockquote {
  margin: 10px 0;
  padding: 6px 12px;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
}
.rte__area img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
.rte__area a { color: #2563eb; text-decoration: underline; }
.rte__area hr { border: 0; border-top: 1px solid var(--line, #d8dde5); margin: 16px 0; }
.rte__src {
  width: 100%;
  min-height: 190px;
  padding: 12px 14px;
  border: 0;
  outline: none;
  resize: vertical;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #334155;
  background: #fbfdff;
}
#rte-count.is-over { color: #b42318; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* 弹窗：插入图片 / 插入链接                                            */
/* ------------------------------------------------------------------ */
.rte-dlg__back {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .45);
}
.rte-dlg {
  width: min(680px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .28);
}
.rte-dlg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e5e9f0);
  font-size: 15px;
}
.rte-dlg__x {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}
.rte-dlg__x:hover { color: #334155; }
.rte-dlg__body { padding: 14px 16px 18px; }
.rte-dlg__sec { margin-bottom: 18px; }
.rte-dlg__label { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: #475569; }
.rte-dlg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  padding: 2px;
}
.rte-dlg__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f1f5f9;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.rte-dlg__thumb:hover { border-color: #4f9dff; }
.rte-dlg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rte-dlg__none { color: #94a3b8; font-size: 13px; padding: 8px 0; }
.rte-dlg__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rte-dlg__row input[type="text"] { flex: 1 1 220px; min-width: 180px; }
.rte-dlg__state { font-size: 12px; color: #64748b; }
.rte-dlg__field { display: block; margin-bottom: 10px; }
.rte-dlg__field > span { display: block; margin-bottom: 4px; font-size: 13px; color: #475569; }
.rte-dlg__field > input { width: 100%; }
.rte-dlg__check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; margin-bottom: 4px; }
.rte-dlg__foot { display: flex; gap: 8px; margin-top: 14px; }

/* ================================================================== */
/* 前台 · 正文富文本渲染（详情页图文排版）                              */
/*                                                                     */
/* 正文现在可能是 HTML（贴图 / 小标题 / 超链接），排版要撑得住长文。     */
/* 参考的成品形态：段落 + H2 小标题 + 段落中插图 + 加粗 + 文末链接块。   */
/* ================================================================== */
.album__desc {
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  line-height: 1.85;
  word-break: break-word;
}
.album__desc > :first-child { margin-top: 0; }
.album__desc > :last-child { margin-bottom: 0; }
.album__desc p { margin: 0 0 14px; }
.album__desc h2 {
  margin: 26px 0 12px;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-text);
}
.album__desc h3 {
  margin: 20px 0 10px;
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-text);
}
.album__desc h4 { margin: 16px 0 8px; font-size: 1.02em; font-weight: 700; }
.album__desc ul, .album__desc ol { margin: 0 0 14px; padding-left: 1.7em; }
.album__desc li { margin: 5px 0; }
.album__desc blockquote {
  margin: 14px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--c-border, #cbd5e1);
  background: var(--c-surface-2, #f8fafc);
  color: var(--c-text-muted);
}
/* ★★ 正文配图必须**同时**限宽和限高。
 *
 * 踩过的坑：原来只有 `max-width: 100%`，而本站详情页正文栏有 1192px 宽
 * （参考站只有 750px）—— 结果一张 1920×1440 的图被撑到 1192×894，
 * 竖图更是接近 900px 高，一张图就占满一屏，读长文一直在滑。
 *
 * 现在的取值参照成品站的做法（正文栏 750px / 图 680px）：
 *   · 限宽 720px：横图最舒服的阅读宽度，居中后两侧留白像杂志排版；
 *   · 限高 620px：竖图（3:4、9:16）不会比一屏还高；
 *   · 两者同时生效时浏览器**保持等比**缩放，不会把图拉变形。
 */
.album__desc img {
  display: block;
  width: auto;
  max-width: min(100%, 720px);
  max-height: 620px;
  height: auto;
  object-fit: contain;
  margin: 18px auto;
  border-radius: 8px;
}
/* 小屏再收一档，避免手机上一张图占满整屏还能上下滑半天 */
@media (max-width: 640px) {
  .album__desc img { max-height: 460px; margin: 14px auto; }
}
.album__desc a { color: var(--c-primary, #2563eb); text-decoration: underline; }
.album__desc a:hover { opacity: .82; }
.album__desc hr {
  border: 0;
  border-top: 1px solid var(--c-border, #e5e9f0);
  margin: 22px 0;
}
.album__desc table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: .95em;
}
.album__desc th, .album__desc td {
  border: 1px solid var(--c-border, #e5e9f0);
  padding: 7px 10px;
  text-align: left;
}
.album__desc th { background: var(--c-surface-2, #f8fafc); font-weight: 600; }
.album__desc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c-surface-2, #f1f5f9);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .92em;
}
.album__desc figure { margin: 14px 0; }
.album__desc figcaption { margin-top: 6px; font-size: .9em; color: var(--c-text-faint); text-align: center; }

/* ================================================================== */
/* 底部广告条（内容之下、页脚之上）                                     */
/*                                                                     */
/* ★★ 这里最关键的不是好看，是**不能抖**。                              */
/*    图片没下载完之前如果没占位，页脚会被往下推一下 —— 这就是 CLS      */
/*    （页面位移），Core Web Vitals 会因此不合格，Google 会降排名。      */
/*    解决办法：用 `aspect-ratio` 按原图比例**先把高度留出来**，         */
/*    图什么时候到都不影响布局。比例由后台设置里的 ad_width/ad_height    */
/*    生成内联样式传进来（见 app._ad_banner），换任意比例的图都不用改 CSS。*/
/* ================================================================== */
.adslot {
  margin: 28px 0 0;
  padding: 0 0 4px;
}
.adslot__link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: opacity .18s ease;
}
.adslot__link:hover { opacity: .92; }
.adslot__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* 兜底比例：拿不到内联样式时也按成品图的 1916x821 预留 */
  aspect-ratio: 1916 / 821;
  object-fit: cover;
  background: var(--c-surface-2, #f1f5f9);
}
@media (max-width: 640px) {
  .adslot { margin: 18px 0 0; }
  .adslot__img { border-radius: 8px; }
}

/* ================================================================== */
/* 后台 · 广告位设置面板                                               */
/* ================================================================== */
.adm-ad__preview {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--line, #d8dde5);
  border-radius: 8px;
  background: #fafbfd;
}
.adm-ad__preview img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 6px;
}
.adm-ad__hint { margin-top: 6px; font-size: 12px; color: #64748b; }
.adm-ad__pages { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 2px; }
.adm-ad__pages label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }