/* ============================================================
   燕云十六声 · 百业站 主题
   ------------------------------------------------------------
   设计方向：
     - 底色：宣纸微黄 / 夜色墨黑（随深浅色切换）
     - 主色：朱砂红 + 鎏金，武侠气质
     - 字体：标题用衬线（宋/明体），正文保持无衬线易读
     - 纹样：回纹边框、印章、卷轴质感、云纹分隔

   这个文件在 style.css 之后加载，覆盖配色与装饰。
   ============================================================ */

/* ============================================================
   1. 配色 —— 覆盖默认主题变量
   ============================================================ */

:root {
  /* 宣纸底色 */
  --bg: #f5f1e8;
  --bg-elevated: #fffdf8;
  --bg-soft: #ebe4d6;
  --fg: #1f1a14;
  --fg-soft: #4a4034;
  --fg-muted: #8a7d6b;
  --border: rgba(80, 60, 30, 0.12);
  --border-strong: rgba(80, 60, 30, 0.22);

  /* 朱砂 + 鎏金 */
  --brand-1: #9e2b25;      /* 朱砂 */
  --brand-2: #c4453c;      /* 稍亮的朱红 */
  --brand-3: #c9a24a;      /* 鎏金 */
  --gradient: linear-gradient(135deg, #9e2b25, #c4453c 50%, #c9a24a);
  --gradient-soft: linear-gradient(135deg, rgba(158,43,37,.10), rgba(196,69,60,.10) 50%, rgba(201,162,74,.10));

  --accent: #9e2b25;
  --accent-rgb: 158, 43, 37;

  --gold: #c9a24a;
  --ink: #1f1a14;
  --paper: #f5f1e8;

  --shadow-glow: 0 8px 32px rgba(158, 43, 37, .22);

  /* 武侠风字体：标题用衬线 */
  --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC",
                Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 夜色墨黑 */
    --bg: #12100e;
    --bg-elevated: #1c1916;
    --bg-soft: #262220;
    --fg: #f0e8d8;
    --fg-soft: #c4b8a4;
    --fg-muted: #8a7d6b;
    --border: rgba(220, 200, 160, 0.12);
    --border-strong: rgba(220, 200, 160, 0.22);

    --brand-1: #c4453c;
    --brand-2: #d4635a;
    --brand-3: #d4b05e;
    --gradient: linear-gradient(135deg, #c4453c, #d4635a 50%, #d4b05e);
    --gradient-soft: linear-gradient(135deg, rgba(196,69,60,.16), rgba(212,99,90,.16) 50%, rgba(212,176,94,.16));

    --accent: #d4635a;
    --accent-rgb: 212, 99, 90;

    --gold: #d4b05e;
    --paper: #1c1916;

    --shadow-glow: 0 8px 36px rgba(196, 69, 60, .28);
  }
}

/* ============================================================
   2. 全局质感
   ============================================================ */

/* 宣纸纹理 + 光晕 */
body::before {
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(var(--accent-rgb), .07), transparent 70%),
    radial-gradient(800px 500px at 85% 5%, rgba(201, 162, 74, .06), transparent 70%),
    radial-gradient(600px 400px at 50% 100%, rgba(var(--accent-rgb), .05), transparent 70%);
}

@media (prefers-color-scheme: light) {
  body {
    /* 极淡的纸纹，用重复渐变模拟 */
    background-image:
      repeating-linear-gradient(
        0deg,
        rgba(120, 90, 50, .012) 0px,
        rgba(120, 90, 50, .012) 1px,
        transparent 1px,
        transparent 3px
      );
    background-attachment: fixed;
  }
}

/* 标题用衬线字体，更有武侠味 */
.hero h1,
.article-header h1,
.section-title,
.post-card h3,
.guild-card h3,
.member-name,
.album-title,
.memorial-name,
.auth-card h1,
.mp-title,
.modal h3 {
  font-family: var(--font-serif);
  letter-spacing: 0.01em;
}

/* ============================================================
   3. 导航 —— 加一条朱砂底线
   ============================================================ */

.site-header {
  border-bottom: 1px solid var(--border);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--brand-1) 20%,
    var(--gold) 50%,
    var(--brand-1) 80%,
    transparent);
  opacity: .55;
  pointer-events: none;
}

.logo-mark {
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), .3);
  font-family: var(--font-serif);
}

/* ============================================================
   4. 按钮 —— 印章质感
   ============================================================ */

