* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
    *:focus { outline: none; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      -webkit-font-smoothing: antialiased;
      background: #f8fafc;
      color: #111827;
      min-height: 100vh;
      padding-top: calc(clamp(48px, 8vw, 56px) + env(safe-area-inset-top, 0px));
      position: relative;
      isolation: isolate; /* 让光效伪元素负 z-index 显示在内容之下、背景之上 */
    }

    /* 默认背景蓝色渐变光效层（缓慢变换，复用 base.css 的 bgGlowDrift 动画） */
    body::before,
    body::after {
      content: '';
      position: fixed;
      inset: -20%;
      z-index: -1;
      pointer-events: none;
      will-change: transform, opacity;
    }
    body::before {
      background:
        radial-gradient(ellipse 60% 45% at 18% 10%, rgba(14, 165, 233, 0.15), transparent 70%),
        radial-gradient(ellipse 55% 40% at 85% 75%, rgba(14, 165, 233, 0.12), transparent 70%);
      animation: bgGlowDrift1 55s ease-in-out infinite alternate;
    }
    body::after {
      background:
        radial-gradient(ellipse 50% 40% at 30% 80%, rgba(2, 132, 199, 0.10), transparent 70%),
        radial-gradient(ellipse 45% 35% at 70% 20%, rgba(56, 189, 248, 0.08), transparent 70%);
      animation: bgGlowDrift2 70s ease-in-out infinite alternate;
    }
    /* 个性化背景开启时隐藏默认光效层，让自定义背景完整透出 */
    body.custom-bg::before,
    body.custom-bg::after {
      display: none;
    }

    /* ===== 顶部导航 ===== */
    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      padding: 0 clamp(10px, 2vw, 16px);
      height: clamp(48px, 8vw, 56px);
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.5vw, 12px);
      /* 初始隐藏在视口外，JS 加载完成后通过 topbar-ready 下滑入场 */
      opacity: 0;
      transform: translateY(-100%);
      transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1), opacity 0.5s ease;
    }
    /* 页面加载完成后下滑入场 */
    .topbar.topbar-ready {
      opacity: 1;
      transform: translateY(0);
    }
    /* 滚动隐藏导航栏：上滑移出视口 */
    .topbar.topbar-hidden {
      opacity: 1;
      transform: translateY(-100%);
    }
    .topbar .back-btn {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid rgba(0,0,0,0.06);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: #374151;
      font-size: 20px;
      transition: all 0.25s;
      flex-shrink: 0;
      margin-right: 4px;
    }
    .topbar .back-btn:hover { background: #fff; border-color: rgba(14,165,233,0.3); color: #0ea5e9; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
    .topbar .back-btn:active { transform: scale(0.92); }
    .topbar .home-btn {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: #374151;
      transition: all 0.25s;
      flex-shrink: 0;
      text-decoration: none;
    }
    .topbar .home-btn:hover { background: #f3f4f6; color: #0ea5e9; }
    .topbar .home-btn:active { transform: scale(0.92); }
    .topbar .title {
      flex: 1; min-width: 0;
      font-size: clamp(14px, 1.8vw, 16px); font-weight: 700;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ===== 各页面导航栏：左 LOGO + 右上角汉堡菜单 ===== */
    .topbar-logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      text-decoration: none;
    }
    .topbar .logo-text { gap: 3px; }
    .topbar .logo-text .lt-main { font-size: 18px; }
    .topbar .logo-text .lt-sep { font-size: 14px; }
    .topbar .logo-text .lt-cn { font-size: 15px; }
    .topbar .logo-text .lt-comm { font-size: 11px; letter-spacing: 1.5px; }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: clamp(6px, 1vw, 8px);
      flex-shrink: 0;
    }
    /* 汉堡下拉菜单定位到顶栏下方 */
    .topbar .dropdown {
      top: calc(100% + 10px);
      right: clamp(10px, 2vw, 16px);
      z-index: 60;
    }

    /* ===== 主容器 ===== */
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: clamp(12px, 2vw, 20px) clamp(10px, 2vw, 16px) clamp(100px, 15vw, 140px);
      padding-top: calc(clamp(48px, 8vw, 56px) + clamp(12px, 2vw, 20px));
    }

    /* ===== 加载动画 ===== */
    @keyframes loaderHeartbeat {
      0%, 100% { transform: scale(1); opacity: 0.7; }
      14% { transform: scale(1.3); opacity: 1; }
      28% { transform: scale(1); opacity: 0.7; }
      42% { transform: scale(1.3); opacity: 1; }
      56% { transform: scale(1); opacity: 0.7; }
    }
    @keyframes loaderRipple {
      0% { box-shadow: 0 0 0 0 rgba(14,165,233,0.4); }
      100% { box-shadow: 0 0 0 20px rgba(14,165,233,0); }
    }
    @keyframes loaderRipple2 {
      0% { box-shadow: 0 0 0 0 rgba(14,165,233,0.3); }
      100% { box-shadow: 0 0 0 28px rgba(14,165,233,0); }
    }
    @keyframes loaderGradientFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes loaderFadeSlideUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .loading {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 80px 0; gap: 18px;
      animation: loaderFadeSlideUp 0.4s ease both;
    }
    .loading-spinner {
      position: relative;
      width: 56px; height: 56px;
      display: flex; align-items: center; justify-content: center;
    }
    .loading-spinner::before {
      content: '';
      width: 18px; height: 18px;
      background: linear-gradient(135deg, #0ea5e9, #38bdf8);
      border-radius: 50%;
      animation: loaderHeartbeat 1.2s ease-in-out infinite;
      position: relative; z-index: 2;
    }
    .loading-spinner::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: 50%;
      border: 2px solid rgba(14,165,233,0.25);
      animation: loaderRipple 2s ease-out infinite;
    }
    .loading-text { font-size: 14px; color: #64748b; font-weight: 500; letter-spacing: 0.3px; }

    /* ===== 帖子卡片 ===== */
    .post-card {
      background: #fff;
      border-radius: clamp(14px, 2.5vw, 20px);
      padding: clamp(16px, 3vw, 28px);
      box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
      animation: cardUp 0.6s cubic-bezier(0.22,0.61,0.36,1) both;
    }
    @keyframes cardUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .post-header { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 14px); margin-bottom: clamp(14px, 2vw, 20px); }
    .post-avatar {
      width: clamp(38px, 6vw, 48px); height: clamp(38px, 6vw, 48px);
      border-radius: 50%;
      background: linear-gradient(135deg, #e0f2fe, #bae6fd);
      display: flex; align-items: center; justify-content: center;
      font-size: clamp(16px, 2.5vw, 20px); font-weight: 700; color: #0ea5e9;
      overflow: hidden; flex-shrink: 0;
      animation: avatarPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
    }
    @keyframes avatarPop {
      from { transform: scale(0); }
      to { transform: scale(1); }
    }
    .post-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .post-author-info { flex: 1; min-width: 0; }
    .post-author {
      font-size: 15px; font-weight: 700; color: #111827;
      display: flex; align-items: center; gap: 6px;
      animation: fadeRight 0.5s ease 0.15s both;
    }
    @keyframes fadeRight {
      from { opacity: 0; transform: translateX(-12px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .post-author .badge {
      display: inline-block;
      padding: 2px 7px; border-radius: 4px;
      font-size: 10px; font-weight: 700;
    }
    .badge-official { background: #fef2f2; color: #dc2626; }
    .badge-admin { background: #f0f9ff; color: #0ea5e9; }

    .post-meta {
      font-size: 12px; color: #9ca3af;
      display: flex; align-items: center; gap: 12px;
      margin-top: 4px;
      animation: fadeRight 0.5s ease 0.2s both;
    }
    .channel-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      background: #f0f9ff;
      color: #0ea5e9;
      border: 1px solid #bae6fd;
    }
    .post-meta .tag {
      display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 6px;
      font-size: 11px; font-weight: 600;
    }
    .tag-tech { background: #f0fdf4; color: #16a34a; }
    .tag-life { background: #fef3c7; color: #d97706; }
    .tag-help { background: #fef2f2; color: #dc2626; }
    .tag-chat { background: #f0f9ff; color: #0284c7; }
    .tag-share { background: #f5f3ff; color: #7c3aed; }

    .post-title {
      font-size: clamp(17px, 2.2vw, 22px); font-weight: 800; color: #0f172a;
      line-height: 1.4; margin-bottom: clamp(10px, 1.5vw, 16px);
      letter-spacing: -0.3px;
      animation: fadeUp 0.5s ease 0.25s both;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .post-content {
      font-size: clamp(13px, 1.6vw, 15px); line-height: 1.8; color: #374151;
      word-break: break-word;
      overflow-wrap: break-word;
      animation: fadeUp 0.5s ease 0.3s both;
    }
    .post-content img {
      max-width: 100%;
      border-radius: 10px;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
    }
    .post-content img:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 16px rgba(0,0,0,.1);
    }
    .post-content a {
      color: #0ea5e9;
      text-decoration: none;
      word-break: break-all;
    }
    .post-content a:hover {
      text-decoration: underline;
    }

    /* ===== 图片放大预览 ===== */
    .img-preview-overlay {
      position: fixed; top:0;right:0;bottom:0;left:0;
      background: rgba(0,0,0,.92);
      z-index: 300;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity .25s;
    }
    .img-preview-overlay.show { opacity: 1; pointer-events: auto; }
    .img-preview-overlay img {
      max-width: 95vw; max-height: 90vh;
      border-radius: 8px;
      box-shadow: 0 8px 40px rgba(0,0,0,.5);
    }
    .img-preview-close {
      position: absolute; top: 16px; right: 16px;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,.2); color: #fff;
      border: none; font-size: 20px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .img-preview-close:hover { background: rgba(255,255,255,.35); }
    .img-preview-save {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 6px;
      padding: 10px 20px; border-radius: 12px;
      background: rgba(255,255,255,.9); color: #374151;
      font-size: 14px; font-weight: 600; text-decoration: none;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
      transition: all .2s;
    }
    .img-preview-save:hover {
      background: #fff;
      transform: translateX(-50%) translateY(-2px);
      box-shadow: 0 6px 24px rgba(0,0,0,.3);
    }

    /* ===== 文件附件卡片 ===== */
    .file-attach-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      background: linear-gradient(135deg, #f8fafc, #f1f5f9);
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      margin: 10px 0;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      text-decoration: none;
    }
    .file-attach-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(14,165,233,0.04), rgba(2,132,199,0.02));
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .file-attach-card:hover {
      border-color: #0ea5e9;
      box-shadow: 0 4px 20px rgba(14, 165, 233, 0.12);
      transform: translateY(-1px);
    }
    .file-attach-card:hover::before {
      opacity: 1;
    }
    .file-attach-card:active {
      transform: scale(0.985);
    }
    .file-attach-icon {
      width: 48px; height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }
    .file-attach-icon.pdf { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #dc2626; }
    .file-attach-icon.doc,
    .file-attach-icon.docx { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb; }
    .file-attach-icon.xls,
    .file-attach-icon.xlsx { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; }
    .file-attach-icon.ppt,
    .file-attach-icon.pptx { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; }
    .file-attach-icon.zip,
    .file-attach-icon.rar,
    .file-attach-icon.7z { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #7c3aed; }
    .file-attach-icon.txt { background: linear-gradient(135deg, #f8fafc, #f1f5f9); color: #64748b; }
    .file-attach-icon.mp4,
    .file-attach-icon.mp3 { background: linear-gradient(135deg, #fdf2f8, #fce7f3); color: #db2777; }
    .file-attach-icon.apk { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; }
    .file-attach-icon.other { background: linear-gradient(135deg, #f8fafc, #e2e8f0); color: #64748b; }
    .file-attach-info {
      flex: 1; min-width: 0;
      position: relative;
      z-index: 1;
    }
    .file-attach-name {
      font-size: 14px; font-weight: 600; color: #1e293b;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    .file-attach-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .file-attach-ext {
      font-size: 11px; font-weight: 600;
      padding: 2px 8px;
      border-radius: 6px;
      letter-spacing: 0.5px;
    }
    .file-attach-ext.pdf { background: #fef2f2; color: #dc2626; }
    .file-attach-ext.doc,
    .file-attach-ext.docx { background: #eff6ff; color: #2563eb; }
    .file-attach-ext.xls,
    .file-attach-ext.xlsx { background: #f0fdf4; color: #16a34a; }
    .file-attach-ext.ppt,
    .file-attach-ext.pptx { background: #fff7ed; color: #ea580c; }
    .file-attach-ext.zip,
    .file-attach-ext.rar,
    .file-attach-ext.7z { background: #f5f3ff; color: #7c3aed; }
    .file-attach-ext.txt { background: #f1f5f9; color: #64748b; }
    .file-attach-ext.mp4,
    .file-attach-ext.mp3 { background: #fdf2f8; color: #db2777; }
    .file-attach-ext.apk { background: #f0fdf4; color: #16a34a; }
    .file-attach-size {
      font-size: 11px; color: #94a3b8;
    }
    .file-attach-download {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      border-radius: 12px;
      background: #fff;
      color: #0284c7;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      flex-shrink: 0;
      border: 2px solid #e0f2fe;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      z-index: 1;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }
    .file-attach-download:hover {
      background: #0ea5e9;
      color: #fff;
      border-color: #0ea5e9;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
    }
    .file-attach-download:active {
      transform: scale(0.94);
      background: #0284c7;
      border-color: #0284c7;
    }
    .file-attach-download svg {
      transition: transform 0.25s ease;
    }
    .file-attach-download:hover svg {
      transform: translateY(1px);
    }

    @media (max-width:640px) {
      .file-attach-card {
        flex-wrap: wrap;
      }
      .file-attach-download {
        width: 100%; justify-content: center;
      }
    }

    .post-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
      margin: 24px 0;
    }

    .post-stats-row {
      display: flex; gap: 24px; align-items: center;
      animation: fadeUp 0.5s ease 0.35s both;
      flex-wrap: wrap;
    }
    .stat-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 13px; color: #6b7280;
      transition: all 0.25s;
    }
    .stat-item svg { width: 18px; height: 18px; }

    /* ===== 点赞/踩按钮 ===== */
    .vote-btns {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .vote-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1.5px solid #e5e7eb;
      background: #fff;
      color: #6b7280;
      transition: all 0.2s ease;
      user-select: none;
    }
    .vote-btn:hover {
      background: #f9fafb;
      border-color: #d1d5db;
    }
    .vote-btn.voted-up {
      background: #f0fdf4;
      border-color: #86efac;
      color: #16a34a;
    }
    .vote-btn.voted-down {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #dc2626;
    }
    .vote-btn svg {
      width: 15px;
      height: 15px;
    }
    .reply-vote {
      margin-top: 8px;
      padding-left: 44px;
    }
    .reply-vote .vote-btn {
      padding: 4px 10px;
      font-size: 12px;
      border-radius: 6px;
    }
    .reply-vote .vote-btn svg {
      width: 13px;
      height: 13px;
    }

    /* ===== 回复区域标题 ===== */
    .replies-header {
      margin-top: 32px; margin-bottom: 16px;
      display: flex; align-items: center; gap: 10px;
      animation: fadeUp 0.5s ease 0.4s both;
    }
    .replies-header h2 {
      font-size: 18px; font-weight: 800; color: #111827;
    }
    .replies-count {
      background: #f3f4f6;
      padding: 3px 10px; border-radius: 20px;
      font-size: 12px; font-weight: 600; color: #6b7280;
    }

    /* ===== 回复卡片 ===== */
    .reply-card {
      background: #fff;
      border-radius: clamp(12px, 2vw, 16px);
      padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.8vw, 22px);
      margin-bottom: clamp(10px, 1.5vw, 14px);
      box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.03);
      animation: replySlideIn 0.45s cubic-bezier(0.22,0.61,0.36,1) both;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
      position: relative;
      overflow: hidden;
    }
    .reply-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, #0ea5e9, #38bdf8);
      border-radius: 0 3px 3px 0;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .reply-card:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
    .reply-card:hover::before { opacity: 1; }

    @keyframes replySlideIn {
      from { opacity: 0; transform: translateY(16px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .reply-header { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 10px); margin-bottom: clamp(10px, 1.2vw, 12px); flex-wrap: wrap; }
    .reply-avatar {
      width: clamp(28px, 5vw, 34px); height: clamp(28px, 5vw, 34px);
      border-radius: 50%;
      background: linear-gradient(135deg, #e0f2fe, #bae6fd);
      display: flex; align-items: center; justify-content: center;
      font-size: clamp(12px, 1.8vw, 14px); font-weight: 700; color: #0ea5e9;
      overflow: hidden; flex-shrink: 0;
    }
    .reply-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .reply-author {
      font-size: clamp(12px, 1.6vw, 14px); font-weight: 600; color: #111827;
      display: flex; align-items: center; gap: 6px;
      flex-wrap: wrap;
    }
    .reply-time { font-size: clamp(10px, 1.3vw, 11px); color: #9ca3af; margin-left: auto; flex-shrink: 0; }
    .reply-del-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px; height: 24px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: #d1d5db;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s;
    }
    .reply-del-btn:hover { background: #fef2f2; color: #dc2626; }
    .reply-content {
      font-size: clamp(12px, 1.6vw, 14px); line-height: 1.7; color: #4b5563;
      padding-left: clamp(0px, 0vw, 44px);
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* 折叠的回复容器 */
    .replies-collapsed > .reply-card:first-child { margin-top: 0; }

    /* 子回复展开按钮（比顶级更紧凑） */
    .child-expand-btn {
      display: flex; align-items: center; gap: 4px;
      width: 100%;
      margin: 6px 0 2px;
      padding: 8px 12px;
      background: transparent;
      border: none;
      color: #9ca3af;
      font-size: 12px; font-weight: 600; font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
    }
    .child-expand-btn svg { width: 14px; height: 14px; transition: transform 0.25s; }
    .child-expand-btn:hover { color: #0ea5e9; }
    .child-expand-btn:hover svg { transform: translateY(2px); }

    /* 回复按钮 */
    .reply-action-btn {
      display: inline-flex; align-items: center; gap: 4px;
      background: transparent; border: none; cursor: pointer;
      color: #9ca3af; font-size: 13px; font-weight: 500; font-family: inherit;
      padding: 4px 8px; border-radius: 8px;
      transition: all 0.2s;
    }
    .reply-action-btn svg { width: 16px; height: 16px; }
    .reply-action-btn:hover { background: #f3f4f6; color: #0ea5e9; }
    .reply-action-btn:active { transform: scale(0.92); }

    /* 子回复嵌套 */
    .reply-children {
      margin-top: 10px;
      margin-left: clamp(20px, 4vw, 40px);
      padding-left: clamp(10px, 2vw, 14px);
      border-left: 2px solid #f0f0f0;
    }
    .reply-children .reply-card {
      background: #fafbfc;
      box-shadow: none;
      padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2vw, 16px);
      margin-bottom: 6px;
    }
    .reply-children .reply-card::before { display: none; }
    .reply-children .reply-card:hover { transform: none; box-shadow: none; }

    .no-replies {
      text-align: center; padding: 48px 0; color: #9ca3af;
      animation: fadeUp 0.5s ease 0.5s both;
    }
    .no-replies .icon { font-size: 40px; margin-bottom: 12px; opacity: 0.6; }
    .no-replies .text { font-size: 14px; }

    /* ===== 悬浮评论按键 ===== */
    .reply-fab {
      position: fixed;
      right: 20px;
      bottom: 24px;
      width: 56px; height: 56px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      z-index: 60;
      box-shadow: 0 8px 24px rgba(14,165,233,0.35);
      transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
    }
    .reply-fab:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 12px 28px rgba(14,165,233,0.45);
    }
    .reply-fab:active { transform: scale(0.92); }
    .reply-fab svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }

    /* ===== 回复弹窗 ===== */
    .reply-sheet-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 70;
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .reply-sheet-overlay.show { opacity: 1; pointer-events: auto; }
    .reply-sheet {
      width: 100%; max-width: 640px;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 20px 20px 0 0;
      padding: 16px 16px max(16px, env(safe-area-inset-bottom));
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
      box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
    }
    .reply-sheet-overlay.show .reply-sheet { transform: translateY(0); }
    .reply-sheet-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .reply-sheet-header span { font-size: 15px; font-weight: 700; color: #111827; }
    .reply-sheet-close {
      width: 32px; height: 32px;
      border-radius: 10px;
      border: none;
      background: #f3f4f6;
      color: #6b7280;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    .reply-sheet-close:hover { background: #e5e7eb; color: #111827; }
    .reply-sheet-close:active { transform: scale(0.9); }
    .reply-sheet textarea {
      flex: 1;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 16px;
      font-size: 14px; font-family: inherit;
      resize: none; outline: none;
      background: #f9fafb;
      min-height: 44px; max-height: 120px;
      line-height: 1.5;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .reply-sheet textarea:focus {
      border-color: #0ea5e9;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(14,165,233,0.06);
    }
    .reply-sheet textarea::placeholder { color: #c4c4c4; }
    /* 隐藏 textarea 的上下滚动条（保留滚动功能） */
    .reply-sheet textarea {
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE/Edge */
    }
    .reply-sheet textarea::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
    .reply-sheet .send-btn {
      width: 44px; height: 44px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(14,165,233,0.25);
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
      position: relative;
      overflow: hidden;
    }
    .reply-sheet .send-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(14,165,233,0.35);
    }
    .reply-sheet .send-btn:active { transform: scale(0.92); transition: transform 0.1s; }
    .reply-sheet .send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
    .reply-sheet .send-btn::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .reply-sheet .send-btn:hover::after { opacity: 1; }

    /* ===== Toast ===== */
    .toast {
      position: fixed; top: 72px; left: 50%;
      transform: translateX(-50%) translateY(-16px);
      background: #111827; color: #fff;
      padding: 12px 28px; border-radius: 14px;
      font-size: 13px; font-weight: 600;
      z-index: 999;
      opacity: 0; pointer-events: none;
      transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .toast.error { background: #dc2626; }

    /* ===== 错误页 ===== */
    .error-page {
      text-align: center; padding: 80px 0;
      animation: fadeUp 0.5s ease both;
    }
    .error-page .icon { font-size: 56px; margin-bottom: 16px; }
    .error-page .title { font-size: 18px; font-weight: 700; color: #374151; margin-bottom: 8px; }
    .error-page .desc { font-size: 14px; color: #9ca3af; }
    .error-page .btn {
      display: inline-block; margin-top: 20px;
      padding: 10px 28px; border-radius: 12px;
      background: linear-gradient(135deg,#0ea5e9,#0284c7);
      color: #fff; font-size: 14px; font-weight: 600;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(14,165,233,0.2);
      transition: all 0.3s;
    }
    .error-page .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,165,233,0.3); }

    @media (max-width: 640px) {
      body { overflow-x: hidden; max-width: 100vw; }
      .container { padding: 12px 12px 140px; max-width: 100vw; overflow-x: hidden; }
      .post-card { padding: clamp(16px, 4.5vw, 20px); border-radius: clamp(14px, 2.5vw, 16px); max-width: 100%; overflow: hidden; }
      .post-title { font-size: clamp(18px, 4.5vw, 20px); line-height: 1.4; }
      .post-content { font-size: 15px; line-height: 1.8; }
      .post-header { gap: 12px; margin-bottom: 16px; }
      .post-avatar { width: 44px; height: 44px; font-size: 18px; }
      .post-author { font-size: 15px; }
      .reply-card { padding: clamp(12px, 3.5vw, 16px) clamp(12px, 3.5vw, 16px); max-width: 100%; overflow: hidden; border-radius: 14px; margin-bottom: 10px; }
      .reply-content { padding-left: 0; margin-top: 8px; font-size: 14px; line-height: 1.7; }
      .post-stats-row { gap: 12px; flex-wrap: wrap; }
      .post-meta { font-size: 12px; gap: 8px; }
      /* 点赞按钮小屏适配 */
      .vote-btn { padding: 6px 14px; font-size: 13px; touch-action: manipulation; min-height: 38px; border-radius: 8px; }
      .vote-btn svg { width: 15px; height: 15px; }
      .reply-vote { padding-left: 0; margin-top: 8px; }
      .reply-vote .vote-btn { padding: 5px 10px; font-size: 12px; touch-action: manipulation; min-height: 32px; }
      .reply-vote .vote-btn svg { width: 13px; height: 13px; }
      /* 回复时间不换行 */
      .reply-time { white-space: nowrap; font-size: 12px; }
      /* 文件附件卡片 */
      .file-attach-card { padding: 12px 14px; border-radius: 14px; gap: 12px; }
      .file-attach-icon { width: 42px; height: 42px; border-radius: 12px; }
      .file-attach-name { font-size: 14px; }
      .file-attach-download { padding: 8px 14px; font-size: 12px; border-radius: 10px; }
      /* 确保所有内容不溢出 */
      .post-content img { max-width: 100%; height: auto; }
      .post-content a { word-break: break-all; }
      /* 回复弹窗 */
      .reply-sheet textarea { font-size: 16px; padding: 12px 14px; min-height: 44px; }
      .reply-sheet .send-btn { width: 44px; height: 44px; border-radius: 12px; }
      .replies-header { margin-top: 28px; }
      .replies-header h2 { font-size: 17px; }
      .replies-count { font-size: 13px; padding: 4px 12px; }
      /* 顶部导航 */
      .topbar .title { font-size: 15px; }
      .topbar { height: 52px; padding: 0 12px; }
      /* 回复作者 */
      .reply-author { font-size: 14px; }
      .reply-avatar { width: 34px; height: 34px; font-size: 14px; }
    }

    /* ===== 平板端（641px - 1024px）优化 ===== */
    @media (min-width: 641px) and (max-width: 1024px) {
      .container { padding: 16px 20px 120px; }
      .post-card { padding: 22px; border-radius: 18px; }
      .post-title { font-size: 20px; }
      .reply-card { padding: 16px 18px; }
      .reply-content { padding-left: 44px; }
    }

    /* 极窄屏（<= 380px）进一步压缩 */
    @media (max-width: 380px) {
      body { overflow-x: hidden; max-width: 100vw; }
      .container { padding: 8px 8px 120px; max-width: 100vw; overflow-x: hidden; }
      .topbar { height: 48px; padding: 0 10px; }
      .topbar .title { font-size: 14px; }
      .topbar .back-btn { width: 32px; height: 32px; font-size: 17px; }
      .post-card { padding: 14px; border-radius: 14px; max-width: 100%; overflow: hidden; }
      .post-title { font-size: 17px; }
      .post-content { font-size: 14px; line-height: 1.7; }
      .post-header { gap: 10px; margin-bottom: 14px; }
      .post-stats-row { gap: 10px; }
      .stat-item { font-size: 12px; }
      .stat-item svg { width: 16px; height: 16px; }
      .reply-card { padding: 12px 14px; border-radius: 14px; max-width: 100%; overflow: hidden; }
      .reply-avatar { width: 30px; height: 30px; font-size: 13px; }
      .reply-author { font-size: 13px; }
      .reply-content { font-size: 13px; margin-top: 8px; }
      .reply-vote { padding-left: 0; }
      .reply-vote .vote-btn { padding: 4px 8px; font-size: 11px; touch-action: manipulation; min-height: 28px; }
      .reply-vote .vote-btn svg { width: 12px; height: 12px; }
      .reply-sheet { padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
      .reply-sheet textarea { font-size: 15px; padding: 10px 12px; min-height: 40px; }
      .reply-sheet .send-btn { width: 40px; height: 40px; border-radius: 10px; }
      .replies-header h2 { font-size: 16px; }
      .replies-header { margin-top: 24px; }
      .file-attach-card { flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; }
      .file-attach-download { width: 100%; justify-content: center; padding: 10px 16px; font-size: 13px; border-radius: 12px; }
      .file-attach-icon { width: 40px; height: 40px; border-radius: 12px; }
      .file-attach-name { font-size: 13px; }
      .file-attach-meta { flex-wrap: wrap; gap: 4px; }
      .channel-badge { font-size: 11px; padding: 3px 8px; }
      .no-replies { padding: 36px 0; }
      .post-content img { max-width: 100%; height: auto; }
    }

    /* ===== 移动端点击反馈加速 ===== */
    @media (max-width: 768px) {
      .back-btn, .send-btn, .vote-btn, .img-preview-close, .img-preview-save,
      .file-attach-download, .stat-item, .channel-badge {
        transition: all 0.1s ease !important;
      }

      .back-btn:active, .send-btn:active, .vote-btn:active,
      .img-preview-close:active, .img-preview-save:active,
      .file-attach-download:active, .stat-item:active, .channel-badge:active {
        transform: scale(0.94) !important;
      }

      .file-attach-card:active { background: #f1f5f9 !important; }
      .reply-sheet .send-btn:active { transform: scale(0.88) !important; }
    }
  </style>