/* 中卫线上平台 · 视觉系统
   —————————————————————————————————————————————————————————————————
   基调从「暖黑机房」翻成「档案纸面」：牛皮纸底 + 铁墨黑 + 黄铜 + LIVE 红。
   三条几何规则贯穿全站，只此三条，别的地方一律不许再发明：

     1  切角   所有方块的右下（或左下）啃掉一个 8–16px 的角，
               靠 clip-path 而不是 border-radius——档案卷宗是被裁的，不是被磨圆的。
     2  斜切   徽标、标签、按钮统一 skewX(-8deg)，内部文字反向 skewX(8deg) 扶正。
     3  微旋   卡片 ±0.4°~0.6°、横幅 ±1.2°，看着像手工贴上去的，不是排版出来的。

   字体分工不变（这一点原来就对）：等宽做元数据，宋体做正文，无衬线做 UI 标签。
   参考稿用的是 Google Fonts 的 Noto Serif SC / JetBrains Mono，这里不引——
   活动在国内跑，谷歌字体拿不到还会拖白屏，系统栈已经能拉开三种质感的差别。 */

:root {
  /* 纸与墨 */
  --paper:      #EDE5D6;   /* 主纸面 */
  --paper-deep: #DED5C2;   /* 页面外底色，比纸面略沉一档 */
  --paper-card: #DFD5C0;   /* 卡片纸，比主纸面稍暗，靠色阶而不是描边分层 */
  --paper-lite: #F4EEE0;   /* 深色块上的高亮字 */
  --ink:        #1E1A15;   /* 铁墨黑，不是纯黑 */
  --live:       #C0342B;   /* 唯一强调色，只给 LIVE / 投放 / 我 */
  --gold:       #C1A25C;   /* 黄铜：档案封条、进度、次要强调 */
  --gold-deep:  #8A6A28;   /* 纸面上可读的金色文字 */
  --gold-line:  #A8853F;   /* 金色描边 */

  /* 语义别名。admin.css 与既有类全在用这套名字，改底色不改用法。 */
  --bg:        var(--paper);
  --bg-raised: var(--paper-card);
  --fg:        var(--ink);
  --fg-dim:    rgba(30, 26, 21, 0.62);
  --fg-faint:  rgba(30, 26, 21, 0.45);
  --rule:      rgba(30, 26, 21, 0.18);

  /* 几何 */
  --cut:  8px;    /* 小切角：标签、按钮 */
  --cut2: 16px;   /* 大切角：卡片 */
  --skew: -8deg;

  --mono:  ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas,
           "Noto Sans Mono CJK SC", monospace;
  --serif: Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC",
           "SimSun", serif;
  --sans:  system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC",
           "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

/* hidden 属性必须能压过 .gate/.panel 这类带 display 的类选择器——
   类选择器优先级比 UA 的 [hidden]{display:none} 高，不加 !important 就藏不住。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper-deep);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* 横幅要旋转、要放大盖住两侧露出的纸面，代价是撑出横向滚动条。
   在根上掐掉——纵向滚动不受影响。 */
html { overflow-x: hidden; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  /* 纸纹：7px 网格的极淡墨点。比噪声图便宜，且不多占一个请求。 */
  background-color: var(--paper);
  background-image: radial-gradient(rgba(30, 26, 21, 0.16) 0.7px, transparent 0.8px);
  background-size: 7px 7px;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--live); }
::selection { background: rgba(192, 52, 43, 0.25); }

/* ------------------------------------------------------------ 动效词典 */