.btn-primary {
  border-radius: 4px;
  letter-spacing: .06em;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 2px;
  pointer-events: none;
}

.btn-ghost {
  border-radius: 4px;
  letter-spacing: .04em;
}

.tag {
  border-radius: 3px;
  letter-spacing: .04em;
  background: rgba(var(--accent-rgb), .09);
  border: 1px solid rgba(var(--accent-rgb), .18);
}

/* ============================================================
   5. 卡片 —— 卷轴边框
   ============================================================ */

.guild-card,
.member-card,
.album-card,
.memorial-card,
.post-card {
  border-radius: 6px;
  position: relative;
}

/* 四角回纹装饰 */
.guild-card::before,
.member-card::before {
  content: "";
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(var(--accent-rgb), .10);
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.guild-card:hover::before,
.member-card:hover::before {
  opacity: 1;
}

/* ============================================================
   6. 分隔纹样 —— 云纹
   ============================================================ */

.pattern-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 48px 0;
  color: var(--gold);
  opacity: .5;
}

.pattern-divider::before,
.pattern-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}

.pattern-divider span {
  font-size: 1.1rem;
  letter-spacing: .3em;
}

/* ============================================================
   7. 首页 Hero —— 门派匾额感
   ============================================================ */

.hero-plaque {
  display: inline-block;
  padding: 10px 34px;
  border: 2px solid var(--brand-1);
  border-radius: 4px;
  background: rgba(var(--accent-rgb), .06);
  position: relative;
  margin-bottom: 28px;
}

.hero-plaque::before,
.hero-plaque::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 2px;
}

.hero-plaque::before { top: 3px; left: 3px; }
.hero-plaque::after  { bottom: 3px; right: 3px; }

.hero-plaque h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: .18em;
  color: var(--brand-1);
  font-weight: 700;
  text-indent: .18em;
}

.hero-sub {
  font-family: var(--font-serif);
  letter-spacing: .3em;
  color: var(--fg-muted);
  font-size: .9rem;
  margin-top: 12px;
  text-indent: .3em;
}

/* ============================================================
   8. 成员卡
   ============================================================ */

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.member-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px 20px;
  text-align: center;
  transition: all .3s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.member-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .35);
  box-shadow: 0 8px 28px rgba(var(--accent-rgb), .12);
}

/* 顶部一道金线 */
.member-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.member-card:hover::after { opacity: 1; }

