/* 自托管的宋体子集（仅首页固定文案的字，~40KB/档）：
   解决安卓/微信无系统宋体时回退成黑体的问题。改首页文案后若用到新字，
   重新跑 tools/subset-serif.sh 生成。帖子内容是用户内容，仍用系统黑体。 */
@font-face {
  font-family: 'WallSerif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/wallserif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'WallSerif';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/wallserif-600.woff2') format('woff2');
}
/* 英文/数字的衬线体：Source Serif 4，宋体(思源/Noto CJK)的同门拉丁伴侣，
   放在 --serif 最前 → 英文走它、中文落到 WallSerif，两者天生协调。仅拉丁，~12KB/档。 */
@font-face {
  font-family: 'SourceSerif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/sourceserif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'SourceSerif';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/sourceserif-600.woff2') format('woff2');
}
/* Commune 品牌字体：Big Shoulders Display 900（Google Fonts，OFL 开源字体）——对着 Commune 官方
   logo 图片比过一圈候选字体(Anton/Bungee/Staatliches/Passion One/Archivo Black/Fjalla One)，
   这个条形高瘦、笔画方切的字形跟 logo 里"COMMUNE"最接近。只子集了 wordmark 会用到的 6 个大写字母
   （C/O/M/U/N/E，配合下面 .brand-mini/.brand-title 的 text-transform:uppercase），~1.2KB。
   自托管而不是挂 Google Fonts CDN，原因跟宋体子集一样——国内访问 Google 域名常年不稳定，
   自托管才不会在安卓/微信里回退成系统字体。这个字体没有中文字形，"的墙"会自动落到后面的
   --serif 链，不用额外拆 span。 */
@font-face {
  font-family: 'BigShouldersBrand';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('/fonts/bigshoulders-900.woff2') format('woff2');
}

:root {
  /* 夜间模式：全站背景改黑，呼应 Commune 品牌调性（橙+黑）。这些变量名字没变，
     语义整体反过来了——ink 现在是"亮字"，bg/surface 是"暗底"，别被名字里的"ink"误导。 */
  --bg: #0d0d0d;        /* 暗底 */
  --surface: #1c1a17;   /* 卡片/输入框 */
  --ink: #f2ede2;       /* 主文字（亮） */
  --ink-2: #b8b0a0;     /* 次级（亮） */
  --ink-3: #8f8676;     /* 弱化/元信息（亮，但比 ink/ink-2 暗一档） */
  --line: #2c2a24;      /* 发丝线（暗底上的浅描边） */
  /* 警示色：将熄/烧一下/表单校验错误共用。原来是"余烬橙"，但现在橙纸本身就是饱和橙色(--brand)，
     同色系的警示色一叠上去基本看不见——换成鲜红(色相上跟橙/蓝/绿三张纸都拉开距离)，暗底也够亮 */
  --accent: #ff2d55;
  --brand: #fe7600;     /* Commune 官方品牌色（从 logo 图片取的准确像素值），wordmark + 首页卡片底色；跟「将熄」的 --accent 分开 */
  --brand-font: 'BigShouldersBrand', var(--serif); /* wordmark 专用：覆盖"COMMUNE"六个字母，中文落回 --serif 链 */

  --serif: "SourceSerif", "WallSerif", "Songti SC", "Song", "STSong", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  --r-card: 16px;
  --r-btn: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--brand); /* 宽屏时墙面纹理(body::before)只封顶 540px，两侧露出的部分用品牌橙 */
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 夜间的墙：近黑渐变 + 两团很淡的品牌橙雾（固定，供半透明卡片透出）——
   原来是暖白配玫瑰/藕荷雾，这版整体反过来，雾也从玫瑰/藕荷换成呼应 Commune 品牌的橙色 */
