shencaisuan/public/css/mianfei-detail.css

/* Comment Section */
.is-hidden {
  display: none !important;
}

.cxz-article-loading {
  text-align: center;
  color: var(--text-muted);
}

.site-footer__record-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

      .cxz-comment-section {
        background: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: 24px;
        overflow: hidden;
        border: 1px solid var(--border-light);
      }
      .cxz-comment-header {
        padding: 20px 28px;
        border-bottom: 1px solid var(--border-light);
        font-size: 16px;
        font-weight: 700;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(180deg, #f8f9fc, #fff);
      }
      .cxz-comment-header i {
        color: var(--primary);
        font-size: 20px;
      }

      /* Comment Input */
      .cxz-comment-input-box {
        padding: 20px 28px;
        border-bottom: 1px solid var(--border-light);
        background: rgba(16, 43, 106, 0.02);
      }
      .cxz-comment-textarea {
        width: 100%;
        height: 80px;
        padding: 12px 16px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-md);
        font-size: 14px;
        color: var(--text-dark);
        background: var(--white);
        resize: vertical;
        outline: none;
        transition: border-color 0.25s;
        box-sizing: border-box;
        line-height: 1.6;
      }
      .cxz-comment-textarea::placeholder {
        color: var(--text-muted);
      }
      .cxz-comment-textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(16, 43, 106, 0.1);
      }
      .cxz-comment-submit-btn {
        margin-top: 12px;
        padding: 10px 28px;
        border: none;
        border-radius: var(--radius-md);
        font-size: 14px;
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary), #1a3f8f);
        color: var(--white);
        cursor: pointer;
        transition: all 0.3s;
        letter-spacing: 1px;
      }
      .cxz-comment-submit-btn:hover {
        box-shadow: 0 4px 14px rgba(16, 43, 106, 0.4);
        transform: translateY(-1px);
      }
      .cxz-comment-submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }

      /* Comment List */
      .cxz-comment-list {
        padding: 0 28px;
      }
      .cxz-comment-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted);
      }
      .cxz-comment-empty i {
        font-size: 32px;
        opacity: 0.3;
        display: block;
        margin-bottom: 8px;
      }

      .cxz-comment-item {
        display: flex;
        gap: 14px;
        padding: 18px 0;
        border-bottom: 1px dashed var(--border-light);
        animation: fadeInUp 0.3s ease;
      }
      .cxz-comment-item:last-child {
        border-bottom: none;
      }
      .cxz-comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 2px solid rgba(253, 185, 51, 0.3);
      }
      .cxz-comment-avatar-placeholder {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--primary), #1a3f8f);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
      }
      .cxz-comment-body {
        flex: 1;
        min-width: 0;
      }
      .cxz-comment-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 4px;
      }
      .cxz-comment-text {
        font-size: 14px;
        color: var(--text-dark);
        line-height: 1.6;
        word-break: break-word;
      }
      .cxz-comment-time {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 6px;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .cxz-comment-header {
          padding: 16px 20px;
          font-size: 15px;
        }
        .cxz-comment-input-box {
          padding: 16px 20px;
        }
        .cxz-comment-list {
          padding: 0 20px;
        }
        .cxz-comment-textarea {
          height: 70px;
        }
      }
      @media (max-width: 480px) {
        .cxz-comment-header {
          padding: 14px 16px;
        }
        .cxz-comment-input-box {
          padding: 14px 16px;
        }
        .cxz-comment-list {
          padding: 0 16px;
        }
        .cxz-comment-item {
          gap: 10px;
        }
        .cxz-comment-avatar,
        .cxz-comment-avatar-placeholder {
          width: 34px;
          height: 34px;
          font-size: 14px;
        }
      }