/**
 * theme-glass-css.css
 * 三角洲护航 — SaaS + iOS 玻璃磨砂增强主题（双色模式安全版）
 *
 * 使用方法：在 index.html 所有现有 CSS 之后引入
 *   <link rel="stylesheet" href="css/theme-glass-css.css">
 *
 * 安全承诺：
 *   · 从不覆盖 display 属性，保护 .hidden { display:none !important } 
 *   · 从不覆盖 transform，保护页面平移入场动画
 *   · 从不覆盖 position:fixed/absolute 层叠关系
 *   · 全部颜色通过 CSS 变量分层，深/浅色模式独立控制
 */

/* ════════════════════════════════════════════════════
   § 0  CSS 设计令牌 — 深色模式（默认）
════════════════════════════════════════════════════ */
:root,
[data-theme="dark"],
.dark-mode {

  /* ── 背景层级 ── */
  --tg-bg-0:        #060c18;          /* 最底层 body */
  --tg-bg-1:        #0b1525;          /* 主内容区 */
  --tg-bg-2:        #10203a;          /* 卡片、面板 */
  --tg-bg-3:        #162a4a;          /* 悬浮层、输入框 */

  /* ── 玻璃层（透明度会随元素深度变化）── */
  --tg-glass-fill:       rgba(14, 25, 48, 0.68);
  --tg-glass-fill-light: rgba(20, 35, 60, 0.55);
  --tg-glass-border:     rgba(255, 255, 255, 0.08);
  --tg-glass-shine:      rgba(255, 255, 255, 0.05);
  --tg-glass-blur:       22px;
  --tg-glass-sat:        180%;

  /* ── 文字 — 保证 WCAG AA 对比度 ── */
  --tg-text-high:   #edf2f9;          /* ≥7:1 on --tg-bg-2 */
  --tg-text-med:    #9ab0cc;          /* ≥4.5:1 */
  --tg-text-low:    #516a88;          /* 装饰 / 占位 */
  --tg-text-on-accent: #ffffff;

  /* ── 品牌渐变 ── */
  --tg-cyan:   #00d4ff;
  --tg-blue:   #3b7eff;
  --tg-purple: #7c5bff;
  --tg-pink:   #ff4d8b;
  --tg-gold:   #f0b429;
  --tg-green:  #00e5a0;

  --tg-grad-primary: linear-gradient(135deg, #3b7eff 0%, #00d4ff 100%);
  --tg-grad-hero:    linear-gradient(135deg, #7c5bff 0%, #3b7eff 50%, #00d4ff 100%);
  --tg-grad-warm:    linear-gradient(135deg, #ff4d8b 0%, #f0b429 100%);

  /* ── 阴影（带 glow 色调）── */
  --tg-shadow-xs: 0 1px 4px rgba(0,0,0,.35);
  --tg-shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --tg-shadow-md: 0 4px 24px rgba(0,0,0,.55);
  --tg-shadow-lg: 0 8px 48px rgba(0,0,0,.65);
  --tg-glow-blue: 0 0 20px rgba(59,126,255,.22);
  --tg-glow-cyan: 0 0 18px rgba(0,212,255,.18);
  --tg-glow-pink: 0 0 14px rgba(255,77,139,.20);

  /* ── 圆角 ── */
  --tg-r-xs:   6px;
  --tg-r-sm:  10px;
  --tg-r-md:  16px;
  --tg-r-lg:  22px;
  --tg-r-xl:  30px;
  --tg-r-pill:999px;

  /* ── 过渡曲线 ── */
  --tg-ease-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --tg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --tg-ease-page:  cubic-bezier(0.34, 1.1,  0.64, 1);

  /* ── 遮罩 ── */
  --tg-overlay: rgba(0,0,0,.72);
  --tg-overlay-blur: 6px;
}

/* ════════════════════════════════════════════════════
   § 0b  CSS 设计令牌 — 浅色模式
════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not(.dark-mode) {
  --tg-bg-0:        #f0f4fb;
  --tg-bg-1:        #e6edf8;
  --tg-bg-2:        #dce6f5;
  --tg-bg-3:        #cdd9ef;

  --tg-glass-fill:       rgba(220, 232, 250, 0.70);
  --tg-glass-fill-light: rgba(235, 242, 255, 0.60);
  --tg-glass-border:     rgba(59, 126, 255, 0.10);
  --tg-glass-shine:      rgba(255, 255, 255, 0.55);

  --tg-text-high:  #0d1b2e;
  --tg-text-med:   #2d4460;
  --tg-text-low:   #7090b4;
  --tg-text-on-accent: #ffffff;

  --tg-overlay: rgba(30,50,90,.45);
}}

[data-theme="light"],
.light-mode {
  --tg-bg-0:        #f0f4fb;
  --tg-bg-1:        #e6edf8;
  --tg-bg-2:        #dce6f5;
  --tg-bg-3:        #cdd9ef;

  --tg-glass-fill:       rgba(220, 232, 250, 0.70);
  --tg-glass-fill-light: rgba(235, 242, 255, 0.60);
  --tg-glass-border:     rgba(59, 126, 255, 0.10);
  --tg-glass-shine:      rgba(255, 255, 255, 0.55);

  --tg-text-high:  #0d1b2e;
  --tg-text-med:   #2d4460;
  --tg-text-low:   #7090b4;
  --tg-text-on-accent: #ffffff;

  --tg-shadow-xs: 0 1px 4px rgba(60,100,180,.12);
  --tg-shadow-sm: 0 2px 10px rgba(60,100,180,.14);
  --tg-shadow-md: 0 4px 24px rgba(60,100,180,.18);
  --tg-shadow-lg: 0 8px 48px rgba(60,100,180,.22);

  --tg-overlay: rgba(30,50,90,.45);
}

/* ════════════════════════════════════════════════════
   § 1  Body 与背景氛围
════════════════════════════════════════════════════ */
body {
  background-color: var(--tg-bg-0);
  color: var(--tg-text-high);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 渐变光晕背景 — 固定在视口，z-index 极低不干扰任何内容 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 35% at 10% 15%, rgba(59,126,255,.07) 0%, transparent 70%),
    radial-gradient(ellipse 45% 30% at 88% 80%, rgba(124,91,255,.06) 0%, transparent 70%),
    radial-gradient(ellipse 38% 28% at 52% 52%, rgba(0,212,255,.04) 0%, transparent 70%);
}

/* 噪点纹理 — 增加质感，极低透明度 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ════════════════════════════════════════════════════
   § 2  玻璃磨砂工具类（不影响 display / position / transform）
════════════════════════════════════════════════════ */

/* 标准玻璃面板 */
.tg-glass {
  background: var(--tg-glass-fill);
  backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-sat));
  -webkit-backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-sat));
  border: 1px solid var(--tg-glass-border);
  box-shadow: var(--tg-shadow-md), inset 0 1px 0 var(--tg-glass-shine);
}