body::before {
  content: ''; position: fixed; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 540px; z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cg stroke='rgba(255,255,255,0.05)' stroke-width='1.1' fill='none'%3E%3Cpath d='M0 0H60M0 20H60M0 40H60'/%3E%3Cpath d='M0 0V20M60 0V20M30 20V40'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 40px,
    radial-gradient(78% 50% at 12% 4%, rgba(254, 118, 0, .16), transparent 62%),
    radial-gradient(74% 50% at 90% 98%, rgba(254, 118, 0, .10), transparent 64%),
    linear-gradient(180deg, #131313 0%, #050505 100%);
  box-shadow: 0 0 70px rgba(0, 0, 0, .5);
}
/* 正面↔背面之间的跳转：common.js 的 Wall.goWithFade 给离开页的 body 挂 wall-flip-out 再导航（快、干脆）；
   落地页挂 wall-flip-in——背面(back.html)常驻这个类，主墙则只在「从背面跳回来」时由 common.js 按
   document.referrer 临时挂上（不影响主墙平时的正常访问）。慢慢从下方浮起 + 由虚到实，别硬切也别太快弹出 */
.wall-flip-out { animation: wall-flip-out .3s ease forwards; }
@keyframes wall-flip-out { to { opacity: 0; } }
/* 不用 filter:blur ——那是非合成属性，body 这么大一整屏(还叠着复杂的渐变/纹理背景)逐帧模糊很卡，
   尤其手机上；只用 opacity+transform，浏览器能走合成层，不重绘。
   只用 from/to 两帧(别加中间关键帧)：中间插一帧会让缓动曲线在那一帧边界重新起停，
   变成"顿一下"；"慢慢浮现"改由缓动曲线本身的形状来做——前段几乎不怎么动、留到后段才追上来 */
.wall-flip-in { animation: wall-flip-in 1s cubic-bezier(.45, 0, .15, 1); }
@keyframes wall-flip-in { from { opacity: 0; transform: translateY(32px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .wall-flip-out, .wall-flip-in { animation: none; }
}
/* 墙的背面(back.html) 没有单独做一套「更暗」的背景——主墙现在本来就是夜间深色系，
   直接沿用同一份 body::before 就已经够"暗色系"了，不用像解放西主墙那样再叠一层更暗的对比 */
a { color: inherit; text-decoration: none; }

/* —— 按钮：胶囊 + 发丝描边 + 宽字距，克制 —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 400;
  letter-spacing: 3px;
  padding: 14px 26px 14px 29px; /* 左多 3px，抵消末尾字距，视觉居中 */
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active { opacity: .65; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.12); } /* 不用固定色号——按钮底色会因场景变(默认/品牌橙/纸色)，brightness 都适用 */

/* 发帖按钮的上传进度可视化：左→右填亮，--progress(百分比) 由 postsheet.js 设 */
.sheet[data-color] .btn-primary.is-uploading,
.btn-primary.is-uploading {
  background:
    linear-gradient(to right, transparent var(--progress, 0%), rgba(0, 0, 0, .3) var(--progress, 0%)),
    var(--paper-accent, var(--ink));
  cursor: progress; transition: background .25s linear;
  font-variant-numeric: tabular-nums; letter-spacing: 2px;
}
.btn-primary.is-uploading:disabled { opacity: 1; } /* 进度要看得清，盖掉 disabled 的变淡 */

.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, .18); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-burn {
  background: transparent; color: var(--ink-2); border-color: var(--line);
  border-radius: 7px;
  padding: 6px 13px; font-size: 12.5px; letter-spacing: 1.5px; white-space: nowrap;
}
.btn-burn:hover { border-color: var(--ink-3); color: var(--ink); }
.btn-burn:disabled { color: var(--ink-3); opacity: 1; border-color: var(--line); }

.btn-edit {
  background: transparent; color: var(--ink-3); border: none;
  padding: 8px 7px; font-size: 13px; letter-spacing: 1px;
}
.btn-edit:hover { color: var(--ink); }

/* —— 顶栏 —— */
.topbar {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 0 14px;
}
.topbar h2 { font-size: 16px; font-weight: 600; text-align: center; margin: 0; letter-spacing: .5px; }
.topbar .back { font-size: 22px; line-height: 1; color: var(--ink-2); }
.topbar .link { color: var(--ink); font-size: 15px; font-weight: 600; text-align: right; }
.topbar--wall { grid-template-columns: auto 1fr auto; }
.brand-mini {
  justify-self: start;
  background: none; border: none; cursor: pointer;
  font-family: var(--brand-font); font-weight: 900; font-size: 19px; letter-spacing: -.5px;
  text-transform: uppercase; color: var(--brand); padding: 4px 0; white-space: nowrap;
}
.brand-mini .wall-char { text-transform: none; } /* “墙”是中文，不跟着英文一起转大写(转了也没效果，但显式关掉更清楚) */

/* —— 页面骨架 —— */
.page {
  max-width: 540px; margin: 0 auto;
  padding: 0 18px calc(48px + env(safe-area-inset-bottom));
  min-height: 100vh; min-height: 100dvh;
}

/* 常驻头部：吸顶。磨砂层放到 ::before，下缘用渐变遮罩柔和淡出——
   既透出背后的砖墙、又让卡片温和地溶进墙里，不留尖锐的磨砂硬边。
   （遮罩须加在伪元素上：直接遮 .feed-head 会把标题文字也一起淡掉） */
.feed-head {
  position: sticky; top: 0; z-index: 6;
  margin: 0 -18px; padding: 0 18px;
}
.feed-head::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 8, .55), rgba(8, 8, 8, .15));
  -webkit-backdrop-filter: blur(11px) saturate(1.03);
  backdrop-filter: blur(11px) saturate(1.03);
  /* 淡出落在标签栏底部那 18px 空白里，不动文字 */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
}

