:root { --line: #d8d4cc; --muted: #8a8578; --ink: #1c1a17; }
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: #faf9f6;
  font: 15px/1.6 ui-sans-serif, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.topbar {
  display: flex; gap: 1.25rem; align-items: center;
  padding: .75rem 1.5rem; border-bottom: 1px solid var(--line); background: #fff;
}
.topbar a { color: var(--ink); text-decoration: none; }
.topbar .right { margin-left: auto; }

/* 顶栏保持一行。理由同 reader.css 里那一段：.topbar 是 nowrap 的 flex，
   折的是每一项内部的中文——中文可以在任意两个字之间断开。这里有六个入口，
   比前台那条还挤。 */
@media (max-width: 640px) {
  .topbar { gap: .7rem; padding: .6rem .75rem; }
  .topbar a, .topbar button { white-space: nowrap; }
  .topbar .who { display: none; }
}
main { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: .85rem; }
tr.muted { color: var(--muted); }
label { display: block; margin: .5rem 0; }
input[type=text], input[type=password] { padding: .35rem .5rem; border: 1px solid var(--line); }
button { padding: .4rem .9rem; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.error { color: #a3312a; }
.notice { color: #6b5e3a; background: #fdf6e3; border: 1px solid var(--line); padding: .5rem .75rem; }
.dialog-body .meta { color: var(--muted); font-size: .85rem; margin: .2rem 0; }
.dialog-body .rubric { font-style: italic; margin: .2rem 0 .6rem; }
.dialog-body img.head { max-width: 100%; height: auto; margin: .5rem 0; }
.ok { color: #2f6b3a; }
td.actions { white-space: nowrap; }
td.actions button { padding: .2rem .5rem; font-size: .85rem; }

/* padding 为 0，留白全部挪进 .dialog-body。滚动条属于 .dialog-body，
   弹层自己有内边距时滚动条会离右边框一截，在 macOS 上尤其显眼——它悬在
   正文中间，看着像哪里坏了。 */
#preview-dialog {
  width: min(46rem, 92vw); max-height: 82vh; padding: 0;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
  overflow: hidden;  /* 让圆角把滚动条的两端切齐 */
}
#preview-dialog::backdrop { background: rgba(28, 26, 23, .45); }
/* 自成一行、右对齐。float 会把按钮留在正文流里让段落绕着排，第一屏每行都
   被削掉一截；绝对定位又会压在滚动条上。一整行只花掉一点高度，不占宽度。 */
.dialog-close {
  display: flex; justify-content: flex-end;
  margin: 0; padding: .4rem .5rem 0;
}
.dialog-close button {
  border: 0; background: none; padding: .1rem .4rem;
  font-size: 1.4rem; line-height: 1; color: var(--muted);
}
.dialog-close button:hover { color: var(--ink); }
.dialog-body { max-height: 74vh; overflow-y: auto; padding: 0 1.5rem 1.25rem; }
.dialog-body h2 { font-size: 1.25rem; margin: .2rem 0; }

/* 预览的工具条与双语切换。译文一直在 DOM 里，切换只是 data-view 变了一下，
   所以来回切是零请求、零闪烁的。 */
.preview-bar {
  display: flex; gap: .75rem; align-items: center;
  padding-bottom: .6rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.preview-bar button { padding: .2rem .6rem; font-size: .85rem; }
.preview-bar .switch button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.preview-bar .copy-note { color: var(--muted); font-size: .85rem; }
.preview-bar .copy-note[hidden] { display: none; }
/* 段间距保持原样，不动。要空开的只是每一段内部英文与译文那一道。 */
.preview .para { margin: 0 0 .9rem; }
.preview .para p { margin: 0; }
/* 译文不加边框、不加底色。中英本来就一眼分得开，再画一条竖线只是把每
   一段都框起来，读起来变成一格一格的。隔开靠空白就够。 */
.preview .zh { color: #3c3a35; margin-top: .7rem; }
.preview .zh.missing { color: var(--muted); font-style: italic; }
/* 切到「原文」时译文整段收起来。用 display 而不是 visibility：留着空位
   会让整篇文章的段距变成两倍，看着像排版坏了。 */
.preview[data-view="en"] .zh { display: none; }
th a.sort { color: inherit; text-decoration: none; }
th a.sort:hover { text-decoration: underline; }
td.nowrap { white-space: nowrap; }
p.meta { color: var(--muted); font-size: .85rem; margin: .2rem 0 0; }
.pager { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; }
.pager span { color: var(--muted); font-size: .85rem; }
.sitefoot { margin: 2rem 0 1rem; font-size: .85rem; }
.sitefoot a { color: var(--muted); }
.job-done { color: #2f6b3a; }
.job-failed { color: #a3312a; }
.job-running { color: #6b5e3a; }
.job-pending { color: var(--muted); }

/* 加工结果检查页 */
.title-zh { font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; }
.title-zh.missing { font-size: 1rem; font-weight: 400; color: var(--muted); }
.para { border-top: 1px solid var(--line); padding: .75rem 0; }
.para p { margin: .3rem 0; }
p.zh { color: #3a4a5a; }
p.zh.missing { color: var(--muted); font-style: italic; }
table.terms { font-size: .85rem; margin: .5rem 0; }
table.terms td, table.terms th { padding: .2rem .5rem; }
tr.error td { color: #a3312a; }
.card, .hard { border-left: 3px solid var(--line); padding: .1rem .75rem; margin: .5rem 0; }
.card h3 { font-size: .95rem; margin: .3rem 0; }
.notes { margin: .3rem 0; }
details.warnings { margin: .5rem 0; color: #6b5e3a; }
a.btn {
  display: inline-block; padding: .2rem .5rem; font-size: .85rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  text-decoration: none;
}

/* 文章库的筛选条。窄屏上换行，不横向挤。 */
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
           margin: .75rem 0; font-size: .9rem; }
.filters select { font: inherit; padding: .15rem .3rem; }