/* 黑图书馆 · 书目检索
 *
 * 配色沿用 site/pages/ 那套（深底 + 单一蓝色强调），两边点开是同一个世界。
 * 版心 900px：书目行是「缩略图 + 三行文字」，再宽就会拉得太散、眼睛要来回跑。
 */

:root {
  --bg: #0e1115;
  --panel: #151a20;
  --panel2: #1a2028;
  --line: #232b34;
  --line2: #2d3641;
  --txt: #e8ebf0;
  --dim: #97a1af;
  --dim2: #6e7887;
  --acc: #4b9dff;
  --acc-dim: #2b5f9e;
  --radius: 10px;
  --wrap: 900px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 必须放在所有 display 声明前面生效：
   .modal{display:flex} / .more{display:flex} 这类规则会盖掉浏览器默认的
   [hidden]{display:none}，不显式压一遍，带 hidden 的弹窗照样会显示出来。 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 顶部一层极淡的冷光，避免整页死黑 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  background: radial-gradient(120% 100% at 50% 0%,
              rgba(75, 157, 255, .09), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------------------------------------------------------------- 头部 */

.hd {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 17, 21, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.hd-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

.hd-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 12px;
}

.brand { min-width: 0; }

.brand h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: .01em;
}

/* 副标题从「Warhammer 40,000 书目检索」换成了中文长句，原来那套
   uppercase + 宽字距是给全大写英文用的：中文用不上，而且 uppercase 会把
   写好的「40k」悄悄变成「40K」。这里改成中性排版，字号提一点保证可读。 */
.brand .tag {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim2);
  letter-spacing: .01em;
}

.stat {
  margin: 0;
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 统计数字和「数据备份下载」并排放在右上角。flex-wrap 是为了窄屏时
   按钮能掉到下一行，而不是把标题挤扁。 */
.hd-act {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.btn-backup {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}

.btn-backup:hover { color: var(--txt); border-color: #3b4552; }
.btn-backup:active { background: var(--panel2); }

.btn-backup svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 窄屏优先保按钮。右上角那个「3350 本」不是唯一的信息源 ——
   列表上方本来就有一行「共 3350 本」，让位给按钮更划算。 */
@media (max-width: 420px) {
  .hd-act .stat { display: none; }
}

/* ---------------------------------------------------------------- 搜索框 */

.field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}

.field:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(75, 157, 255, .13);
}

.field .ico {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--dim2);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.field input {
  flex: 1;
  min-width: 0;
  padding: 12px 42px 12px 39px;
  background: none;
  border: 0;
  outline: none;
  font-size: 15px;
}

.field input::placeholder { color: var(--dim2); }
.field input::-webkit-search-cancel-button { display: none; }

.clr {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--panel2);
  border: 0;
  border-radius: 50%;
}

.clr svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--dim);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- 筛选行 */

.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar { display: none; }