/* 浅玻璃（卡片内嵌块） */
.tg-glass-light {
  background: var(--tg-glass-fill-light);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--tg-glass-border);
}

/* ════════════════════════════════════════════════════
   § 3  动态页面 (dyn-page) — 不碰 transform / display
════════════════════════════════════════════════════ */
.dyn-page {
  background-color: var(--tg-bg-1);
}

/* ════════════════════════════════════════════════════
   § 4  动态卡片 (post-card)
════════════════════════════════════════════════════ */
.post-card {
  background: var(--tg-glass-fill);
  backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-sat));
  -webkit-backdrop-filter: blur(var(--tg-glass-blur)) saturate(var(--tg-glass-sat));
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-lg);
  box-shadow: var(--tg-shadow-md), inset 0 1px 0 var(--tg-glass-shine);
  margin-bottom: 12px;
  overflow: hidden;
  /* 只做 box-shadow / opacity 过渡，不碰 transform */
  transition: box-shadow 0.2s var(--tg-ease-out),
              opacity 0.2s var(--tg-ease-out);
  position: relative;
}

/* 顶部高光线 */
.post-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--tg-glass-shine) 40%, rgba(255,255,255,.12) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.post-card:active {
  box-shadow: var(--tg-shadow-xs);
}

/* ── 发帖者信息 ── */
.post-header {
  padding: 14px 16px 10px;
}