.member-avatar {
  width: 84px;
  height: 84px;
  border-radius: 6px;
  margin: 0 auto 14px;
  object-fit: cover;
  border: 2px solid rgba(var(--accent-rgb), .25);
  background: var(--gradient-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand-1);
  overflow: hidden;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.member-title {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 3px;
  letter-spacing: .06em;
  border: 1px solid transparent;
}

/* 职位配色 */
.rank-leader  { background: rgba(158,43,37,.14); color: var(--brand-1); border-color: rgba(158,43,37,.3); }
.rank-vice    { background: rgba(201,162,74,.16); color: #a07c1e; border-color: rgba(201,162,74,.35); }
.rank-elder   { background: rgba(120,90,160,.12); color: #7a5aa0; border-color: rgba(120,90,160,.28); }
.rank-core    { background: rgba(var(--accent-rgb), .10); color: var(--accent); border-color: rgba(var(--accent-rgb), .22); }
.rank-member  { background: var(--bg-soft); color: var(--fg-soft); border-color: var(--border); }
.rank-guest   { background: rgba(90,120,150,.12); color: #4a6a8a; border-color: rgba(90,120,150,.25); }
.rank-retired { background: var(--bg-soft); color: var(--fg-muted); border-color: var(--border); }

@media (prefers-color-scheme: dark) {
  .rank-vice  { color: var(--gold); }
  .rank-elder { color: #b9a0e0; }
  .rank-guest { color: #8ab0d0; }
}

.member-bio {
  font-size: .84rem;
  color: var(--fg-soft);
  line-height: 1.6;
  margin: 10px 0 0;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.member-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.member-stat { text-align: center; }

.member-stat .v {
  font-size: .95rem;
  font-weight: 700;
  color: var(--brand-1);
  font-variant-numeric: tabular-nums;
}

.member-stat .k {
  font-size: .68rem;
  color: var(--fg-muted);
  letter-spacing: .08em;
}

/* 状态标记 */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-active  { background: #4a9a5a; box-shadow: 0 0 0 3px rgba(74,154,90,.2); }
.status-away    { background: #c9a24a; box-shadow: 0 0 0 3px rgba(201,162,74,.2); }
.status-retired { background: #8a7d6b; box-shadow: 0 0 0 3px rgba(138,125,107,.2); }

/* ============================================================
   9. 相册
   ============================================================ */

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.album-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: all .3s var(--ease-out);
  display: flex;
  flex-direction: column;
}

.album-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .35);
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), .12);
}

.album-cover {
  aspect-ratio: 4 / 3;
  background: var(--gradient-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}

.album-card:hover .album-cover img { transform: scale(1.05); }

.album-cover .placeholder {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--brand-1);
  opacity: .45;
}

.album-info {
  padding: 18px 20px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.album-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}

.album-desc {
  font-size: .86rem;
  color: var(--fg-soft);
  line-height: 1.6;
  margin: 0 0 12px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.album-meta {
  font-size: .78rem;
  color: var(--fg-muted);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ============================================================
   10. 灯箱
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 8, 6, .94);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: fade-in .25s var(--ease);
}

.lightbox-img {
  max-width: min(92vw, 1400px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  border: 1px solid rgba(201,162,74,.25);
}

.lightbox-caption {
  color: #e8e0d0;
  text-align: center;
  margin-top: 18px;
  font-size: .92rem;
  max-width: 700px;
  line-height: 1.6;
}

.lightbox-counter {
  color: rgba(232, 224, 208, .55);
  text-align: center;
  margin-top: 8px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  transition: all .2s var(--ease);
  backdrop-filter: blur(8px);
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(201,162,74,.25);
  border-color: var(--gold);
}

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-img { max-height: 66vh; }
}

/* 相册照片网格 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.photo-item {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  position: relative;
  transition: all .25s var(--ease);
}

.photo-item:hover {
  border-color: var(--gold);
  transform: scale(1.02);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-item .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 12px 10px;
  font-size: .78rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  opacity: 0;
  transition: opacity .25s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-item:hover .cap { opacity: 1; }

/* ============================================================
   11. 纪念墙
   ============================================================ */

.memorial-hero {
  text-align: center;
  padding: 64px 0 40px;
}

.memorial-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: .2em;
  color: var(--fg);
  margin: 0 0 14px;
  text-indent: .2em;
}

.memorial-hero p {
  color: var(--fg-muted);
  letter-spacing: .12em;
  font-size: .95rem;
  margin: 0;
}

.memorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.memorial-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 24px;
  position: relative;
  transition: all .3s var(--ease-out);
}

/* 碑刻感：左侧一道金边 */
.memorial-card::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  border-radius: 0 2px 2px 0;
}

.memorial-card:hover {
  border-color: rgba(201, 162, 74, .4);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.memorial-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.memorial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(201,162,74,.3);
  background: var(--gradient-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--brand-1);
  flex-shrink: 0;
  overflow: hidden;
}

.memorial-avatar img { width: 100%; height: 100%; object-fit: cover; }

.memorial-name {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 3px;
}

.memorial-dates {
  font-size: .78rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.memorial-message {
  color: var(--fg-soft);
  font-size: .92rem;
  line-height: 1.85;
  margin: 0;
  font-family: var(--font-serif);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 大事记时间线 */
.timeline {
  position: relative;
  padding-left: 36px;
  margin-top: 32px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
}

.timeline-item {
  position: relative;
  padding-bottom: 36px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--bg);
}

.timeline-date {
  font-size: .8rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.timeline-title {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px;
}

.timeline-desc {
  color: var(--fg-soft);
  font-size: .9rem;
  line-height: 1.75;
  margin: 0 0 12px;
  white-space: pre-wrap;
}

.timeline-img {
  max-width: 420px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
}

/* ============================================================
   12. 统计条
   ============================================================ */

.stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px;
  margin: 40px 0;
}

.stat-box {
  text-align: center;
  padding: 22px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  position: relative;
}

.stat-box::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--gold);
  border-radius: 0 0 2px 2px;
}

.stat-box .n {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-box .l {
  font-size: .78rem;
  color: var(--fg-muted);
  letter-spacing: .12em;
  margin-top: 4px;
}

/* ============================================================
   13. 筛选栏
   ============================================================ */

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.filter-chip {
  padding: 6px 16px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--fg-soft);
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s var(--ease);
  letter-spacing: .04em;
}

.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-chip.active {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
}

/* ============================================================
   14. 后台管理卡片
   ============================================================ */

.item-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all .2s var(--ease);
}