/* —— 首页：半透明覆盖层，透出背后的墙 —— */
body.home-open { overflow: hidden; }
.home-overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(5, 5, 5, .4), rgba(5, 5, 5, .66));
  -webkit-backdrop-filter: blur(16px) saturate(1.02);
  backdrop-filter: blur(16px) saturate(1.02);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.home-overlay.dismissed {
  opacity: 0; transform: translateY(-8px) scale(1.012);
  pointer-events: none;
}
.home-card {
  width: 100%; max-width: 380px; text-align: center;
  padding: 48px 30px 28px;
  background: var(--brand); /* Commune 官方 logo 就是这个橙做底，首页这张"名片"直接用品牌色 */
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 20px;
}
/* 卡片是品牌橙底，文字要改深色才够对比（跟 logo 一样黑字配橙底）。
   不动 .tagline 等选择器本身的定义——这里只在 .home-card 范围内加一层覆盖 */
.home-card .tagline,
.home-card .wall-status,
.home-card .sig-name { color: rgba(0, 0, 0, .72); }
.home-card .wall-status.high,
.home-card .wall-status.high::before { color: #000; background: #000; }
.home-card .home-note,
.home-card .site-foot { color: rgba(0, 0, 0, .52); }
.home-card .btn-ghost { color: #000; border-color: rgba(0, 0, 0, .32); }
.home-card .btn-ghost:hover { border-color: #000; }
.brand-title {
  font-family: var(--brand-font); font-weight: 900;
  text-transform: uppercase;
  font-size: 40px; letter-spacing: -1px; margin: 0; color: #000; /* logo 是黑字配橙底，这里跟卡片橙底直接配黑字 */
}
.brand-title .wall-char { text-transform: none; }
/* 墙字右半边(啬)现在跟橙纸共用 --red-accent = --brand，在深色顶栏上没问题，
   但首页卡片本身也是这个橙底，右半边会橙字叠橙底"隐形"——这里单独把卡片里的右半边换成黑 */
.home-card .wall-char {
  background: linear-gradient(90deg, var(--wall-blue) 0%, var(--wall-blue) 40%, #000 40%, #000 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 「墙」字：左偏旁(土)=蓝色主题色，右边(啬)=红色主题色，硬分界 */
.wall-char {
  /* 直接引用 --brand/--wall-blue，不再借道 --red-accent——橙纸的 accent 现在是深色(给纸面用的次级字色)，
     跟品牌橙是两回事，wordmark 这里要的是纯正的品牌橙，不能被纸面配色带偏 */
  background: linear-gradient(90deg, var(--wall-blue) 0%, var(--wall-blue) 40%, var(--brand) 40%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tagline { font-family: var(--serif); color: var(--ink-2); font-size: 15px; margin: 0; letter-spacing: 1.5px; }
.wall-status { margin-left: 8px; font-size: 12px; letter-spacing: .5px; color: var(--ink-2); }
.wall-status[hidden] { display: none; }
.wall-status::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 999px;
  background: rgba(181, 80, 58, .55); margin-right: 4px; vertical-align: middle; position: relative; top: -1px;
}
.wall-status.high::before { background: var(--accent); }
.wall-status.high { color: var(--accent); }
.home-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.home-actions .btn { padding-top: 16px; padding-bottom: 16px; font-size: 16px; font-family: var(--serif); letter-spacing: 1.5px; }
.home-actions .btn-primary { background: #0d0d0d; color: var(--ink); } /* 黑底配亮字，跟卡片橙底对比；
  不用纯 #000——hover 的 brightness(1.12) 滤镜乘纯黑还是黑，得留一点点余地滤镜才起作用 */
.home-note { color: var(--ink-3); font-size: 12px; margin: 4px 0 0; letter-spacing: .5px; }
.sig { font-size: 10px; }
.sig-name { font-family: var(--serif); color: var(--ink-2); } /* 落款，未来超链接占位 */

/* —— 看帖：排序标签（细下划线） —— */
.tabs {
  display: flex; align-items: center; gap: 22px; padding: 2px 2px 18px;
}
.view-count {
  margin-left: auto; font-size: 12px; color: var(--ink-3); letter-spacing: .3px;
  white-space: nowrap;
}
.view-count[hidden] { display: none; }
.view-count .view-num {
  font-family: var(--serif); font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; margin: 0 1px;
}
.tab {
  background: none; border: none; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink-3); position: relative;
  transition: color .2s ease;
}
.tab.active { color: var(--ink); font-weight: 600; }
.tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ink); border-radius: 2px;
  transform: scaleX(0); transition: transform .2s ease;
}
.tab.active::after { transform: scaleX(1); }

/* —— 帖子卡片：便签感，发丝线，无重影 —— */
.feed { display: flex; flex-direction: column; gap: 16px; transition: opacity .18s ease, transform .18s ease; }
.feed.switching { opacity: 0; transform: translateY(6px); }
.card {
  position: relative; overflow: hidden;   /* 容纳放大的地名水印，并裁掉出血部分 */
  background: var(--surface);
  border-radius: 6px; padding: 22px;
  box-shadow:
    0 1px 1px rgba(28, 22, 16, .035),
    0 10px 22px -14px rgba(28, 22, 16, .16),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  display: flex; flex-direction: column; gap: 16px;
}
/* 贴纸呼吸：只让纸面(背景)透明度缓慢起伏，文字始终不变；剩余越短 --breath 越大(越慢，feed.js 设) */
/* --paper-a = 纸面当前透明度高点，随剩余时间从 .92 递减（feed.js 设）；低点 = 高点 ×0.6 */
@keyframes paper-breathe {
  0%, 100% { background-color: rgba(var(--paper-rgb), var(--paper-a, .92)); }
  50%      { background-color: rgba(var(--paper-rgb), calc(var(--paper-a, .92) - .37)); }
}
.card[data-color] { animation: paper-breathe var(--breath, 8s) ease-in-out infinite; }
.card[data-color].dead { animation: none; background: rgba(var(--paper-rgb), .3); } /* 熄灭：纸面定格、最淡 */
@media (prefers-reduced-motion: reduce) { .card[data-color] { animation: none; } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.head-burn { display: flex; align-items: center; gap: 10px; flex: none; }
.region { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--ink-2); }
.remain {
  font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: .3px; white-space: nowrap;
}
.remain.dying { color: var(--accent); font-weight: 600; }
.remain.dead { opacity: .55; }
.content {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.75; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.photo {
  width: 100%; border-radius: 4px; display: block;
  border: 1px solid var(--line); background: var(--surface);
}
.card-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.card-foot[hidden] { display: none; }
.card-foot .btn-edit { margin-left: auto; } /* 「修改」始终靠右，meta 靠左 */
.contact { display: flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
.ctype { font-size: 12px; color: var(--ink-3); letter-spacing: .5px; }
.cval { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); word-break: break-all; }
.cval-reveal {
  align-self: baseline;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink-3); letter-spacing: .5px;
  padding: 2px 0;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
  transition: color .18s ease;
}
.cval-reveal:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.cval-reveal:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }
.card-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.card-meta { font-size: 12px; color: var(--ink-3); letter-spacing: .3px; }
.card-meta:empty { display: none; }

/* —— 发帖表单 —— */
.capacity {
  color: var(--ink-3); font-size: 13px; letter-spacing: .3px;
  padding: 0 2px 16px; margin: 2px 0 6px; border-bottom: 1px solid var(--line);
}
.form { display: flex; flex-direction: column; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); letter-spacing: .3px; }
.form .req { color: var(--accent); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 13px 14px; width: 100%;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form .btn-primary { width: 100%; }
.photo-label.disabled { opacity: .55; }
.notice {
  font-size: 13px; color: var(--ink-2); line-height: 1.65;
  padding: 2px 2px; background: transparent;
}
.notice strong { color: var(--ink); font-weight: 600; }

/* —— 弹窗 —— */
.modal-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(28, 22, 16, .35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--bg); width: 100%; max-width: 540px;
  border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow: auto;
}
.modal h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 4px 0 18px; letter-spacing: 1px; }
.modal form { display: flex; flex-direction: column; gap: 14px; }
.modal label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.modal input, .modal select, .modal textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 13px 14px; width: 100%;
}
.modal-actions { display: flex; gap: 10px; margin-top: 6px; }
.modal-actions .btn { flex: 1; }