.post-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--tg-r-pill);
  box-shadow: 0 0 0 2px var(--tg-glass-border), var(--tg-shadow-xs);
  transition: box-shadow 0.2s var(--tg-ease-out);
}

.post-author-name {
  color: var(--tg-text-high);
  font-weight: 600;
  font-size: 0.875rem;
}

.post-time {
  color: var(--tg-text-low);
  font-size: 0.71rem;
}

.post-content {
  padding: 0 16px 12px;
  color: var(--tg-text-med);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* 私密标签 */
.post-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(240,180,41,.14);
  color: var(--tg-gold);
  border: 1px solid rgba(240,180,41,.22);
  border-radius: var(--tg-r-pill);
  padding: 1px 7px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: .03em;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── 操作按钮 ── */
.post-actions {
  padding: 8px 14px 12px;
  gap: 8px;
  border-top: 1px solid var(--tg-glass-border);
}

.post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--tg-glass-fill-light);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-pill);
  color: var(--tg-text-med);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s var(--tg-ease-out),
              color .18s var(--tg-ease-out),
              box-shadow .18s var(--tg-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.post-action-btn:active {
  background: rgba(255,255,255,.08);
  color: var(--tg-text-high);
}

.post-action-btn.liked {
  background: rgba(255,77,139,.13);
  border-color: rgba(255,77,139,.26);
  color: var(--tg-pink);
  box-shadow: var(--tg-glow-pink);
}

.post-action-btn.liked i {
  animation: tg-heartPop .35s var(--tg-ease-spring);
}

@keyframes tg-heartPop {
  0%   { scale: 1; }
  50%  { scale: 1.45; }
  100% { scale: 1; }
}

.post-more-btn {
  background: transparent;
  border: none;
  color: var(--tg-text-low);
  padding: 5px 8px;
  border-radius: var(--tg-r-sm);
  cursor: pointer;
  margin-left: auto;
  transition: background .15s, color .15s;
}

.post-more-btn:active {
  color: var(--tg-text-high);
  background: rgba(255,255,255,.07);
}

/* ── 点赞人列表 ── */
.post-likers {
  margin: 2px 16px 8px;
  padding: 7px 11px;
  background: rgba(59,126,255,.07);
  border: 1px solid rgba(59,126,255,.11);
  border-radius: var(--tg-r-sm);
  flex-wrap: wrap;
  gap: 2px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.post-likers-icon { color: var(--tg-pink); margin-right: 4px; font-size: .74rem; }
.liker-name       { color: var(--tg-cyan); cursor: pointer; }
.liker-name:active{ color: var(--tg-text-high); text-decoration: underline; }
.liker-sep        { color: var(--tg-text-low); }
.liker-more       { color: var(--tg-text-low); }

/* ════════════════════════════════════════════════════
   § 5  媒体区
════════════════════════════════════════════════════ */
.post-media { padding: 0 12px 10px; }

.post-media-item {
  border-radius: var(--tg-r-md);
  overflow: hidden;
  box-shadow: var(--tg-shadow-sm);
  transition: box-shadow .2s;
}

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

/* ════════════════════════════════════════════════════
   § 6  视频播放 — isolation 防止原生层溢出
════════════════════════════════════════════════════ */
.post-video-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--tg-r-md);
  background: #050c18;
  isolation: isolate;
  box-shadow: var(--tg-shadow-md);
}

.post-video-wrap video {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #050c18;
}

.post-video-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.38));
  z-index: 2;
  pointer-events: none;
  transition: opacity .22s;
}

.post-video-cover .fa-circle-play {
  font-size: 2.8rem;
  color: #fff;
  filter: drop-shadow(0 4px 16px rgba(0,212,255,.5));
  transition: scale .25s var(--tg-ease-spring);
}