.item-row:hover {
  border-color: rgba(var(--accent-rgb), .3);
}

.item-thumb {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--gradient-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brand-1);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}

.item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.item-row .info { flex-grow: 1; min-width: 0; }

.item-row .info h4 {
  margin: 0 0 4px;
  font-size: .98rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.item-row .meta {
  font-size: .79rem;
  color: var(--fg-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.item-row .actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* 后台缩略图网格 */
.mini-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.mini-photo {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.mini-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mini-photo .del {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 4px;
  border: none;
  background: rgba(0,0,0,.65);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .2s var(--ease);
  padding: 0;
}

.mini-photo:hover .del { opacity: 1; }
.mini-photo .del:hover { background: var(--danger); }

@media (max-width: 640px) {
  .item-row { flex-direction: column; align-items: stretch; }
  .item-thumb { width: 100%; height: 90px; }
  .item-row .actions { justify-content: flex-end; }
  .timeline { padding-left: 28px; }
  .timeline-item::before { left: -25px; }
}

/* ============================================================
   15. 无动画模式兼容
   ============================================================ */

.no-animations .member-card::after,
.no-animations .guild-card::before,
.no-animations .member-card::before {
  opacity: 1 !important;
}

/* ============================================================
   16. 燕云十六声 · 主题增强
   ------------------------------------------------------------
   水墨底子 + 剑气 + 鎏金：
     - 云纹 / 回纹 细边，卷轴卡片，印章按钮
     - 首屏水墨晕染、落款印章、剑光扫过
     - 悬浮剑气、鎏金描边、滚动进度「剑锋」
   所有动画都让位于 prefers-reduced-motion 与后台的「动画」开关。
   ============================================================ */

:root {
  --ink-900: #14110d;
  --ink-600: #2b241b;
  --jade: #2f5d50;
  --seal: #a8291f;
  --gold-soft: rgba(201, 162, 74, .38);
  --cloud-ink: rgba(31, 26, 20, .05);
  --hairline: rgba(120, 92, 52, .16);
  /* 首屏水墨晕染用的光斑 */
  --wash-1: rgba(158, 43, 37, .10);
  --wash-2: rgba(201, 162, 74, .09);
  --wash-3: rgba(47, 93, 80, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cloud-ink: rgba(240, 232, 216, .04);
    --hairline: rgba(220, 200, 160, .14);
    --wash-1: rgba(196, 69, 60, .14);
    --wash-2: rgba(212, 176, 94, .10);
    --wash-3: rgba(90, 140, 122, .09);
  }
}

/* ---------- 16.1 水墨底子 ---------- */

body {
  position: relative;
}

/* 缓缓流动的墨云，营造宣纸吸墨的感觉 */
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 18% 22%, var(--wash-1), transparent 62%),
    radial-gradient(38% 30% at 82% 16%, var(--wash-2), transparent 62%),
    radial-gradient(46% 38% at 68% 84%, var(--wash-3), transparent 64%);
  opacity: .9;
}

/* 极淡的云纹（用重复渐变画，不引外部图） */
.site-header::before,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--hairline) 0 14px,
    transparent 14px 28px
  );
  opacity: .8;
  pointer-events: none;
}

.site-header::before { top: 0; }
.site-footer::before { top: 0; }

/* ---------- 16.2 顶栏与印章 Logo ---------- */

.site-header {
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.site-header::after {
  height: 2px;
  opacity: .75;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-1) 18%,
    var(--gold) 50%,
    var(--brand-1) 82%,
    transparent 100%);
  background-size: 220% 100%;
  animation: header-sheen 12s linear infinite;
}