/* —— 杂项 —— */
.err { color: var(--accent); font-size: 14px; min-height: 1em; margin: 4px 0 0; font-weight: 600; }
.err:not(:empty)::before { content: "⚠ "; }

/* —— 缺填高亮：红圈 + 行内红字 + 轻微抖动，指到没填的那一项 —— */
.papers.invalid, .chips.invalid {
  outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 14px;
}
.contact-input.invalid { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181, 80, 58, .15); }
.inline-err { color: var(--accent); font-size: 13.5px; font-weight: 600; letter-spacing: .3px; margin: 8px 0 0; }
.inline-err::before { content: "⚠ "; }
@keyframes wall-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.shake { animation: wall-shake .32s ease; }
.muted { color: var(--ink-3); text-align: center; padding: 36px 0; font-size: 14px; }
.empty { font-family: var(--serif); color: var(--ink-3); text-align: center; padding: 72px 16px; font-size: 15px; letter-spacing: .5px; }

.site-foot {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 12px; text-align: center; letter-spacing: .3px;
}
.site-foot p { margin: 4px 0; }
.site-foot .legal { font-size: 12px; }
/* 首页(.home-card)、看帖页(.feed-page)的页脚都读同一份 /api/state footer，只在看帖页隐去撮合/担保免责声明 */
.feed-page .site-foot .legal { display: none; }
.site-foot .owner { font-size: 12px; }
.owner-link { font-family: var(--serif); font-size: inherit; color: inherit; text-decoration: none; letter-spacing: .5px; }
.home-card .site-foot { margin-top: 16px; border-top: none; padding-top: 0; }
.site-foot.site-foot--bare { border-top: none; } /* 空墙时(feed.js 切换)隐藏分隔线，只留留白 */

