/* ==========================================================
   Community Styles — Celestial Arcana
   发帖弹窗・帖子卡片・评论区・骰子动画・送钻石
   ========================================================== */

/* ===== Header 顶栏 ===== */
.cm-header {
  position: relative; z-index: 10;
  padding: 44px 20px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.cmh-title {
  font-family: 'Georgia', serif; font-size: 22px; font-weight: 700;
  color: #362040; letter-spacing: .06em;
}
.cmh-actions { display: flex; gap: 6px; }
.cmh-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.75); backdrop-filter: blur(10px);
  border: 1px solid rgba(180,140,160,.08);
  color: #8a6a90; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 18px;
  box-shadow: 0 2px 8px rgba(120,68,100,.04); transition: transform .15s;
}
.cmh-btn:active { transform: scale(.94); }

/* ===== Community Hero & Layout ===== */
#page-0 { background: #F8F4F1; overflow-y: auto; }
.cm-gradient-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(180deg, rgba(106,75,122,.22) 0%, rgba(145,100,130,.15) 30%, rgba(220,175,188,.08) 60%, #F8F4F1 100%);
  z-index: 0; pointer-events: none;
}
.cm-hero { position: relative; z-index: 1; height: 120px; overflow: hidden; background: linear-gradient(180deg, #a87998 0%, #cfafb8 50%, #F8F4F1 100%); }
/* 顶部暗色遮罩，保证白字可见 */
.cm-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50px;
  background: linear-gradient(180deg, rgba(60,20,40,.25) 0%, transparent 100%);
  z-index: 2; pointer-events: none;
}

/* CSS 装饰：云朵 */
.cm-cloud { position: absolute; height: 42px; border-radius: 999px; background: rgba(255,244,232,.55); filter: blur(.2px); }
.cm-cloud::before, .cm-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cm-cloud::before { width: 50px; height: 50px; left: 18px; top: -20px; }
.cm-cloud::after { width: 64px; height: 64px; left: 66px; top: -30px; }
.cm-cloud-l { left: -44px; bottom: 42px; width: 250px; opacity: .4; }
.cm-cloud-r { right: -58px; bottom: 50px; width: 240px; opacity: .5; }

/* CSS 装饰：月亮 */
.cm-moon {
  position: absolute; right: 58px; top: 16px; width: 52px; height: 52px;
  border-radius: 50%; background: #fff8c7;
  box-shadow: 0 0 40px rgba(255,235,150,.55), 0 0 80px rgba(255,220,120,.2);
}
.cm-moon::after {
  content: ''; position: absolute; left: -12px; top: -4px;
  width: 52px; height: 52px; border-radius: 50%;
  background: #a87998;
}

/* CSS 装饰：灯塔 + 小岛 */
.cm-lighthouse {
  position: absolute; right: 40px; bottom: 10px; width: 14px; height: 56px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #fff8e7, #f5dbd2 40%, #e0b8b0 80%);
  box-shadow: 0 0 24px rgba(255,232,160,.35);
}
.cm-lighthouse::before {
  content: ''; position: absolute; left: -5px; top: 14px; width: 24px; height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffdba0, #fff3d0 50%, #ffdba0);
  box-shadow: 0 0 20px rgba(255,220,130,.5);
}
.cm-lighthouse::after {
  content: ''; position: absolute; left: 3px; top: -6px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 8px solid #c49a98;
}
.cm-island-base {
  position: absolute; right: 18px; bottom: 0; width: 80px; height: 16px;
  border-radius: 55% 45% 30% 40%;
  background: linear-gradient(180deg, rgba(130,100,110,.35), rgba(80,55,70,.25));
}

.cm-hero-title { position: absolute; top: 16px; left: 24px; z-index: 4; display: flex; flex-direction: column; gap: 3px; }
.cm-hero-title h1 { margin: 0; color: #fff; font-size: 26px; font-weight: 700; letter-spacing: .08em; line-height: 1; text-shadow: 0 2px 16px rgba(30,10,40,.5); }
.cm-hero-title h1 span { color: #FFE4C4; text-shadow: 0 0 20px rgba(255,180,100,.6); font-size: 17px; }
.cm-hero-title p { margin: 0; color: rgba(255,255,255,.75); font-size: 12px; letter-spacing: .03em; font-weight: 500; text-shadow: 0 1px 6px rgba(30,10,40,.35); }

/* Scroll */
.cm-scroll { position: relative; z-index: 2; padding: 16px 16px 90px; display: flex; flex-direction: column; gap: 10px; }

.cm-top-panel {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.cm-sync-head {
  margin: 0 2px 10px;
}

.cm-sync-head h2 {
  margin: 0;
  color: #4b334e;
  font-family: 'Georgia', serif;
  font-size: 26px;
  font-weight: 760;
  line-height: 1.1;
}

.cm-sync-head p {
  margin: 5px 0 0;
  color: #9a8794;
  font-size: 12px;
  font-weight: 520;
}

/* ===== 浠婃棩鍏遍福鍗＄墖 ===== */
.cm-banner {
  margin-top: 0;
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  min-height: 128px;
  border-radius: 20px;
  padding: 12px 14px;
  cursor: pointer;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,241,229,.92), transparent 24%),
    radial-gradient(circle at 38% 52%, rgba(248,209,220,.46), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(255,243,239,.96));
  border: 1px solid rgba(247,218,222,.92);
  box-shadow: 0 12px 28px rgba(120,68,100,.09);
  transition: transform .15s;
  min-width: 0;
}
.cm-banner:active { transform: scale(.98); }

.cmbn-illust {
  position: relative;
  width: 102px;
  height: 94px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 42% 30%, rgba(255,255,255,.92), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #f5d7e2 0%, #f7e7ee 56%, #fff2ee 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  overflow: hidden;
}

.cmbn-moon {
  position: absolute;
  left: 24px;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff5ca;
  box-shadow: 0 0 16px rgba(255,235,170,.6);
}

.cmbn-moon::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0d2de;
}

.cmbn-tower {
  position: absolute;
  left: 48px;
  bottom: 28px;
  width: 11px;
  height: 32px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #fff8ec, #f5d5cc 50%, #e6b6af 100%);
  box-shadow: 0 4px 12px rgba(201,130,114,.18);
}

.cmbn-tower::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 7px;
  width: 17px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffe6b4, #fff5d6);
}