@keyframes header-sheen {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.nav a {
  position: relative;
  transition: color .25s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  transition: width .3s var(--ease-out);
}

.nav a:hover { color: var(--brand-1); }
.nav a:hover::after { width: 100%; }

/* Logo 做成一方小印 */
.logo-mark {
  border-radius: 4px !important;
  background: linear-gradient(150deg, var(--brand-1), var(--seal));
  color: #fff;
  border: 1px solid var(--gold-soft);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 3px 14px rgba(var(--accent-rgb), .32);
  transform: rotate(-2deg);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}

.logo:hover .logo-mark {
  transform: rotate(0deg) scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    0 5px 20px rgba(var(--accent-rgb), .42);
}

.logo > span:last-child {
  font-family: var(--font-serif);
  letter-spacing: .08em;
}

/* ---------- 16.3 首屏：水墨、剑光、落款 ---------- */

.hero {
  padding: 92px 0 70px;
  position: relative;
  overflow: hidden;
}

/* 水墨晕染 + 剑气扫过 */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 26% 30%, var(--wash-1), transparent 66%),
    radial-gradient(34% 38% at 76% 26%, var(--wash-2), transparent 66%),
    radial-gradient(46% 44% at 50% 96%, var(--wash-3), transparent 68%);
}

/* 一道斜向剑光，缓慢扫过标题 */
.hero::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 42%;
  height: 180%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .10) 42%,
    rgba(201, 162, 74, .22) 50%,
    rgba(255, 255, 255, .10) 58%,
    transparent 100%
  );
  transform: rotate(14deg);
  animation: sword-sweep 9s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes sword-sweep {
  0%, 62%  { transform: translateX(0) rotate(14deg); opacity: 0; }
  66%      { opacity: 1; }
  92%, 100% { transform: translateX(340%) rotate(14deg); opacity: 0; }
}

.hero .container { position: relative; z-index: 2; }

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

@media (prefers-color-scheme: dark) {
  .hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
}

.hero .gradient-text {
  background: linear-gradient(100deg, var(--brand-1), var(--gold) 48%, var(--brand-2));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(var(--accent-rgb), .25));
}

.hero p.lead {
  font-family: var(--font-serif);
  letter-spacing: .06em;
  line-height: 2;
}

/* 匾额：加金钉与描金 */
.hero-plaque {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .03));
  border: 2px solid var(--brand-1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .25),
    0 10px 34px rgba(var(--accent-rgb), .16);
}

.hero-plaque h2 {
  text-shadow: 0 2px 12px rgba(var(--accent-rgb), .22);
}

.hero-plaque::before {
  border-color: var(--gold-soft);
}

/* 落款印章 */
.hero-seal {
  position: absolute;
  right: clamp(8px, 6vw, 72px);
  top: 34px;
  z-index: 3;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid var(--seal);
  border-radius: 6px;
  color: var(--seal);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  background: rgba(168, 41, 31, .06);
  transform: rotate(6deg);
  opacity: .82;
  animation: seal-press 1.1s var(--ease-out) .5s both;
}

@keyframes seal-press {
  0%   { transform: rotate(6deg) scale(1.9); opacity: 0; filter: blur(3px); }
  60%  { transform: rotate(6deg) scale(.96); opacity: .9; filter: blur(0); }
  100% { transform: rotate(6deg) scale(1); opacity: .82; }
}

@media (max-width: 780px) {
  .hero-seal { width: 58px; height: 58px; font-size: 1.15rem; top: 20px; right: 14px; }
}

/* ---------- 16.4 分隔纹样：云纹 + 剑锋 ---------- */

.pattern-divider {
  opacity: .85;
  color: var(--gold);
}

.pattern-divider span {
  position: relative;
  text-shadow: 0 0 14px rgba(201, 162, 74, .35);
}

.pattern-divider::before,
.pattern-divider::after {
  background: linear-gradient(90deg, transparent, var(--brand-1), var(--gold), transparent);
  background-size: 200% 100%;
  animation: divider-flow 7s linear infinite;
}

@keyframes divider-flow {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- 16.5 区块标题：鎏金笔锋 ---------- */

.section-title {
  font-family: var(--font-serif);
  letter-spacing: .05em;
  position: relative;
}

.section-title::before {
  width: 3px;
  background: linear-gradient(180deg, var(--brand-1), var(--gold));
  box-shadow: 0 0 12px rgba(201, 162, 74, .45);
}

.section-sub {
  font-family: var(--font-serif);
  letter-spacing: .12em;
}

/* ---------- 16.6 卡片：卷轴 + 剑气扫过 ---------- */

.guild-card,
.member-card,
.album-card,
.memorial-card,
.post-card {
  border-radius: 4px;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  will-change: transform;
}

/* 四角回纹：悬浮时浮现 */
.member-card::before,
.guild-card::before {
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border-color: var(--gold-soft);
}

/* 剑气扫过（用一层伪元素做斜向高光） */
.member-card::after,
.album-card::after,
.memorial-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .16) 45%,
    rgba(201, 162, 74, .28) 52%,
    rgba(255, 255, 255, .16) 59%,
    transparent 100%
  );
  transform: skewX(-16deg);
  opacity: 0;
  transition: none;
  z-index: 3;
}