@keyframes led   { 0%, 52% { opacity: 1 } 53%, 100% { opacity: 0.15 } }
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes inUp  { from { opacity: 0; transform: translate3d(0, 18px, 0) } to { opacity: 1; transform: none } }
@keyframes inL   { from { opacity: 0; transform: translate3d(-22px, 8px, 0) skewY(2deg) } to { opacity: 1; transform: none } }
@keyframes inR   { from { opacity: 0; transform: translate3d(22px, 8px, 0) skewY(-2deg) } to { opacity: 1; transform: none } }
@keyframes grow  { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* 一处关掉全部动效。旋转与斜切是静态版式，不是动效，保留。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------- 布局骨架 */

.wrap {
  max-width: 40rem;      /* 窄栏：移动端优先，桌面也不铺开 */
  margin: 0 auto;
  padding: 0 1.125rem;
}

/* ------------------------------------------------------------------ 页眉 */

.masthead {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--ink);
  /* 下沿斜切：整条页眉像一张贴歪的封条，而不是一条居中的分割线 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 0 100%);

  /* 深色块内部翻转语义色，后代（含 admin.css 的 .tab）不必各自改写 */
  --fg:        var(--paper-lite);
  --fg-dim:    rgba(237, 229, 214, 0.66);
  --fg-faint:  rgba(237, 229, 214, 0.5);
  --rule:      rgba(237, 229, 214, 0.22);
  --bg-raised: rgba(237, 229, 214, 0.12);
  color: var(--paper-lite);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.125rem 1.05rem;   /* 底部多出的那点给斜切让位 */
  max-width: 40rem;
  margin: 0 auto;
}

.sysname {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--paper);
  white-space: nowrap;
  transform: skewX(-9deg);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
  background: var(--live);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--paper-lite);
  white-space: nowrap;
  transform: skewX(-9deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.live__dot {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--paper-lite);
  /* steps(1) 而不是 ease：机柜指示灯是跳变的，不会渐亮渐灭 */
  animation: led 1.3s steps(1, end) infinite;
}

/* 在线时长。数字本身没有信息量，它证明的是「一直在」。 */
.uptime {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: rgba(237, 229, 214, 0.66);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- 走马灯 */

.ticker {
  position: relative;
  z-index: 11;
  overflow: hidden;
  margin-top: -4px;              /* 咬住页眉的斜切口，不留缝 */
  background: var(--gold);
  /* 旋转会在两端露出纸面，放大 6% 盖回去 */
  transform: rotate(-1.4deg) scale(1.06);
}

.ticker__track {
  display: flex;
  /* max-content 而不是 200%：整条词表比屏幕宽得多，
     写死 200% 会把每份副本压成一个屏宽，两份叠在一起 */
  width: max-content;
  padding: 0.3rem 0;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
  animation: slide 40s linear infinite;
}

/* 两份等长的副本首尾相接，位移到 -50%（正好一份的宽度）时接回原点 */
.ticker__track > span { flex: none; }

/* -------------------------------------------------------------- 报头 */

.hero {
  position: relative;
  padding: 2rem 0 1.75rem;
  overflow: hidden;
  animation: inUp 0.5s 0.05s cubic-bezier(.2, .8, .2, 1) both;
}

/* 右上角斜纹色块与左下角的巨大幽灵数字，纯装饰，不承载信息 */
.hero::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -70px;
  width: 220px;
  height: 220px;
  background: repeating-linear-gradient(45deg,
    rgba(30, 26, 21, 0.07) 0 4px, transparent 4px 12px);
  transform: rotate(12deg);
}

.hero__ghost {
  position: absolute;
  left: -0.75rem;
  bottom: 0.5rem;
  font-family: var(--sans);
  font-weight: 900;
  font-size: 6rem;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(30, 26, 21, 0.05);
  transform: skewX(-10deg);
  user-select: none;
}

.hero__inner { position: relative; }

