.post-card.pending {
      opacity: 0.85;
      cursor: default;
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
      border-radius: 12px;
      border-bottom: 1px solid #bae6fd;
      margin: 4px 0;
      padding: 18px 16px;
      animation: pendingPulse 1.8s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }

    .post-card.pending::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
      animation: pendingShimmer 1.8s ease-in-out infinite;
    }

    @keyframes pendingPulse {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 0.7; }
    }

    @keyframes pendingShimmer {
      0% { left: -100%; }
      100% { left: 100%; }
    }

    .post-card.pending .pending-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #0ea5e9;
      background: rgba(14, 165, 233, 0.1);
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 6px;
      vertical-align: middle;
    }

    .post-card.pending .pending-badge .spinner {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      vertical-align: middle;
    }
    .post-card.pending .pending-badge .spinner::before,
    .post-card.pending .pending-badge .spinner::after {
      content: '';
      width: 6px; height: 6px;
      background: #0ea5e9;
      border-radius: 50%;
      animation: loaderDotBounce 1.2s ease-in-out infinite;
    }
    .post-card.pending .pending-badge .spinner::after { animation-delay: 0.2s; }

    .post-card.pending .pending-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      background: #0ea5e9;
      border-radius: 50%;
      animation: pendingDot 1.2s ease-in-out infinite;
    }
    .post-card.pending .pending-dot:nth-child(2) { animation-delay: 0.15s; }
    .post-card.pending .pending-dot:nth-child(3) { animation-delay: 0.3s; }

    @keyframes pendingDot {
      0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
      30% { opacity: 1; transform: scale(1); }
    }

    /* ===== 上传进度条 ===== */
    .upload-progress-wrap {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .upload-progress-bar {
      flex: 1;
      height: 6px;
      background: #e5e7eb;
      border-radius: 3px;
      overflow: hidden;
    }
    .upload-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #0ea5e9, #06b6d4);
      border-radius: 3px;
      transition: width 0.3s ease;
      width: 0%;
    }
    .upload-progress-text {
      font-size: 11px;
      color: #6b7280;
      white-space: nowrap;
      min-width: 80px;
      text-align: right;
    }
    .upload-progress-detail {
      font-size: 10px;
      color: #9ca3af;
      margin-top: 2px;
    }
    .upload-warning {
      margin-top: 6px;
      font-size: 11px;
      color: #f59e0b;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
      animation: warningBlink 1.5s ease-in-out infinite;
    }
    @keyframes warningBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    .upload-cancel-btn {
      margin-top: 8px;
      padding: 6px 16px;
      font-size: 12px;
      font-weight: 600;
      color: #dc2626;
      background: rgba(220, 38, 38, 0.08);
      border: 1px solid rgba(220, 38, 38, 0.25);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .upload-cancel-btn:hover {
      background: rgba(220, 38, 38, 0.15);
      border-color: #dc2626;
    }

    .post-card:hover {
      background: #fafafa;
      border-radius: 8px;
      border-bottom-color: transparent;
    }
    /* 仅桌面端 hover 时才用负 margin 扩展（移动端会导致溢出） */
    @media (hover: hover) and (pointer: fine) {
      .post-card:hover {
        margin: 0 calc(-1 * clamp(4px, 1.5vw, 16px));
        padding-left: clamp(4px, 1.5vw, 16px);
        padding-right: clamp(4px, 1.5vw, 16px);
      }
    }

    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e0f2fe, #bae6fd);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 600;
      color: #0ea5e9;
      flex-shrink: 0;
    }

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

    .post-title {
      font-size: 16px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 6px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .post-card:hover .post-title {
      color: #0ea5e9;
    }

    .post-excerpt {
      font-size: 13px;
      color: #9ca3af;
      line-height: 1.5;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .post-thumb {
      position: relative;
      align-self: stretch;
      width: clamp(96px, 16vw, 132px);
      min-height: 80px;
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;
      background: #f3f4f6;
      cursor: pointer;
    }
    .post-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .channel-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      background: #f0f9ff;
      color: #0ea5e9;
      border: 1px solid #bae6fd;
    }

    /* 分区分组标题（"全部"视图下按分区顺序展示） */
    .channel-group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 4px 12px;
      margin-top: 8px;
    }
    .channel-group-header:first-child {
      margin-top: 0;
      padding-top: 4px;
    }
    .channel-group-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: #1f2937;
    }
    .channel-group-title .group-icon {
      width: 4px;
      height: 18px;
      background: linear-gradient(180deg, #0ea5e9, #2563eb);
      border-radius: 2px;
    }
    .channel-group-title .group-name {
      color: #111827;
    }
    .channel-group-title .group-count {
      font-size: 12px;
      color: #9ca3af;
      font-weight: 400;
    }
    .channel-group-more {
      font-size: 12px;
      color: #0ea5e9;
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 4px;
      transition: background 0.15s;
    }
    .channel-group-more:hover {
      background: #f0f9ff;
    }
    .channel-group-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 8px 0 4px;
      color: #9ca3af;
      font-size: 11px;
    }
    .channel-group-divider::before,
    .channel-group-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    }
    .channel-group-empty {
      text-align: center;
      padding: 20px 0;
      color: #9ca3af;
      font-size: 13px;
      background: rgba(255,255,255,0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 12px;
    }

    /* ===== 底部操作菜单（长按区块标签弹出） ===== */
    .action-sheet-overlay {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(15,23,42,0.4);
      z-index: 300;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .action-sheet-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }
    .action-sheet {
      position: fixed;
      left: 50%;
      bottom: 0;
      width: 92%;
      max-width: 360px;
      background: #fff;
      border-radius: 16px 16px 0 0;
      padding: 12px 20px max(20px, env(safe-area-inset-bottom));
      box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
      transform: translate(-50%, 100%);
      transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    }
    .action-sheet.show {
      transform: translate(-50%, 0);
    }
    .action-sheet .sheet-handle {
      width: 32px;
      height: 4px;
      background: #e5e7eb;
      border-radius: 2px;
      margin: 6px auto 14px;
    }
    .action-sheet .sheet-title {
      text-align: center;
      font-size: 12px;
      color: #9ca3af;
      margin-bottom: 10px;
      font-weight: 500;
    }
    .action-sheet .sheet-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 12px 16px;
      border: none;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      background: transparent;
      color: #374151;
      text-align: left;
      margin-bottom: 2px;
    }
    .action-sheet .sheet-btn:active {
      background: #f3f4f6;
      transform: scale(0.98);
    }
    .action-sheet .sheet-btn.danger {
      color: #ef4444;
    }
    .action-sheet .sheet-btn.danger:active {
      background: #fef2f2;
    }
    .action-sheet .sheet-btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .action-sheet .sheet-cancel {
      display: block;
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      background: #f3f4f6;
      color: #6b7280;
      margin-top: 6px;
      transition: all 0.2s;
    }
    .action-sheet .sheet-cancel:active {
      background: #e5e7eb;
      transform: scale(0.98);
    }

    @media (min-width: 641px) {
      .action-sheet-overlay {
        display: none;
      }
    }

    .post-meta .tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
    }

    .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; }
    .tag-eurotruck { background: #eff6ff; color: #2563eb; }
    .tag-modernwarship { background: #f0fdf4; color: #059669; }

    .post-meta .dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #d1d5db;
    }

    /* 帖子卡片下方的完整发帖时间（年月日 时分秒） */
    .post-fulltime {
      margin-top: 6px;
      font-size: 11px;
      color: #9ca3af;
      line-height: 1.4;
    }

    /* 右侧统计 */
    .post-stats {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      min-width: 48px;
    }

    .post-stats .vote-btns {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      margin-left: 0;
    }
    .post-stats .vote-btn {
      padding: 1px 5px;
      font-size: 11px;
      gap: 2px;
      border-radius: 4px;
      min-width: 36px;
      justify-content: center;
    }
    .post-stats .vote-btn svg {
      width: 11px;
      height: 11px;
    }

    .post-stats .count {
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
    }

    .post-stats .label {
      font-size: 11px;
      color: #9ca3af;
    }

    /* 分页 */
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-top: 32px;
    }

    .page-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.15s ease;
      background: none;
      border: none;
    }

    .page-btn:hover {
      background: #f3f4f6;
      color: #374151;
    }

    .page-btn.active {
      background: #0ea5e9;
      color: #fff;
    }

    .page-btn.arrow {
      font-size: 16px;
    }

    /* 发帖浮动按钮 */
    .fab {
      position: fixed;
      bottom: 32px;
      right: 32px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #0ea5e9;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      border: none;
      box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3);
      transition: all 0.25s ease;
    }

    .fab svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }

    .fab:hover {
      background: #0284c7;
      transform: scale(1.08);
      box-shadow: 0 6px 24px rgba(14, 165, 233, 0.4);
    }

    /* 回到顶部按钮 */
    .back-to-top {
      position: fixed;
      bottom: 100px;
      right: 32px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #6b7280;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      z-index: 40;
    }
    .back-to-top.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .back-to-top:hover {
      background: #0ea5e9;
      color: #fff;
      border-color: #0ea5e9;
      box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3);
      transform: translateY(-2px);
    }
    .back-to-top:active {
      transform: scale(0.92);
    }
    @media (max-width: 768px) {
      .back-to-top {
        bottom: 90px;
        right: 16px;
        width: 38px;
        height: 38px;
        font-size: 18px;
      }
    }

    /* ===== 点赞/踩按钮 ===== */
    .vote-btns {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
      flex-shrink: 0;
    }
    .vote-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      border: 1px 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: 14px;
      height: 14px;
    }

    /* ===== 免责声明弹窗 ===== */
    .disclaimer-overlay {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(15, 23, 42, 0.6);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: popupFadeIn 0.3s ease-out;
    }
    .disclaimer-box {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      max-width: 480px;
      width: 100%;
      overflow: hidden;
      animation: popupSlideUp 0.35s cubic-bezier(0.22,0.61,0.36,1);
    }
    .disclaimer-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 20px 24px 0;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }
    .disclaimer-header svg { color: #f59e0b; flex-shrink: 0; }
    .disclaimer-body {
      padding: 16px 24px;
      font-size: 13px;
      color: #64748b;
      line-height: 1.8;
      max-height: 50vh;
      overflow-y: auto;
    }
    .disclaimer-body strong { color: #334155; }
    .disclaimer-footer {
      padding: 14px 24px;
      background: #f8fafc;
      border-top: 1px solid #f1f5f9;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .disclaimer-countdown {
      font-size: 13px;
      color: #94a3b8;
      text-align: center;
    }
    .disclaimer-countdown span {
      color: #0ea5e9;
      font-weight: 700;
      font-size: 18px;
    }
    .disclaimer-agree-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .disclaimer-agree-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #475569;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }
    .disclaimer-agree-label input {
      width: 16px;
      height: 16px;
      accent-color: #0ea5e9;
      cursor: pointer;
    }
    .disclaimer-agree-label.disabled {
      opacity: 0.45;
      pointer-events: none;
    }
    .disclaimer-confirm-btn {
      padding: 8px 24px;
      background: #0ea5e9;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s;
      flex-shrink: 0;
    }
    .disclaimer-confirm-btn:disabled {
      background: #cbd5e1;
      cursor: not-allowed;
    }
    .disclaimer-confirm-btn:not(:disabled):hover { background: #0284c7; }
    .disclaimer-confirm-btn:not(:disabled):active { transform: scale(0.97); }

    /* ===== 页脚签名 ===== */
    .site-footer {
      max-width: 800px;
      margin: 40px auto 0;
      padding: 24px 16px 32px;
      text-align: center;
      border-top: 1px solid #f3f4f6;
    }
    .footer-brand {
      font-size: 15px;
      font-weight: 700;
      color: #374151;
      margin-bottom: 6px;
    }
    .footer-info {
      font-size: 12px;
      color: #9ca3af;
      margin-bottom: 8px;
    }
    .footer-beian {
      font-size: 11px;
      color: #c4c4c4;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .footer-dot { color: #d1d5db; }

    /* ===== 页脚外链按钮（参考样式：双区块布局） ===== */
    .footer-links {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .footer-link-btn {
      display: flex;
      align-items: stretch;
      height: 64px;
      border-radius: 12px;
      overflow: hidden;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      flex-shrink: 0;
    }
    .footer-link-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    }
    .footer-link-btn:active { transform: translateY(0) scale(0.98); }
    .footer-link-btn .fl {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 14px;
      background: linear-gradient(135deg, #5a5a5a, #2d2d2d);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }
    .footer-link-btn .fl svg { flex-shrink: 0; }
    .footer-link-btn .fr {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 22px;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .footer-link-btn.scs .fr {
      background: linear-gradient(135deg, #2196f3, #1976d2);
    }
    .footer-link-btn.tmp .fr {
      background: linear-gradient(135deg, #2a2a2a, #000000);
    }
    @media (max-width: 480px) {
      .footer-link-btn { height: 54px; }
      .footer-link-btn .fl { font-size: 12px; padding: 0 10px; }
      .footer-link-btn .fr { font-size: 15px; padding: 0 16px; }
    }
    body.custom-bg .site-footer {
      border-top-color: rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.75);
      border-radius: 14px;
      padding: 18px 16px 24px;
    }
    body.custom-bg .footer-brand { color: #1f2937; }
    body.custom-bg .footer-info { color: #4b5563; }
    body.custom-bg .footer-beian { color: #6b7280; }

    @media (max-width: 640px) {
      .disclaimer-overlay {
        padding: 16px;
        align-items: center;
      }
      .disclaimer-box { border-radius: 16px; max-width: none; }
      .disclaimer-header { padding: 18px 20px 0; font-size: 15px; }
      .disclaimer-body { padding: 14px 20px; font-size: 13px; max-height: 45vh; }
      .disclaimer-footer { padding: 12px 20px; }
      .disclaimer-agree-row { flex-direction: column; align-items: stretch; }
      .disclaimer-confirm-btn { width: 100%; text-align: center; padding: 10px; }
    }

    /* ===== 弹窗公告 ===== */
    .popup-notice-overlay {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(15, 23, 42, 0.55);
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: popupFadeIn 0.3s ease-out;
    }

    @keyframes popupFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .popup-notice-box {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
      max-width: 440px;
      width: 100%;
      overflow: hidden;
      animation: popupSlideUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    @keyframes popupSlideUp {
      from { transform: translateY(30px) scale(0.96); opacity: 0; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }

    .popup-notice-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 20px 24px 0;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    .popup-notice-header svg {
      color: #0ea5e9;
      flex-shrink: 0;
    }

    .popup-notice-body {
      padding: 16px 24px;
      font-size: 14px;
      color: #475569;
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 60vh;
      overflow-y: auto;
    }

    .popup-notice-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px;
      background: #f8fafc;
      border-top: 1px solid #f1f5f9;
      gap: 12px;
      flex-wrap: wrap;
    }

    .popup-notice-noshow {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #94a3b8;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }

    .popup-notice-noshow input {
      width: 15px;
      height: 15px;
      accent-color: #0ea5e9;
      cursor: pointer;
    }

    .popup-notice-close {
      padding: 8px 20px;
      background: #0ea5e9;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .popup-notice-close:hover {
      background: #0284c7;
    }

    .popup-notice-close:active {
      transform: scale(0.97);
    }

    @media (max-width: 640px) {
      .popup-notice-overlay {
        padding: 16px;
        align-items: center;
      }
      .popup-notice-box {
        border-radius: 16px;
        max-width: none;
      }
      .popup-notice-header {
        padding: 18px 20px 0;
        font-size: 15px;
      }
      .popup-notice-body {
        padding: 14px 20px;
        font-size: 13px;
        max-height: 50vh;
      }
      .popup-notice-footer {
        padding: 12px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .popup-notice-close {
        width: 100%;
        text-align: center;
        padding: 10px;
      }
      .popup-notice-noshow {
        justify-content: center;
      }
    }

    /* ===== 发帖弹窗 ===== */
    .modal-overlay {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(15, 23, 42, 0.55);
      z-index: 100;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      background: #fff;
      border-radius: 24px 24px 0 0;
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.1);
      transform: translateY(100%);
      transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @media (min-width: 640px) {
      .modal-overlay {
        align-items: center;
        padding: 16px;
      }
      .modal {
        border-radius: 24px;
        transform: translateY(30px) scale(0.95);
      }
    }

    .modal-overlay.show .modal {
      transform: translateY(0) scale(1);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 24px 8px;
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 2;
    }

    .modal-header h2 {
      font-size: 20px;
      font-weight: 700;
      color: #111827;
      letter-spacing: -0.3px;
    }

    .modal-close {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #f3f4f6;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #9ca3af;
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      background: #fee2e2;
      color: #ef4444;
      transform: rotate(90deg);
    }

    .modal-body {
      padding: 4px 24px 24px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      margin-bottom: 8px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 14px 16px;
      border: 2px solid #f3f4f6;
      border-radius: 14px;
      font-size: 15px;
      font-family: inherit;
      color: #111827;
      background: #f9fafb;
      transition: all 0.25s ease;
      outline: none;
    }

    .form-group input:hover,
    .form-group textarea:hover {
      border-color: #e5e7eb;
      background: #fff;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: #0ea5e9;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.08);
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: #c4c4c4;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 180px;
      line-height: 1.6;
    }

    /* 版块选择器美化 */
    .tag-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag-option {
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid #f3f4f6;
      background: #f9fafb;
      color: #6b7280;
      transition: all 0.25s ease;
    }

    .tag-option:hover {
      border-color: #e5e7eb;
      background: #fff;
    }

    .tag-option.selected {
      border-color: #0ea5e9;
      background: rgba(14, 165, 233, 0.06);
      color: #0ea5e9;
    }

    /* ===== 个性化设置弹窗 ===== */
    .customize-preview {
      width: 100%;
      height: 160px;
      border-radius: 16px;
      border: 2px dashed #e5e7eb;
      overflow: hidden;
      margin-bottom: 20px;
      position: relative;
      background: #f9fafb;
    }
    .customize-preview-inner {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      color: #9ca3af;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: all 0.3s ease;
    }
    .customize-preview-inner.has-bg {
      color: #fff;
      text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .customize-preview-inner.has-bg svg { color: rgba(255,255,255,0.7); }

    .customize-options {
      margin-bottom: 4px;
    }
    .customize-option-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      margin-bottom: 8px;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .customize-option-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .customize-opt-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid #e5e7eb;
      background: #fff;
      color: #374151;
      transition: all 0.2s ease;
    }
    .customize-opt-btn:hover {
      border-color: #0ea5e9;
      color: #0ea5e9;
      background: #f0f9ff;
    }
    .customize-opt-btn:active {
      transform: scale(0.96);
    }
    .customize-opt-clear {
      color: #dc2626;
    }
    .customize-opt-clear:hover {
      border-color: #dc2626;
      color: #dc2626;
      background: #fef2f2;
    }
    .customize-hint {
      font-size: 12px;
      color: #9ca3af;
      margin-top: 10px;
    }


    /* ============================================================
       个性化背景模式 — 毛玻璃 + 完全保留原始交互动画
       ============================================================ */
    body.custom-bg .page {
      background: transparent !important;
    }

    /* 自定义背景模式下隐藏默认光效层，避免遮挡 body 上的背景图/视频 */
    body.custom-bg .page::before,
    body.custom-bg .page::after {
      animation: none;
      opacity: 0;
    }

    /* 帖子卡片 — 毛玻璃，动画和过渡完全等同于无背景模式 */
    body.custom-bg .post-card {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 14px;
      padding: 16px 18px;
      margin: 6px 0;
      border-bottom: none;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      /* postFadeIn 由 .post-card 自带，此处不覆盖 animation */
    }
    /* 悬停：只变背景色，和原始一样 */
    body.custom-bg .post-card:hover {
      background: rgba(255, 255, 255, 0.88);
    }
    body.custom-bg .post-card:hover .post-title {
      color: #0ea5e9;
    }
    /* 桌面端：保留负margin扩展效果 */
    @media (hover: hover) and (pointer: fine) {
      body.custom-bg .post-card:hover {
        margin-left: calc(-1 * clamp(4px, 1.5vw, 16px));
        margin-right: calc(-1 * clamp(4px, 1.5vw, 16px));
        padding-left: calc(16px + clamp(4px, 1.5vw, 16px));
        padding-right: calc(18px + clamp(4px, 1.5vw, 16px));
        border-radius: 16px;
      }
    }
    /* 点击反馈：和原始一样的短暂透明 */
    body.custom-bg .post-card:active {
      opacity: 0.7;
    }
    /* 投票按钮 — 保留过渡 */
    body.custom-bg .vote-btn {
      transition: all 0.15s ease;
    }
    body.custom-bg .vote-btn:hover {
      background: rgba(14, 165, 233, 0.08);
    }
    /* 帖子操作按钮 — 保留悬停 */
    body.custom-bg .post-action-btn:hover {
      background: rgba(0, 0, 0, 0.04);
    }
    /* 缩略图 — 保留悬停缩放 */
    body.custom-bg .post-thumb img {
      transition: transform 0.2s ease;
    }
    body.custom-bg .post-thumb:hover img {
      transform: scale(1.05);
    }
    /* pending 上传中状态不覆盖（保留 shimmer/pulse 动画） */

    /* 分区标签栏 — 白磨砂玻璃 + 保留交互 */
    body.custom-bg .tabs-wrap {
      background: rgba(255, 255, 255, 0.68);
      backdrop-filter: blur(28px) saturate(1.4);
      -webkit-backdrop-filter: blur(28px) saturate(1.4);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
      overflow: hidden;
    }
    body.custom-bg .tabs {
      background: transparent;
    }
    body.custom-bg .subchannel-row {
      background: rgba(255, 255, 255, 0.45);
      border-top-color: rgba(255, 255, 255, 0.35);
    }
    body.custom-bg .tabs-fade-left {
      opacity: 0 !important;
    }
    body.custom-bg .tabs-scroll-hint {
      background: transparent;
      color: rgba(0, 0, 0, 0.4);
      border-top: 1px solid rgba(255, 255, 255, 0.25);
    }
    /* 移动端右边缘渐变遮罩在自定义背景下的适配 */
    @media (max-width: 640px) {
      body.custom-bg .tabs-scroll::after {
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85));
      }
    }
    /* ===== 展开全部分区面板 — 左侧滑出抽屉式菜单 ===== */
    .expand-channels-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(15, 23, 42, 0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition:
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s 0.35s;
    }
    .expand-channels-overlay.show {
      visibility: visible;
      opacity: 1;
      background: rgba(15, 23, 42, 0.4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      pointer-events: auto;
      transition:
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s 0s;
    }
    .expand-channels-overlay.closing {
      visibility: visible;
      pointer-events: auto;
      opacity: 0;
      background: rgba(15, 23, 42, 0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      transition:
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s 0.28s;
    }
    .expand-channels-overlay.closing .expand-channels-panel {
      transform: translateX(-105%);
      transition: transform 0.32s cubic-bezier(0.55, 0, 1, 0.45);
      box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    .expand-channels-panel {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 300px;
      max-width: 85vw;
      background: #fff;
      box-shadow: 0 0 0 rgba(0,0,0,0);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 24px 20px 80px;
      transform: translateX(-105%);
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      display: flex;
      flex-direction: column;
    }
    .expand-channels-overlay.show .expand-channels-panel {
      transform: translateX(0);
      box-shadow: 6px 0 40px rgba(0, 0, 0, 0.12);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
    }

    /* 面板内容逐项入场 — 使用 CSS animation-delay */
    .expand-ch-grid {
      opacity: 0;
      transform: translateX(-16px);
    }
    .expand-channels-overlay.show .expand-ch-grid {
      animation: expandChItemIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes expandChItemIn {
      to { opacity: 1; transform: translateX(0); }
    }

    /* section label 入场 */
    .expand-ch-section-label {
      opacity: 0;
      transform: translateX(-8px);
    }
    .expand-channels-overlay.show .expand-ch-section-label {
      animation: expandChLabelIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes expandChLabelIn {
      to { opacity: 1; transform: translateX(0); }
    }

    /* 关闭按钮入场旋转 */
    .expand-channels-close {
      opacity: 0;
      transform: rotate(-90deg);
    }
    .expand-channels-overlay.show .expand-channels-close {
      animation: expandChCloseIn 0.4s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes expandChCloseIn {
      to { opacity: 1; transform: rotate(0deg); }
    }
    .expand-channels-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f3f4f6;
    }
    .expand-channels-title {
      font-size: 17px;
      font-weight: 700;
      color: #1f2937;
    }
    .expand-channels-close {
      width: 32px; height: 32px;
      border-radius: 8px;
      border: none; background: #f3f4f6;
      cursor: pointer;
      font-size: 16px; color: #6b7280;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s ease;
    }
    .expand-channels-close:hover { background: #e5e7eb; color: #111827; }
    .expand-channels-grid {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }
    .expand-ch-section-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #9ca3af;
      padding: 16px 4px 8px;
    }
    .expand-ch-section-label:first-child {
      padding-top: 0;
    }
    .expand-ch-section-divider {
      height: 1px;
      margin: 8px 4px;
      background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    }
    /* 父分区容器：flex column，子分区在下方 */
    .expand-ch-grid {
      display: flex;
      flex-direction: column;
    }
    /* 父分区行 */
    .expand-ch-grid-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
      font-size: 14px;
      font-weight: 500;
      color: #374151;
    }
    .expand-ch-grid-row:hover {
      background: #f0f9ff;
    }
    .expand-ch-grid.active .expand-ch-grid-row {
      background: #dbeafe;
      color: #2563eb;
      font-weight: 700;
      border-radius: 10px;
    }
    .expand-ch-grid .ch-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .expand-ch-grid .ch-badge {
      margin-left: auto;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      flex-shrink: 0;
    }
    .expand-ch-grid .ch-badge.public {
      background: #f0fdf4; color: #16a34a;
    }
    .expand-ch-grid .ch-badge.private {
      background: #fef3c7; color: #d97706;
    }

    /* 子分区列表：默认隐藏，展开时动画滑出 */
    .expand-ch-subs {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      overflow: hidden;
      padding-left: 20px;
    }
    .expand-ch-subs.show {
      grid-template-rows: 1fr;
    }
    .expand-ch-subs > * {
      min-height: 0;
      overflow: hidden;
    }
    .expand-ch-subs-inner {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 2px 0;
    }
    .expand-ch-sub {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 10px;
      border-radius: 8px;
      font-size: 12px;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.15s;
    }
    .expand-ch-sub:hover { background: #f0f9ff; color: #0ea5e9; }
    .expand-ch-sub.active { background: #dbeafe; color: #2563eb; font-weight: 600; }
    .expand-ch-sub .ch-sub-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

    @media (max-width: 640px) {
      .expand-channels-panel {
        width: 80vw;
        max-width: none;
        padding: 20px 16px 80px;
      }
      .expand-ch-grid {
        font-size: 13px;
        padding: 11px 12px;
      }
    }
    body.custom-bg .tab:hover {
      background: rgba(255, 255, 255, 0.55);
    }
    body.custom-bg .tab.active {
      background: rgba(14, 165, 233, 0.12);
    }
    body.custom-bg .tabs-actions {
      border-left-color: rgba(0, 0, 0, 0.08);
    }

    /* 视频背景打开时，body 背景设为透明让 video 元素穿透 */
    body.custom-bg[data-bg-theme="dark"] {
      --bg-theme: dark;
    }
    /* 暗色背景（视频默认暗色主题）下浅色文字 */
    body.custom-bg[data-bg-theme="dark"] .tab {
      color: rgba(255, 255, 255, 0.85);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    body.custom-bg[data-bg-theme="dark"] .tab:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
    }
    body.custom-bg[data-bg-theme="dark"] .tab.active {
      color: #fff;
      background: rgba(255, 255, 255, 0.15);
    }
    body.custom-bg[data-bg-theme="dark"] .tabs-wrap {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    body.custom-bg[data-bg-theme="dark"] .post-title {
      color: rgba(255, 255, 255, 0.9);
    }
    body.custom-bg[data-bg-theme="dark"] .post-excerpt {
      color: rgba(255, 255, 255, 0.6);
    }

    /* ========== 动态背景亮度适配 - WCAG AA 对比度保证 ========== */
    /* 默认（浅色背景，data-bg-theme=light）使用深色文字 */
    body.custom-bg[data-bg-theme="light"] .tab {
      color: #374151; /* 对比度 14.1:1 → AA+ */
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
    }
    body.custom-bg[data-bg-theme="light"] .tab:hover {
      color: #111827;
    }
    body.custom-bg[data-bg-theme="light"] .tab.active {
      color: #0369a1; /* #0369a1 vs 0.35 透明度背景 → 对比度约 5.1:1 → AA 通过 */
    }
    body.custom-bg[data-bg-theme="light"] .tab-channel.active {
      color: #1d4ed8; /* 对比度约 5.8:1 → AA 通过 */
    }
    body.custom-bg[data-bg-theme="light"] .tabs-scroll-hint {
      color: rgba(0, 0, 0, 0.6); /* 对比度约 5.0:1 → AA 通过 */
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    }
    body.custom-bg[data-bg-theme="light"] .channel-group-title .group-count {
      color: #4b5563; /* 对比度 ~7.5:1 → AA+ */
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    }
    body.custom-bg[data-bg-theme="light"] .channel-group-more {
      color: #0369a1; /* 对比度 ~5.1:1 → AA 通过 */
    }
    body.custom-bg[data-bg-theme="light"] .channel-group-divider {
      color: #4b5563; /* 对比度 ~7.5:1 → AA+ */
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    }
    body.custom-bg[data-bg-theme="light"] .channel-group-divider::before,
    body.custom-bg[data-bg-theme="light"] .channel-group-divider::after {
      background: linear-gradient(90deg, transparent, #d1d5db, transparent);
    }
    /* ========== 文字阴影增强边缘清晰度 ========== */
    body.custom-bg .post-title,
    body.custom-bg .post-excerpt,
    body.custom-bg .tab,
    body.custom-bg .channel-group-title .group-name {
      text-shadow: var(--text-shadow, 0 0 0 transparent);
    }

    /* 弹窗 — 保持可读性 */
    body.custom-bg .modal {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    body.custom-bg .modal-header,
    body.custom-bg .modal-footer {
      background: transparent;
    }
    body.custom-bg .auth-modal {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    /* 分区分组标题 */
    body.custom-bg .channel-group-header {
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 10px;
      padding: 8px 14px;
    }

    /* 发帖按钮 — 保留悬停 */
    body.custom-bg #btnNewPost {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* ===== 提示文字磨砂背景（防止被背景图覆盖看不清）===== */
    body.custom-bg .tabs-scroll-hint {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    body.custom-bg .customize-hint {
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 6px;
      padding: 6px 12px;
      color: #4b5563;
    }
    body.custom-bg .channel-group-empty {
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 10px;
      padding: 14px;
      color: #4b5563;
      font-weight: 500;
    }
    body.custom-bg .manage-empty {
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 8px;
      color: #4b5563;
    }
    body.custom-bg .toast {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      color: #1f2937;
    }
    body.custom-bg .avatar-hint {
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius: 6px;
      padding: 3px 10px;
    }

    /* 移动端适配 */
    @media (max-width: 640px) {
      body.custom-bg .post-card {
        border-radius: 12px;
        padding: 14px 14px;
        margin: 4px 0;
      }
      body.custom-bg .tabs-wrap {
        border-radius: 12px;
      }
      body.custom-bg .tabs {
        padding: 6px 8px;
      }
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding-top: 12px;
      position: sticky;
      bottom: 0;
      background: #fff;
      padding-bottom: 8px;
    }

    .btn {
      padding: 12px 28px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      letter-spacing: 0.3px;
    }

    .btn-cancel {
      background: #f3f4f6;
      color: #6b7280;
    }

    .btn-cancel:hover {
      background: #e5e7eb;
      color: #374151;
    }

    .btn-cancel:active {
      transform: scale(0.96);
    }

    .btn-submit {
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #fff;
      box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
    }

    .btn-submit:hover {
      box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
      transform: translateY(-1px);
    }

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

    .btn-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* ===== 上传工具栏 ===== */
    .upload-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 0 12px 0;
    }
    .upload-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 14px;
      border-radius: 10px;
      border: 1.5px solid #e5e7eb;
      background: #f9fafb;
      color: #6b7280;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .upload-btn:hover {
      border-color: #0ea5e9;
      color: #0ea5e9;
      background: rgba(14, 165, 233, 0.04);
    }
    .upload-btn:active {
      transform: scale(0.96);
    }
    .upload-btn svg {
      flex-shrink: 0;
    }
    .upload-status {
      font-size: 12px;
      color: #9ca3af;
      margin-left: 4px;
    }
    .upload-status.success {
      color: #16a34a;
    }
    .upload-status.error {
      color: #dc2626;
    }

    /* ===== 上传预览 ===== */
    .upload-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding-bottom: 12px;
    }
    .upload-preview-item {
      position: relative;
      width: 72px;
      height: 72px;
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid #f3f4f6;
      background: #f9fafb;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .upload-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }
    .upload-preview-item .file-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      color: #6b7280;
    }
    .upload-preview-item .file-icon .ext {
      font-size: 9px;
      font-weight: 700;
      color: #9ca3af;
      text-transform: uppercase;
    }
    .upload-preview-item .remove-btn {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(0,0,0,.5);
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: all .15s;
    }
    .upload-preview-item .remove-btn:hover {
      background: #dc2626;
    }

    /* 图片插入标记样式 */
    .post-content-area .upload-marker {
      display: inline-block;
      padding: 2px 6px;
      margin: 0 2px;
      border-radius: 4px;
      background: #f0f9ff;
      color: #0ea5e9;
      font-size: 12px;
      font-weight: 500;
    }

    /* ===== 图片放大预览 ===== */
    .image-preview-overlay {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(0,0,0,.9);
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s;
    }
    .image-preview-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }
    .image-preview-overlay img {
      max-width: 95vw;
      max-height: 90vh;
      border-radius: 8px;
      box-shadow: 0 8px 40px rgba(0,0,0,.5);
    }
    .image-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;
      transition: background .2s;
    }
    .image-preview-close:hover {
      background: rgba(255,255,255,.35);
    }

    /* 成功提示 */
    /* ===== 图片放大预览 ===== */