.member-card:hover::after,
.album-card:hover::after,
.memorial-card:hover::after {
  animation: card-sheen .95s var(--ease-out);
}

@keyframes card-sheen {
  0%   { left: -80%; opacity: 0; }
  18%  { opacity: .95; }
  100% { left: 130%; opacity: 0; }
}

.member-card:hover,
.album-card:hover,
.memorial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 74, .45);
  box-shadow:
    0 14px 34px rgba(var(--accent-rgb), .16),
    0 0 0 1px rgba(201, 162, 74, .12) inset;
}

/* 成员头像：鎏金环 */
.member-avatar {
  box-shadow:
    0 0 0 1px var(--gold-soft),
    0 6px 18px rgba(var(--accent-rgb), .18);
}

.member-name {
  letter-spacing: .06em;
}

/* 相册封面：悬浮轻推近 */
.album-cover img {
  transition: transform .6s var(--ease-out), filter .6s var(--ease);
}

.album-card:hover .album-cover img {
  transform: scale(1.07);
  filter: saturate(1.06);
}

.album-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 17, 13, .38));
  opacity: .0;
  transition: opacity .4s var(--ease);
}

.album-card:hover .album-cover::after { opacity: 1; }

.album-title {
  letter-spacing: .04em;
}

.album-cover .placeholder {
  font-family: var(--font-serif);
  letter-spacing: .3em;
  opacity: .55;
  font-size: 1.6rem;
}

/* 纪念墙：碑刻 + 烛火 */
.memorial-card {
  position: relative;
  overflow: hidden;
  border-left-width: 2px;
}

.memorial-message {
  font-family: var(--font-serif);
  letter-spacing: .04em;
  line-height: 2;
}

.memorial-avatar {
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 26px rgba(201, 162, 74, .22);
}

/* ---------- 16.7 按钮：印章与墨迹 ---------- */

.btn {
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}

.btn-primary {
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2) 62%, var(--seal));
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), .28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(var(--accent-rgb), .38);
}

.btn-primary:active { transform: translateY(0) scale(.985); }

/* 点下去的一圈墨迹 */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 50% 50% 50% 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 70%);
  opacity: 0;
  transition: inset .5s var(--ease-out), opacity .5s var(--ease);
  pointer-events: none;
}

.btn-primary:active::before {
  inset: -40% -10% -40% -10%;
  opacity: .5;
  transition: none;
}

.btn-ghost {
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--gold-soft);
  color: var(--brand-1);
  background: rgba(var(--accent-rgb), .06);
}

/* ---------- 16.8 统计：雕版数字 ---------- */

.stat-bar {
  border-radius: 4px;
  border-color: var(--hairline);
  position: relative;
  overflow: hidden;
}

.stat-bar::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 162, 74, .16);
  border-radius: 2px;
  pointer-events: none;
}

.stat-box .n {
  font-family: var(--font-serif);
  letter-spacing: .02em;
  background: linear-gradient(160deg, var(--brand-1), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-box .l {
  font-family: var(--font-serif);
  letter-spacing: .18em;
  text-indent: .18em;
}

/* ---------- 16.9 滚动进度「剑锋」 ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(90deg, var(--brand-1), var(--gold));
  box-shadow: 0 0 12px rgba(201, 162, 74, .55);
}

/* ---------- 16.10 鼠标墨晕（桌面端） ---------- */

.cursor-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .10), transparent 66%);
  transition: opacity .5s var(--ease);
}

@media (pointer: fine) {
  .cursor-aura { opacity: 1; }
}

/* ---------- 16.11 后台相册：缩略图操作 ---------- */

.mini-photo {
  border-radius: 3px;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease);
}

.mini-photo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.mini-photo.is-cover {
  box-shadow: 0 0 0 2px var(--gold);
}

.mini-photo .cover-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 2px 6px;
  font-size: .62rem;
  letter-spacing: .1em;
  color: #2b241b;
  background: linear-gradient(90deg, var(--gold), #e0c176);
  border-top-right-radius: 3px;
}

.mini-photo-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .2s var(--ease);
}

.mini-photo:hover .mini-photo-actions { opacity: 1; }