/* 黑底斜切小牌，报头与卡片共用 */
.tagchip {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--ink);
  transform: skewX(-10deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.tagchip > span {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  transform: skewX(10deg);
}

.hero__title {
  margin: 0.875rem 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  transform: skewX(-4deg);
  transform-origin: left;
}

/* 第二行右移一格：两行不对齐，字就有了排版的重量 */
.hero__title-b { display: inline-block; margin-left: 2.25rem; }

.hero__rule {
  display: flex;
  margin-bottom: 0;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.hero__rule::before {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--live);
  transform: skewX(-30deg);
}

.hero__rule > span {
  font-family: var(--mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}

/* 报头那条规则线上的英文可能很长（404 页），窄屏得让它折行而不是溢出 */
.hero__rule { flex-wrap: wrap; }
.hero__rule > span { flex: 1 1 12rem; }

/* ---------------------------------------------------------- 版权脚注 */

/* 接入页页脚的两个槽位：D 编号（待定稿）与引语残句。
   两个都是装饰层，走拉丁字母，不承载任何操作信息。 */
.colophon {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(30, 26, 21, 0.14);
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

/* 编号没填就整块不占位——:empty 只在元素连空白都没有时才命中 */
.colophon__id:empty { display: none; }

.colophon__id {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--fg-dim);
}

.colophon__quote {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.9;
  letter-spacing: 0;
  text-wrap: pretty;
}

.colophon__by {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------- 登录页 */

.gate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  /* 只动纵向内边距——横向留给 .wrap，用 shorthand 会把它清成 0 */
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.gate__title {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 0.5rem;
}

.gate__lede {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--fg);
  margin: 0 0 2rem;
}

.field { display: block; margin-bottom: 1rem; }

.field__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.5rem;
}

.field__input {
  width: 100%;
  padding: 0.875rem;
  background: var(--paper-lite);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.0625rem;      /* ≥16px，避免 iOS Safari 聚焦缩放 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
}

.field__input::placeholder { color: var(--fg-faint); text-transform: none; letter-spacing: 0.04em; }

/* clip-path 把外描边的角削掉了，focus 环只能画在里面 */
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }

/* 常规按钮：切角墨线块。控制台里有三十来个，斜切了会闹。 */
.btn {
  display: block;
  width: 100%;
  padding: 0.8125rem 1.125rem;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
  transition: background 0.16s, color 0.16s;
}

.btn:hover:not([disabled]) { background: var(--ink); color: var(--paper-lite); }
.btn:active:not([disabled]) { background: var(--gold); color: var(--ink); }
.btn[disabled] { opacity: 0.4; cursor: default; }

/* 主行动按钮：红底斜切。一页只给一个——它斜，是因为别的都不斜。 */
.btn--cta {
  background: var(--live);
  border-color: var(--live);
  color: var(--paper-lite);
  transform: skewX(-9deg);
}

/* 整块斜了，文字必须反向扶正，否则中文歪得没法读 */
.btn--cta > * { display: inline-block; transform: skewX(9deg); }

.btn--cta:hover:not([disabled]) { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--cta:active:not([disabled]) { background: var(--ink); border-color: var(--ink); color: var(--paper-lite); }
.btn--cta[disabled] { background: rgba(30, 26, 21, 0.16); border-color: transparent; color: rgba(30, 26, 21, 0.45); opacity: 1; }

.note {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--fg-faint);
  margin-top: 1.5rem;
}

.error {
  min-height: 1.4rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--live);
  margin-top: 0.875rem;
}

/* ------------------------------------------------------------ 身份条 */

.who {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.375rem;
  padding: 1.25rem 0 1.5rem;
  animation: inUp 0.5s 0.14s cubic-bezier(.2, .8, .2, 1) both;
}

/* 斜切铭牌：调查员 / 队伍 / 信道。外层斜、内层扶正。 */
.plate {
  flex: 1 1 0;
  min-width: 6.5rem;
  padding: 0.625rem 0.7rem 0.7rem;
  transform: skewX(-7deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px),
                     calc(100% - 7px) 100%, 0 100%);
}

.plate > * { display: block; transform: skewX(7deg); }