.cmbn-tower::after {
  content: "";
  position: absolute;
  left: 2px;
  top: -5px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 6px solid #cca1a1;
}

.cmbn-island-base {
  position: absolute;
  left: 28px;
  right: 24px;
  bottom: 19px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #efc0cd, #d893ab);
}

.cmbn-water {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 72%);
}

.cmbn-body { min-width: 0; }
.cmbn-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #e27d93;
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(245,211,220,.92);
}
.cmbn-title {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.38;
  font-weight: 760;
  color: #5a3a51;
  word-break: keep-all;
}
.cmbn-sub {
  font-size: 12px;
  color: #8a7080;
  margin-top: 5px;
  line-height: 1.45;
  word-break: keep-all;
}
.cmbn-link {
  grid-column: 2;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 2px;
  color: #e1868f;
  font-size: 13px;
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
}
.cmbn-arrow { font-size: 17px; color: #d59baa; flex-shrink: 0; }

/* ===== 筛选栏 ===== */
/* ===== 筛选栏 — 白色卡片 + Apple 滑动动效 ===== */
.cm-filters {
  position: relative;
  display: flex; align-items: center;
  background: rgba(255,255,255,.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(180,140,160,.08);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(120,68,100,.04);
  overflow: hidden;
}

/* 滑动指示器 */
.cmf-indicator {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #c0899e, #b0708a);
  box-shadow: 0 2px 8px rgba(176,112,138,.2);
  z-index: 0;
  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cmf-item {
  flex: 1; height: 36px; border: none; background: transparent;
  color: #8e7c8f; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.25s ease;
  white-space: nowrap; padding: 0 4px;
}

/* 竖线分隔 */
.cmf-item + .cmf-item::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 1px; background: rgba(180,140,160,.08);
  transition: opacity 0.25s ease;
}

.cmf-item.active {
  color: #fff;
  transition-delay: 0.05s;
}

/* 激活项左右的分隔线变透明 */
.cmf-item.active + .cmf-item::before,
.cmf-item.active::before {
  opacity: 0;
}

/* ===== Feed 帖子卡片 ===== */
#communityFeed { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 120px; }

/* ===== Post Modal (Bottom Sheet) ===== */
.post-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 420px;
  margin: 0 auto;
  background: rgba(28, 27, 29, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px 16px 0 0;
  padding: 0;
  z-index: 1100;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(198, 196, 223, 0.08);
  border-bottom: none;
}

.post-modal.show {
  transform: translateY(0);
}

.post-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1050;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.post-modal-overlay.show {
  display: flex;
}

.post-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(198, 196, 223, 0.06);
  flex-shrink: 0;
}

.post-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c6c4df, #a8a5c0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #3c2f00;
  flex-shrink: 0;
}

