/* 究极茶话会 —— 黑灰茶室 */
:root {
  color-scheme: dark;
  --bg: #151515;
  --bg-2: #1a1a19;
  --panel: #1e1e1c;
  --panel-2: #242422;
  --panel-3: #2c2c2a;
  --line: #333331;
  --line-2: #494947;
  --ink: #e9e7e2;
  --ink-2: #c4c2bc;
  --ink-3: #94918a;
  --cy: #dedbd3;
  --cy-dim: #79766f;
  --am: #c8b595;
  --rd: #d89a95;
  --gn: #a9b8a4;
  --vi: #b3abc0;
  --blu: #9db8d8;
  --st: #a5a29b;
  --wt: #e9e7e2;
  --r: 8px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
::selection { background: rgba(200, 181, 149, .32); }
[hidden] { display: none !important; }

a { color: var(--am); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cy); color: #1f1e1c; padding: 10px 16px; font-weight: 600; border-radius: 0 0 var(--r) 0; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--am); outline-offset: 2px; }
input, textarea, select { caret-color: var(--am); }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(21, 21, 21, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--am); display: grid; place-items: center; }
.brand-text b { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .05em; }
.mainnav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.mainnav a { display: block; padding: 7px 13px; color: var(--ink-3); font-size: 14px; border-radius: var(--r); white-space: nowrap; }
.mainnav a:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; }
.mainnav a[aria-current="page"] { color: var(--ink); background: var(--panel-3); }
.topact { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* 顶栏窄的时候长文案换成这两个字，按钮不缩没 */
.topact .mini { display: none; }
.navbadge {
  flex: 0 0 auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 1;
  color: #20191a; background: var(--rd); box-shadow: 0 0 8px -2px rgba(216, 154, 149, .8);
}
.navtoggle { display: none; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); width: 38px; height: 34px; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.navtoggle span { display: block; width: 17px; height: 1.6px; background: var(--ink-2); }

/* ---------- 布局 ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 34px 24px 72px; min-height: 62vh; }
.page-hd { margin-bottom: 20px; }
.page-hd h1 { margin: 0 0 3px; font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: .02em; }
.page-hd p { margin: 0; color: var(--ink-3); font-size: 13.5px; max-width: 76ch; }
.hd-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; letter-spacing: .12em; color: var(--ink-3); }
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec-title b { color: var(--ink-2); font-weight: 600; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.panel-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.panel-hd h2 { margin: 0; font-size: 16px; letter-spacing: .02em; }
.panel-hd .sub { color: var(--ink-3); font-size: 12.5px; margin: 2px 0 0; }

.grid { display: grid; gap: 14px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.g-side-l { grid-template-columns: 258px minmax(0, 1fr); align-items: start; }

/* ---------- 控件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); background: var(--panel-3); border: 1px solid var(--line-2);
  border-radius: var(--r); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: #343432; border-color: var(--cy-dim); text-decoration: none; color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-pri { background: var(--cy); border-color: var(--cy); color: #1f1e1c; font-weight: 600; }
.btn-pri:hover { background: #c9c5bd; border-color: #c9c5bd; color: #1f1e1c; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); border-color: var(--cy-dim); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-danger { border-color: #5e3835; color: #e3b0ac; }
.btn-danger:hover { background: #2b1f1e; border-color: var(--rd); color: #f2c4c0; }

.field { margin-bottom: 14px; }
.field > label, .lbl { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lbl-row .lbl { margin-bottom: 0; }
.field .hint { margin: 5px 0 0; font-size: 12px; color: var(--ink-3); }
.field .err { margin: 5px 0 0; font-size: 12.5px; color: var(--rd); }
/* 没填对又没法发布的字段：边框跟着红字一起变红，一眼能找到 */
.field.bad > input, .field.bad > textarea, .field.bad > select { border-color: var(--rd); box-shadow: 0 0 0 3px rgba(205, 122, 114, .13); }
input[type="text"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; padding: 9px 12px; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.7; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cy-dim); box-shadow: 0 0 0 3px rgba(200, 181, 149, .14); }
input::placeholder, textarea::placeholder { color: #8a877f; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 标签 / 徽章 ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-size: 12px;
  color: var(--ink-2); background: var(--panel-3); border: 1px solid var(--line-2);
  border-radius: 999px; white-space: nowrap;
}
.chip.cy { color: var(--cy); border-color: rgba(222, 219, 211, .3); background: rgba(222, 219, 211, .06); }
.chip.am { color: var(--am); border-color: rgba(200, 181, 149, .35); background: rgba(200, 181, 149, .07); }
.chip.rd { color: var(--rd); border-color: rgba(216, 154, 149, .35); background: rgba(216, 154, 149, .07); }
.chip.gn { color: var(--gn); border-color: rgba(169, 184, 164, .35); background: rgba(169, 184, 164, .07); }
.chip.vi { color: var(--vi); border-color: rgba(179, 171, 192, .35); background: rgba(179, 171, 192, .07); }
.chip.st { color: var(--st); border-color: rgba(165, 162, 155, .35); background: rgba(165, 162, 155, .07); }
.chip.wt { color: var(--wt); border-color: rgba(233, 231, 226, .35); background: rgba(233, 231, 226, .07); }
/* 管理员发放称号只换边框，不改文字、底色或等级 / 自动称号。 */
.chip.title-admin { border-color: #6c9fe8; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.job { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; font-size: 12.5px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.job b { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; background: var(--bg-2); color: var(--ink-3); }
.job.tank b { color: #9fb8d4; } .job.healer b { color: #a5c4ac; }
.job.melee b { color: #d0a3a0; } .job.ranged b { color: #d4bc94; } .job.caster b { color: #b3abc0; }
.job.want { border-color: rgba(200, 181, 149, .45); color: var(--am); background: rgba(200, 181, 149, .06); }

.avatar {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: #d8d5ce;
  background: #2e2e2c; text-transform: uppercase; letter-spacing: 0;
  position: relative; overflow: hidden;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ava-thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--panel-3); display: block; }
.avatars { display: flex; flex-wrap: wrap; gap: 10px; }
.avatar-pick {
  display: grid; place-items: center; gap: 5px; padding: 7px 9px 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-3); font-size: 11.5px; font-family: var(--sans);
}
.avatar-pick .avatar, .avatar-pick img.ava-thumb { width: 64px; height: 64px; }
.avatar-pick .avatar { font-size: 22px; }
.avatar-pick[aria-pressed="true"] { border-color: var(--am); color: var(--am); }
.avatar-pick.pending { border-style: dashed; cursor: default; }
.avatar-pick:disabled { cursor: default; opacity: .75; }
.crop-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-canvas {
  width: 320px; height: 320px; max-width: 100%; border-radius: 50%;
  background: var(--panel-3); touch-action: none; cursor: grab;
}
.crop-tools { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; }
.crop-zoom { flex: 1; }
.avatar.lg { width: 54px; height: 54px; font-size: 20px; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }

/* ---------- 阶段导航轨 ---------- */
.phase-rail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; scrollbar-width: thin; position: relative; z-index: 1; }
.phase-rail::-webkit-scrollbar { height: 5px; }
.phase-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.pnode {
  display: flex; flex-direction: column; gap: 1px; flex: 1 0 auto; min-width: 128px; padding: 8px 16px 9px;
  cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--r);
  text-align: left; font-family: var(--sans); color: var(--ink-3); transition: background .15s, color .15s;
}
.pnode:hover { background: var(--panel-2); color: var(--ink); }
.pnode .pcode { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-3); }
.pnode .pname { display: block; font-size: 14px; color: inherit; }
.pnode[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.pnode[aria-pressed="true"] .pcode { color: var(--am); }
/* 「不限」是相关性筛查的默认态，用虚线边和实节点区分 */
.pnode.any { border-style: dashed; }
.pnode.any .pcode { letter-spacing: .16em; }

/* ---------- 卡片列表 ---------- */
.card { display: block; padding: 13px 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s; }
a.card:hover { border-color: var(--cy-dim); text-decoration: none; }
.card-hd { display: flex; align-items: flex-start; gap: 12px; }
.card-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.card-body { margin: 8px 0 0; color: var(--ink-2); font-size: 13.5px; }
.card-body.clamp { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.strong { color: var(--ink); font-weight: 600; }
.hr { height: 1px; background: var(--line); border: 0; margin: 16px 0; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* 统计条 */
.stat { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.stat .k { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.stat .v { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.stat .v.am { color: var(--am); } .stat .v.gn { color: var(--gn); } .stat .v.vi { color: var(--vi); }
.stat .s { font-size: 12px; color: var(--ink-3); }
.stat.link { display: block; color: inherit; text-decoration: none; }
.stat.link:hover { border-bottom-color: var(--line-2); }
/* 未读消息：只有下面那条线在蓝 / 红 / 金之间来回，光顺着线往下溢。
   发光挂在压住 border 的伪元素上，盒子本身不带阴影——否则整圈边框都会亮。
   电脑端把 --glow-k 放大、把第四层（--glow-a4）点亮，溢光更宽更亮；用变量而不是换 animation-name，
   否则跨断点改动画名会让底线从头播、跟烟气 tint 脱同步。 */
.stat.glow { position: relative; border-bottom-color: transparent; isolation: isolate; --glow-k: 1; --glow-a4: 0; }
.stat.link.glow:hover { border-bottom-color: transparent; }
.stat.glow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  animation: unreadGlow 7.5s linear infinite;
}
/* 烟气：整条线一起往上冒一阵，然后随机停一阵再来；每轮的尺寸、浓度、速度、漂移都由 JS 现摇。
   窄屏（手机）容器裁在格子内部，烟只在未读格上方升腾，不串到相邻格子或下面的板块；
   电脑端横屏另见下面的 @media——上面正对阶段芯片，烟要放开飘上去。 */
.stat-smoke {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + 14px);
  overflow: hidden; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .3s ease;
  mask-image: linear-gradient(to top, #000 98%, transparent 100%);
  color: #4d8dff; animation: unreadTint 7.5s linear infinite;
}
.stat-smoke.puff { opacity: 1; }
.stat-smoke i {
  position: absolute; bottom: -8px; display: block; border-radius: 50%;
  background: currentColor; opacity: 0;
  animation: smokeRise var(--dur, 4s) linear var(--delay, 0s) 1;
}
@keyframes unreadGlow {
  0%, 100% { background: #4d8dff; box-shadow: 0 0 calc(6px * var(--glow-k, 1)) rgba(77, 141, 255, .95), 0 calc(3px * var(--glow-k, 1)) calc(10px * var(--glow-k, 1)) rgba(77, 141, 255, .8), 0 calc(10px * var(--glow-k, 1)) calc(26px * var(--glow-k, 1)) -4px rgba(77, 141, 255, .9), 0 calc(20px * var(--glow-k, 1)) calc(60px * var(--glow-k, 1)) -10px rgba(77, 141, 255, var(--glow-a4, 0)); }
  33.33% { background: #ff5a4f; box-shadow: 0 0 calc(6px * var(--glow-k, 1)) rgba(255, 90, 79, .95), 0 calc(3px * var(--glow-k, 1)) calc(10px * var(--glow-k, 1)) rgba(255, 90, 79, .8), 0 calc(10px * var(--glow-k, 1)) calc(26px * var(--glow-k, 1)) -4px rgba(255, 90, 79, .9), 0 calc(20px * var(--glow-k, 1)) calc(60px * var(--glow-k, 1)) -10px rgba(255, 90, 79, var(--glow-a4, 0)); }
  66.66% { background: #ffb42e; box-shadow: 0 0 calc(6px * var(--glow-k, 1)) rgba(255, 180, 46, .95), 0 calc(3px * var(--glow-k, 1)) calc(10px * var(--glow-k, 1)) rgba(255, 180, 46, .8), 0 calc(10px * var(--glow-k, 1)) calc(26px * var(--glow-k, 1)) -4px rgba(255, 180, 46, .9), 0 calc(20px * var(--glow-k, 1)) calc(60px * var(--glow-k, 1)) -10px rgba(255, 180, 46, var(--glow-a4, 0)); }
}
@keyframes unreadTint {
  0%, 100% { color: #4d8dff; }
  33.33% { color: #ff5a4f; }
  66.66% { color: #ffb42e; }
}
/* 电脑端横屏：未读格正上方就是阶段芯片，去掉左/右/上的盒子裁剪，烟一直飘到芯片那一排；
   芯片（.phase-rail）压在烟上面，所以芯片的字不会被烟糊住；底线溢光也放大一档。 */
@media (min-width: 861px) {
  .stat.glow { --glow-k: 1.7; --glow-a4: .75; }
  .stat-smoke { left: -28px; right: -28px; overflow: visible; mask-image: none; }
}
@keyframes smokeRise {
  0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  10% { opacity: var(--op, .4); }
  70% { opacity: calc(var(--op, .4) * .85); }
  90% { opacity: calc(var(--op, .4) * .4); }
  100% { transform: translate3d(var(--dx, 0px), var(--dy, -70px), 0) scale(1.5); opacity: 0; }
}

/* ---------- 空 / 加载 / 错误 ---------- */
.empty { padding: 32px 18px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 10px; }
.empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 5px; }
.empty .act { margin-top: 14px; }
.loading { padding: 30px; text-align: center; color: var(--ink-3); font-size: 13px; letter-spacing: .1em; }
.loading::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 9px; border: 1.6px solid var(--line-2); border-top-color: var(--am); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.errbox { padding: 14px 16px; border: 1px solid rgba(216, 154, 149, .45); background: rgba(216, 154, 149, .06); border-radius: var(--r); color: #e3b6b2; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------- 筛选条 ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; padding: 11px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.filters .fl { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); margin-right: 2px; }
.fbtn { padding: 5px 12px; font-size: 13px; font-family: var(--sans); color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: all .14s; }
.fbtn:hover { color: var(--ink); border-color: var(--line-2); background: var(--panel-3); text-decoration: none; }
.fbtn[aria-pressed="true"] { color: #1f1e1c; background: var(--cy); border-color: var(--cy); font-weight: 600; }
.filters select, .filters input[type="search"] { width: auto; padding: 5px 10px; font-size: 13px; }
.filters .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* ---------- 弹窗 ---------- */
.modal-bd { position: fixed; inset: 0; z-index: 80; background: rgba(10, 10, 10, .74); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.modal { width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.modal.wide { width: min(880px, 100%); }
.modal-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.modal-hd h2 { margin: 0; font-size: 18px; }
.modal-hd p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.x { background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); width: 30px; height: 30px; border-radius: var(--r); cursor: pointer; font-size: 17px; line-height: 1; flex: 0 0 auto; }
.x:hover { color: var(--rd); border-color: var(--rd); }
.modal-ft { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 9px; max-width: min(370px, calc(100vw - 36px)); }
.toast { padding: 11px 15px; font-size: 13.5px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: rise .22s ease-out; }
.toast.ok { border-color: rgba(169, 184, 164, .55); }
.toast.bad { border-color: rgba(216, 154, 149, .55); }
.toast.warn { border-color: rgba(200, 181, 149, .55); }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ---------- 论坛 ---------- */
.boardlist { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.board { position: relative; display: block; padding: 13px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.board:hover { text-decoration: none; border-color: var(--cy-dim); }
.board h3 { margin: 0; font-size: 15px; color: var(--ink); }
.board .bcount { position: absolute; right: 13px; top: 11px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.thread { display: flex; gap: 13px; padding: 13px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.thread:hover { border-color: var(--cy-dim); }
.thread .tmain { flex: 1 1 auto; min-width: 0; }
.thread h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.5; }
.thread h3 a { color: var(--ink); }
.thread h3 a:hover { color: var(--am); text-decoration: none; }
.thread .tstats { display: flex; gap: 14px; flex: 0 0 auto; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.thread .tstats span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.thread .tstats b { font-size: 15px; color: var(--ink-2); font-weight: 600; }

.post { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.post:last-child { border-bottom: 0; }
.post .pbody { flex: 1 1 auto; min-width: 0; }
.post .phead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; font-size: 13px; }
.post .phead .who { font-weight: 600; color: var(--ink); }
.post .ptext { color: var(--ink-2); white-space: pre-wrap; word-break: break-word; font-size: 14.5px; }
/* @提及：正文里由 richText 生成的链接，只有白名单里的用户名才会走到这里 */
.mention { color: var(--am); border-bottom: 1px dotted rgba(200, 181, 149, .5); }
.mention:hover { color: #ddcbab; text-decoration: none; border-bottom-style: solid; }
.mentionrow { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.mentionrow .ml { font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3); }
.mentionrow .fbtn { padding: 3px 9px; font-size: 12px; font-family: var(--mono); }
.post.op { background: rgba(200, 181, 149, .05); border: 1px solid rgba(200, 181, 149, .16); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
.floor { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.reactbar { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
/* 楼中楼：缩进一条虚线，整棵树默认只露最新的两条回复 */
.pnode > .post { border-bottom: 1px solid var(--line); }
.pnode:last-child > .post { border-bottom: 0; }
.pchildren { margin-left: 22px; padding-left: 14px; border-left: 1px dashed var(--line-2); }
.pchildren .post { padding: 12px 0; border-bottom: 0; gap: 10px; }
.pchildren .post .ptext { font-size: 14px; }
.pchildren > .pnode + .pnode { border-top: 1px solid var(--line); }
.pmore { padding: 8px 0 0; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pfold { margin: 8px 0 2px 22px; }
.inline-reply { margin: 6px 0 14px 22px; padding: 12px 13px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.inline-reply .row { display: flex; gap: 8px; margin-top: 9px; }
.react { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; font-size: 12.5px; font-family: var(--mono); color: var(--ink-3); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: all .14s; }
.react:hover { color: var(--am); border-color: rgba(200, 181, 149, .4); background: rgba(200, 181, 149, .06); }
.react[aria-pressed="true"] { color: #1f1e1c; background: var(--am); border-color: var(--am); font-weight: 700; }

/* 封楼的印章：红框、斜着盖；正文与附件对普通人收起了，管理员仍能展开原文 */
.sealwrap { padding: 10px 2px 4px; }
.seal {
  position: relative; display: inline-block; padding: 10px 18px; transform: rotate(-6deg);
  border: 2.5px solid rgba(205, 122, 114, .8); border-radius: 8px;
  color: rgba(214, 137, 129, .95); font-family: var(--serif); font-size: 19px; font-weight: 700;
  letter-spacing: .3em; text-indent: .3em; line-height: 1.25; opacity: .93;
  box-shadow: inset 0 0 0 1px rgba(205, 122, 114, .32), 0 0 16px -7px rgba(205, 122, 114, .55);
}
.seal .sealtxt { white-space: pre-line; }
/* 四字以内：圆形章，里面再套一圈细边 */
.seal.round {
  display: inline-grid; place-items: center; width: 112px; height: 112px; padding: 0;
  border-radius: 50%; text-align: center; font-size: 17px; letter-spacing: .12em;
  text-indent: .12em; transform: rotate(-8deg);
}
.seal.round::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  border: 1px solid rgba(205, 122, 114, .45);
}
.seal.round .sealtxt { padding: 0 14px; }
/* 长的或换过行的：左边挂加雷马徽记 */
.seal.crest { display: inline-flex; align-items: center; gap: 12px; }
.seal.crest .sealtxt { text-align: left; }
.seal svg { width: 30px; height: 30px; flex: 0 0 auto; opacity: .9; }
.seal svg path { fill: none; stroke: currentColor; stroke-linejoin: round; }
.sealpreview { display: flex; justify-content: flex-start; align-items: center; min-height: 46px; }
.sealorig { margin-top: 6px; border-top: 1px dashed var(--line-2); padding-top: 8px; }
.sealorig summary { cursor: pointer; font-size: 12px; color: var(--ink-3); }
.sealorig summary:hover { color: var(--ink); }
.post.sealed { opacity: .94; }

/* ---------- 攻略库 ---------- */
.guide { display: flex; align-items: center; gap: 15px; padding: 13px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.guide:hover { border-color: var(--cy-dim); }
.vote { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; min-width: 56px; padding: 8px 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: all .14s; font-family: var(--sans); }
.vote:hover { border-color: rgba(200, 181, 149, .45); }
.vote[aria-pressed="true"] { background: rgba(200, 181, 149, .1); border-color: rgba(200, 181, 149, .45); }
.vote .arrow { font-size: 13px; line-height: 1; color: var(--ink-3); }
.vote[aria-pressed="true"] .arrow { color: var(--am); }
.vote .n { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.vote[aria-pressed="true"] .n { color: var(--am); }
.vote .t { font-size: 10.5px; color: var(--ink-3); letter-spacing: .06em; }
.guide .gmain { flex: 1 1 auto; min-width: 0; }
.guide h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.5; }
.guide h3 a { color: var(--ink); }
.guide h3 a:hover { color: var(--am); }
.guide .gurl { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; }
.guide .gurl.pending { color: var(--am); }
/* 攻略详情页头：左边还是那个投票块，右边换成标题与出处 */
.guide-hd { display: flex; align-items: flex-start; gap: 15px; }
.guide-hd h1 { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }
.rank { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--line-2); flex: 0 0 auto; width: 30px; text-align: center; }
.rank.top1 { color: var(--am); }
.rank.top2 { color: #cfccc5; } .rank.top3 { color: #b3976e; }

.phase-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pcard { padding: 14px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.pcard h4 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: baseline; gap: 8px; }
.pcard h4 span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; font-size: 14px; font-family: var(--sans); color: var(--ink-3); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--am); font-weight: 600; }

/* ---------- 固定队招募 ---------- */
.recruit { padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.recruit:hover { border-color: var(--cy-dim); }
.recruit.full { opacity: .72; }
.recruit-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.recruit h3 { margin: 0; font-size: 16.5px; letter-spacing: .01em; }
.recruit .rmeta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

/* ---------- 老板队 ---------- */
.boss-when { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px; border-radius: 7px; background: var(--panel-3); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.boss-when-k { font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.boss-when b { color: var(--am); font-weight: 600; letter-spacing: .02em; }
/* 24 小时内开打、还没招齐：开打横杠跟首页未读消息那条线一样在蓝 / 红 / 金之间来回，
   光顺着横杠往下溢。变量只缩放同一套 unreadGlow，不换 animation-name。 */
.boss-when.urgent {
  position: relative; border-bottom-color: transparent; isolation: isolate;
  --glow-k: .9; --glow-a4: .2;
}
.boss-when.urgent::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; border-radius: 2px;
  animation: unreadGlow 7.5s linear infinite;
}
@media (min-width: 861px) {
  .boss-when.urgent { --glow-k: 1.3; --glow-a4: .55; }
}
.boss-members { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.boss-member { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; flex-wrap: wrap; }
.boss-member:last-child { border-bottom: 0; }
.boss-member .mono { font-size: 12.5px; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); font-size: 13.5px; }
.kv dt { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); padding-top: 2px; }
.kv dd { margin: 0; color: var(--ink-2); word-break: break-word; }
.kv dd b { color: var(--ink); font-weight: 600; }
/* 八人位：坦克蓝 / 治疗绿 / 输出红。白位只有底噪，不发光。 */
.slotbar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.slot, .slotbtn { --slotc: var(--ink-3); --slotg: transparent; }
.slot.tank, .slotbtn.tank { --slotc: #8fb4dd; --slotg: rgba(143, 180, 221, .3); }
.slot.healer, .slotbtn.healer { --slotc: #8fc79a; --slotg: rgba(143, 199, 154, .3); }
.slot.dps, .slotbtn.dps { --slotc: #e0857c; --slotg: rgba(224, 133, 124, .3); }
.slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 4px 2px 3px; border-radius: 5px;
  background: var(--panel-3); border: 1px solid var(--line); color: var(--ink-3);
}
.slot-pos { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; opacity: .7; line-height: 1.3; }
.slot-job { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; line-height: 1.5; min-height: 16px; }
/* 泛光在格子内，溢光漫到卡片上 */
.slot.got {
  color: var(--slotc); border-color: var(--slotg);
  background: radial-gradient(120% 95% at 50% 0%, var(--slotg), transparent 72%), var(--panel-2);
  box-shadow: 0 0 9px -1px var(--slotg), 0 0 20px -7px var(--slotc), inset 0 0 7px -4px var(--slotc);
  text-shadow: 0 0 9px var(--slotg);
}
.slot.got .slot-pos { opacity: 1; }
.slot.got::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -8px; height: 8px;
  background: radial-gradient(58% 100% at 50% 0%, var(--slotg), transparent 78%);
  filter: blur(2px); pointer-events: none;
}
.slotrole { font-style: normal; font-size: 10.5px; color: var(--ink-3); border-left: 1px solid var(--line-2); padding-left: 6px; }

/* 已有 / 待招：待招用虚线框，一眼能看出这个位置还空着 */
.slot-state { font-size: 9.5px; letter-spacing: .07em; line-height: 1.35; opacity: .8; }
.slot.wanted { border-style: dashed; border-color: rgba(200, 181, 149, .38); }
.slot.wanted .slot-state { color: var(--am); }
.slot.filled .slot-state { color: var(--slotc); opacity: 1; }
.slot:not(.got) .slot-state { color: var(--ink-3); }
/* 实际进队但没指定职业的格子：暖色低光，跟队长自己勾的「已有」区分开 */
.slot.joined { --slotc: var(--am); --slotg: rgba(200, 181, 149, .28); }

/* 阵容药丸沿用职业配色，发光只给已选中的格子 */
.job.roster-job { --slotc: var(--ink-3); --slotg: transparent; }
.job.roster-job.tank { --slotc: #8fb4dd; --slotg: rgba(143, 180, 221, .34); }
.job.roster-job.healer { --slotc: #8fc79a; --slotg: rgba(143, 199, 154, .34); }
.job.roster-job.dps { --slotc: #e0857c; --slotg: rgba(224, 133, 124, .34); }
.job.roster-job.joined { --slotc: var(--am); --slotg: rgba(200, 181, 149, .32); }
.job.roster-job.got {
  color: var(--slotc); border-color: var(--slotg);
  background: radial-gradient(120% 100% at 50% 0%, var(--slotg), transparent 74%), var(--panel-3);
  box-shadow: 0 0 9px -2px var(--slotg), inset 0 0 6px -4px var(--slotc);
  text-shadow: 0 0 8px var(--slotg);
}
.job.roster-job.got b { color: var(--slotc); background: rgba(0, 0, 0, .28); }
/* 进队的人名占位：长名字截断，完整名字在 title 和下面的队员列表里 */
.roster-job .slotrole { max-width: 10em; overflow: hidden; text-overflow: ellipsis; }
.roster-pills { row-gap: 6px; }

/* 管理员身份：红框 + 溢光，和佩戴的称号并排显示，不替换它 */
.chip.admin-badge {
  color: #f2b8b2; font-weight: 600; letter-spacing: .05em;
  border-color: rgba(226, 96, 86, .85); background: rgba(216, 74, 62, .14);
  box-shadow: 0 0 8px -1px rgba(226, 96, 86, .5), 0 0 18px -7px rgba(226, 96, 86, .65), inset 0 0 6px -3px rgba(226, 96, 86, .7);
  text-shadow: 0 0 8px rgba(226, 96, 86, .45);
}

/* ---------- 入队申请与申请内对话 ---------- */
.rowbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.hint { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-3); }
.hint.warn { color: var(--rd); }
.application .phead { flex-wrap: wrap; }
.appchat { display: flex; flex-direction: column; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.appchat:empty { display: none; }
.appmsg { display: flex; gap: 9px; align-items: flex-start; }
.appmsg .pbody { min-width: 0; flex: 1 1 auto; }
.appmsg .phead { gap: 8px; }
.appmsg .ptext { font-size: 13.5px; }
.appcompose { display: flex; gap: 8px; align-items: flex-start; margin-top: 11px; }
.appcompose textarea { flex: 1 1 auto; min-height: 40px; }
.appdecide { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.announce-body { max-height: 52vh; overflow-y: auto; }

/* 发招募时挑位置：先点格子，再从这个位置能放的职业里挑 */
.slotpick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin-bottom: 9px; }
.slotpick-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot-check {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; color: var(--ink-3); cursor: pointer; user-select: none;
}
.slot-check input { accent-color: var(--am); cursor: pointer; margin: 0; }
.slotbtn {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink-3); cursor: pointer; font-family: var(--sans); transition: border-color .14s, background .14s;
}
.slotbtn:hover { border-color: var(--line-2); background: var(--panel-3); }
.slotbtn .pos { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; }
.slotbtn .who { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.slotbtn.got { color: var(--slotc); border-color: var(--slotg); box-shadow: 0 0 10px -3px var(--slotg); }
.slotbtn.got .who { color: var(--slotc); }
.slotbtn.active { border-color: var(--am); background: var(--panel-3); }
.chip-gap { height: 7px; }
.fbtn.job-tank:not([aria-pressed="true"]) { color: #9fb8d4; border-color: rgba(143, 180, 221, .32); }
.fbtn.job-healer:not([aria-pressed="true"]) { color: #a5c4ac; border-color: rgba(143, 199, 154, .32); }
.fbtn.job-dps:not([aria-pressed="true"]) { color: #d0a3a0; border-color: rgba(224, 133, 124, .32); }

/* ---------- 思维发散 ---------- */
.ideawall { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.idea { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s; }
.idea:hover { border-color: rgba(179, 171, 192, .45); }
.idea h3 { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; }
.idea h3 a { color: var(--ink); }
.idea h3 a:hover { color: var(--vi); text-decoration: none; }
.idea .iact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.branchcount { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.branchcount b { color: var(--vi); font-size: 13px; }

.tree { display: flex; flex-direction: column; gap: 0; }
.tnode { position: relative; padding: 13px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.tnode.self { border-color: rgba(179, 171, 192, .55); background: var(--panel-2); }
.tchildren { margin-left: 17px; padding-left: 17px; border-left: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.tnode .thead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; font-size: 12.5px; color: var(--ink-3); }
.tnode h4 { margin: 0 0 5px; font-size: 15px; color: var(--ink); }
.tnode .tbody { color: var(--ink-2); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.spark { color: var(--vi); font-size: 12px; }

/* ---------- 账号 ---------- */
.authwrap { max-width: 430px; margin: 26px auto; }
.authwrap .panel { padding: 26px; }
.authswitch { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.me-hd { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.me-hd .who h1 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.me-hd .who p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.bigname { font-size: 25px; letter-spacing: .02em; }
/* 署名：显示名在前且稍大，尾巴是「游戏内ID @服务器」，隐藏的项由后端直接摘掉 */
.byline { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.byline-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
a.byline-name:hover { color: var(--am); text-decoration: none; }
.byline-tail { font-size: 12px; color: var(--ink-3); }
.byline-title { font-size: 11px; padding: 0 7px; line-height: 1.7; }
.lvbar { height: 7px; border-radius: 4px; background: var(--panel-3); border: 1px solid var(--line); overflow: hidden; margin-bottom: 13px; }
.lvbar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(200, 181, 149, .5), var(--am)); box-shadow: 0 0 10px rgba(200, 181, 149, .45); transition: width .3s; }
.notice { padding: 12px 15px; border: 1px solid rgba(200, 181, 149, .4); background: rgba(200, 181, 149, .06); border-radius: var(--r); font-size: 13px; color: #d9c9a8; margin-bottom: 16px; }
.notice b { color: var(--am); }
/* 公告与活动并排：活动是金色的，和公告的茶色分开。 */
.noticebar { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 16px; }
.noticebar > .notice { flex: 1 1 420px; margin-bottom: 0; }
.act-entry {
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px;
  text-align: left; padding: 12px 18px; border: 1px solid rgba(232, 199, 122, .72); border-radius: var(--r);
  color: #f4e4bf; font: inherit; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, rgba(232, 199, 122, .2), rgba(232, 199, 122, .07) 55%, rgba(232, 199, 122, .18));
  animation: actPulse 2.8s ease-in-out infinite;
}
.act-entry:hover { border-color: #f0d694; }
.act-kicker { font-size: 10.5px; letter-spacing: .22em; color: #e8c77a; }
.act-name { font-family: var(--serif); font-size: 17px; letter-spacing: .04em; }
.act-when { font-size: 11.5px; color: #bcab82; }
/* 预告活动把正文直接摊在公告条上，不再藏在弹窗里。 */
.act-entry.upcoming { flex: 1 1 360px; min-width: 0; max-width: 640px; }
.act-copy { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: #dccba2; white-space: pre-wrap; overflow-wrap: anywhere; }
.act-flare { position: absolute; inset: -40% -30%; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 235, 180, .2) 48%, transparent 60%); animation: actSweep 4.5s ease-in-out infinite; }
@keyframes actPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(232, 199, 122, .18), inset 0 0 18px rgba(232, 199, 122, .05); }
  50% { box-shadow: 0 0 26px rgba(232, 199, 122, .4), inset 0 0 26px rgba(232, 199, 122, .1); }
}
@keyframes actSweep { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.act-head { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.act-head h3 { margin: 0 0 2px; font-family: var(--serif); font-size: 20px; }
.act-body { margin: 8px 0 0; color: var(--ink-2); white-space: pre-wrap; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.act-task { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--panel-2); }
.act-task b { font-size: 13.5px; }
.act-task p { margin: 2px 0 0; font-size: 12px; }
.act-check { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-3); font-size: 12px; }
.act-task.done { border-color: rgba(232, 199, 122, .45); }
.act-task.done .act-check { color: #1f1e1c; background: #e8c77a; border-color: #e8c77a; font-weight: 700; }
.act-titleline { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }
.act-friends { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.act-friend { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; }
.act-friend input { accent-color: #e8c77a; margin: 0; }
.act-friend.sent { opacity: .55; cursor: default; }
.act-gift { border-color: rgba(232, 199, 122, .6); color: #f0d694; background: rgba(232, 199, 122, .1); }
.act-gift:hover { border-color: #f0d694; background: rgba(232, 199, 122, .16); color: #f6e6c0; }
.act-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.act-stat { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--panel-2); }
.act-stat b { display: block; font-size: 22px; font-family: var(--mono); color: #f0d694; }
.act-stat span { font-size: 12px; color: var(--ink-3); }
.localbar { margin: 0; border-radius: 0; border-width: 0 0 1px; text-align: center; background: rgba(200, 181, 149, .09); }

/* 全站阶段筛选条 */
.phase-flag { background: rgba(222, 219, 211, .05); border-bottom: 1px solid var(--line); }
.phase-flag-in { max-width: var(--maxw); margin: 0 auto; padding: 7px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chipx { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0 0 0 5px; opacity: .75; }
.chipx:hover { opacity: 1; }

/* ---------- 站内信 ---------- */
/* 会话行、好友行、通知行共用同一套骨架：头像 + cmain(crow/clast/cact) + 角标 */
.convo, .notif { display: flex; gap: 12px; align-items: center; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.notif { align-items: flex-start; }
a.convo:hover { border-color: var(--cy-dim); text-decoration: none; }
.notif.new { border-color: rgba(157, 184, 216, .55); background: rgba(157, 184, 216, .06); }
.cmain { flex: 1 1 auto; min-width: 0; }
.crow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.crow .who, .crow > b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
a.who:hover { color: var(--am); text-decoration: none; }
.clast { display: flex; gap: 3px; align-items: baseline; margin-top: 4px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.clast > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clast .dir { flex: 0 0 auto; color: var(--ink-3); }
.gline { margin-top: 3px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }

.msglist { display: flex; flex-direction: column; gap: 9px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.msgrow { display: flex; }
.msgrow.out { justify-content: flex-end; }
.bubble { max-width: min(74%, 620px); padding: 9px 13px; background: var(--panel-3); border: 1px solid var(--line); border-radius: 11px 11px 11px 3px; }
.bubble .ptext { color: var(--ink-2); white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.msgrow.out .bubble { background: rgba(200, 181, 149, .09); border-color: rgba(200, 181, 149, .26); border-radius: 11px 11px 3px 11px; }
.nsnip { margin: 7px 0 0; padding: 6px 10px; max-width: 100%; font-size: 12.5px; color: var(--ink-2); background: var(--bg-2); border-left: 2px solid var(--line-2); border-radius: 0 6px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlink { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--am); }
.nlink:hover { color: #ddcbab; text-decoration: none; }

/* 页签上的未读数、批量工具栏、逐条操作 */
.tab .navbadge { min-width: 16px; height: 16px; font-size: 10px; }
.toolrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.convo, .notif { position: relative; }
.pick { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--am); cursor: pointer; }
.convo:hover { border-color: var(--cy-dim); }
a.convlink { flex: 1 1 auto; min-width: 0; color: inherit; }
a.convlink:hover { text-decoration: none; }
a.convlink:hover .crow > b { color: var(--am); }
.nact { display: flex; gap: 6px; align-items: center; align-self: center; flex: 0 0 auto; }
.msgwrap { display: flex; flex-direction: column; gap: 3px; max-width: min(74%, 620px); }
.msgrow.out .msgwrap { align-items: flex-end; }
.msgwrap .bubble { max-width: 100%; }
.mact { display: flex; gap: 10px; padding: 0 4px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--ink-3); cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.dotnew { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--rd); vertical-align: 1px; }
@media (max-width: 520px) {
  .nact { flex-wrap: wrap; justify-content: flex-end; max-width: 96px; }
  .nact .btn { padding: 3px 8px; font-size: 12px; }
}

/* ---------- 页脚 ---------- */
.foot { border-top: 1px solid var(--line); background: #121212; margin-top: 30px; }
.foot-in { max-width: var(--maxw); margin: 0 auto; padding: 22px 24px 30px; }
.foot p { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-3); }
.foot b { color: var(--ink-2); }
.foot-note { font-size: 11.5px !important; color: #7a7770 !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-side, .g-side-l { grid-template-columns: minmax(0, 1fr); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .navtoggle { display: flex; }
  .topbar-in { min-height: 58px; gap: 12px; }
  .mainnav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 49; flex-direction: column; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 12px 14px;
    display: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }
  .mainnav.open { display: flex; }
  .mainnav a { padding: 12px 12px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .form-row, .form-row-3 { grid-template-columns: minmax(0, 1fr); }
  main { padding: 20px 14px 60px; }
  .page-hd h1 { font-size: 22px; }
  .thread .tstats { display: none; }
  .guide { flex-wrap: wrap; }
  .rank { display: none; }
  .topact .txt { display: none; }
  .topact .mini { display: inline; }
  .tchildren { margin-left: 8px; padding-left: 11px; }
  .pchildren { margin-left: 8px; padding-left: 10px; }
  .pchildren .post { gap: 8px; }
  .inline-reply { margin-left: 8px; }
  .pfold { margin-left: 8px; }
  .guide-hd { flex-wrap: wrap; }
  .bubble { max-width: 88%; }
}
@media (max-width: 520px) {
  .stat .v { font-size: 22px; }
  .modal { padding: 18px 15px; }
  .kv { grid-template-columns: 76px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 附件：选择器 / 楼层墙 / 放大 ---------- */
.pickbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pickbar .hint { margin: 0; font-size: 12px; color: var(--ink-3); }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pickgrid:empty { display: none; }
.picktile { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel-2); margin-top: 8px; }
.pickgrid > .picktile { margin-top: 0; }
.picktile img, .picktile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.picktile .st { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 6px; font-size: 11px; line-height: 1.6; background: rgba(12, 12, 11, .72); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picktile.ok .st { color: var(--gn); }
.picktile.bad .st { color: var(--rd); }
.picktile.bad img, .picktile.bad video { opacity: .35; }
.picktile .rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(12, 12, 11, .78); color: var(--ink-2); font-size: 14px; line-height: 1; cursor: pointer; }
.picktile .rm:hover { color: var(--rd); border-color: var(--rd); }

.mediawall { margin-top: 10px; }
.media-vid { display: block; width: 100%; max-width: 620px; border: 1px solid var(--line); border-radius: 8px; background: #000; }
.mediagrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 540px; }
.mediagrid.n1 { grid-template-columns: minmax(0, 320px); }
.mediagrid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 400px; }
.media-vid + .mediagrid { margin-top: 8px; }
.mediatile { display: block; padding: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel-2); cursor: zoom-in; }
.mediatile:hover { border-color: var(--line-2); }
.mediatile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(10, 10, 9, .92); }
.lb-in { display: grid; place-items: center; max-width: 100%; max-height: 78vh; }
.lb-in img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; box-shadow: 0 14px 44px rgba(0, 0, 0, .6); }
.lb-bar { display: flex; align-items: center; gap: 12px; }
.lb-n { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; }
.lb-x { position: absolute; top: 14px; right: 18px; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 6px; background: rgba(30, 30, 28, .8); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.lb-x:hover { color: var(--rd); border-color: var(--rd); }

@media (max-width: 720px) {
  .mediagrid { max-width: 100%; }
  .mediagrid.n1 { grid-template-columns: minmax(0, 240px); }
  .pickgrid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .media-vid { max-width: 100%; }
}

/* ---------- 后台附件列表 ---------- */
.admedia { display: flex; align-items: center; gap: 12px; }
.ad-thumb { width: 74px; height: 74px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3); display: block; }
.ad-thumb.none { display: grid; place-items: center; color: var(--ink-3); font-size: 11.5px; }
a.chip { text-decoration: none; }
a.chip:hover { text-decoration: none; border-color: var(--line-2); }

/* ---------- 表情包 / 公告配图 ---------- */
.stickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); max-height: 264px; overflow-y: auto; }
.stickitem { padding: 0; aspect-ratio: 1; border: 1px solid transparent; border-radius: 6px; background: var(--panel-3); cursor: pointer; overflow: hidden; }
.stickitem:hover { border-color: var(--line-2); background: rgba(200, 181, 149, .12); }
.stickitem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stickthumb { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3); display: block; }
.stickchosen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.stickpick { margin-top: 10px; }
.stickrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.bubble .sticker { margin: 2px 0 6px; }
.bubble .sticker img { display: block; max-width: 180px; max-height: 180px; width: auto; height: auto; border-radius: 8px; }
/* 楼层里图片和表情可能同时出现：合成一块，各自吃自己的上间距。 */
.attachbox { margin-top: 10px; }
.attachbox > * { margin-top: 0; }
.attachbox > * + * { margin-top: 8px; }
.stickwall { display: flex; flex-wrap: wrap; gap: 8px; }
.wallstick { padding: 0; width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); overflow: hidden; cursor: zoom-in; }
.wallstick:hover { border-color: var(--line-2); }
.wallstick img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pickgrid.sticksel { margin-top: 8px; }
.announce-img { display: block; max-width: 100%; max-height: 46vh; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); margin: 0 0 12px; background: var(--panel-2); }
.notice-img { display: block; max-width: 320px; max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0 0; background: var(--panel-2); }

@media (max-width: 720px) {
  .stickgrid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); max-height: 220px; }
  .bubble .sticker img { max-width: 140px; max-height: 140px; }
  .wallstick { width: 76px; height: 76px; }
}