.post-video-wrap:active .fa-circle-play { scale: 1.15; }
.post-video-wrap.playing .post-video-cover { opacity: 0; }

/* ════════════════════════════════════════════════════
   § 7  评论弹层（底部 Sheet）
════════════════════════════════════════════════════ */
#comments-overlay {
  background: var(--tg-overlay);
  backdrop-filter: blur(var(--tg-overlay-blur));
  -webkit-backdrop-filter: blur(var(--tg-overlay-blur));
}

#comments-sheet {
  background: var(--tg-bg-2);
  border-top: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-xl) var(--tg-r-xl) 0 0;
  box-shadow: 0 -8px 48px rgba(0,0,0,.55);
}

/* iOS 拖拽指示条 */
#comments-sheet::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--tg-glass-border);
  border-radius: var(--tg-r-pill);
  margin: 10px auto 14px;
}

.comment-item {
  padding: 10px 16px;
  gap: 10px;
  border-bottom: 1px solid var(--tg-glass-border);
}

.comment-avatar {
  width: 34px; height: 34px;
  border-radius: var(--tg-r-pill);
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(59,126,255,.28);
}

.comment-author {
  font-size: .8rem;
  font-weight: 600;
  color: var(--tg-cyan);
}

.comment-text {
  font-size: .875rem;
  color: var(--tg-text-med);
  line-height: 1.5;
  word-break: break-word;
}

.comment-time { font-size: .7rem; color: var(--tg-text-low); }

.comment-delete-btn {
  background: transparent;
  border: none;
  color: var(--tg-text-low);
  font-size: .72rem;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.comment-delete-btn:active {
  color: var(--tg-pink);
  background: rgba(255,77,139,.1);
}

/* ── 评论输入 ── */
#comment-input-field {
  background: var(--tg-glass-fill-light);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-pill);
  color: var(--tg-text-high);
  padding: 9px 16px;
  font-size: .875rem;
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}

#comment-input-field:focus {
  border-color: rgba(59,126,255,.45);
  box-shadow: 0 0 0 3px rgba(59,126,255,.1);
}

#comment-input-field::placeholder { color: var(--tg-text-low); }

#comment-send-btn {
  background: var(--tg-grad-primary);
  border: none;
  border-radius: var(--tg-r-pill);
  color: var(--tg-text-on-accent);
  font-weight: 700;
  font-size: .82rem;
  padding: 9px 18px;
  cursor: pointer;
  transition: box-shadow .2s, opacity .15s;
  box-shadow: 0 3px 12px rgba(59,126,255,.32);
  white-space: nowrap;
}

#comment-send-btn:active { opacity: .82; }
#comment-send-btn:disabled { opacity: .45; }

/* ════════════════════════════════════════════════════
   § 8  空间页面 (Space Page)
════════════════════════════════════════════════════ */
.space-header {
  background: linear-gradient(
    180deg,
    rgba(59,126,255,.13) 0%,
    rgba(0,212,255,.06)  50%,
    transparent 100%
  );
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--tg-glass-border);
  position: relative;
  overflow: hidden;
}

/* 右上角光晕装饰 */
.space-header::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(59,126,255,.16) 0%, transparent 68%);
  pointer-events: none;
}

.space-profile { gap: 14px; margin-bottom: 16px; }

.space-avatar {
  width: 64px; height: 64px;
  border-radius: var(--tg-r-pill);
  box-shadow:
    0 0 0 2px var(--tg-bg-2),
    0 0 0 4px rgba(59,126,255,.4),
    0 0 18px rgba(59,126,255,.28);
  transition: box-shadow .25s;
}

.space-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tg-text-high);
  letter-spacing: .01em;
}

.space-bio {
  font-size: .8rem;
  color: var(--tg-text-med);
  margin-top: 3px;
  line-height: 1.4;
}