.post-nickname {
  font-size: 14px;
  color: var(--on-surface, #e5e1e3);
  font-weight: 500;
}

.post-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-surface-variant, #c8c5cd);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.post-close:active {
  background: rgba(255, 255, 255, 0.12);
}

.post-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 200px;
  border: none;
  background: transparent;
  color: var(--on-surface, #e5e1e3);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 16px;
  resize: none;
  outline: none;
  flex-shrink: 0;
}

.post-textarea::placeholder {
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.25;
}

#postCardPreview {
  padding: 0 16px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.post-card-item {
  position: relative;
  background: rgba(233, 195, 73, 0.08);
  border: 1px solid rgba(233, 195, 73, 0.15);
  border-radius: 10px;
  padding: 8px 28px 8px 10px;
  font-size: 12px;
  color: var(--secondary, #e9c349);
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-card-item .pci-rev {
  font-size: 10px;
  color: rgba(233, 195, 73, 0.5);
  margin-left: 2px;
}

.post-card-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-surface-variant, #c8c5cd);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.post-card-remove:active {
  background: rgba(255, 80, 80, 0.2);
  color: #ff6b6b;
}

.post-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(198, 196, 223, 0.06);
  flex-shrink: 0;
}

.post-tool-btn {
  padding: 7px 14px;
  border-radius: 18px;
  border: 1px solid rgba(198, 196, 223, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-surface-variant, #c8c5cd);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
  white-space: nowrap;
}

.post-tool-btn:active {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(0.95);
}

.post-submit-btn {
  margin-left: auto;
  padding: 8px 22px;
  border-radius: 18px;
  border: none;
  background: var(--secondary, #e9c349);
  color: #3c2f00;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(233, 195, 73, 0.25);
}

.post-submit-btn:active {
  transform: scale(0.95);
}

.post-submit-btn:disabled {
  opacity: 0.5;
}

/* ===== Spread Selector ===== */
.spread-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1200;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.spread-overlay.show {
  display: flex;
}

.spread-panel {
  background: rgba(28, 27, 29, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 196, 223, 0.08);
  border-radius: 16px;
  padding: 20px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spread-title {
  text-align: center;
  font-size: 15px;
  color: var(--on-surface, #e5e1e3);
  font-weight: 500;
  margin-bottom: 4px;
}

.spread-btn {
  padding: 12px;
  border-radius: var(--radius-pill, 18px);
  border: 1px solid rgba(198, 196, 223, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-surface-variant, #c8c5cd);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
}

.spread-btn:active {
  background: rgba(233, 195, 73, 0.12);
  border-color: rgba(233, 195, 73, 0.2);
  transform: scale(0.97);
}

.spread-cancel {
  padding: 10px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.35;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
}

.spread-cancel:active {
  background: rgba(255, 255, 255, 0.04);
}

/* ===== Community Title Bar ===== */
.community-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 6px;
  flex-shrink: 0;
}
.ctb-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ctb-icon {
  font-size: 15px;
}
.ctb-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.ctb-filters {
  display: flex;
  gap: 6px;
}
.ctb-filter {
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  opacity: 0.7;
}
.ctb-filter.active {
  background: var(--accent-pink);
  border-color: rgba(201,162,77,.15);
  color: #34263A;
  font-weight: 600;
  opacity: 1;
}

.feed-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-secondary);
  font-size: 14px;
  opacity: 0.35;
}

.feed-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 12px;
  opacity: 0.25;
}

.feed-end {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 11px;
  opacity: 0.18;
}

.post-card {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(180,140,160,.08);
  border-radius: 20px;
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(120,68,100,.04);
  transition: box-shadow .2s, transform .15s;
  min-height: 100px;
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.post-card:active { box-shadow: 0 8px 24px rgba(104,78,96,.08); transform: scale(.995); }
.post-card::after { content: '•••'; position: absolute; right: 16px; top: 14px; color: #C4B5C0; font-weight: 400; letter-spacing: .1em; font-size: 10px; cursor: pointer; padding: 4px; opacity: .15; transition: opacity .2s; }
.post-card:active::after { opacity: .5; }

.post-card-header { display: flex; align-items: center; gap: 10px; }

.pch-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  background: radial-gradient(circle at 50% 16%, #f9e9a8 0 3px, transparent 4px),
              radial-gradient(circle at 50% 65%, #111d36 0 23%, transparent 24%),
              linear-gradient(180deg,#253353,#94718a);
  box-shadow: 0 4px 10px rgba(73,47,79,.1);
}

.pch-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pch-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pch-name { font-size: 15px; color: #362040; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.pch-moon { font-size: 9px; opacity: .4; }
.pch-post-tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.pch-tag-upright { background: #fce4ef; color: #c0607a; }
.pch-tag-reversed { background: #eee2f8; color: #8060a0; }
.pch-tag-single { background: #EDE2F7; color: #7B63B0; }
.pch-tag-triple { background: #EDE2F7; color: #6B4DA8; }
.pch-tag-treehole { background: #e6f0e8; color: #5a8a5e; }
.pch-time { font-size: 10px; color: #B5A8B4; }

.post-card-body {
  font-size: 13px; color: #4a3a45; line-height: 1.6; margin: 0 0 4px;
  word-break: break-word; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pcb-expand {
  color: var(--champagne);
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
}

/* 牌面缩略图行 */
.post-cards-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* 图片预览卡片 */
.pcr-item {
  width: 44px;
  min-height: 62px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #FAF5EF, #F0EBE4);
  border: 1px solid rgba(234,217,195,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 2px;
}
.pcr-img {
  width: 100%;
  height: 52px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}
.pcr-fallback {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
}

/* Chip卡片（无图时） */
.pcr-chip {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(201,162,77,.06);
  border: 1px solid var(--card-border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pcr-chip.pcr-reversed {
  border-color: rgba(201,162,77,.25);
}
.pcr-chip-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
}
.pcr-chip-pos {
  font-size: 10px;
  color: var(--champagne);
  font-weight: 500;
}

.pcr-label {
  font-size: 7px;
  color: var(--champagne);
  font-weight: 600;
  padding: 1px 0;
}
.pcr-name-text {
  font-size: 8px;
  color: var(--text-secondary);
  line-height: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 2px;
  opacity: 0.7;
}
.pcr-more {
  width: 36px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  opacity: 0.3;
  flex-shrink: 0;
}

/* 骰子行 */
.post-dice-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.pdr-item {
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(201,162,77,.05);
  font-size: 10px;
  opacity: 0.7;
}

.post-card-footer { display: flex; align-items: center; gap: 14px; padding-top: 6px; margin-top: 2px; border-top: 1px solid rgba(180,140,160,.05); color: #8E7C8F; font-size: 12px; }
.pcf-btn { display: flex; align-items: center; gap: 3px; background: none; border: none; color: #8E7C8F; font-family: var(--font-body); font-size: 12px; cursor: pointer; opacity: .7; transition: opacity .15s, color .15s; padding: 3px 7px; border-radius: 6px; }
.pcf-btn:active { opacity: 1; color: #C0899E; background: rgba(192,137,158,.06); }
.pcf-icon { font-size: 14px; line-height: 1; }
.pcf-count { font-size: 10px; }

/* ===== Comment Section ===== */
.comment-section {
  margin-top: 12px;
  padding-top: 12px;
  display: none;
  border-top: 1px solid rgba(198, 196, 223, 0.06);
}

.comment-section.open {
  display: block;
}

.comment-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.comment-item {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(198, 196, 223, 0.03);
  position: relative;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-item {
  background: rgba(198, 196, 223, 0.03);
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
}

.ci-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #3c2f00;
  flex-shrink: 0;
  font-weight: 600;
  background: linear-gradient(135deg, var(--secondary, #e9c349), var(--primary, #c6c4df));
}

.ci-body {
  flex: 1;
  min-width: 0;
}

.ci-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.ci-name {
  font-size: 12px;
  color: var(--primary, #c6c4df);
  font-weight: 500;
}

.ci-time {
  font-size: 10px;
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.15;
  margin-left: auto;
}

.ci-content {
  font-size: 12px;
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.6;
  line-height: 1.6;
  word-break: break-word;
}

.ci-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.ci-diamond-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.25;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
}

.ci-diamond-btn:active {
  background: rgba(233, 195, 73, 0.1);
  color: var(--secondary, #e9c349);
  opacity: 1;
}

.ci-diamond-count {
  font-size: 10px;
  min-width: 8px;
  color: var(--secondary, #e9c349);
}

.comment-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

.comment-input {
  flex: 1;
  height: 36px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(198, 196, 223, 0.1);
  border-radius: 0;
  padding: 0 4px;
  color: var(--on-surface, #e5e1e3);
  font-size: 14px;
  outline: none;
  font-family: 'Manrope', sans-serif;
  transition: border-color 0.2s;
}

.comment-input:focus {
  border-bottom-color: var(--primary, #c6c4df);
}

.comment-input::placeholder {
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.2;
  font-size: 13px;
}

.comment-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--secondary, #e9c349);
  color: #3c2f00;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.comment-send-btn:active {
  transform: scale(0.9);
}

.comment-send-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ===== Diamond Send Panel ===== */
.diamond-send-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1250;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.diamond-send-overlay.show {
  display: flex;
}

.diamond-send-panel {
  background: rgba(28, 27, 29, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(233, 195, 73, 0.12);
  border-radius: 16px;
  padding: 20px;
  width: 240px;
  text-align: center;
  box-shadow: 0 0 30px rgba(233, 195, 73, 0.08);
}

.ds-title {
  font-size: 15px;
  color: var(--secondary, #e9c349);
  font-weight: 500;
  margin-bottom: 16px;
}

.ds-options {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ds-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(233, 195, 73, 0.1);
  background: rgba(233, 195, 73, 0.06);
  color: var(--secondary, #e9c349);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
}

.ds-btn:active {
  background: rgba(233, 195, 73, 0.15);
  border-color: var(--secondary, #e9c349);
  transform: scale(0.92);
}

.ds-cancel {
  padding: 8px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.3;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
}

.ds-cancel:active {
  background: rgba(255, 255, 255, 0.04);
}

.diamond-particle {
  position: fixed;
  pointer-events: none;
  z-index: 1300;
  font-size: 14px;
  animation: diamondFloat 0.8s ease-out forwards;
}

@keyframes diamondFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.5); }
}

/* ===== Dice Roll Animation ===== */
.dice-roll-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1300;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dice-roll-overlay.show {
  display: flex;
}

.dice-roll-box {
  background: rgba(28, 27, 29, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(233, 195, 73, 0.1);
  border-radius: 20px;
  padding: 30px 32px 24px;
  width: 300px;
  text-align: center;
  box-shadow: 0 0 30px rgba(233, 195, 73, 0.08);
}

.dice-roll-title {
  font-size: 16px;
  color: var(--secondary, #e9c349);
  font-weight: 500;
  font-family: 'Manrope', sans-serif;
  margin-bottom: 24px;
}

.dice-roll-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  min-height: 60px;
  align-items: center;
}

.dice-roll-die {
  font-size: 32px;
  animation: diceSpin 0.15s steps(1) infinite;
  transition: all 0.3s;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary, #e9c349);
  text-shadow: 0 0 10px rgba(233, 195, 73, 0.3);
}

.dice-roll-die:nth-child(2) {
  animation-delay: 0.1s;
}

.dice-roll-die:nth-child(3) {
  animation-delay: 0.2s;
}

.dice-roll-die.dice-stopped {
  animation: none;
  font-size: 28px;
  background: rgba(233, 195, 73, 0.06);
  border: 1px solid rgba(233, 195, 73, 0.15);
  border-radius: 12px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary, #e9c349);
  text-shadow: 0 0 8px rgba(233, 195, 73, 0.2);
}

@keyframes diceSpin {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.dice-roll-result {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ddr-line {
  font-size: 15px;
  color: var(--secondary, #e9c349);
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}

.ddr-meaning {
  font-size: 12px;
  color: var(--on-surface-variant, #c8c5cd);
  opacity: 0.4;
  margin-top: 8px;
  line-height: 1.6;
}

/* ===== Dice Result & Post Dice Display ===== */
.dice-result-item {
  background: rgba(233, 195, 73, 0.06);
  border-color: rgba(233, 195, 73, 0.12) !important;
}

.dice-result-item span {
  color: var(--secondary, #e9c349);
}

.post-dice-display {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.pdd-dice {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  position: relative;
  overflow: hidden;
}

.pdd-sign {
  background: linear-gradient(135deg, rgba(198, 196, 223, 0.12), rgba(198, 196, 223, 0.04));
  border: 1px solid rgba(198, 196, 223, 0.15);
}
.pdd-planet {
  background: linear-gradient(135deg, rgba(233, 195, 73, 0.1), rgba(233, 195, 73, 0.03));
  border: 1px solid rgba(233, 195, 73, 0.15);
}
.pdd-house {
  background: linear-gradient(135deg, rgba(0, 219, 231, 0.1), rgba(0, 219, 231, 0.03));
  border: 1px solid rgba(0, 219, 231, 0.15);
}

.pdd-symbol {
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}
.pdd-sign .pdd-symbol { color: var(--primary, #c6c4df); }
.pdd-planet .pdd-symbol { color: var(--secondary, #e9c349); }
.pdd-house .pdd-symbol { color: var(--tertiary, #00dbe7); }

.pdd-house-num {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
}

.pdd-label {
  font-size: 7px;
  line-height: 1;
  opacity: 0.5;
  color: var(--on-surface-variant, #c8c5cd);
  letter-spacing: 0.3px;
}

/* ===== Today Page (override) ===== */
#todayPage {
  padding: 16px;
  height: calc(100vh - 120px);
  overflow-y: auto;
  background: #FAF5EF;
  scroll-behavior: smooth;
}

/* ===== FAB 弹出菜单 ===== */
/* ===== 树洞发布页 ===== */
/* ===== 树洞发布页 ===== */
.th-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: #fdf7f5; }
.th-overlay.show { display: flex; justify-content: center; }
.th-page { width: 100%; max-width: 480px; height: 100dvh; display: flex; flex-direction: column; background: #fdf7f5; }

/* Header */
.th-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fdf7f5; border-bottom: 1px solid rgba(180,160,170,.08); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.th-back { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: #52414C; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.th-back:active { background: rgba(100,60,90,.08); }
.th-title { font-size: 18px; font-weight: 600; color: #3E2A3A; letter-spacing: .04em; font-family: var(--font-heading); }

/* Body scroll */
.th-body { flex: 1; overflow-y: auto; padding: 16px 16px 0; }

/* 身份选择 */
.th-identity { display: flex; gap: 10px; margin-bottom: 20px; }
.thi-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; border-radius: 14px; border: 1.5px solid rgba(180,160,175,.2); background: rgba(255,255,255,.7); color: #8A7B83; font-size: 14px; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
.thi-btn .material-symbols-outlined { font-size: 20px; }
.thi-btn.active { background: rgba(104,77,173,.08); border-color: #684dad; color: #684dad; font-weight: 600; }
.thi-btn:active { transform: scale(.97); }

/* Section */
.th-section { margin-bottom: 20px; }
.ths-label { font-size: 16px; font-weight: 600; color: #3E2A3A; margin: 0 0 12px 2px; letter-spacing: .03em; }
.ths-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ths-label-row .ths-label { margin-bottom: 0; }
.ths-hint { font-size: 12px; color: #B5AAB2; }

/* 情绪意图按钮 */
.th-intent { display: flex; gap: 8px; justify-content: space-between; }
.thit-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; padding: 10px 4px; border-radius: 14px; border: 1.5px solid transparent; background: rgba(255,255,255,.6); cursor: pointer; font-family: var(--font-body); font-size: 11px; color: #8A7B83; transition: all .2s; }
.thit-circle { width: 40px; height: 40px; border-radius: 50%; background: rgba(180,160,175,.1); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.thit-circle .material-symbols-outlined { font-size: 22px; color: #8A7B83; }
.thit-item.on { border-color: #684dad; background: rgba(104,77,173,.06); color: #684dad; font-weight: 600; }
.thit-item.on .thit-circle { background: rgba(104,77,173,.12); }
.thit-item.on .thit-circle .material-symbols-outlined { color: #684dad; font-variation-settings: 'FILL' 1; }
.thit-item:active { transform: scale(.94); }

/* 正文输入 */
.th-textarea-wrap { position: relative; }
.th-textarea-wrap textarea { width: 100%; height: 160px; padding: 14px 16px 34px; border-radius: 16px; border: 1.5px solid rgba(180,160,175,.18); background: rgba(255,255,255,.8); font-family: var(--font-body); font-size: 14px; color: #3E2A3A; line-height: 1.65; resize: none; outline: none; box-sizing: border-box; }
.th-textarea-wrap textarea:focus { border-color: rgba(104,77,173,.3); box-shadow: 0 0 0 3px rgba(104,77,173,.06); }
.th-textarea-wrap textarea::placeholder { color: #B5AAB2; font-size: 13px; }
.th-count { position: absolute; bottom: 10px; right: 14px; font-size: 11px; color: #B5AAB2; }

/* 温柔提示 */
.th-encourage { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 20px; border-radius: 14px; background: rgba(104,77,173,.05); border: 1px solid rgba(104,77,173,.08); }
.th-encourage .material-symbols-outlined { font-size: 18px; color: #684dad; margin-top: 1px; }
.th-encourage p { margin: 0; font-size: 13px; color: #8A7B83; line-height: 1.5; }

/* 状态标签 */
.th-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tht-chip { padding: 8px 16px; border-radius: 20px; border: 1.5px solid rgba(180,160,175,.15); background: rgba(255,255,255,.6); color: #8A7B83; font-size: 13px; cursor: pointer; font-family: var(--font-body); transition: all .2s; }
.tht-chip.on { background: rgba(104,77,173,.08); border-color: #684dad; color: #684dad; font-weight: 600; }
.tht-chip:active { transform: scale(.95); }

/* 底部发布栏 */
.th-footer { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background: linear-gradient(180deg,transparent 0%,#fdf7f5 30%,#fdf7f5 100%); z-index: 10; }
.th-footer .th-publish { width: 100%; height: 48px; border-radius: 24px; border: none; background: linear-gradient(135deg,#684dad,#5a3da0); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: .06em; font-family: var(--font-body); box-shadow: 0 4px 16px rgba(104,77,173,.28); }
.th-footer .th-publish:active { transform: scale(.98); opacity: .9; }

/* Safe area */
.th-safe { height: calc(40px + env(safe-area-inset-bottom,0px)); }
/* ===== 帖子详情页新 UI ===== */
.post-detail-overlay { display: none; position: fixed; inset: 0; z-index: 1500; background: #fff7f8; }
.post-detail-overlay.show { display: flex; justify-content: center; }
/* 背景艺术 */
.pd-bg-art { position: absolute; top: 0; left: 0; right: 0; height: 194px; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 36% 10%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 63% 6%,rgba(255,255,255,.95) 0 3px,transparent 4px),linear-gradient(180deg,#e7d6f7,#ffdbe7 58%,rgba(255,246,246,.1)); }
.pd-cloud { position: absolute; width: 210px; height: 42px; border-radius: 999px; background: rgba(255,244,234,.65); filter: blur(.2px); }
.pd-cloud::before,.pd-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.pd-cloud::before { width: 54px; height: 54px; left: 24px; top: -25px; }
.pd-cloud::after { width: 75px; height: 75px; left: 75px; top: -38px; }
.pd-cloud-l { left: -58px; top: 64px; opacity: .63; }
.pd-cloud-r { right: -42px; top: 40px; opacity: .72; }
.pd-cloud-b { right: 10px; top: 99px; width: 260px; opacity: .44; }
.pd-moon { position: absolute; right: 82px; top: 8px; width: 64px; height: 64px; border-radius: 50%; background: #fff8c7; box-shadow: 0 0 38px rgba(255,240,173,.62); }
.pd-moon::after { content: ''; position: absolute; left: -16px; top: -6px; width: 64px; height: 64px; border-radius: 50%; background: #ead6f4; }

/* 顶部导航 */
.pd-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: 82px; display: flex; align-items: center; justify-content: center; padding: 22px 24px 0; }
.pd-h-title { margin: 0; color: #332237; font-size: 18px; font-weight: 700; letter-spacing: .14em; }
.pd-h-btn { position: absolute; top: 22px; width: 42px; height: 42px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.67); color: #402b45; box-shadow: 0 8px 20px rgba(129,82,106,.1); backdrop-filter: blur(12px); cursor: pointer; }
.pd-back { left: 14px; }
.pd-share { right: 14px; }
.pd-back-arrow { width: 17px; height: 17px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg) translateX(2px); border-radius: 2px; display: block; }

/* 滚动区 */
.pd-scroll { position: absolute; z-index: 5; inset: 58px 0 80px; padding: 0 14px 70px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }

/* 帖子详情卡 */
.pd-card { background: rgba(255,255,255,.82); border: 1px solid rgba(122,83,102,.08); border-radius: 23px; padding: 18px; box-shadow: 0 14px 34px rgba(127,75,99,.13); backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 15px; }
.pd-author-row { display: flex; align-items: center; gap: 13px; }
.pd-avatar { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 54% 42%,#f5c7bd 0 15%,transparent 16%),radial-gradient(circle at 55% 35%,#54314a 0 25%,transparent 26%),linear-gradient(145deg,#b590d5,#f5c5d3 55%,#ffdfc8); box-shadow: 0 8px 18px rgba(101,61,91,.14); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pd-author-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pd-author-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pd-name { font-size: 17px; font-weight: 700; color: #3b293f; white-space: nowrap; }
.pd-time { color: #a895a0; font-size: 13px; }
.pd-badge { height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.pd-badge-v { background: #f2eaff; color: #7553b9; }
.pd-badge-o { background: #fff0e5; color: #be6745; }
.pd-badge-p { background: #ffe6f2; color: #c95483; }
.pd-badge-b { background: #edf1ff; color: #5d75c9; }

.pd-post-title { margin: 0; color: #312136; font-size: 21px; line-height: 1.38; font-weight: 800; }
.pd-body-grid { display: grid; grid-template-columns: minmax(0,1fr) 183px; gap: 14px; align-items: start; }
.pd-body-text { margin: 0; color: #34283a; font-size: 15px; line-height: 1.86; }
.pd-body-text .moon-inline { color: #f5c950; text-shadow: 0 0 10px rgba(255,230,126,.45); }

/* 解读区 */
.pd-readings { display: flex; flex-direction: column; gap: 6px; }
.pd-reading-row { display: flex; gap: 6px; background: rgba(255,240,242,.3); border-radius: 14px; padding: 10px 12px; font-size: 13px; align-items: flex-start; }
.pdr-icon { font-size: 15px; flex-shrink: 0; }
.pdr-label { font-size: 12px; color: #a36bd8; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.pdr-text { color: #52414C; line-height: 1.5; }

/* 牌面缩略 */
.pd-spread { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding-top: 1px; }
.pd-sp-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #756273; font-size: 11px; }
.pd-sp-card { width: 52px; height: 80px; border-radius: 5px; background: #eee4d9; border: 1px solid #a88775; box-shadow: 0 5px 10px rgba(70,42,62,.15); overflow: hidden; position: relative; }
.pd-sp-card::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(84,47,64,.28); border-radius: 3px; z-index: 2; pointer-events: none; }
.pd-sp-card img { width: 100%; height: 100%; object-fit: cover; }
.pd-sp-name { font-size: 9px; text-align: center; }
.pd-sp-rev { font-size: 8px; color: #cf6679; }

.pd-hint { padding: 8px 14px; border-radius: 11px; border: 1px solid rgba(194,113,152,.18); background: rgba(255,247,252,.72); color: #8a6590; font-size: 14px; display: flex; align-items: center; gap: 10px; }

/* 操作栏 */
.pd-actions { display: grid; grid-template-columns: repeat(4,1fr); align-items: center; height: 54px; border-radius: 23px; background: rgba(255,255,255,.82); box-shadow: 0 10px 26px rgba(143,90,116,.1); }
.pd-act { display: flex; align-items: center; justify-content: center; gap: 9px; color: #6d566c; font-size: 15px; font-weight: 600; position: relative; cursor: pointer; background: none; border: none; font-family: var(--font-body); }
.pd-act + .pd-act::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(128,84,105,.13); }
.pd-act-icon { font-size: 22px; }

/* 回应标题 */
.pd-reply-hd { display: flex; align-items: center; gap: 9px; height: 42px; padding: 11px 0 5px; color: #4d3154; font-size: 19px; font-weight: 800; }
.pd-reply-hd span { color: #c9a3df; }

/* 回应卡 */
.pd-reply { position: relative; border-radius: 20px; padding: 14px 16px 13px; display: grid; grid-template-columns: 46px 1fr; gap: 13px; background: rgba(255,255,255,.82); border: 1px solid rgba(122,83,102,.07); box-shadow: 0 10px 26px rgba(143,90,116,.1); }
.pd-reply-more { position: absolute; right: 17px; top: 13px; color: #aa8499; font-weight: 700; letter-spacing: .12em; font-size: 14px; }
.pd-reply-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd-reply-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; padding-right: 34px; }
.pd-reply-name { color: #3c2a41; font-size: 17px; font-weight: 800; white-space: nowrap; }
.pd-reply-body { margin: 0; color: #34283a; font-size: 14px; line-height: 1.55; }
.pd-reply-acts { display: flex; align-items: center; gap: 24px; color: #9a8190; font-size: 12px; }
.pd-reply-acts span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* 底部输入 */
.pd-composer { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: 68px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 9px 14px 11px; background: rgba(255,250,251,.9); border-top: 1px solid rgba(128,84,105,.08); backdrop-filter: blur(20px); }
.pdc-avatar { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 52% 42%,#f6c6bd 0 15%,transparent 16%),linear-gradient(145deg,#a886ca,#ffc8d4 60%,#fff1de); }
.pdc-input { flex: 1; }
.pdc-input input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid rgba(171,112,143,.18); background: rgba(255,255,255,.72); padding: 0 18px; font-family: var(--font-body); font-size: 15px; color: #34283a; outline: none; box-sizing: border-box; }
.pdc-input input::placeholder { color: #b79fab; }
.pdc-send { height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(180deg,#ff8fba,#e7659c); color: #fff; font: 800 15px var(--font-body); letter-spacing: .06em; box-shadow: 0 10px 22px rgba(213,80,137,.24); cursor: pointer; white-space: nowrap; }
.pdc-send:active { transform: scale(.97); }