.plate__label {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.plate__value {
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plate--ink  { background: var(--ink); color: var(--paper); }
.plate--ink  .plate__label { color: rgba(237, 229, 214, 0.55); }
.plate--gold { background: var(--gold); color: var(--ink); }
.plate--gold .plate__label { color: rgba(30, 26, 21, 0.62); }
.plate--out  { border: 1.5px solid var(--ink); }
.plate--out  .plate__label { color: var(--fg-dim); }
.plate--out  .plate__value { font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; }

/* 铭牌会把整行占满，动作链接因此总是掉到第二行——那就让它明确地靠右单占一行 */
.who__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-left: auto;
  padding-top: 0.125rem;
}

.who__link,
.who__logout {
  background: none;
  border: none;
  padding: 0;
  color: var(--gold-deep);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.who__link:hover, .who__logout:hover { color: var(--live); }

/* 「互动」旁边的红点：有没交的进行中轮次就亮。
   位置压在文字右上角外侧，不占行宽——不然一亮一灭整行会跳。
   跳动是刻意的：这一页的其它元素全都不动，只有它动，才抢得到眼睛。 */
.who__link { position: relative; }

.dot {
  position: absolute;
  top: -0.125rem;
  right: -0.5rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--live);
  animation: dotPulse 1.8s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}

/* 系统设了「减少动态效果」就老老实实不动，红色本身已经够说明问题 */
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}

/* --------------------------------------------------------- 日期横幅 */

/* 出血到栏外：横幅是贴在纸上的封条，不受正文栏宽约束 */
.dayband {
  position: relative;
  margin: 0 -1.125rem 1.375rem;
  padding: 0.55rem 1.125rem;
  background: var(--ink);
  transform: rotate(-1.2deg) scale(1.04);
  animation: inUp 0.5s cubic-bezier(.2, .8, .2, 1) both;
}

/* 奇偶交替换倾斜方向，长列表里就看不出复读机的痕迹 */
.dayband--alt { transform: rotate(1.2deg) scale(1.04); }

.dayband__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transform: rotate(1.2deg);
}

.dayband--alt .dayband__inner { transform: rotate(-1.2deg); }

.dayband__n {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--paper);
  transform: skewX(-9deg);
}

.dayband__sum {
  font-family: var(--mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-align: right;
}

/* ------------------------------------------------------------ 时间线 */

.feed { padding-bottom: 5rem; }

/* 每条记录一张卡：左边竖排导轨，右边卡片。 */
.rec {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 0.5rem;
  margin-bottom: 1.5rem;
  animation: inL 0.5s cubic-bezier(.2, .8, .2, 1) both;
}

.rail { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }

.rail__sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  background: var(--ink);
  color: var(--paper-lite);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.875rem;
  transform: skewX(var(--skew));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
}

.rail__sigil > span { display: inline-block; transform: skewX(8deg); }

/* 虚线导轨：3px 实 5px 空，比 border-style: dashed 可控 */
.rail__line {
  flex: 1;
  width: 2px;
  background: repeating-linear-gradient(180deg,
    rgba(30, 26, 21, 0.3) 0 3px, transparent 3px 8px);
}

.rec__col { min-width: 0; }   /* grid 子项默认 min-width:auto，长英文会撑破格 */

.rec__card {
  position: relative;
  padding: 1rem 1.0625rem 0;
  background: var(--paper-card);
  border-left: 3px solid var(--ink);
  transform: rotate(0.4deg);
  /* 右上角被裁掉一块——卷宗是撕下来的 */
  clip-path: polygon(0 0, calc(100% - var(--cut2)) 0, 100% var(--cut2),
                     100% 100%, 0 100%);
}

.rec__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.5938rem;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  margin-bottom: 0.5rem;
}

.rec__id { font-weight: 700; color: var(--fg); }

.rec__tag {
  padding: 0.05rem 0.4rem;
  background: rgba(30, 26, 21, 0.1);
  font-weight: 700;
}

.rec__title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: 0 0 0.875rem;
  transform: skewX(-3deg);
  transform-origin: left;
}

/* 正文：衬线宋体、窄栏、宽行距——冷记录与暖正文的对照 */
.rec__body {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-wrap: pretty;
}

.rec__body > :first-child { margin-top: 0; }
.rec__body > :last-child  { margin-bottom: 0; }

.rec__body h1, .rec__body h2, .rec__body h3 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: 1.5rem 0 0.625rem;
}

