/* 帮助中心整体布局 */

.ff-help-wrap { max-width: 1000px; margin: 30px auto; display: flex; gap: 20px; align-items: flex-start; }

.ff-help-sidebar { width: 220px; background: #fff; border-radius: 12px; padding: 10px 0; box-shadow: 0 2px 10px rgba(0,0,0,.03); flex-shrink: 0; border: 1px solid #F3F4F6; }

.ff-help-menu-item { display: block; padding: 14px 20px; font-size: 14px; color: #4B5563; cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s; }

.ff-help-menu-item:hover { background: #F9FAFB; color: #FF0036; }

.ff-help-menu-item.active { background: #FFF1F2; color: #FF0036; border-left-color: #FF0036; font-weight: bold; }



.ff-help-main { flex: 1; background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,.03); min-height: 500px; border: 1px solid #F3F4F6; }

.ff-faq-item { border-bottom: 1px solid #F3F4F6; padding: 18px 0; }

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

.ff-faq-q { font-size: 15px; font-weight: bold; color: #1F2937; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color 0.2s; }

.ff-faq-q:hover { color: #FF0036; }

.ff-faq-q i { font-style: normal; font-size: 12px; color: #9CA3AF; transition: transform 0.3s; }

.ff-faq-a { font-size: 14px; color: #6B7280; line-height: 1.8; display: none; padding-top: 15px; }

.ff-faq-item.open .ff-faq-a { display: block; animation: fadeIn 0.3s ease; }

.ff-faq-item.open .ff-faq-q i { transform: rotate(180deg); }



@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }



@media (max-width: 768px) {

    .ff-help-wrap { flex-direction: column; padding: 0 15px; }

    .ff-help-sidebar { width: 100%; display: flex; overflow-x: auto; padding: 0; white-space: nowrap; }

    .ff-help-menu-item { border-left: none; border-bottom: 3px solid transparent; }

    .ff-help-menu-item.active { border-left-color: transparent; border-bottom-color: #FF0036; }

}