.frag {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

/* 组与组之间拉一道细线。系列和类型各有一个「全部」，中间没分隔的话
   屏幕上就是两个一模一样的胶囊挨着，没人看得出它们是两组筛选。 */
.frag + .frag {
  padding-left: 8px;
  border-left: 1px solid var(--line2);
}

/* 屏幕够宽就让筛选行折行，而不是横向滚动 —— 否则最后那个「排序」
   永远藏在屏幕外，用户根本不知道还有这个选项。 */
@media (min-width: 760px) {
  .filters {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.chip {
  flex: 0 0 auto;
  padding: 5px 11px;
  font-size: 12.5px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 999px;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}

.chip:hover { color: var(--txt); border-color: #3b4552; }

.chip[aria-pressed="true"] {
  color: #0b0e12;
  background: var(--acc);
  border-color: var(--acc);
  font-weight: 550;
}

/* 原生 select 长得丑但手机上体验最稳（有系统选择器），只换皮肤 */
.sel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  font-size: 12.5px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 999px;
  white-space: nowrap;
}

.sel span { color: var(--dim2); }

.sel select {
  max-width: 9.5em;
  padding: 1px 2px;
  font-size: 12.5px;
  color: var(--txt);
  background: none;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.sel select option { background: var(--panel); color: var(--txt); }

.tog {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--dim);
  border: 1px solid var(--line2);
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.tog input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--acc);
}

.tog:has(input:checked) {
  color: var(--txt);
  border-color: var(--acc-dim);
  background: rgba(75, 157, 255, .1);
}

/* ---------------------------------------------------------------- 列表 */

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px calc(40px + env(safe-area-inset-bottom));
}

.hint {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 2px 6px;
  font-size: 12px;
  color: var(--dim2);
  font-variant-numeric: tabular-nums;
}

.hint b { color: var(--dim); font-weight: 600; }

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

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

.row-in {
  display: grid;
  grid-template-columns: 56px 1fr 10px;
  gap: 12px;
  align-items: start;
  padding: 12px 4px;
  color: inherit;
  text-decoration: none;
}

.row-in:hover .t1 { color: var(--acc); }
.row-in:active { background: var(--panel); }

/* 缩略图：字母牌垫在底下，图片加载成功才盖上来。
   缩略图还没生成时（现在就是），全部显示字母牌，布局不跳。*/
.thumb {
  position: relative;
  display: block;
  width: 56px;
  height: 78px;
  overflow: hidden;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.thumb .tile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
  background: hsl(var(--h, 210) 30% 27%);
}

.thumb img {
  position: relative;
  width: 100%;
  height: 100%;
  /* contain：整张图等比放进来，绝不裁切。留白由 .thumb / .cover 的深色底兜住，
     图加载完成后 JS 会把底下的字母牌撤掉，留白里就不会透出彩色。 */
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}

.thumb img.on { opacity: 1; }

.txt { min-width: 0; }

.t1 {
  display: block;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: color .12s;
}

/* 没有中文名的书（1400 多本），英文名顶到主标题位 */
.t1.en { font-weight: 500; }

.t2 {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.t3 {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--dim2);
  overflow-wrap: anywhere;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.tag-i {
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--dim);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 4px;
  white-space: nowrap;
}

.tag-i.k { color: #9db8d8; }
.tag-i.y { color: #7fc9a4; border-color: #244437; background: #14251d; }

mark {
  padding: 0 1px;
  color: #fff;
  background: rgba(75, 157, 255, .28);
  border-radius: 2px;
}

.chev {
  align-self: center;
  font-size: 18px;
  color: #3a434f;
  line-height: 1;
}

/* 合集本 / 节译本那几行点下去会离开本站（跳到桶里预生成的整页），
   箭头换成 ↗ 并提亮，和「展开详情」的 › 区分开。 */
.row-in.ext .chev {
  font-size: 15px;
  color: var(--acc);
}

.empty {
  padding: 56px 0;
  font-size: 14px;
  color: var(--dim2);
  text-align: center;
}

.empty b { color: var(--dim); font-weight: 500; }

.more {
  display: flex;
  justify-content: center;
  padding: 22px 0 4px;
}

.more button {
  padding: 9px 26px;
  font-size: 13px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 999px;
}

.more button:hover { color: var(--txt); border-color: #3b4552; }

/* ---------------------------------------------------------------- 数据备份页 */

.bk { max-width: 760px; padding-top: 26px; }

.bk-back {
  font-size: 12.5px;
  color: var(--dim2);
  text-decoration: none;
}

.bk-back:hover { color: var(--acc); }

.bk-title {
  margin: 16px 0 10px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: .01em;
}

.bk-lead {
  margin: 0 0 26px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--dim);
}

.bk-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bk-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.bk-btn {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  padding: 10px 18px;
  color: #080b0f;
  background: var(--acc);
  border-radius: 9px;
  text-decoration: none;
  transition: opacity .15s;
}

.bk-btn:hover { opacity: .88; }

.bk-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.bk-s {
  font-size: 11.5px;
  opacity: .68;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 按钮右侧留给说明文字。现在是「说明待填」占位，填长了会自动折行 ——
   min-width:0 加上 flex:1 保证它不会把左边的按钮挤窄。 */
.bk-note {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--dim2);
}

@media (max-width: 560px) {
  .bk-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bk-note { padding-left: 2px; }
}

/* ---------------------------------------------------------------- 详情 */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 8, 11, .68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .16s ease-out;
}

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  background: var(--panel);
  border: 1px solid var(--line2);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  animation: rise .22s cubic-bezier(.22, .8, .3, 1);
}

@keyframes rise { from { transform: translateY(18px); opacity: .6 } }

@media (min-width: 640px) {
  .modal { align-items: center; }
  .sheet { border-bottom: 1px solid var(--line2); border-radius: 16px; }
}

.x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.x svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--dim);
  stroke-width: 2;
  stroke-linecap: round;
}

.sheet-hd {
  display: flex;
  gap: 14px;
  padding-right: 34px;
}

.cover {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  height: 116px;
  overflow: hidden;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.cover span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 650;
  color: rgba(255, 255, 255, .82);
  background: hsl(var(--h, 210) 30% 27%);
}

.cover img {
  position: relative;
  width: 100%;
  height: 100%;
  /* contain：整张图等比放进来，绝不裁切。留白由 .thumb / .cover 的深色底兜住，
     图加载完成后 JS 会把底下的字母牌撤掉，留白里就不会透出彩色。 */
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}

.cover img.on { opacity: 1; }

.sheet-hd-txt { min-width: 0; }

.sheet-hd-txt h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.m-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.sheet-hd-txt .tags { margin-top: 9px; }

.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 18px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.meta dt { color: var(--dim2); white-space: nowrap; }
.meta dd { margin: 0; overflow-wrap: anywhere; }

.res { margin-top: 14px; }

.res h3,
.stories h3 {
  margin: 16px 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dim2);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lnk {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
  border-top: 1px solid var(--line);
}

.lnk:first-of-type { border-top: 0; }

.lnk .k {
  flex: 0 0 4.2em;
  color: var(--dim2);
  font-size: 12px;
  white-space: nowrap;
}

.lnk a {
  min-width: 0;
  color: var(--acc);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.lnk a:hover { text-decoration: underline; }

.stories ol {
  margin: 0;
  padding: 0 0 0 2px;
  list-style: none;
  counter-reset: s;
  font-size: 13px;
  color: var(--dim);
}

.stories li {
  position: relative;
  padding: 3px 0 3px 24px;
  counter-increment: s;
  overflow-wrap: anywhere;
}

.stories li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: 11px;
  color: var(--dim2);
  font-variant-numeric: tabular-nums;
}

.sheet-ft {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.ghost {
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 8px;
  text-decoration: none;
  line-height: 1.5;
}

.ghost:hover { color: var(--txt); border-color: #3b4552; }

body.locked { overflow: hidden; }

/* ---------------------------------------------------------------- 联系方式 */

/* 放在页脚上方：找联系方式的人会往下滚到底，放这里既不打扰检索，
   又比塞进筛选栏/弹窗更容易被看到。*/
.contact {
  max-width: 420px;
  margin: 34px auto 0;
  padding: 14px 16px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.contact p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--dim);
}

.contact b { color: var(--txt); font-weight: 600; }

/* 群号用等宽 + 可整串选中：手机上长按选中一串数字很费劲，
   user-select: all 让它点一下就整段选中，直接复制。*/
.contact .qq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--acc);
  user-select: all;
  -webkit-user-select: all;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}