.mini-photo-actions .act,
.mini-photo-actions .del {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: none;
  display: grid;
  place-items: center;
  font-size: .82rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, .66);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.mini-photo-actions .act:hover {
  background: var(--brand-1);
  transform: scale(1.06);
}

.mini-photo .del { display: none; }

/* ---------- 16.12 弹层与灯箱：墨色底 ---------- */

.modal-backdrop,
.lightbox {
  backdrop-filter: blur(3px);
}

.modal {
  border-radius: 4px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .45),
    0 0 0 1px var(--gold-soft) inset;
}

.modal h3 {
  letter-spacing: .08em;
}

/* ---------- 16.13 揭示动画更「沉」一点 ---------- */

.reveal {
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

/* ---------- 16.14 无障碍与开关 ---------- */

@media (prefers-reduced-motion: reduce) {
  body::after,
  .site-header::after,
  .hero::after,
  .pattern-divider::before,
  .pattern-divider::after,
  .hero-seal,
  .member-card:hover::after,
  .album-card:hover::after,
  .memorial-card:hover::after {
    animation: none !important;
  }

  .hero-seal { opacity: .82; }
  .member-card:hover,
  .album-card:hover,
  .memorial-card:hover { transform: none; }
}

.no-animations body::after,
.no-animations .site-header::after,
.no-animations .hero::after,
.no-animations .pattern-divider::before,
.no-animations .pattern-divider::after {
  animation: none !important;
}

.no-animations .member-card::after,
.no-animations .album-card::after,
.no-animations .memorial-card::after {
  display: none;
}

.no-animations .cursor-aura { display: none; }

/* ---------- 16.15 特效层叠顺序 ---------- */

/* ---------- 16.15 首屏水墨浮尘（CSS 粒子，走合成器） ---------- */

.hero-motes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-motes i {
  position: absolute;
  top: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(120, 110, 95, .5);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: mote-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes mote-fall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .75; }
  70%  { opacity: .5; }
  100% { transform: translate3d(-26px, 620px, 0); opacity: 0; }
}

/* 水墨浮尘与墨晕都铺在主内容之下，但不能盖住正文 */

body > main,
.site-footer {
  position: relative;
  z-index: 1;
}

.no-animations .hero-motes { display: none; }

/* ============================================================
   17. 弹层与表单控件
   ------------------------------------------------------------
   原项目里 .modal / .modal-backdrop / .dropzone / .progress-* 等
   只有零散装饰，没有布局定义，结果弹窗会当成普通 div 掉到页面最底部。
   这一节把弹层补成真正的悬浮窗（桌面居中、手机底部抽屉）。
   ============================================================ */

/* ---------- 17.1 弹层外壳 ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(20, 17, 13, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: modal-fade .2s var(--ease-out);
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 580px;
  max-height: calc(100vh - 48px);
  margin: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .45),
    0 0 0 1px var(--gold-soft) inset;
  animation: modal-rise .26s var(--ease-out);
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 弹层打开时锁住背景滚动 */
body.modal-open { overflow: hidden; }

.modal-title {
  flex: 0 0 auto;
  margin: 0;
  padding: 20px 24px 14px;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 24px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 0 0 5px 5px;
}

/* 手机：从底部升起的抽屉式弹层，更顺手 */
@media (max-width: 640px) {
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: 10px 10px 0 0;
    animation: modal-sheet .28s var(--ease-out);
  }

  @keyframes modal-sheet {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  .modal-actions { border-radius: 0; }
}

/* ---------- 17.2 上传区与进度 ---------- */

.dropzone {
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--border-strong);
  border-radius: 5px;
  background: var(--bg-soft);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--brand-1);
  background: rgba(var(--accent-rgb), .06);
}

.dropzone-icon {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 10px;
  opacity: .85;
}

.dropzone h4 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: .04em;
}

.dropzone p {
  margin: 0;
  font-size: .82rem;
  color: var(--fg-muted);
}

.progress-wrap { margin-top: 14px; }

.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1), var(--gold));
  transition: width .18s linear;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--fg-muted);
}

.upload-result {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: .86rem;
  line-height: 1.7;
  border: 1px solid transparent;
  border-radius: 4px;
}

.upload-result.ok {
  background: rgba(74, 154, 90, .10);
  border-color: rgba(74, 154, 90, .32);
}