/* —— 发帖：点击选取的 chips（替代下拉框） —— */
.field { display: flex; flex-direction: column; gap: 10px; }
.field-label { font-size: 13px; color: var(--ink-2); letter-spacing: .3px; }
.char-count { align-self: flex-end; font-size: 12px; color: var(--ink-3); letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.char-count.full { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-size: 14px; letter-spacing: 1px;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { border-color: var(--ink-3); }
.chip.selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* —— 发帖：从底部滑上来的面板 —— */
.topbar button.link { background: none; border: none; cursor: pointer; font-family: inherit; }
.topbar .link:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
body.sheet-open { overflow: hidden; }
.sheet-back {
  position: fixed; inset: 0; z-index: 35;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(28, 22, 16, 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  pointer-events: none;
  transition: background .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.sheet-back.open {
  background: rgba(28, 22, 16, .32);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  pointer-events: auto;
}
.sheet {
  width: 100%; max-width: 540px; background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 4px 18px calc(24px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow: auto;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}
.sheet-back.open .sheet { transform: translateY(0); }
.sheet::before {
  content: ''; display: block; width: 38px; height: 4px;
  background: var(--line); border-radius: 2px; margin: 8px auto 0;
}
.sheet-head {
  position: sticky; top: 0; z-index: 1; background: var(--bg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 8px;
  transition: background .3s ease;
}
.sheet-head h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: 1px; margin: 0; }
.sheet-close {
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  font: inherit; font-size: 15px; letter-spacing: 1px; padding: 6px 4px;
}
.sheet-close:hover { color: var(--ink); }

/* —— 发帖：选图 + 缩略图预览 —— */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.photo-row { display: flex; align-items: flex-start; gap: 12px; }
.photo-pick {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; color: var(--ink-2); letter-spacing: 1px;
  cursor: pointer; transition: border-color .18s ease, color .18s ease;
}
.photo-pick:hover { border-color: var(--ink-3); color: var(--ink); }
.photo-pick.disabled { opacity: .5; cursor: not-allowed; }
.photo-pick[hidden] { display: none; }
.photo-preview { position: relative; width: 96px; height: 96px; }
.photo-preview[hidden] { display: none; }
.photo-preview img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); display: block;
}
.photo-remove {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border: none; border-radius: 999px;
  background: rgba(28, 22, 16, .6); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.photo-remove:hover { background: rgba(28, 22, 16, .85); }

/* —— 主题纸色：橙纸 / 蓝纸 / 绿纸（绿纸=创始会员专属） —— */
:root {
  /* 三张纸都直接就是原色(不是浅色调子)：橙纸=--brand 原色，蓝纸=--wall-blue 原色("墙"字左偏旁那半边)，
     绿纸=微信绿原色——纸面本身要够"正"，才对得上各自的品牌色，不能停留在"只有小标签用品牌色、
     纸面还是浅浅一层"的做法。因为纸都很饱和，ink/accent 就按各自纸面的明暗分别配黑字/白字
     (橙、绿都够亮配黑字；蓝偏暗配白字，参照首页卡片黑字配橙底的用法)。 */
  --red-paper: #fe7600;  --red-paper-rgb: 254, 118, 0;   --red-line: rgba(0, 0, 0, .18);     --red-accent: #3d2100;  --red-ink: #180d00;
  --blue-paper: #3b4fc4; --blue-paper-rgb: 59, 79, 196;  --blue-line: rgba(255, 255, 255, .22); --blue-accent: #d8dcf5; --blue-ink: #ffffff;
  --green-paper: #07c160; --green-paper-rgb: 7, 193, 96; --green-line: rgba(0, 0, 0, .18);    --green-accent: #063a1c; --green-ink: #041c0e;
  --wall-blue: #3b4fc4; /* 「墙」左偏旁专用：更鲜艳的靛蓝，现在也是蓝纸本身的颜色，两边同调 */
}
[data-color="red"]   { --paper: var(--red-paper);   --paper-rgb: var(--red-paper-rgb);   --paper-line: var(--red-line);   --paper-accent: var(--red-accent);   --paper-ink: var(--red-ink); }
[data-color="blue"]  { --paper: var(--blue-paper);  --paper-rgb: var(--blue-paper-rgb);  --paper-line: var(--blue-line);  --paper-accent: var(--blue-accent);  --paper-ink: var(--blue-ink); }
[data-color="green"] { --paper: var(--green-paper); --paper-rgb: var(--green-paper-rgb); --paper-line: var(--green-line); --paper-accent: var(--green-accent); --paper-ink: var(--green-ink); }

/* 选张纸 */
.papers { display: flex; gap: 10px; }
.paper-opt {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; font: inherit; font-size: 15px; color: var(--ink-2);
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* 绿纸默认隐藏，仅创始会员由 JS 去掉 hidden 才显示。
   必须显式写：上面的 .paper-opt{display:flex} 会盖掉浏览器内置的 [hidden]{display:none}。 */
.paper-opt[hidden] { display: none; }
.paper-opt:hover { border-color: var(--ink-3); }
.paper-opt.full { opacity: .5; }
.paper-opt.full .paper-name::after { content: '（已满）'; font-size: 12px; color: var(--ink-3); }
.paper-swatch {
  width: 26px; height: 32px; border-radius: 4px; flex: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.paper-opt[data-color="red"]   .paper-swatch { background: var(--red-paper);   border: 1px solid var(--red-line); }
.paper-opt[data-color="blue"]  .paper-swatch { background: var(--blue-paper);  border: 1px solid var(--blue-line); }
.paper-opt[data-color="green"] .paper-swatch { background: var(--green-paper); border: 1px solid var(--green-line); }
.paper-opt.selected { color: var(--ink); }
.paper-opt[data-color="red"].selected   { border-color: var(--red-accent);   box-shadow: 0 0 0 1px var(--red-accent); }
.paper-opt[data-color="blue"].selected  { border-color: var(--blue-accent);  box-shadow: 0 0 0 1px var(--blue-accent); }
.paper-opt[data-color="green"].selected { border-color: var(--green-accent); box-shadow: 0 0 0 1px var(--green-accent); }
/* 选中后 .sheet 背景会变成和色块同色的纸色，色块本身会"隐身"；用和外层色块同一支 accent(而非更深更硬的 ink)
   描一圈细线，跟外层选中态同色系呼应，别用近黑的深墨——那会像描边而不像纸 */
.paper-opt[data-color="red"].selected   .paper-swatch { box-shadow: 0 0 0 1px var(--red-accent),   0 1px 2px rgba(0, 0, 0, .06); }
.paper-opt[data-color="blue"].selected  .paper-swatch { box-shadow: 0 0 0 1px var(--blue-accent),  0 1px 2px rgba(0, 0, 0, .06); }
.paper-opt[data-color="green"].selected .paper-swatch { box-shadow: 0 0 0 1px var(--green-accent), 0 1px 2px rgba(0, 0, 0, .06); }

/* 帖子卡片用所选纸色 */
.card[data-color] {
  background: rgba(var(--paper-rgb), .92);
}
/* 放大的地名水印：淡淡印在纸面右下角（出血裁切），同纸色系 */
.card[data-color]::before {
  content: attr(data-region);
  /* bottom 原来是 -22px：解放西主墙的地区名有 3-4 个字，够长，裁掉底下一截还有辨识度；
     这里的 REGIONS 都只有 2 个字("1楼"/"2楼"/"门口"/"露台")，同样裁掉 22px 就变成
     只剩上半截、看不清是哪个字了，往上提到只留一点点出血感 */
  position: absolute; right: -8px; bottom: 2px;
  font: 700 92px/0.78 var(--serif); letter-spacing: 4px;
  color: var(--paper-accent); opacity: .13;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.card > * { position: relative; } /* 正文等内容压在水印之上 */
/* 烧一下：一层余烬从顶部缓缓泛起、再慢慢褪去（约 2.2s）。颜色跟 --accent 同色系(鲜红)，
   不用纸面自己的颜色——三张纸(橙/蓝/绿)色相都不一样，没有一个颜色能在全部纸上都突出，
   鲜红跟三者色相都拉开距离，才能保证不管哪张纸被烧，这层"焦痕"都看得清 */
.card .burn-flash {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(125% 95% at 50% -12%,
    rgba(255, 45, 85, .55), rgba(255, 45, 85, .32) 45%, transparent 72%);
  animation: burn-flash 2.2s ease-out forwards;
}
@keyframes burn-flash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .card .burn-flash { animation-duration: .5s; } }
/* 烧一下：时间数字闪一下余烬色并轻微放大，强调“被烧掉一截”（配合 feed.js 的数字滚动） */
.remain.burning { animation: remain-burn .9s ease-out; }
@keyframes remain-burn {
  0%   { transform: scale(1.22); color: var(--accent); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .remain.burning { animation: none; } }

.card[data-color] .card-foot { border-top-color: var(--paper-line); }
.card[data-color] .card-head { border-bottom-color: var(--paper-line); }
.card[data-color] .region { color: var(--paper-accent); }
/* 纸上文字用对应纸色的「深墨」：同色系但够深，跟浅纸拉开（彩纸彩墨）；小标签用中等accent做层次。
   夜间模式把全局 --ink-2/--ink-3 整体反成了亮色（配合暗底聊天），但帖子纸面本身还是没变的浅色纸——
   remain/card-meta/btn-burn/btn-edit 这几处原来没跟着纸色走、直接用的通用 ink-2/ink-3，
   夜间模式下就变成「浅纸配浅字」看不清，这里补上纸色专属的深色 */
.card[data-color] .ctype,
.card[data-color] .remain,
.card[data-color] .card-meta,
.card[data-color] .btn-edit { color: var(--paper-accent); }
.card[data-color] .remain.dying { color: var(--accent); } /* 将熄状态维持警示色，优先级要盖过上面这条 */
.card[data-color] .content,
.card[data-color] .cval,
.card[data-color] .cval-reveal { color: var(--paper-ink); }
.card[data-color] .photo { border-color: var(--paper-line); }
.card[data-color] .btn-burn,
.card[data-color] .btn-burn:disabled { color: var(--paper-accent); border-color: var(--paper-line); }
.card[data-color] .cval-reveal { text-decoration-color: var(--paper-line); }

/* 发帖面板：选纸后整屏预览该纸色 */
.sheet[data-color] { background: var(--paper); }
.sheet[data-color] .sheet-head { background: var(--paper); }
.sheet[data-color]::before { background: var(--paper-line); }
.sheet[data-color] .capacity { border-bottom-color: var(--paper-line); }
/* 不用 paper-accent 当按钮底色——橙纸的 paper-accent 是深棕、蓝纸的是浅雾蓝白，
   深浅相反，配合固定的 --bg 文字色只有一边读得清。直接用固定的深底配亮字，两种纸都保证够对比 */
.sheet[data-color] .btn-primary { background: #0d0d0d; color: #f2ede2; }
/* 纸色选中后，面板里原来靠通用 ink-2/ink-3 上色的这些小字/边框(容量提示、字段标签、
   字数、选纸/地区/联系方式的 chips、选图按钮、取消)都没跟着纸色走——夜间模式下
   ink-2/ink-3 是亮色，配上纸面本身还是饱和色，就变成一堆看不清的浅灰字。这里统一补上
   纸色专属配色；标题用最重的 paper-ink，其余次级信息用 paper-accent。 */
.sheet[data-color] .sheet-head h2 { color: var(--paper-ink); }
.sheet[data-color] .capacity,
.sheet[data-color] .form label,
.sheet[data-color] .field-label,
.sheet[data-color] .char-count,
.sheet[data-color] .notice,
.sheet[data-color] .chip,
.sheet[data-color] .paper-opt,
.sheet[data-color] .photo-pick,
.sheet[data-color] .sheet-close { color: var(--paper-accent); }
/* chip 选中态原来是 .chip.selected{background:var(--ink)}——ink 现在是夜间模式的亮色，
   选中的地区/联系方式按钮就变成一个白底按钮，跟提交按钮一样得固定用深底配亮字 */
.sheet[data-color] .chip.selected { background: #0d0d0d; color: #f2ede2; border-color: #0d0d0d; }
.sheet[data-color] .notice strong { color: var(--paper-ink); }
.sheet[data-color] .chip,
.sheet[data-color] .photo-pick { border-color: var(--paper-line); }
/* :not(.selected) 很关键：.chip:hover 跟 .chip.selected 优先级一样高，谁写在后面谁赢——
   鼠标点完选中一个 chip 后光标常常还停在上面(hover 中)，如果不排除 selected，
   悬停时会把上面刚设好的"黑底配亮字"选中态重新盖回纸色的深字，看着又变得难以辨认 */
.sheet[data-color] .chip:hover:not(.selected),
.sheet[data-color] .photo-pick:hover,
.sheet[data-color] .sheet-close:hover { color: var(--paper-ink); }

@media (min-width: 600px) {
  .modal-back { align-items: center; }
  .modal { border-radius: 22px; }
}

/* —— 创始会员申请子站 back.html —— */
.apply-wrap { max-width: 560px; margin: 0 auto; padding: 14px 16px 32px; }
/* 这张卡走绿纸(创始会员的专属纸色)的贴纸质感：跟 .card[data-color="green"] 同一套背景配方，
   但不共用 .card 类——那个类还带呼吸动画和地名水印，对一张常驻的状态卡没意义，独立写一份更干净。
   夜间模式下卡片本身还是饱和的绿(跟帖子纸面同一个颜色)，文字沿用 --green-ink/--green-accent，
   不能用通用的 --ink 系列——那些在暗色主题下是亮色，配饱和绿纸会看不清（跟帖子卡片踩过的坑一样）。 */
.apply-card {
  background: rgba(var(--green-paper-rgb), .92); border-radius: 6px;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .2),
    0 10px 22px -14px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* 标题不加粗：600 宋体子集只含解放西主墙原来那批固定粗体文案的字，这里新写的标题没把握
   一定命中子集，加粗保险起见就不点，靠字号+字距做出设计感，避免单字回退成丑黑体 */
.apply-title { font-family: var(--serif); font-size: 27px; letter-spacing: 3px; line-height: 1.35; margin: 0; color: var(--green-ink); }
.apply-lead { font-family: var(--serif); color: var(--green-accent); margin: 0; font-size: 15px; letter-spacing: 1px; line-height: 1.9; }
.apply-status { background: rgba(0, 0, 0, .1); border-radius: 12px; padding: 12px 14px; }
.apply-card .btn-primary { background: #0d0d0d; color: #f2ede2; } /* 固定深底配亮字，不用纸色本身，理由同帖子面板的提交按钮 */
.apply-stat { font-family: var(--serif); margin: 0; font-size: 16px; letter-spacing: 1px; color: var(--green-ink); }
.apply-sub { margin: 5px 0 0; color: var(--green-accent); font-size: 13px; }
.apply-note { color: var(--green-accent); margin: 0; line-height: 1.6; }
.apply-progress { color: var(--green-accent); font-size: 13px; margin: 0; letter-spacing: .5px; }
.apply-term { font-family: var(--serif); font-size: 18px; line-height: 1.8; margin: 0; min-height: 4.5em; color: var(--green-ink); }
.apply-foot-note { color: var(--green-accent); font-size: 13px; line-height: 1.6; margin: 0; }
.apply-bar { height: 10px; background: rgba(0, 0, 0, .15); border-radius: 999px; overflow: hidden; }
.apply-bar-fill { height: 100%; min-width: 2%; background: #0d0d0d; border-radius: 999px; transition: width .4s ease; }
.apply-actions { display: flex; gap: 10px; }
.apply-actions .btn { flex: 1; }