/* 统计区 */
.space-stats {
  border-radius: var(--tg-r-md);
  overflow: hidden;
  background: var(--tg-glass-fill-light);
  border: 1px solid var(--tg-glass-border);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.space-stat-item {
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-right: 1px solid var(--tg-glass-border);
  cursor: pointer;
  transition: background .15s;
}

.space-stat-item:last-child { border-right: none; }
.space-stat-item:active { background: rgba(59,126,255,.09); }

.space-stat-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-text-high);
  line-height: 1.2;
  /* 渐变数字 — 仅 WebKit，其他浏览器 fallback 为 --tg-text-high */
  background: var(--tg-grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.space-stat-label {
  font-size: .68rem;
  color: var(--tg-text-low);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════
   § 9  发动态页面 & 媒体上传
════════════════════════════════════════════════════ */
#write-post-page { background-color: var(--tg-bg-1); }

#write-post-textarea {
  background: var(--tg-glass-fill-light);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-md);
  color: var(--tg-text-high);
  font-size: .95rem;
  padding: 14px 16px;
  line-height: 1.65;
  resize: none;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

#write-post-textarea:focus {
  border-color: rgba(59,126,255,.42);
  background: rgba(59,126,255,.04);
  box-shadow: 0 0 0 3px rgba(59,126,255,.09);
}

#write-post-textarea::placeholder { color: var(--tg-text-low); }

/* 上传格子 */
.media-upload-slot {
  border-radius: var(--tg-r-md);
  border: 1.5px dashed rgba(59,126,255,.26);
  background: rgba(59,126,255,.04);
  position: relative;
  overflow: hidden;
  transition: border-color .18s, background .18s;
  aspect-ratio: 1;
  cursor: pointer;
  /* 不设 display，继承外部 grid 布局 */
}

.media-upload-slot:active {
  border-color: rgba(59,126,255,.55);
  background: rgba(59,126,255,.09);
}

.slot-icon  { font-size: 1.5rem; color: rgba(59,126,255,.5); margin-bottom: 4px; }
.slot-label { font-size: .72rem; color: var(--tg-text-low); }

.remove-media-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: var(--tg-r-pill);
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: .64rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background .15s;
}

.remove-media-btn:active { background: rgba(255,77,139,.8); }

/* 进度条 */
.upload-progress-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
}

.upload-progress-bar .bar {
  height: 100%;
  background: var(--tg-grad-primary);
  transition: width .2s;
  box-shadow: 0 0 8px rgba(0,212,255,.5);
}

.upload-progress-bar .percent {
  position: absolute;
  top: -18px; right: 6px;
  font-size: .6rem;
  color: var(--tg-text-low);
}

/* 发布按钮 */
#publish-post-btn {
  background: var(--tg-grad-primary);
  border: none;
  border-radius: var(--tg-r-pill);
  color: var(--tg-text-on-accent);
  font-weight: 700;
  font-size: .9rem;
  padding: 12px 32px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(59,126,255,.34),
              0 1px 0 rgba(255,255,255,.16) inset;
  letter-spacing: .02em;
  transition: box-shadow .2s, opacity .15s;
}

#publish-post-btn:active  { opacity: .82; box-shadow: 0 2px 8px rgba(59,126,255,.2); }
#publish-post-btn:disabled{ opacity: .42; }

/* 隐私选择器遮罩 */
#privacy-picker-overlay,
.privacy-picker-overlay {
  background: var(--tg-overlay);
  backdrop-filter: blur(var(--tg-overlay-blur));
  -webkit-backdrop-filter: blur(var(--tg-overlay-blur));
}

.privacy-option {
  background: var(--tg-glass-fill-light);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-md);
  padding: 12px 16px;
  margin-bottom: 8px;
  gap: 12px;
  cursor: pointer;
  color: var(--tg-text-med);
  transition: background .18s, border-color .18s, color .18s;
}

.privacy-option.active,
.privacy-option:active {
  background: rgba(59,126,255,.11);
  border-color: rgba(59,126,255,.28);
  color: var(--tg-text-high);
}

/* ════════════════════════════════════════════════════
   § 10  访客列表
════════════════════════════════════════════════════ */
.visitor-item {
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tg-glass-border);
  cursor: pointer;
  transition: background .15s;
}