/* 题眼：正文里的单行重音（「极简」、异象铭牌、结尾那一句）。
   刻意不跟 h2/h3 一路——它不是章节标题，是正文抬高了嗓门，
   所以用衬线而不是无衬线，底下压一条黄铜线收住。 */
.rec__body h1 {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  margin: 1.75rem 0 1.125rem;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px solid var(--gold-line);
}
.rec__body h2 { font-size: 1.0625rem; }
.rec__body h3 { font-size: 0.9375rem; color: var(--fg-dim); }

.rec__body p  { margin: 0 0 1rem; }
.rec__body ul, .rec__body ol { margin: 0 0 1rem; padding-left: 1.375rem; }
.rec__body li { margin-bottom: 0.375rem; }

.rec__body blockquote {
  margin: 1.25rem 0;
  padding-left: 0.9375rem;
  border-left: 3px solid var(--gold-line);
  color: var(--fg-dim);
}

.rec__body hr {
  border: none;
  height: 2px;
  margin: 1.75rem 0;
  background: repeating-linear-gradient(90deg,
    rgba(30, 26, 21, 0.3) 0 2px, transparent 2px 6px);
}

.rec__body code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: rgba(30, 26, 21, 0.1);
  padding: 0.1em 0.35em;
}

.rec__body strong { font-weight: 700; }
.rec__body em { font-style: italic; }

/* ------------------------------------------------- 长消息折叠

   默认全展开，由 feed.js 量完真实高度后才给超长的那条加 .fold--on。
   为什么不是「默认折起来再决定展开」：那样短消息会先闪一下再弹开。 */

.fold__btn { display: none; }

.fold--on .fold__inner {
  max-height: 320px;   /* 与 feed.js 的 FOLD_MAX 保持一致 */
  overflow: hidden;
  /* 下沿淡出，明示「下面还有」——比硬切一刀更像纸被压住了一截 */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 74%, transparent 100%);
}

.fold--on.is-open .fold__inner {
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}

.fold--on .fold__btn {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  background: none;
  border: none;
  border-top: 1px solid var(--rule);
  color: var(--fg-dim);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.fold__btn-text {
  display: inline-block;
  transform: skewX(var(--skew));
  padding: 0.15rem 0.75rem;
  background: rgba(30, 26, 21, 0.08);
}
.fold__btn-text > * { display: inline-block; transform: skewX(8deg); }

.fold--on .fold__btn:hover .fold__btn-text,
.fold--on .fold__btn:focus-visible .fold__btn-text {
  background: var(--ink);
  color: var(--paper-lite);
}

/* 深色投放卡上翻过来 */
.rec--drop .fold--on .fold__btn {
  border-top-color: rgba(237, 229, 214, 0.2);
  color: var(--gold);
}
.rec--drop .fold__btn-text { background: rgba(237, 229, 214, 0.12); }
.rec--drop .fold--on .fold__btn:hover .fold__btn-text,
.rec--drop .fold--on .fold__btn:focus-visible .fold__btn-text {
  background: var(--gold);
  color: var(--ink);
}

/* 页脚计数条：负边距拉满卡片宽度，压一条细线 */
.rec__count {
  margin: 0.875rem -1.0625rem 0;
  padding: 0.6875rem 1.0625rem 0.75rem;
  border-top: 1px solid rgba(30, 26, 21, 0.16);
  font-family: var(--mono);
  font-size: 0.5938rem;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

/* --------------------------------------------- 投放：合规通信信道 */

/* 投放是编委会发的，占满整宽、黑底，与证词笔录拉开层级 */
.rec--drop {
  display: block;
  animation-name: inUp;
}

.rec--drop .rec__meta { padding-left: 0.25rem; margin-bottom: 0.5625rem; }

.rec__flag {
  padding: 0.15rem 0.5rem;
  background: var(--live);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--paper-lite);
  transform: skewX(-9deg);
}

.rec--drop .rec__card {
  padding: 0;
  background: var(--ink);
  border-left: none;
  transform: rotate(-0.5deg);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 22px),
                     calc(100% - 22px) 100%, 0 100%);

  /* 深色卡内翻转语义色，正文那一整套样式一行都不用改写 */
  --fg:       var(--paper);
  --fg-dim:   rgba(237, 229, 214, 0.7);
  --fg-faint: rgba(237, 229, 214, 0.5);
  color: var(--paper);
}