.upload-result.warn {
  background: rgba(201, 162, 74, .14);
  border-color: rgba(201, 162, 74, .38);
}

.upload-result ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.textarea-lg { min-height: 150px; }

/* ---------- 17.3 多选标签（流派） ---------- */

.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-select button {
  padding: 6px 13px;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--fg-soft);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s var(--ease);
}

.chip-select button:hover {
  color: var(--brand-1);
  border-color: var(--gold-soft);
  background: rgba(var(--accent-rgb), .05);
}

.chip-select button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 3px 12px rgba(var(--accent-rgb), .28);
}

/* 名册里展示多个流派 */
.member-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.section-tag {
  padding: 2px 9px;
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--fg-soft);
  background: rgba(201, 162, 74, .09);
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
}

/* ============================================================
   18. 同门名帖（成员详情页）
   ============================================================ */

/* 名册 / 首页的成员卡现在整张可点 */
.member-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.member-card-link:hover .member-name {
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 5px;
}

.member-card-link:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 3px;
}

.profile-card {
  position: relative;
  margin-top: 22px;
  padding: 34px 32px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

/* 内嵌一圈回纹细边 */
.profile-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 162, 74, .16);
  border-radius: 3px;
  pointer-events: none;
}

.profile-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.profile-avatar {
  width: 118px;
  height: 118px;
  margin: 0;
  font-size: 2.6rem;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-head-info {
  flex: 1 1 260px;
  min-width: 0;
}

.profile-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: .06em;
  line-height: 1.3;
}

.profile-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.profile-status {
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--fg-muted);
}

.profile-head .member-sections {
  justify-content: flex-start;
  margin-top: 14px;
}

.profile-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.profile-stat {
  flex: 1 1 150px;
  padding: 16px 18px;
  text-align: center;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.profile-stat .v {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--brand-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.profile-stat .k {
  margin-top: 4px;
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--fg-muted);
}

.profile-bio {
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  padding: 12px 0 12px 18px;
  border-left: 2px solid var(--gold-soft);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 2;
  color: var(--fg-soft);
}

.profile-intro {
  position: relative;
  z-index: 1;
  margin-top: 28px;
}

.profile-intro .section-title {
  font-size: 1.15rem;
}

.profile-intro p {
  margin: 14px 0 0;
  line-height: 2;
  color: var(--fg-soft);
}

.profile-nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .profile-card { padding: 26px 18px 20px; }
  .profile-head { gap: 16px; }
  .profile-avatar { width: 86px; height: 86px; font-size: 2rem; }
  .profile-nav { flex-direction: column; }
}

/* ============================================================
   页脚：备案信息
   ------------------------------------------------------------
   国内站点合规要求：ICP 备案号要展示并链接工信部；
   有交互功能的站点通常还要展示公安联网备案号。
   ============================================================ */

.site-footer .footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: .87rem;
  color: var(--fg-muted);
}

.footer-right {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

/* 备案信息单独一行，视觉上更正式，也方便审核人员一眼看到 */
.site-footer .footer-legal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}

.footer-beian {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: .82rem;
  line-height: 1.6;
}

.beian-item {
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s var(--ease);
  word-break: break-all;
}

.beian-item:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 公安备案前面加一个小盾牌符号，不依赖任何外链图片 */
.beian-police:not(.has-custom-icon)::before {
  content: "⛨";
  font-size: .95em;
  opacity: .75;
  line-height: 1;
}

.beian-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .site-footer .footer-main { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-beian { flex-direction: column; gap: 8px; }
}

/* ============================================================
   角色徽章（后台账号、页面上都可能用到）
   ============================================================ */

.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.6;
}

.role-owner  { background: rgba(158,43,37,.14); color: var(--brand-1); border-color: rgba(158,43,37,.32); }
.role-admin  { background: rgba(201,162,74,.18); color: #8a6b14;         border-color: rgba(201,162,74,.38); }
.role-editor { background: rgba(120,90,160,.12); color: #7a5aa0;         border-color: rgba(120,90,160,.30); }
.role-member { background: rgba(var(--accent-rgb), .10); color: var(--accent); border-color: rgba(var(--accent-rgb), .24); }
.role-viewer { background: var(--bg-soft); color: var(--fg-muted);       border-color: var(--border); }

@media (prefers-color-scheme: dark) {
  .role-admin  { color: var(--gold); }
  .role-editor { color: #b9a0e0; }
}

.dim { color: var(--fg-muted); }