.visitor-item:active { background: rgba(255,255,255,.04); }

.visitor-avatar {
  width: 42px; height: 42px;
  border-radius: var(--tg-r-pill);
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(59,126,255,.28);
}

.visitor-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--tg-text-high);
}

.visitor-time {
  font-size: .71rem;
  color: var(--tg-text-low);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════
   § 11  互动统计 (my-stats)
════════════════════════════════════════════════════ */
.stats-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tg-text-low);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: transparent;
  border-left: none; border-right: none; border-top: none;
  transition: color .18s, border-color .18s;
}

.stats-tab.active {
  color: var(--tg-cyan);
  border-bottom-color: var(--tg-cyan);
}

.stats-item {
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tg-glass-border);
  align-items: flex-start;
}

.stats-avatar {
  width: 38px; height: 38px;
  border-radius: var(--tg-r-pill);
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(59,126,255,.22);
}

.stats-action-text {
  font-size: .83rem;
  color: var(--tg-text-med);
  line-height: 1.4;
}

.stats-action-text strong {
  color: var(--tg-text-high);
  font-weight: 600;
}

.stats-post-preview {
  font-size: .77rem;
  color: var(--tg-text-low);
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.stats-time { font-size: .7rem; color: var(--tg-text-low); margin-top: 4px; }

/* ════════════════════════════════════════════════════
   § 12  加载 & 空状态
════════════════════════════════════════════════════ */
.dyn-loading {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 52px 24px;
  color: var(--tg-text-low);
  font-size: .83rem;
}

.dyn-loading .fa-spinner { color: var(--tg-cyan); font-size: 1.5rem; }

.dyn-empty {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--tg-text-low);
  font-size: .85rem;
  text-align: center;
}

.dyn-empty i { font-size: 2.2rem; opacity: .28; margin-bottom: 4px; }

/* ════════════════════════════════════════════════════
   § 13  角色头像色环（四色区分角色）
════════════════════════════════════════════════════ */
.avatar-admin   { box-shadow: 0 0 0 2px var(--tg-gold),   0 0 10px rgba(240,180,41,.28); }
.avatar-escort  { box-shadow: 0 0 0 2px var(--tg-cyan),   0 0 10px rgba(0,212,255,.22); }
.avatar-service { box-shadow: 0 0 0 2px var(--tg-blue),   0 0 10px rgba(59,126,255,.22); }
.avatar-customer{ box-shadow: 0 0 0 2px var(--tg-glass-border); }

/* ════════════════════════════════════════════════════
   § 14  未读角标
════════════════════════════════════════════════════ */
#likes-badge,
#comments-badge {
  background: var(--tg-pink);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--tg-r-pill);
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(255,77,139,.45);
  animation: tg-badgePulse 2.4s ease-in-out infinite;
}

@keyframes tg-badgePulse {
  0%,100% { box-shadow: 0 0 7px rgba(255,77,139,.4); }
  50%      { box-shadow: 0 0 14px rgba(255,77,139,.75); }
}

/* ════════════════════════════════════════════════════
   § 15  侧边栏动态预览入口
════════════════════════════════════════════════════ */
#dynamics-latest-preview,
[id*="dynamics-latest"] {
  background: var(--tg-glass-fill);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-md);
  padding: 10px 14px;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background .2s, border-color .2s;
}

#dynamics-latest-preview:active {
  background: rgba(59,126,255,.1);
  border-color: rgba(59,126,255,.24);
}

.dyn-preview-mini-avatar {
  width: 28px; height: 28px;
  border-radius: var(--tg-r-pill);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--tg-grad-primary);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  overflow: hidden;
}