/* 右上角的黄铜斜纹三角，只出现在投放上 */
.rec--drop .rec__card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: repeating-linear-gradient(45deg,
    rgba(193, 162, 92, 0.28) 0 2px, transparent 2px 7px);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.rec__chan {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem 0.6875rem;
  border-bottom: 1.5px solid var(--gold);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.rec--drop .rec__title,
.rec--drop .rec__body { position: relative; padding: 0 1.125rem; }
.rec--drop .rec__title { margin: 1.25rem 0 0.875rem; color: var(--paper); }
.rec--drop .rec__body { color: rgba(237, 229, 214, 0.9); }

.rec--drop .rec__body blockquote { border-left-color: var(--gold); }
.rec--drop .rec__body h1 { color: var(--paper-lite); border-bottom-color: var(--gold); }
.rec--drop .rec__body code { background: rgba(237, 229, 214, 0.14); }
.rec--drop .rec__body hr {
  background: repeating-linear-gradient(90deg,
    rgba(237, 229, 214, 0.35) 0 2px, transparent 2px 6px);
}

.rec--drop .rec__count {
  margin: 0.875rem 0 0;
  padding: 0.625rem 1.125rem 0.9375rem;
  border-top: 1px solid rgba(237, 229, 214, 0.2);
  color: rgba(237, 229, 214, 0.5);
}

/* -------------------------------------------- 证词笔录：人云我云的话 */

.rec--testimony { animation-name: inL; }

.rec__witness {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: -0.25rem 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.5938rem;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

.rec__witness-label::after { content: '：'; }
.rec__witness-name { color: var(--gold-deep); font-weight: 700; }

/* ------------------------------------------------------------ 配图 */

/* 配图当成一张贴上去的相片：留出纸边、压一道墨线、跟卡片反着歪一点。
   出血到卡片边缘试过——生成的图偏暗，满幅铺开会把卡片读成一个洞。 */
.rec__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.125rem 0 0.375rem;
  border: 1.5px solid var(--ink);
  background: rgba(30, 26, 21, 0.08);
  transform: rotate(-0.6deg);
}

.rec--drop .rec__image { border-color: var(--gold); }

/* ------------------------------------------------- 提交页 / 历史记录 */

.section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 2.5rem 0 1rem;
  font-family: var(--mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* 紧跟在身份条后面的那一条不必再留 2.5rem，上面已经有留白了 */
.who + .section-title { margin-top: 1.25rem; }

/* 标题后拖一条虚线到行尾，像表格上的填空线 */
.section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(30, 26, 21, 0.3) 0 2px, transparent 2px 6px);
}

.compose { padding-top: 0.5rem; }

.compose__box {
  display: block;
  width: 100%;
  padding: 0.9375rem 1rem;
  background: var(--paper-lite);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;   /* ≥16px，避免 iOS Safari 聚焦缩放 */
  line-height: 1.95;
  resize: vertical;
  clip-path: polygon(0 0, calc(100% - var(--cut2)) 0, 100% var(--cut2),
                     100% 100%, 0 100%);
}

.compose__box:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }

.compose__bar {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  margin-top: 0.5rem;
}