.dyn-preview-mini-name {
  font-size: .78rem;
  color: var(--tg-text-med);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-arrow { color: var(--tg-text-low); font-size: .7rem; }

/* ════════════════════════════════════════════════════
   § 16  卡片列表错位入场动画
   （仅对 opacity + translateY，不干扰 translateX 滑动页面）
════════════════════════════════════════════════════ */
.post-card {
  animation: tg-cardReveal .3s var(--tg-ease-out) both;
}

.post-card:nth-child(1)  { animation-delay:   0ms; }
.post-card:nth-child(2)  { animation-delay:  40ms; }
.post-card:nth-child(3)  { animation-delay:  80ms; }
.post-card:nth-child(4)  { animation-delay: 120ms; }
.post-card:nth-child(5)  { animation-delay: 160ms; }
.post-card:nth-child(n+6){ animation-delay: 185ms; }

@keyframes tg-cardReveal {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ════════════════════════════════════════════════════
   § 17  页面标题渐变字
════════════════════════════════════════════════════ */
[id$="-page-title"],
.dyn-page-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-text-high); /* fallback */
  background: var(--tg-grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .01em;
}

/* ════════════════════════════════════════════════════
   § 18  Toast 通知玻璃化
════════════════════════════════════════════════════ */
.toast,
[class*="toast-"] {
  background: var(--tg-glass-fill);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-md);
  box-shadow: var(--tg-shadow-lg), inset 0 1px 0 var(--tg-glass-shine);
  color: var(--tg-text-high);
}

/* ════════════════════════════════════════════════════
   § 19  导航 / 底部栏 玻璃化
════════════════════════════════════════════════════ */
.bottom-nav,
[class*="bottom-bar"],
[class*="tab-bar"],
[class*="nav-bar"] {
  background: rgba(5,10,18,.86);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-top: 1px solid var(--tg-glass-border);
  box-shadow: 0 -3px 20px rgba(0,0,0,.38);
}

/* 浅色模式导航覆盖 */
.light-mode .bottom-nav,
.light-mode [class*="bottom-bar"],
[data-theme="light"] .bottom-nav {
  background: rgba(230,237,248,.88);
  border-top-color: rgba(59,126,255,.1);
}

/* ════════════════════════════════════════════════════
   § 20  Modal / 底部 Sheet 玻璃化
════════════════════════════════════════════════════ */
[class*="overlay"] > [class*="sheet"],
[class*="overlay"] > [class*="panel"] {
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-xl) var(--tg-r-xl) 0 0;
  box-shadow: 0 -12px 56px rgba(0,0,0,.62);
}

/* ════════════════════════════════════════════════════
   § 21  通用输入框 & 表单增强
    — 不加 !important，只做视觉覆盖，不影响 display
════════════════════════════════════════════════════ */
input:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--tg-glass-fill-light);
  border: 1px solid var(--tg-glass-border);
  border-radius: var(--tg-r-sm);
  color: var(--tg-text-high);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

input:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"])::placeholder,
textarea::placeholder {
  color: var(--tg-text-low);
}

input:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(59,126,255,.44);
  box-shadow: 0 0 0 3px rgba(59,126,255,.1);
}

/* ════════════════════════════════════════════════════
   § 22  选择高亮
════════════════════════════════════════════════════ */
::selection {
  background: rgba(59,126,255,.28);
  color: var(--tg-text-high);
}

/* ════════════════════════════════════════════════════
   § 23  细滚动条
════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(59,126,255,.2) transparent;
}

*::-webkit-scrollbar       { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(59,126,255,.2);
  border-radius: var(--tg-r-pill);
}

/* ════════════════════════════════════════════════════
   § 24  返回 / 关闭 圆形按钮
════════════════════════════════════════════════════ */

[class*="back-btn"], [class*="close-btn"], .dyn-back-btn, .dyn-close-btn {
    display: flex;
    width: 50px;
    height: 30px;
    border-radius: var(--tg-r-pill);
    background: var(--tg-glass-fill-light);
    border: 1px solid var(--tg-glass-border);
    color: var(--tg-text-med);
    cursor: pointer;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
    justify-content: center;
}
[class*="back-btn"]:active,
[class*="close-btn"]:active,
.dyn-back-btn:active,
.dyn-close-btn:active {
  background: rgba(255,255,255,.1);
  color: var(--tg-text-high);
}

/* ════════════════════════════════════════════════════
   § 25  减少动画（无障碍偏好）
════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}