.compose__count {
  flex: none;
  white-space: nowrap;   /* 限制说明变长后会换行，别把「0 字」也挤断成两行 */
  color: var(--fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.compose__limit { text-align: right; }
.compose__count.is-over { color: var(--live); }

.compose__notice {
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.9;
  color: var(--fg-faint);
  margin: 1rem 0 1.25rem;
}

/* 历史提交＝「我」说的话：右导轨、黄铜卡，与左侧的证词笔录对峙 */
.past {
  display: grid;
  grid-template-columns: 1fr 30px;
  column-gap: 0.5rem;
  margin-bottom: 1.5rem;
  animation: inR 0.5s cubic-bezier(.2, .8, .2, 1) both;
}

.past .rail__sigil {
  background: var(--live);
  /* 切角换到左下——它属于右侧那条导轨，方向要反过来 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%,
                     0 calc(100% - var(--cut)));
}

.past .rail__line {
  background: repeating-linear-gradient(180deg,
    rgba(192, 52, 43, 0.45) 0 3px, transparent 3px 8px);
}

.past__col { min-width: 0; }

.past__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.5938rem;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}

.past__meta .rec__id { color: var(--gold-deep); }
.past__meta .rec__tag { background: rgba(138, 106, 40, 0.16); }

.past__card {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.0625rem 0;
  background: var(--gold);
  border-right: 4px solid var(--ink);
  transform: rotate(-0.6deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut2) 100%,
                     0 calc(100% - var(--cut2)));
}

/* 左下角斜纹，与投放右上角的三角呼应，方向相反 */
.past__card::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 54px;
  background: repeating-linear-gradient(45deg,
    rgba(30, 26, 21, 0.16) 0 2px, transparent 2px 7px);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.past__body {
  position: relative;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-wrap;   /* 逐字收录：换行也照原样留着 */
  word-break: break-word;
}

.past .rec__count {
  position: relative;
  border-top: 1.5px solid rgba(30, 26, 21, 0.28);
  text-align: right;
  color: rgba(30, 26, 21, 0.6);
}

/* ------------------------------------------------------------- 空状态 */

.empty {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 2;
  color: var(--fg-faint);
  padding: 2.5rem 0;
  margin: 0;
  border-top: 2px solid rgba(30, 26, 21, 0.12);
  border-bottom: 2px solid rgba(30, 26, 21, 0.12);
}

/* ------------------------------------------------------------ 轮次 */

.round {
  position: relative;
  padding: 1.0625rem 1.125rem 1.125rem;
  margin-bottom: 1.25rem;
  background: var(--paper-card);
  border-left: 3px solid var(--live);
  transform: rotate(0.3deg);
  clip-path: polygon(0 0, calc(100% - var(--cut2)) 0, 100% var(--cut2),
                     100% 100%, 0 100%);
  animation: inUp 0.5s cubic-bezier(.2, .8, .2, 1) both;
}

.round__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  font-family: var(--mono);
  font-size: 0.5938rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  margin-bottom: 0.625rem;
}

.round__meta .rec__tag {
  padding: 0.15rem 0.5rem;
  background: var(--ink);
  color: var(--paper-lite);
  letter-spacing: 0.12em;
  transform: skewX(-9deg);
}

/* 轮次的拉丁副题。同 .hero__rule 的处理：一段短红线 + 等宽小字。 */
.round__en {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.25rem 0 0.75rem;
}

.round__en::before {
  content: '';
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--live);
  transform: skewX(-30deg);
}

.round__en > span {
  font-family: var(--mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}

.round__title {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0 0 0.625rem;
  transform: skewX(-3deg);
  transform-origin: left;
}

.round__brief {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 0.875rem;
  text-wrap: pretty;
}

.round__brief > :first-child { margin-top: 0; }
.round__brief > :last-child { margin-bottom: 0; }

/* 已提交的那一份原样贴回来，一字不改 */
.round__done {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.9;
  color: var(--fg-dim);
  background: rgba(30, 26, 21, 0.06);
  border-left: 3px solid var(--gold-line);
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.round--expired { opacity: 0.55; border-left-color: var(--fg-faint); }
.round--expired .round__title { text-decoration: line-through; text-decoration-thickness: 2px; }

/* 只管轮次卡里的这枚。控制台的 .pill 是另一套，密度不同，见 admin.css。 */
.round__meta .pill {
  padding: 0.15rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: skewX(-9deg);
}

.round__meta .pill--todo { background: var(--live); color: var(--paper-lite); }
.round__meta .pill--done { background: rgba(30, 26, 21, 0.14); color: var(--fg-dim); }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.choice {
  flex: 1 1 auto;
  padding: 0.75rem 1rem;
  background: var(--paper-lite);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, 0 100%);
  transition: background 0.16s, color 0.16s;
}

.choice:hover:not([disabled]) { background: var(--gold); }
.choice:active:not([disabled]) { background: var(--ink); color: var(--paper-lite); }
.choice.is-mine { background: var(--ink); color: var(--paper-lite); }
.choice.is-mine::after { content: ' ●'; color: var(--live); }
.choice[disabled] { opacity: 0.5; cursor: default; }

/* 轮次里的按钮不占满整行，斜切块贴左 */
.round .btn { width: auto; min-width: 9rem; padding-inline: 1.5rem; }

/* --------------------------------------------------------- 折叠块 */

.rec__body details,
.round__brief details {
  margin: 1.25rem 0;
  background: rgba(30, 26, 21, 0.06);
  border-left: 3px solid var(--gold-line);
}

.rec--drop .rec__body details { background: rgba(237, 229, 214, 0.08); }

.rec__body summary,
.round__brief summary {
  cursor: pointer;
  padding: 0.75rem 0.875rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  list-style: none;
}

.rec--drop .rec__body summary { color: var(--gold); }

.rec__body summary::-webkit-details-marker,
.round__brief summary::-webkit-details-marker { display: none; }

.rec__body summary::before,
.round__brief summary::before {
  content: '＋';
  display: inline-block;
  width: 1.2em;
}

.rec__body details[open] > summary,
.round__brief details[open] > summary { border-bottom: 1px solid var(--rule); }
.rec__body details[open] > summary::before,
.round__brief details[open] > summary::before { content: '－'; }

.rec__body details > :not(summary),
.round__brief details > :not(summary) { padding: 0 0.875rem; }
.rec__body details > :not(summary):first-of-type,
.round__brief details > :not(summary):first-of-type { padding-top: 0.875rem; }
.rec__body details > :last-child,
.round__brief details > :last-child { padding-bottom: 0.875rem; }

/* --------------------------------------------------------- 配额条 */

.quota {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.0625rem 1.0625rem;
  background: var(--ink);
  color: var(--paper);
  transform: rotate(-0.5deg);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 14px 100%,
                     0 calc(100% - 14px));

  /* 深色块内翻转语义色，里面的 .compose__count 不必单独改写 */
  --fg:       var(--paper-lite);
  --fg-faint: rgba(237, 229, 214, 0.5);
  --live:     #E8564C;   /* 墨底上的告警红，#C0342B 在这里太闷 */
}

.quota__head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(237, 229, 214, 0.6);
}

.quota__bar {
  position: relative;
  height: 6px;
  margin-top: 0.625rem;
  background: rgba(237, 229, 214, 0.16);
  overflow: hidden;
}

/* 由 JS 改 right：0% 是填满，100% 是空 */
.quota__fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--gold);
  transform-origin: left;
  animation: grow 0.9s 0.2s cubic-bezier(.2, .8, .2, 1) both;
  transition: right 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* 斜向切口把进度条剁成一段段，像老式计量表 */
.quota__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg,
    transparent 0 10px, var(--ink) 10px 12px);
}

.quota__foot {
  margin-top: 0.625rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: rgba(237, 229, 214, 0.5);
}

/* ------------------------------------------------------------ 窄屏 */

@media (max-width: 26rem) {
  .hero__title { font-size: 2.125rem; }
  .hero__ghost { font-size: 4.5rem; }
  .rec__title { font-size: 1.25rem; }
  .who { gap: 0.3125rem; }
  .plate { min-width: 5.25rem; padding: 0.5rem 0.5625rem 0.5625rem; }
  .plate__value { font-size: 0.875rem; }
  .who__actions { width: 100%; margin-left: 0; justify-content: flex-end; padding-top: 0.25rem; }
}