/* ============================================
   VideoPro - AcFun 1:1 浠垮埗涓婚鏍峰紡
   ============================================ */

/* ===== AcFun 绮剧‘鑹插€间綋绯?===== */
:root {
    --ac-pink: #fd4c83;
    --ac-pink-hover: #e63970;
    --ac-pink-light: #ff85a2;
    --ac-purple: #7b61ff;
    --ac-purple-light: #a78bfa;
    --ac-blue: #00a1d6;
    --ac-orange: #ff7f24;
    --ac-green: #00c853;
    --ac-gold: #ffb800;
    --ac-bg: #f4f5f7;
    --ac-card: #ffffff;
    --ac-text: #18191c;
    --ac-text-2: #61666d;
    --ac-text-3: #9499a0;
    --ac-border: #e3e5e7;
    --ac-border-light: #f1f2f3;
    --ac-mask: rgba(0, 0, 0, 0.6);
    --ac-radius: 8px;
    --ac-radius-sm: 4px;
    --ac-radius-lg: 12px;
    --ac-radius-pill: 20px;
    --ac-header-height: 60px;
    --ac-container: 1400px;
    --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ac-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ac-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --ac-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ac-shadow-pink: 0 4px 12px rgba(253, 76, 131, 0.3);
    --ac-transition: all 0.2s ease;
    --ac-transition-fast: all 0.15s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px; line-height: 1.5; color: var(--ac-text);
    background: var(--ac-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: var(--ac-transition-fast); }
a:hover { color: var(--ac-pink); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
::selection { background: var(--ac-pink); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c9ccd0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a9acb0; }

.container { max-width: var(--ac-container); margin: 0 auto; padding: 0 20px; }
.site-content { min-height: 60vh; padding: 16px 0 40px; }

/* ===== 椤堕儴瀵艰埅 ===== */
.acfun-header { background: var(--ac-header-bg, #fff); border-bottom: 1px solid var(--ac-border-light); position: sticky; top: 0; z-index: 1000; height: var(--ac-header-height); }
.acfun-header .header-inner { display: flex; align-items: center; height: var(--ac-header-height); }
.site-branding { flex-shrink: 0; margin-right: 24px; }
.acfun-logo { display: flex; align-items: center; height: 60px; }
.acfun-logo .logo-text { font-size: 26px; font-weight: 900; font-style: italic; background: linear-gradient(135deg, #fd4c83 0%, #ff6b9d 50%, #fd4c83 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; }
.acfun-logo .logo-image { max-height: 40px; width: auto; display: block; }

/* 椤甸潰鑳屾櫙鍥炬椂鍐呭鍖哄煙鍗婇€忔槑 */
body[style*="background-image"] .site-content,
body[style*="background-image"] .container,
body[style*="background-image"] .vp-member-content,
body[style*="background-image"] .vp-login-container,
body[style*="background-image"] .vp-register-container {
    background: rgba(255, 255, 255, 0.95);
}
body[style*="background-image"].dark-theme .site-content,
body[style*="background-image"].dark-theme .container,
body[style*="background-image"].dark-theme .vp-member-content {
    background: rgba(30, 30, 30, 0.95);
}
.acfun-nav { flex: 1; overflow: hidden; }
.acfun-nav .menu { display: flex; align-items: center; }
.acfun-nav .menu-item a { display: flex; align-items: center; height: 60px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--ac-text-2); position: relative; white-space: nowrap; }
.acfun-nav .menu-item a:hover { color: var(--ac-pink); }
.acfun-nav .menu-item a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--ac-pink); border-radius: 2px 2px 0 0; transition: width 0.2s ease; }
.acfun-nav .menu-item a:hover::after, .acfun-nav .menu-item.current-menu-item a::after { width: 24px; }
.acfun-nav .menu-item.current-menu-item a { color: var(--ac-pink); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.acfun-search { position: relative; width: 260px; }
.acfun-search .search-field { width: 100%; height: 36px; padding: 0 40px 0 16px; border: 1px solid transparent; border-radius: var(--ac-radius-pill); font-size: 13px; background: var(--ac-bg); color: var(--ac-text); outline: none; transition: var(--ac-transition-fast); }
.acfun-search .search-field::placeholder { color: var(--ac-text-3); }
.acfun-search .search-field:focus { background: #fff; border-color: var(--ac-pink); box-shadow: 0 0 0 3px rgba(253, 76, 131, 0.1); }
.acfun-search .search-submit { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--ac-text-3); border-radius: 50%; transition: var(--ac-transition-fast); }
.acfun-search .search-submit:hover { color: var(--ac-pink); background: rgba(253, 76, 131, 0.08); }
.icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ac-text-2); font-size: 18px; position: relative; transition: var(--ac-transition-fast); }
.icon-btn:hover { color: var(--ac-pink); background: rgba(253, 76, 131, 0.08); }
.icon-btn .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--ac-pink); color: #fff; font-size: 10px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.btn-upload { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 20px; background: linear-gradient(135deg, #fd4c83, #ff6b9d); color: #fff; font-size: 14px; font-weight: 600; border-radius: var(--ac-radius-pill); transition: var(--ac-transition-fast); white-space: nowrap; box-shadow: 0 2px 8px rgba(253, 76, 131, 0.3); }
.btn-upload:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253, 76, 131, 0.4); }
.btn-login { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border: 1px solid var(--ac-border); color: var(--ac-text-2); font-size: 14px; font-weight: 500; border-radius: var(--ac-radius-pill); transition: var(--ac-transition-fast); }
.btn-login:hover { border-color: var(--ac-pink); color: var(--ac-pink); }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: var(--ac-transition-fast); }
.user-avatar:hover { border-color: var(--ac-pink); }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.theme-toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ac-text-2); font-size: 16px; transition: var(--ac-transition-fast); }
.theme-toggle:hover { color: var(--ac-pink); background: rgba(253, 76, 131, 0.08); }
.theme-toggle .vp-icon { font-size: 16px; line-height: 1; }
.theme-toggle .vp-icon-sun { display: none; }
body.dark-theme .theme-toggle .vp-icon-sun { display: inline-block; }
body.dark-theme .theme-toggle .vp-icon-moon { display: none; }
.mobile-menu-toggle { display: none; width: 36px; height: 36px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; }
.mobile-menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ac-text); border-radius: 1px; }

/* ===== Hero 鍖?===== */
.acfun-hero { display: flex; gap: 16px; margin-bottom: 28px; margin-top: 16px; }
.acfun-carousel { flex: 1; min-width: 0; position: relative; border-radius: var(--ac-radius-lg); overflow: hidden; aspect-ratio: 16/7; background: #e8e8e8; }
.carousel-wrapper { position: relative; width: 100%; height: 100%; }
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.carousel-slide.active { opacity: 1; }
.carousel-link { display: block; width: 100%; height: 100%; position: relative; }
.carousel-link img { width: 100%; height: 100%; object-fit: cover; }
.carousel-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 24px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: #fff; }
.carousel-cat { display: inline-block; padding: 3px 10px; background: var(--ac-pink); border-radius: var(--ac-radius-sm); font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.carousel-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carousel-meta { display: flex; gap: 18px; font-size: 13px; opacity: 0.85; }
.carousel-meta span { display: flex; align-items: center; gap: 5px; }
.carousel-info-center { text-align: center; padding: 20px 24px; }
.carousel-info-center .carousel-title { margin-bottom: 0; text-align: center; font-size: 24px; }
.carousel-dots { position: absolute; bottom: 16px; right: 20px; display: flex; gap: 6px; z-index: 10; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: var(--ac-transition-fast); }
.carousel-dot.active { width: 24px; border-radius: 4px; background: #fff; }
.acfun-ranking { width: 340px; flex-shrink: 0; background: var(--ac-card); border-radius: var(--ac-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.ranking-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--ac-border-light); }
.ranking-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ranking-title::before { content: ''; display: inline-block; width: 4px; height: 16px; background: linear-gradient(180deg, var(--ac-pink), var(--ac-purple)); border-radius: 2px; }
.ranking-more { font-size: 12px; color: var(--ac-text-3); }
.ranking-more:hover { color: var(--ac-pink); }
.ranking-list { flex: 1; padding: 4px 0; }
.ranking-item { display: flex; align-items: center; gap: 12px; padding: 8px 18px; transition: var(--ac-transition-fast); cursor: pointer; }
.ranking-item:hover { background: var(--ac-bg); }
.ranking-num { flex-shrink: 0; width: 22px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ac-text-3); font-style: italic; }
.ranking-num.top { color: var(--ac-pink); font-size: 16px; }
.ranking-info { flex: 1; min-width: 0; }
.ranking-name { display: block; font-size: 13px; color: var(--ac-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; margin-bottom: 3px; }
.ranking-name:hover { color: var(--ac-pink); }
.ranking-views { font-size: 11px; color: var(--ac-text-3); display: flex; align-items: center; gap: 4px; }

/* ===== 鍒嗗尯鍖哄潡 ===== */
.acfun-section { margin-bottom: 32px; }
.acfun-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.acfun-section-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.section-bar { display: inline-block; width: 4px; height: 20px; background: linear-gradient(180deg, var(--ac-pink), var(--ac-purple)); border-radius: 2px; }
.acfun-section-more { font-size: 13px; color: var(--ac-text-3); display: flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--ac-radius-pill); transition: var(--ac-transition-fast); }
.acfun-section-more:hover { color: var(--ac-pink); background: rgba(253, 76, 131, 0.06); }

/* ===== 妯悜婊氬姩琛?===== */
.acfun-video-row { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding-bottom: 12px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.acfun-video-row::-webkit-scrollbar { height: 6px; }
.acfun-video-row::-webkit-scrollbar-track { background: transparent; }
.acfun-video-row::-webkit-scrollbar-thumb { background: var(--ac-border); border-radius: 3px; }

/* ===== 瑙嗛缃戞牸 ===== */
.acfun-video-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 16px; }

/* ===== 瑙嗛鍗＄墖 ===== */
.acfun-video-card { flex-shrink: 0; width: 240px; }
.acfun-video-grid .acfun-video-card { width: auto; }
.acfun-card-link { display: block; }
.acfun-card-thumb { position: relative; aspect-ratio: 2/3; border-radius: var(--ac-radius); overflow: hidden; background: #eee; margin-bottom: 8px; }
.acfun-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.acfun-video-card:hover .acfun-card-thumb img { transform: scale(1.06); }
.acfun-card-duration { position: absolute; bottom: 6px; right: 6px; padding: 2px 6px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11px; border-radius: var(--ac-radius-sm); line-height: 1.4; font-weight: 500; }
.acfun-card-quality { position: absolute; top: 6px; left: 6px; padding: 2px 6px; background: linear-gradient(135deg, var(--ac-pink), var(--ac-purple)); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--ac-radius-sm); text-transform: uppercase; }
.acfun-card-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); display: flex; align-items: center; justify-content: center; transition: var(--ac-transition-fast); }
.acfun-video-card:hover .acfun-card-mask { background: rgba(0, 0, 0, 0.15); }
.acfun-card-play { width: 48px; height: 48px; background: rgba(253, 76, 131, 0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; opacity: 0; transform: scale(0.8); transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(253, 76, 131, 0.4); }
.acfun-video-card:hover .acfun-card-play { opacity: 1; transform: scale(1); }
.acfun-card-info { padding: 0 2px; }
.acfun-card-title { font-size: 14px; font-weight: 500; color: var(--ac-text); line-height: 1.4; margin: 0 0 6px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; transition: var(--ac-transition-fast); }
.acfun-video-card:hover .acfun-card-title { color: var(--ac-pink); }
.acfun-card-up { font-size: 12px; color: var(--ac-text-3); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.acfun-card-up:hover { color: var(--ac-pink); }
.acfun-card-stats { display: flex; gap: 14px; font-size: 12px; color: var(--ac-text-3); }
.acfun-card-stats span { display: flex; align-items: center; gap: 4px; }

/* ===== 瑙嗛璇︽儏椤?===== */
.video-detail-layout { display: flex; gap: 20px; align-items: flex-start; }
.video-detail-main { flex: 1; min-width: 0; }
.video-detail-sidebar { width: 320px; flex-shrink: 0; }
.acfun-player-wrap { position: relative; background: #000; border-radius: var(--ac-radius-lg); overflow: hidden; aspect-ratio: 16/9; margin-bottom: 16px; }
.acfun-player-wrap video { width: 100%; height: 100%; object-fit: contain; }
.videopro-player { width: 100%; height: 100%; }
.videopro-iframe-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.videopro-iframe-wrapper iframe { width: 100%; height: 100%; border: none; display: block; }
.video-info-card { background: var(--ac-card); border-radius: var(--ac-radius-lg); padding: 20px 24px; margin-bottom: 16px; }
.video-info-title { font-size: 20px; font-weight: 700; color: var(--ac-text); margin-bottom: 12px; line-height: 1.4; }
.video-info-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--ac-text-3); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--ac-border-light); }
.video-info-meta span { display: flex; align-items: center; gap: 5px; }
.video-info-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.video-tag { padding: 4px 12px; background: var(--ac-bg); color: var(--ac-text-2); font-size: 12px; border-radius: var(--ac-radius-pill); transition: var(--ac-transition-fast); }
.video-tag:hover { background: rgba(253, 76, 131, 0.1); color: var(--ac-pink); }
.video-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.action-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; background: var(--ac-card); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-pill); font-size: 14px; color: var(--ac-text-2); transition: var(--ac-transition-fast); cursor: pointer; }
.action-btn:hover { border-color: var(--ac-pink); color: var(--ac-pink); background: rgba(253, 76, 131, 0.04); }
.action-btn.active { background: linear-gradient(135deg, var(--ac-pink), var(--ac-pink-light)); border-color: transparent; color: #fff; }
.action-btn .count { font-weight: 600; }
.action-btn-primary { background: linear-gradient(135deg, var(--ac-pink), var(--ac-pink-light)); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(253, 76, 131, 0.3); }
.action-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253, 76, 131, 0.4); }
.up-info-card { display: flex; align-items: center; gap: 14px; background: var(--ac-card); border-radius: var(--ac-radius-lg); padding: 16px 20px; margin-bottom: 16px; }
.up-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--ac-border-light); }
.up-avatar img { width: 100%; height: 100%; object-fit: cover; }
.up-info { flex: 1; min-width: 0; }
.up-name { font-size: 15px; font-weight: 600; color: var(--ac-text); margin-bottom: 4px; }
.up-name:hover { color: var(--ac-pink); }
.up-stats { font-size: 12px; color: var(--ac-text-3); display: flex; gap: 14px; }
.btn-follow { height: 34px; padding: 0 20px; background: var(--ac-pink); color: #fff; font-size: 13px; font-weight: 600; border-radius: var(--ac-radius-pill); transition: var(--ac-transition-fast); flex-shrink: 0; }
.btn-follow:hover { background: var(--ac-pink-hover); color: #fff; }
.btn-follow.followed { background: var(--ac-bg); color: var(--ac-text-3); }
.video-desc-card { background: var(--ac-card); border-radius: var(--ac-radius-lg); padding: 20px 24px; margin-bottom: 16px; font-size: 14px; line-height: 1.8; color: var(--ac-text-2); }
.video-desc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.video-desc-header h3 { font-size: 15px; font-weight: 600; color: var(--ac-text); margin: 0; }
.fav-inline { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 16px; background: var(--ac-bg); border: 1px solid var(--ac-border-light); color: var(--ac-text-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: all 0.2s; }
.fav-inline:hover { border-color: var(--ac-pink); color: var(--ac-pink); background: rgba(253,76,131,0.06); }
.fav-inline.active { background: linear-gradient(135deg,var(--ac-pink),var(--ac-purple)); border-color: transparent; color: #fff; }
.fav-inline .btn-count { font-weight: 600; }
.fav-inline .btn-text { font-size: 12px; }
.comments-card { background: var(--ac-card); border-radius: var(--ac-radius-lg); padding: 20px 24px; margin-bottom: 16px; }
.comments-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ac-border-light); }
.comments-title { font-size: 16px; font-weight: 700; }
.comment-list { margin-top: 20px; margin-bottom: 24px; list-style: none; padding: 0; }
.comment-list .comment { margin-bottom: 16px; }
.comment-list .comment:last-child { margin-bottom: 0; }
.comment-list .children { list-style: none; margin-left: 0; margin-top: 12px; padding: 0; display: none; }
.comment-list .children.open { display: block; animation: commentSlideDown 0.3s ease; }
@keyframes commentSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.comment-toggle-replies { background: none; border: none; color: var(--ac-text-3); font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s; }
.comment-toggle-replies:hover { color: var(--ac-pink); background: rgba(253,76,131,0.08); }
.comment-toggle-replies .toggle-icon { font-size: 10px; transition: transform 0.3s; }
.comment-toggle-replies.expanded .toggle-icon { transform: rotate(180deg); }
.comment-body { display: flex; gap: 12px; padding: 16px; background: var(--ac-bg); border-radius: 12px; transition: background 0.2s; }
.comment-body:hover { background: var(--ac-card); }
.comment-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg,var(--ac-pink),var(--ac-purple)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-main { flex: 1; min-width: 0; }
.comment-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.comment-author { font-size: 14px; font-weight: 600; color: var(--ac-text); text-decoration: none; }
.comment-author:hover { color: var(--ac-pink); }
.comment-time { font-size: 12px; color: var(--ac-text-3); }
.comment-time a { color: var(--ac-text-3); text-decoration: none; }
.comment-time a:hover { color: var(--ac-pink); }
.comment-content { font-size: 14px; color: var(--ac-text-2); line-height: 1.7; margin-bottom: 10px; word-break: break-word; }
.comment-content p { margin: 0 0 8px; }
.comment-content p:last-child { margin-bottom: 0; }
.comment-actions { display: flex; gap: 16px; font-size: 12px; }
.comment-actions a, .comment-actions .comment-reply-link { color: var(--ac-text-3); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; transition: all 0.2s; cursor: pointer; }
.comment-actions a:hover, .comment-actions .comment-reply-link:hover { color: var(--ac-pink); background: rgba(253,76,131,0.08); }
.comment-awaiting-moderation { color: #f5a623; font-size: 13px; margin-bottom: 8px; padding: 6px 12px; background: rgba(245,166,35,0.1); border-radius: 6px; display: inline-block; }

/* 璇勮琛ㄥ崟 */
.comment-form { padding: 20px; background: var(--ac-bg); border-radius: 12px; margin-top: 20px; border-top: 2px solid var(--ac-border-light); position: relative; }
.comment-form::before { content: '鍐欎笅浣犵殑璇勮'; position: absolute; top: -10px; left: 20px; background: var(--ac-card); padding: 0 10px; font-size: 12px; color: var(--ac-text-3); font-weight: 500; }
.comment-form textarea { width: 100%; min-height: 100px; padding: 12px 14px; border: 1px solid var(--ac-border); border-radius: var(--ac-radius); font-size: 14px; resize: vertical; outline: none; transition: var(--ac-transition-fast); background: var(--ac-card); }
.comment-form textarea:focus { border-color: var(--ac-pink); background: #fff; box-shadow: 0 0 0 3px rgba(253, 76, 131, 0.08); }
.comment-form .form-submit { margin-top: 14px; display: flex; justify-content: flex-end; }
.comment-form .submit { background: linear-gradient(135deg,var(--ac-pink),var(--ac-purple)); color: #fff; border: none; padding: 10px 28px; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.comment-form .submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253,76,131,0.3); }
.comment-login-prompt { text-align: center; padding: 30px 20px; background: var(--ac-bg); border-radius: 12px; }
.comment-login-prompt p { color: var(--ac-text-3); font-size: 14px; margin-bottom: 16px; }
.comment-login-btn { display: inline-block; padding: 10px 32px; background: linear-gradient(135deg,var(--ac-pink),var(--ac-purple)); color: #fff; border-radius: 20px; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.comment-login-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253,76,131,0.3); }

/* ===== 灏忓伐鍏?===== */
.widget { background: var(--ac-card); border-radius: var(--ac-radius-lg); padding: 18px 20px; margin-bottom: 16px; }
.widget-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ac-border-light); display: flex; align-items: center; gap: 8px; }
.widget-title::before { content: ''; display: inline-block; width: 4px; height: 16px; background: linear-gradient(180deg, var(--ac-pink), var(--ac-purple)); border-radius: 2px; }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--ac-border-light); font-size: 13px; }
.widget ul li:last-child { border-bottom: none; }
.widget a { color: var(--ac-text-2); }
.widget a:hover { color: var(--ac-pink); }
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a { padding: 4px 12px; background: var(--ac-bg); border-radius: var(--ac-radius-pill); font-size: 12px !important; color: var(--ac-text-2); transition: var(--ac-transition-fast); }
.tagcloud a:hover { background: rgba(253, 76, 131, 0.1); color: var(--ac-pink); }

/* ===== 褰掓。/鎼滅储 ===== */
.archive-header, .search-header { background: var(--ac-card); border-radius: var(--ac-radius-lg); padding: 20px 24px; margin-bottom: 16px; }
.archive-title, .search-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.archive-description, .search-count { font-size: 13px; color: var(--ac-text-3); }

/* 鎼滅储椤垫悳绱㈡ */
.vp-search-bar { margin-bottom: 20px; }
.vp-search-form { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; transition: all 0.2s; }
.vp-search-form:focus-within { border-color: #fd4c83; box-shadow: 0 4px 20px rgba(253,76,131,0.15); }
.vp-search-input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.vp-search-icon { font-size: 20px; color: #bbb; flex-shrink: 0; }
.vp-search-field { flex: 1; border: none; outline: none; font-size: 15px; padding: 10px 0; background: transparent; color: #333; }
.vp-search-field::placeholder { color: #ccc; }
.vp-search-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #fd4c83, #ff6b9d); color: #fff; border: none; border-radius: 10px; padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.vp-search-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253,76,131,0.35); }
.vp-search-btn ion-icon { font-size: 16px; }

/* 绛涢€夋爮 - 閲嶆柊璁捐 */
.videopro-filter-bar {
    background: var(--ac-card);
    border-radius: var(--ac-radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.filter-sort, .filter-categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-label {
    font-size: 13px;
    color: var(--ac-text-3);
    font-weight: 600;
    margin-right: 4px;
    flex-shrink: 0;
}
.sort-link, .cat-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    color: var(--ac-text-2);
    text-decoration: none;
    transition: all 0.2s;
    background: var(--ac-bg);
    border: 1px solid transparent;
}
.sort-link:hover, .cat-link:hover {
    color: var(--ac-pink);
    background: rgba(253,76,131,0.08);
}
.sort-link.active, .cat-link.active {
    background: linear-gradient(135deg, var(--ac-pink), var(--ac-purple));
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(253,76,131,0.25);
}
.filter-categories {
    padding-top: 12px;
    border-top: 1px solid var(--ac-border-light);
}

/* ===== 鍒嗛〉 ===== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; padding: 16px 0; }
.pagination .pagination-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; font-size: 14px; color: #666; font-weight: 500; transition: all 0.2s ease; text-decoration: none; cursor: pointer; }
.pagination .page-numbers:hover { border-color: #fd4c83; color: #fd4c83; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253,76,131,0.15); }
.pagination .page-numbers.current { background: linear-gradient(135deg, #fd4c83, #ff6b9d); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(253,76,131,0.35); }
.pagination .page-numbers.dots { border: none; background: transparent; cursor: default; box-shadow: none; transform: none; color: #ccc; }
.pagination .page-numbers.dots:hover { border: none; color: #ccc; transform: none; box-shadow: none; }
.pagination .prev.page-numbers, .pagination .next.page-numbers { font-size: 16px; }
.pagination-info { font-size: 13px; color: #999; padding-left: 8px; border-left: 1px solid #eee; margin-left: 4px; }
.videopro-pagination { margin-bottom: 8px; }

/* ===== 绌虹姸鎬?===== */
.no-videos { text-align: center; padding: 60px 20px; background: var(--ac-card); border-radius: var(--ac-radius-lg); }
.no-videos .vp-icon { font-size: 48px; color: var(--ac-text-3); margin-bottom: 16px; display: block; }
.no-videos h3 { font-size: 18px; color: var(--ac-text); margin-bottom: 8px; }
.no-videos p { font-size: 14px; color: var(--ac-text-3); margin-bottom: 20px; }

/* ===== 鎸夐挳 ===== */
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 20px; border-radius: var(--ac-radius); font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--ac-transition-fast); border: 1px solid transparent; }
.button-primary, .btn-primary { background: var(--ac-pink); color: #fff; }
.button-primary:hover, .btn-primary:hover { background: var(--ac-pink-hover); color: #fff; }
.button-secondary, .btn-secondary { background: var(--ac-card); border-color: var(--ac-border); color: var(--ac-text-2); }
.button-secondary:hover, .btn-secondary:hover { border-color: var(--ac-pink); color: var(--ac-pink); }

/* ===== 鍥炲埌椤堕儴 ===== */
.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px; background: var(--ac-card); border: 1px solid var(--ac-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ac-text-2); cursor: pointer; opacity: 0; visibility: hidden; transition: var(--ac-transition-fast); z-index: 999; box-shadow: var(--ac-shadow); font-size: 18px; }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { color: #fff; background: var(--ac-pink); border-color: var(--ac-pink); transform: translateY(-2px); box-shadow: var(--ac-shadow-pink); }

/* ===== 缁х画瑙傜湅鎻愮ず鏉?===== */
.videopro-resume-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(253,76,131,0.08), rgba(255,107,157,0.05));
    border: 1px solid rgba(253,76,131,0.2);
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.resume-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.resume-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--ac-pink), var(--ac-purple));
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    padding-left: 2px;
}
.resume-text {
    font-size: 14px;
    color: var(--ac-text);
    font-weight: 500;
}
.resume-actions {
    display: flex;
    gap: 10px;
}
.resume-btn {
    padding: 8px 18px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.resume-play {
    background: linear-gradient(135deg, var(--ac-pink), var(--ac-purple));
    color: #fff;
}
.resume-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(253,76,131,0.3);
}
.resume-restart {
    background: var(--ac-card);
    color: var(--ac-text-2);
    border: 1px solid var(--ac-border);
}
.resume-restart:hover {
    border-color: var(--ac-pink);
    color: var(--ac-pink);
}
@media (max-width: 768px) {
    .videopro-resume-bar { padding: 12px 14px; }
    .resume-text { font-size: 13px; }
    .resume-btn { padding: 6px 14px; font-size: 12px; }
}

/* ===== 妯悜婊氬姩瑙嗛鍒楄〃妯″潡锛圔绔欓鏍硷級 ===== */
.vp-horizontal-module {
    margin-bottom: 24px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
}
.dark-theme .vp-horizontal-module {
    background: #1a1a1a;
}
.vp-hz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.vp-hz-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vp-hz-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}
.vp-hz-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ac-text);
    margin: 0;
}
.vp-hz-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vp-hz-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    color: var(--ac-text-2);
    background: var(--ac-card);
    border: 1px solid var(--ac-border);
    cursor: pointer;
    transition: all 0.2s;
}
.vp-hz-refresh:hover {
    color: #fb7299;
    border-color: #fb7299;
    background: rgba(251,114,153,0.05);
}
.vp-hz-refresh.loading .vp-icon {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.vp-hz-nav-btns {
    display: flex;
    gap: 8px;
}
.vp-hz-prev, .vp-hz-next {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ac-card);
    border: 1px solid var(--ac-border);
    color: var(--ac-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}
.vp-hz-prev:hover, .vp-hz-next:hover {
    background: #fb7299;
    border-color: #fb7299;
    color: #fff;
}
.vp-hz-prev:disabled, .vp-hz-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.vp-hz-scroll-wrap {
    position: relative;
    overflow: hidden;
}
.vp-hz-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vp-hz-scroll::-webkit-scrollbar {
    display: none;
}
.vp-hz-card {
    flex-shrink: 0;
    width: 160px;
}
.vp-hz-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.vp-hz-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f5f7;
}
.vp-hz-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.vp-hz-card-link:hover .vp-hz-card-thumb img {
    transform: scale(1.05);
}
.vp-hz-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
    color: #ccc;
    font-size: 32px;
}
.vp-hz-card-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}
.vp-hz-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 10px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    pointer-events: none;
}
.vp-hz-card-title {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 妯悜婊氬姩妯″潡 - 鎵嬫満绔?*/
@media (max-width: 768px) {
    .vp-hz-title { font-size: 17px; }
    .vp-hz-refresh span:not(.vp-icon) { display: none; }
    .vp-hz-refresh { padding: 6px 10px; }
    .vp-hz-scroll {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px 6px;
        overflow-x: visible;
        padding-bottom: 0;
    }
    .vp-hz-card {
        width: 100%;
    }
    .vp-hz-card-title { font-size: 11px; }
    .vp-hz-nav-btns { display: none; }
    .vp-hz-card-overlay {
        padding: 16px 4px 4px;
    }
}

/* ===== 鐢ㄦ埛涓婚〉 ===== */
.vp-user-profile {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.dark-theme .vp-user-profile {
    background: #1a1a1a;
}
.vp-profile-header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.dark-theme .vp-profile-header {
    border-bottom-color: #333;
}
.vp-profile-avatar {
    flex-shrink: 0;
}
.vp-profile-avatar img,
.vp-profile-avatar .vp-letter-avatar {
    border-radius: 50%;
    border: 3px solid #fb7299;
}
.vp-profile-info {
    flex: 1;
    min-width: 0;
}
.vp-profile-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--ac-text);
    margin: 0 0 8px;
}
.vp-profile-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--ac-text-3);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.vp-profile-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}
.vp-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vp-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--ac-text);
}
.vp-stat-label {
    font-size: 12px;
    color: var(--ac-text-3);
    margin-top: 2px;
}
.vp-follow-btn {
    display: inline-block;
    padding: 8px 24px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.vp-follow-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,114,153,0.4);
}
.vp-follow-btn.followed {
    background: #f0f0f0;
    color: #666;
}
.dark-theme .vp-follow-btn.followed {
    background: #333;
    color: #999;
}
.vp-profile-bio {
    padding: 12px 16px;
    background: #f8f8f8;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ac-text-2);
    line-height: 1.6;
    margin-bottom: 24px;
}
.dark-theme .vp-profile-bio {
    background: #252525;
}
.vp-profile-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ac-text);
    margin: 0 0 16px;
    padding-left: 10px;
    border-left: 4px solid #fb7299;
}
.vp-profile-empty {
    text-align: center;
    padding: 40px;
    color: var(--ac-text-3);
    font-size: 14px;
}
.vp-avatar-link {
    display: inline-block;
    text-decoration: none;
}
.vp-avatar-link img,
.vp-avatar-link .vp-letter-avatar {
    display: block;
}

/* 鐢ㄦ埛涓婚〉 - 鎵嬫満绔?*/
@media (max-width: 768px) {
    .vp-user-profile { padding: 16px; }
    .vp-profile-header { flex-direction: column; align-items: center; text-align: center; }
    .vp-profile-meta { justify-content: center; }
    .vp-profile-stats { justify-content: center; }
    .vp-profile-name { font-size: 20px; }
}

/* ===== 寰俊寮忚亰澶╃晫闈?===== */
.vp-chat-container {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    height: 600px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.dark-theme .vp-chat-container {
    background: #1a1a1a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* 宸︿晶濂藉弸鍒楄〃 */
.vp-chat-sidebar {
    width: 280px;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #fafafa;
}
.dark-theme .vp-chat-sidebar {
    border-right-color: #333;
    background: #1e1e1e;
}
.vp-chat-search-box {
    display: flex;
    padding: 12px;
    gap: 8px;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.dark-theme .vp-chat-search-box {
    border-bottom-color: #333;
    background: #1a1a1a;
}
.vp-chat-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.vp-chat-search-icon {
    position: absolute;
    left: 12px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
}
.vp-chat-search-input {
    flex: 1;
    padding: 8px 12px 8px 36px;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    font-size: 13px;
    outline: none;
    background: #f5f5f5;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.vp-chat-search-input:focus {
    border-color: #fb7299;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(251,114,153,0.1);
}
.dark-theme .vp-chat-search-input {
    background: #252525;
    border-color: #444;
    color: #fff;
}
.dark-theme .vp-chat-search-input:focus {
    background: #2a2a2a;
}
.vp-chat-search-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.vp-chat-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,114,153,0.4);
}
.vp-chat-search-results {
    max-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.dark-theme .vp-chat-search-results {
    border-bottom-color: #333;
    background: #1a1a1a;
}
.vp-chat-friends-list {
    flex: 1;
    overflow-y: auto;
}
.vp-chat-list-title {
    padding: 10px 14px;
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    font-weight: 500;
}
.dark-theme .vp-chat-list-title {
    background: #222;
    color: #666;
}
.vp-chat-friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
}
.vp-chat-friend-item:hover {
    background: #f0f0f0;
}
.vp-chat-friend-item.active {
    background: #ffeef2;
    border-left: 3px solid #fb7299;
    padding-left: 11px;
}
.dark-theme .vp-chat-friend-item {
    border-bottom-color: #252525;
}
.dark-theme .vp-chat-friend-item:hover {
    background: #252525;
}
.dark-theme .vp-chat-friend-item.active {
    background: #3a2028;
}
.vp-chat-friend-avatar {
    position: relative;
    flex-shrink: 0;
}
.vp-chat-friend-avatar img,
.vp-chat-friend-avatar .vp-letter-avatar {
    border-radius: 8px;
}
.vp-chat-unread {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    border-radius: 9px;
    text-align: center;
    font-weight: 500;
}
.vp-chat-friend-info {
    flex: 1;
    min-width: 0;
}
.vp-chat-friend-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ac-text);
    margin-bottom: 3px;
}
.vp-chat-friend-last {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vp-chat-empty {
    padding: 40px 12px;
    text-align: center;
    color: #bbb;
    font-size: 13px;
}

/* 濂藉弸璇锋眰 */
.vp-chat-requests {
    border-bottom: 1px solid #eee;
}
.dark-theme .vp-chat-requests {
    border-bottom-color: #333;
}
.vp-chat-request-count {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    border-radius: 9px;
    text-align: center;
    margin-left: 6px;
}
.vp-chat-request-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f5f5f5;
}
.dark-theme .vp-chat-request-item {
    border-bottom-color: #252525;
}
.vp-chat-request-avatar img,
.vp-chat-request-avatar .vp-letter-avatar {
    border-radius: 6px;
}
.vp-chat-request-info {
    flex: 1;
    min-width: 0;
}
.vp-chat-request-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ac-text);
}
.vp-chat-request-uid {
    font-size: 11px;
    color: #999;
}
.vp-chat-request-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.vp-chat-request-accept,
.vp-chat-request-reject {
    padding: 4px 10px;
    border: none;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.vp-chat-request-accept {
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    color: #fff;
}
.vp-chat-request-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(251,114,153,0.4);
}
.vp-chat-request-reject {
    background: #f0f0f0;
    color: #999;
}
.vp-chat-request-reject:hover {
    background: #ff4d4f;
    color: #fff;
}
.dark-theme .vp-chat-request-reject {
    background: #333;
    color: #999;
}

/* 浼氬憳ID淇敼 */
.vp-member-id-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vp-current-id {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    color: #fff;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}
.vp-id-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}
.vp-id-status ion-icon {
    font-size: 14px;
}
.vp-id-status-pending {
    background: #fff7e6;
    color: #fa8c16;
}
.dark-theme .vp-id-status-pending {
    background: #3a2f1a;
    color: #faad14;
}

/* ID淇敼寮圭獥 */
.vp-id-change-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.vp-id-change-modal.active {
    display: flex;
}
.vp-id-change-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.dark-theme .vp-id-change-content {
    background: #1a1a1a;
}
.vp-id-change-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.dark-theme .vp-id-change-header {
    border-bottom-color: #333;
}
.vp-id-change-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--ac-text);
}
.vp-id-change-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.2s;
}
.vp-id-change-close:hover {
    background: #f0f0f0;
    color: #fb7299;
}
.dark-theme .vp-id-change-close:hover {
    background: #333;
}
.vp-id-change-body {
    padding: 20px;
}
.vp-id-change-body .vp-form-group {
    margin-bottom: 16px;
}
.vp-id-change-body .vp-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--ac-text);
    font-weight: 500;
}
.vp-id-change-body .vp-form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.vp-id-change-body .vp-form-group input:focus {
    border-color: #fb7299;
}
.dark-theme .vp-id-change-body .vp-form-group input {
    background: #252525;
    border-color: #444;
    color: #fff;
}
.vp-id-change-error {
    color: #ff4d4f;
    font-size: 13px;
    margin-top: 8px;
    display: none;
}
.vp-id-change-error.show {
    display: block;
}
.vp-id-change-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
}
.dark-theme .vp-id-change-footer {
    border-top-color: #333;
}

/* 闅愮璁剧疆 */
.vp-privacy-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f8f8;
    border-radius: 8px;
}
.dark-theme .vp-privacy-options {
    background: #252525;
}
.vp-privacy-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ac-text);
}
.vp-privacy-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #fb7299;
    cursor: pointer;
}

/* 鐢ㄦ埛灞曠ず椤礣ab */
.vp-profile-tabs {
    display: flex;
    gap: 8px;
    margin: 24px 0 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0;
}
.dark-theme .vp-profile-tabs {
    border-bottom-color: #333;
}
.vp-profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    color: #999;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.vp-profile-tab ion-icon {
    font-size: 18px;
}
.vp-profile-tab:hover {
    color: #fb7299;
}
.vp-profile-tab.active {
    color: #fb7299;
    border-bottom-color: #fb7299;
}

/* 闅愯棌鍐呭鎻愮ず */
.vp-profile-hidden {
    text-align: center;
    padding: 60px 20px;
    color: #bbb;
}
.vp-profile-hidden ion-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.vp-profile-hidden p {
    font-size: 15px;
    margin: 0;
}

/* 鐢ㄦ埛璇勮鍒楄〃 */
.vp-user-comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vp-user-comment-item {
    background: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.vp-user-comment-item:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.dark-theme .vp-user-comment-item {
    background: #1a1a1a;
}
.vp-user-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}
.vp-user-comment-post-title {
    font-size: 14px;
    font-weight: 600;
    color: #fb7299;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.vp-user-comment-post-title:hover {
    text-decoration: underline;
}
.vp-user-comment-time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
}
.vp-user-comment-content {
    font-size: 14px;
    color: var(--ac-text-2);
    line-height: 1.6;
    word-break: break-word;
}

/* 浼氬憳涓績鐢ㄦ埛鍒楄〃锛堝叧娉?绮変笣锛?*/
.vp-user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vp-user-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: all 0.2s;
}
.vp-user-list-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.dark-theme .vp-user-list-item {
    background: #1a1a1a;
}
.vp-user-list-avatar {
    flex-shrink: 0;
}
.vp-user-list-avatar img,
.vp-user-list-avatar .vp-letter-avatar {
    border-radius: 50%;
}
.vp-user-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vp-user-list-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ac-text);
    text-decoration: none;
}
.vp-user-list-name:hover {
    color: #fb7299;
}
.vp-user-list-uid {
    font-size: 12px;
    color: #fb7299;
    background: #fff0f5;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    width: fit-content;
}
.dark-theme .vp-user-list-uid {
    background: #3a2028;
}
.vp-user-list-join {
    font-size: 12px;
    color: #999;
}
.vp-user-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}
.vp-user-list-actions .vp-follow-btn {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 16px;
}
.vp-user-list-actions .vp-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* 鍙戝竷瑙嗛琛ㄥ崟 */
.vp-publish-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.vp-form-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s;
}
.dark-theme .vp-form-section {
    background: #222;
}
.vp-form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ac-text);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #fb7299;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.vp-form-section-title span {
    flex: 1;
}
.vp-section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vp-section-arrow {
    font-size: 20px;
    color: #999;
    transition: transform 0.3s;
    flex-shrink: 0;
}
.vp-form-section.collapsed .vp-form-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.vp-form-section.collapsed .vp-section-arrow {
    transform: rotate(0deg);
}
.vp-form-section:not(.collapsed) .vp-section-arrow {
    transform: rotate(180deg);
}
.vp-form-section-content {
    overflow: hidden;
    max-height: 5000px;
    transition: max-height 0.3s ease, margin 0.3s ease;
    margin-top: 16px;
}
.vp-form-section.collapsed .vp-form-section-content {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
}
.vp-publish-form .vp-form-group {
    margin-bottom: 16px;
}
.vp-publish-form .vp-form-group:last-child {
    margin-bottom: 0;
}
.vp-publish-form .vp-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ac-text);
}
.vp-publish-form .vp-form-group input[type="text"],
.vp-publish-form .vp-form-group input[type="url"],
.vp-publish-form .vp-form-group select,
.vp-publish-form .vp-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
}
.vp-publish-form .vp-form-group input:focus,
.vp-publish-form .vp-form-group select:focus,
.vp-publish-form .vp-form-group textarea:focus {
    border-color: #fb7299;
    box-shadow: 0 0 0 3px rgba(251,114,153,0.1);
}
.dark-theme .vp-publish-form .vp-form-group input,
.dark-theme .vp-publish-form .vp-form-group select,
.dark-theme .vp-publish-form .vp-form-group textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #fff;
}
.vp-form-row {
    display: flex;
    gap: 16px;
}
.vp-form-row .vp-form-group {
    flex: 1;
}
.vp-category-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.vp-category-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.vp-category-checkbox:hover {
    border-color: #fb7299;
    color: #fb7299;
}
.vp-category-checkbox input:checked + span,
.vp-category-checkbox:has(input:checked) {
    background: #fff0f5;
    border-color: #fb7299;
    color: #fb7299;
}
.dark-theme .vp-category-checkbox {
    background: #2a2a2a;
    border-color: #444;
}
.vp-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.vp-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    color: var(--ac-text);
}
.vp-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #fb7299;
    cursor: pointer;
}
.vp-episode-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.vp-episode-title {
    width: 120px;
    flex-shrink: 0;
}
.vp-episode-url {
    flex: 1;
}
.vp-episode-remove {
    padding: 8px 14px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.vp-episode-remove:hover {
    background: #d9363e;
}
.vp-form-actions {
    text-align: center;
    padding-top: 10px;
}
.vp-btn-lg {
    padding: 12px 48px;
    font-size: 16px;
}
.vp-form-desc {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}
.required {
    color: #ff4d4f;
}

/* 瑙嗛绠＄悊 */
.vp-video-manage-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.vp-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.vp-search-input {
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    width: 280px;
    outline: none;
    transition: border-color 0.2s;
}
.vp-search-input:focus {
    border-color: #fb7299;
    box-shadow: 0 0 0 3px rgba(251,114,153,0.1);
}
.dark-theme .vp-search-input {
    background: #2a2a2a;
    border-color: #444;
    color: #fff;
}
.vp-video-stats {
    font-size: 14px;
    color: #666;
}
.dark-theme .vp-video-stats {
    color: #aaa;
}
.vp-video-stats strong {
    color: #fb7299;
    font-size: 18px;
}
.vp-video-table-wrap {
    overflow-x: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dark-theme .vp-video-table-wrap {
    background: #222;
}
.vp-video-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.vp-video-table th {
    background: #f8f9fa;
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #eee;
    white-space: nowrap;
}
.dark-theme .vp-video-table th {
    background: #2a2a2a;
    color: #ddd;
    border-bottom-color: #444;
}
.vp-video-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.dark-theme .vp-video-table td {
    border-bottom-color: #333;
    color: #ddd;
}
.vp-video-table tr:hover td {
    background: #fafafa;
}
.dark-theme .vp-video-table tr:hover td {
    background: #2a2a2a;
}
.vp-video-thumb img {
    width: 80px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}
.vp-no-thumb {
    width: 80px;
    height: 50px;
    background: #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
}
.vp-video-title-cell a {
    color: #333;
    font-weight: 500;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 300px;
}
.dark-theme .vp-video-title-cell a {
    color: #ddd;
}
.vp-video-title-cell a:hover {
    color: #fb7299;
}
.vp-video-cats {
    color: #666;
    font-size: 13px;
}
.vp-video-views {
    color: #fb7299;
    font-weight: 600;
}
.vp-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}
.vp-status-publish {
    background: #e8f5e9;
    color: #4caf50;
}
.vp-status-draft {
    background: #fff3e0;
    color: #ff9800;
}
.vp-status-pending {
    background: #e3f2fd;
    color: #2196f3;
}
.vp-video-date {
    color: #999;
    font-size: 13px;
    white-space: nowrap;
}
.vp-video-actions {
    white-space: nowrap;
}
.vp-video-actions .vp-btn {
    margin-right: 6px;
}
.vp-btn-danger {
    background: #ff4d4f;
    color: #fff;
}
.vp-btn-danger:hover {
    background: #d9363e;
}
.vp-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.vp-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.vp-page-btn:hover {
    border-color: #fb7299;
    color: #fb7299;
}
.vp-page-btn.current {
    background: #fb7299;
    border-color: #fb7299;
    color: #fff;
}
.vp-page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.vp-page-info {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    color: #666;
}
.vp-page-info strong {
    color: #fb7299;
    margin: 0 2px;
}
.vp-page-jump-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
}
.vp-page-jump-text {
    font-size: 14px;
    color: #666;
}
.vp-page-jump-input {
    width: 60px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}
.vp-page-jump-input:focus {
    border-color: #fb7299;
}
.vp-page-jump-btn {
    cursor: pointer;
    background: #fff;
}
.dark-theme .vp-page-btn {
    border-color: #444;
    color: #aaa;
}
.dark-theme .vp-page-info,
.dark-theme .vp-page-jump-text {
    color: #aaa;
}
.dark-theme .vp-page-jump-input {
    background: #232326;
    border-color: #444;
    color: #ddd;
}
.dark-theme .vp-page-jump-btn {
    background: #232326;
}
.vp-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.vp-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}
.vp-empty-state p {
    font-size: 16px;
}

/* 鍥剧墖涓婁紶 */
.vp-image-upload-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.vp-image-upload-row input[type="url"] {
    flex: 1;
    min-width: 200px;
}
.vp-image-preview {
    margin-top: 10px;
}
.vp-image-preview img {
    max-width: 200px;
    border-radius: 8px;
    border: 1px solid #ddd;
}
.dark-theme .vp-image-preview img {
    border-color: #444;
}

/* 鍙充晶鑱婂ぉ鐣岄潰 */
.vp-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f5f5f5;
}
.dark-theme .vp-chat-main {
    background: #151515;
}
.vp-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
}
.dark-theme .vp-chat-header {
    border-bottom-color: #333;
    background: #1a1a1a;
}
.vp-chat-header-avatar img,
.vp-chat-header-avatar .vp-letter-avatar {
    border-radius: 8px;
}
.vp-chat-header-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ac-text);
    flex: 1;
}
.vp-chat-back-btn,
.vp-chat-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #999;
    font-size: 20px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.vp-chat-back-btn:hover,
.vp-chat-close-btn:hover {
    background: #f0f0f0;
    color: #fb7299;
}
.dark-theme .vp-chat-back-btn:hover,
.dark-theme .vp-chat-close-btn:hover {
    background: #333;
}
.vp-chat-back-btn {
    display: none;
}
.vp-chat-back-btn ion-icon,
.vp-chat-close-btn ion-icon {
    font-size: 20px;
    pointer-events: none;
}
.vp-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vp-chat-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 70%;
}
.vp-chat-msg.mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.vp-chat-msg-avatar img,
.vp-chat-msg-avatar .vp-letter-avatar {
    border-radius: 6px;
}
.vp-chat-msg-bubble {
    max-width: 100%;
}
.vp-chat-msg-text {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    position: relative;
}
.vp-chat-msg.other .vp-chat-msg-text {
    background: #fff;
    color: #333;
    border-top-left-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.dark-theme .vp-chat-msg.other .vp-chat-msg-text {
    background: #2a2a2a;
    color: #ddd;
}
.vp-chat-msg.mine .vp-chat-msg-text {
    background: #95ec69;
    color: #333;
    border-top-right-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.vp-chat-msg-time {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}
.vp-chat-msg.mine .vp-chat-msg-time {
    text-align: right;
}
.vp-chat-no-msg {
    text-align: center;
    color: #bbb;
    padding: 60px 20px;
    font-size: 14px;
}
.vp-chat-input-area {
    border-top: 1px solid #e8e8e8;
    padding: 12px 20px;
    background: #fff;
}
.dark-theme .vp-chat-input-area {
    border-top-color: #333;
    background: #1a1a1a;
}
.vp-chat-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 10px;
    background: #fafafa;
    transition: all 0.2s;
    line-height: 1.5;
}
.vp-chat-input:focus {
    border-color: #fb7299;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(251,114,153,0.1);
}
.dark-theme .vp-chat-input {
    background: #252525;
    border-color: #444;
    color: #fff;
}
.dark-theme .vp-chat-input:focus {
    background: #2a2a2a;
}
.vp-chat-input-actions {
    text-align: right;
}
.vp-chat-send-btn {
    padding: 8px 28px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.vp-chat-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,114,153,0.4);
}
.vp-chat-send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.vp-chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
}
.vp-chat-placeholder-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.4;
}

/* 鎼滅储缁撴灉椤?*/
.vp-friend-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}
.vp-friend-result-item:hover {
    background: #f5f5f5;
}
.vp-friend-result-item img {
    border-radius: 6px;
}
.vp-friend-result-info {
    flex: 1;
    min-width: 0;
}
.vp-friend-result-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ac-text);
    text-decoration: none;
    display: block;
}
.vp-friend-result-uid {
    font-size: 11px;
    color: #999;
}
.vp-friend-result-add {
    padding: 5px 14px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.vp-friend-result-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(251,114,153,0.4);
}

/* 鑱婂ぉ鐣岄潰鎵嬫満绔€傞厤 */
@media (max-width: 768px) {
    .vp-chat-container {
        height: calc(100vh - 200px);
        min-height: 400px;
        border-radius: 8px;
    }
    .vp-chat-sidebar {
        width: 100%;
        display: none;
    }
    .vp-chat-sidebar.show {
        display: flex;
    }
    .vp-chat-main {
        width: 100%;
        display: none;
    }
    .vp-chat-main.show {
        display: flex;
    }
    .vp-chat-back-btn {
        display: flex;
    }
    .vp-chat-close-btn {
        display: none;
    }
    .vp-chat-msg {
        max-width: 85%;
    }
    .vp-chat-messages {
        padding: 12px;
    }
}

/* 绉佷俊寮圭獥 */
.vp-message-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.vp-message-modal.active {
    display: flex;
}
.vp-message-modal-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
}
.dark-theme .vp-message-modal-content {
    background: #1a1a1a;
}
.vp-message-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.dark-theme .vp-message-modal-header {
    border-bottom-color: #333;
}
.vp-message-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--ac-text);
}
.vp-message-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.vp-message-modal-body {
    padding: 20px;
}
.vp-message-text {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.vp-message-text:focus {
    border-color: #fb7299;
}
.dark-theme .vp-message-text {
    background: #252525;
    border-color: #444;
    color: #fff;
}
.vp-message-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    text-align: right;
}
.dark-theme .vp-message-modal-footer {
    border-top-color: #333;
}
.vp-message-send {
    padding: 8px 24px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

/* 鐢ㄦ埛灞曠ず椤垫搷浣滄寜閽?*/
.vp-profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.vp-message-btn,
.vp-add-friend-btn {
    padding: 8px 20px;
    background: #f0f0f0;
    color: #666;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.vp-message-btn:hover,
.vp-add-friend-btn:hover {
    background: #fb7299;
    color: #fff;
}
.dark-theme .vp-message-btn,
.dark-theme .vp-add-friend-btn {
    background: #333;
    color: #999;
}
.vp-friend-badge {
    padding: 8px 16px;
    background: #52c41a;
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
}

/* ===== Toast ===== */
.toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px); background: var(--ac-text); color: #fff; padding: 10px 24px; border-radius: var(--ac-radius-pill); font-size: 14px; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: var(--ac-shadow-lg); }
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ===== 椤佃剼 ===== */
.site-footer { background: var(--ac-footer-bg, #18191c); color: var(--ac-footer-text, #9499a0); margin-top: 40px; }
.footer-inner { max-width: var(--ac-container); margin: 0 auto; padding: 40px 20px 24px; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.footer-link-group h4 { font-size: 14px; font-weight: 600; color: #e3e5e7; margin-bottom: 14px; }
.footer-link-group ul li { margin-bottom: 10px; font-size: 13px; }
.footer-link-group a { color: #9499a0; transition: var(--ac-transition-fast); }
.footer-link-group a:hover { color: var(--ac-pink); }
.footer-social { display: flex; gap: 12px; margin-bottom: 20px; }
.footer-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border-radius: 50%; color: #9499a0; font-size: 16px; transition: var(--ac-transition-fast); }
.footer-social a:hover { background: var(--ac-pink); color: #fff; transform: translateY(-2px); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #61666d; }
.footer-bottom a { color: #61666d; }
.footer-bottom a:hover { color: var(--ac-pink); }
.footer-copyright { display: flex; align-items: center; gap: 8px; }
.footer-logo-text { font-size: 18px; font-weight: 900; font-style: italic; background: linear-gradient(135deg, #fd4c83, #ff6b9d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-links-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-link-item { color: #9499a0; font-size: 13px; text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.footer-link-item:hover { color: var(--ac-pink); }
@media (max-width: 768px) {
    .footer-links-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 16px 16px;
        gap: 16px;
    }
    .footer-links-row::-webkit-scrollbar { display: none; }
    .footer-link-item { flex-shrink: 0; font-size: 12px; }
}

/* ===== 娣辫壊妯″紡 ===== */
body.dark-theme { --ac-bg: #0f0f11; --ac-card: #1a1a1d; --ac-text: #e3e5e7; --ac-text-2: #a9acb0; --ac-text-3: #61666d; --ac-border: #2a2a2e; --ac-border-light: #232326; }
body.dark-theme .acfun-header { background: #1a1a1d; border-bottom-color: var(--ac-border-light); }
body.dark-theme .acfun-search .search-field { background: #232326; color: var(--ac-text); }
body.dark-theme .acfun-search .search-field:focus { background: #1a1a1d; }
body.dark-theme .acfun-ranking, body.dark-theme .widget, body.dark-theme .video-info-card, body.dark-theme .up-info-card, body.dark-theme .video-desc-card, body.dark-theme .comments-card, body.dark-theme .archive-header, body.dark-theme .search-header, body.dark-theme .filter-bar, body.dark-theme .no-videos { background: var(--ac-card); }
body.dark-theme .action-btn { background: var(--ac-card); border-color: var(--ac-border); color: var(--ac-text-2); }
body.dark-theme .pagination .page-numbers { background: #232326; border-color: #333; color: #aaa; }
body.dark-theme .pagination .page-numbers:hover { border-color: #fd4c83; color: #fd4c83; }
body.dark-theme .pagination .page-numbers.current { background: linear-gradient(135deg, #fd4c83, #ff6b9d); color: #fff; }
body.dark-theme .pagination .page-numbers.dots { background: transparent; color: #555; }
body.dark-theme .pagination-info { color: #777; border-left-color: #333; }
body.dark-theme .vp-search-form { background: #232326; border-color: #333; }
body.dark-theme .vp-search-field { color: #eee; }
body.dark-theme .vp-search-field::placeholder { color: #666; }
body.dark-theme .vp-search-icon { color: #666; }
body.dark-theme .video-tag, body.dark-theme .tagcloud a { background: #232326; }
body.dark-theme .filter-item select { background: #232326; color: var(--ac-text); border-color: var(--ac-border); }
body.dark-theme .comment-form textarea { background: #232326; color: var(--ac-text); border-color: var(--ac-border); }
body.dark-theme .comment-form textarea:focus { background: #1a1a1d; }
body.dark-theme .site-footer { background: #0a0a0c; }
body.dark-theme .back-to-top { background: var(--ac-card); border-color: var(--ac-border); color: var(--ac-text-2); }
body.dark-theme .ranking-item:hover { background: #232326; }

/* ===== 鍝嶅簲寮?===== */
@media (max-width: 1400px) { .acfun-video-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1200px) { .acfun-video-grid { grid-template-columns: repeat(3, 1fr); } .acfun-ranking { width: 300px; } .video-detail-sidebar { width: 280px; } }
@media (max-width: 1024px) { .acfun-nav { display: none; } .mobile-menu-toggle { display: flex; } .acfun-hero { flex-direction: column; } .acfun-ranking { width: 100%; } .acfun-carousel { aspect-ratio: 16/8; } .video-detail-layout { flex-direction: column; } .video-detail-sidebar { width: 100%; } .footer-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .container { padding: 0 12px; width: 100%; max-width: 100%; } .acfun-header { height: 54px; } .acfun-header .header-inner { height: 54px; } .acfun-logo .logo-text { font-size: 20px; } .acfun-search { display: none; } .btn-upload span:not(.vp-icon) { display: none; } .btn-upload { padding: 0 12px; } .acfun-hero { gap: 12px; margin-bottom: 20px; } .carousel-title { font-size: 16px; } .carousel-info { padding: 30px 16px 14px; } .video-detail-layout { gap: 16px; } .video-detail-main { width: 100%; max-width: 100%; } .acfun-video-grid { grid-template-columns: repeat(4, 1fr); gap: 8px 6px; width: 100%; } .acfun-video-card { width: 100%; max-width: 100%; } .acfun-card-title { font-size: 11px; min-height: 2.2em; line-height: 1.3; } .acfun-card-up { font-size: 10px; } .acfun-card-stats { font-size: 10px; gap: 8px; } .acfun-section { margin-bottom: 24px; } .acfun-section-title { font-size: 17px; } .video-info-card, .up-info-card, .video-desc-card, .comments-card { padding: 14px 12px; } .comment-body { padding: 12px; } .comment-form { padding: 14px 12px; } .comment-form::before { left: 12px; } .comment-avatar { width: 36px; height: 36px; font-size: 14px; } .archive-header, .search-header { padding: 14px 16px; width: 100%; } .archive-title, .search-title { font-size: 17px; } .videopro-filter-bar { padding: 12px 14px; gap: 10px; width: 100%; overflow: hidden; } .filter-sort, .filter-categories { gap: 6px; width: 100%; } .sort-link, .cat-link { padding: 5px 10px; font-size: 12px; flex-shrink: 0; } .filter-categories { padding-top: 10px; } .video-info-title { font-size: 17px; } .footer-links { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; text-align: center; } .site-content { padding: 12px 0 32px; } .pagination { gap: 6px; margin-top: 20px; padding: 10px 0; } .pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 10px; font-size: 13px; border-radius: 8px; } .pagination-info { display: none; } .vp-search-form { padding: 6px; gap: 8px; } .vp-search-input-wrap { padding: 0 12px; } .vp-search-field { font-size: 14px; padding: 8px 0; } .vp-search-btn { padding: 8px 16px; font-size: 13px; } .vp-search-btn span { display: none; } .vp-search-btn ion-icon { font-size: 18px; } } }
@media (max-width: 480px) { .acfun-video-grid { grid-template-columns: repeat(4, 1fr); gap: 6px 4px; } .acfun-card-title { font-size: 10px; } .video-actions { gap: 8px; } .action-btn { padding: 0 12px; height: 34px; font-size: 13px; } }

/* ===== AcFun 椋庢牸澶氶泦鎾斁鍒楄〃 ===== */
.videopro-episode-list {
    background: var(--ac-card);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.episode-list-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ac-text);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.episode-list-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, var(--ac-pink), var(--ac-purple));
    border-radius: 2px;
}
.episode-count {
    font-size: 13px;
    font-weight: 400;
    color: var(--ac-text-3);
}
.episode-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}
.episode-grid::-webkit-scrollbar { width: 4px; }
.episode-grid::-webkit-scrollbar-thumb { background: var(--ac-border); border-radius: 2px; }
.episode-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ac-bg);
    border: 1px solid var(--ac-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--ac-transition-fast);
    font-size: 13px;
    color: var(--ac-text-2);
    user-select: none;
    min-width: 80px;
    justify-content: center;
}
.episode-item:hover {
    border-color: var(--ac-pink);
    color: var(--ac-pink);
    background: rgba(253, 76, 131, 0.06);
    transform: translateY(-1px);
}
.episode-item.active {
    background: linear-gradient(135deg, var(--ac-pink), var(--ac-purple));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.episode-num {
    font-weight: 600;
    white-space: nowrap;
}
.episode-empty {
    padding: 20px;
    text-align: center;
    color: var(--ac-text-3);
    font-size: 13px;
    background: var(--ac-bg);
    border-radius: 8px;
}
.episode-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
.episode-duration {
    font-size: 11px;
    opacity: 0.7;
    white-space: nowrap;
}
.episode-thumb { display: none; }
.episode-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== 绉诲姩绔娊灞夎彍鍗?===== */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 80vw;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}
.mobile-menu-drawer.active {
    transform: translateX(0);
}
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ac-border-light);
    background: linear-gradient(135deg, var(--ac-pink), var(--ac-purple));
}
.mobile-menu-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}
.mobile-menu-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s;
}
.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.35);
}
.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}
.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-nav-list li {
    margin: 0;
    padding: 0;
}
.mobile-nav-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--ac-text);
    text-decoration: none;
    font-size: 15px;
    transition: background 0.2s, color 0.2s;
    border-left: 3px solid transparent;
}
.mobile-nav-list li a:hover {
    background: rgba(253, 76, 131, 0.06);
    color: var(--ac-pink);
    border-left-color: var(--ac-pink);
}
.mobile-nav-list li a .vp-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: var(--ac-text-3);
}
.mobile-nav-list li a:hover .vp-icon {
    color: var(--ac-pink);
}
body.dark-theme .mobile-menu-drawer {
    background: #1a1a1d;
}
body.dark-theme .mobile-nav-list li a {
    color: #e3e5e7;
}
body.dark-theme .mobile-nav-list li a:hover {
    background: rgba(253, 76, 131, 0.1);
}
body.dark-theme .mobile-menu-content {
    border-top-color: #2a2a2d;
}

/* ============================================
   B绔欓鏍?鍒嗗尯+鎺掕姒滄ā鍧?
   ============================================ */
.vp-bilibili-module {
    margin-bottom: 24px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
}
.dark-theme .vp-bilibili-module {
    background: #1a1a1a;
}
.vp-bili-container {
    display: flex;
    gap: 20px;
}
/* 鏃犱晶鏍廈绔欓鏍兼ā鍧?*/
.vp-bili-no-sidebar {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}
.dark-theme .vp-bili-no-sidebar {
    background: #1a1a1a;
}
.vp-bili-no-sidebar .vp-bili-header {
    margin-bottom: 16px;
}
.vp-bili-left {
    flex: 1;
    min-width: 0;
}
.vp-bili-right {
    width: 300px;
    flex-shrink: 0;
}

/* 宸︿晶澶撮儴 */
.vp-bili-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.vp-bili-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vp-bili-cat-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #fb7299, #ff85ad);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}
.vp-bili-cat-title {
    font-size: 20px;
    font-weight: 700;
    color: #18191c;
    margin: 0;
}
.vp-bili-refresh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid #e3e5e7;
    border-radius: 14px;
    background: #fff;
    color: #61666d;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.vp-bili-refresh:hover {
    border-color: #fb7299;
    color: #fb7299;
}
.vp-bili-refresh.loading .vp-icon-refresh {
    animation: vp-icon-spin 0.8s linear infinite;
}
.vp-bili-more {
    color: #9499a0;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.vp-bili-more:hover {
    color: #fb7299;
}

/* 宸︿晶瑙嗛缃戞牸 */
.vp-bili-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px 12px;
}
.vp-bili-card {
    overflow: hidden;
}
.vp-bili-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.vp-bili-card-thumb {
    position: relative;
    width: 100%;
    padding-top: 150%;
    border-radius: 6px;
    overflow: hidden;
    background: #f4f5f7;
}
.vp-bili-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.vp-bili-card-link:hover .vp-bili-card-thumb img {
    transform: scale(1.05);
}
.vp-bili-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 10px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    pointer-events: none;
}
.vp-bili-card-overlay .vp-bili-card-title {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: auto;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.vp-bili-card-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}
.vp-bili-card-cat {
    display: none;
}
.vp-bili-card-title {
    font-size: 14px;
    font-weight: 500;
    color: #18191c;
    margin: 8px 0 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px;
    transition: color 0.2s;
}
.vp-bili-card-link:hover .vp-bili-card-title {
    color: #fb7299;
}
.vp-bili-card-stats {
    display: none;
}
.vp-bili-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: #9499a0;
}

/* 鍙充晶鎺掕姒?*/
.vp-bili-ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.vp-bili-ranking-title {
    font-size: 18px;
    font-weight: 700;
    color: #18191c;
    margin: 0;
}
.vp-bili-ranking-tabs {
    display: flex;
    gap: 4px;
}
.vp-bili-tab {
    padding: 3px 10px;
    border: none;
    background: transparent;
    color: #61666d;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}
.vp-bili-tab:hover {
    color: #fb7299;
}
.vp-bili-tab.active {
    background: #fb7299;
    color: #fff;
}

/* 鎺掕姒滃垪琛?*/
.vp-bili-ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vp-bili-ranking-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f4f5f7;
}
.vp-bili-ranking-item:last-child {
    border-bottom: none;
}
.vp-bili-rank-num {
    width: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #9499a0;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 2px;
}
.vp-bili-rank-num.top1 { color: #fb7299; }
.vp-bili-rank-num.top2 { color: #ff8c42; }
.vp-bili-rank-num.top3 { color: #ffc842; }
.vp-bili-rank-thumb {
    width: 100px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}
.vp-bili-rank-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vp-bili-rank-info {
    flex: 1;
    min-width: 0;
}
.vp-bili-rank-title {
    font-size: 13px;
    color: #18191c;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.vp-bili-rank-title:hover {
    color: #fb7299;
}
.vp-bili-rank-up {
    display: block;
    font-size: 11px;
    color: #9499a0;
    margin-top: 3px;
}
.vp-bili-rank-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #9499a0;
    margin-top: 3px;
}
.vp-bili-rank-stats .vp-icon {
    font-size: 11px;
    margin-right: 2px;
}
.vp-bili-ranking-empty {
    text-align: center;
    padding: 20px 0;
    color: #9499a0;
    font-size: 13px;
}
.vp-bili-ranking-more-btn {
    display: block;
    text-align: center;
    padding: 8px;
    margin-top: 12px;
    background: #f4f5f7;
    border-radius: 4px;
    color: #61666d;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.vp-bili-ranking-more-btn:hover {
    background: #fb7299;
    color: #fff;
}

/* 鍝嶅簲寮?*/
@media (max-width: 1200px) {
    .vp-bili-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 900px) {
    .vp-bili-container {
        flex-direction: column;
    }
    .vp-bili-right {
        width: 100%;
    }
    .vp-bili-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* 鎵嬫満绔殣钘忔帓琛屾 */
    .vp-mobile-hide-ranking {
        display: none !important;
    }
}
@media (max-width: 600px) {
    .vp-bili-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px 6px;
    }
    .vp-bili-card-overlay {
        padding: 16px 6px 4px;
    }
    .vp-bili-card-overlay .vp-bili-card-title {
        font-size: 10px;
        line-height: 1.2;
        -webkit-line-clamp: 1;
    }
    .vp-bilibili-module,
    .vp-bili-no-sidebar {
        padding: 12px;
    }
}

/* 娣辫壊妯″紡 */
body.dark-theme .vp-bilibili-module,
body.dark-theme .vp-bili-no-sidebar {
    background: #1a1a1a;
}
body.dark-theme .vp-bili-cat-title,
body.dark-theme .vp-bili-ranking-title,
body.dark-theme .vp-bili-card-title,
body.dark-theme .vp-bili-rank-title {
    color: #e3e5e7;
}
body.dark-theme .vp-bili-card-overlay .vp-bili-card-title {
    color: #fff;
}
body.dark-theme .vp-bili-refresh {
    background: #2a2a2d;
    border-color: #3a3a3d;
    color: #9499a0;
}
body.dark-theme .vp-bili-card-thumb {
    background: #2a2a2d;
}
body.dark-theme .vp-bili-ranking-item {
    border-bottom-color: #2a2a2d;
}
body.dark-theme .vp-bili-ranking-more-btn {
    background: #2a2a2d;
    color: #9499a0;
}
body.dark-theme .vp-bili-ranking-more-btn:hover {
    background: #fb7299;
    color: #fff;
}

/* 鎵嬫満绔殣钘忎晶杈规爮 */
@media (max-width: 768px) {
    body.mobile-no-sidebar #secondary,
    body.mobile-no-sidebar .widget-area {
        display: none !important;
    }
    body.mobile-no-sidebar .content-area,
    body.mobile-no-sidebar #primary {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
}

/* 鎵嬫満绔殣钘忕儹闂ㄦ鍗?*/
@media (max-width: 768px) {
    body.mobile-no-hot-ranking .vp-hot-ranking-widget {
        display: none !important;
    }
}

/* Ionicons 鍥炬爣鍩虹鏍峰紡 */
ion-icon {
    display: inline-block;
    vertical-align: middle;
    font-size: 1em;
    line-height: 1;
    color: inherit;
    --ionicon-stroke-width: 48px;
}
/* 瀵艰埅鏍忓浘鏍囩粺涓€澶у皬 */
.header-actions ion-icon {
    font-size: 20px;
}
.mobile-search-toggle ion-icon {
    font-size: 18px;
}
.theme-toggle ion-icon {
    font-size: 18px;
}
/* 浼氬憳鑿滃崟鍥炬爣 */
.vp-member-nav-item ion-icon {
    font-size: 18px;
    flex-shrink: 0;
}
/* 瑙嗛鍗＄墖鍥炬爣 */
.video-info-meta ion-icon,
.video-actions ion-icon {
    font-size: 16px;
}
/* 妯″潡鏍囬鍥炬爣 */
.vp-module-title ion-icon,
.module-header ion-icon {
    font-size: 20px;
}

/* 妯″潡绾ф墜鏈虹闅愯棌 */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* 鐢佃剳绔殣钘忥紝鎵嬫満绔樉绀?*/
.show-on-mobile {
    display: none !important;
}
@media (max-width: 768px) {
    .show-on-mobile {
        display: inline-flex !important;
    }
    .mobile-scroll-nav.show-on-mobile {
        display: block !important;
    }
}

/* 鎵嬫満绔í鍚戞粴鍔ㄥ鑸爮 */
.mobile-scroll-nav {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 99;
}
.mobile-scroll-nav-inner {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 12px;
}
.mobile-scroll-nav-inner::-webkit-scrollbar {
    display: none;
}
.mobile-scroll-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
}
.mobile-scroll-nav li {
    flex-shrink: 0;
}
.mobile-scroll-nav li a {
    display: block;
    padding: 12px 14px;
    font-size: 14px;
    color: #61666d;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
}
.mobile-scroll-nav li a:hover,
.mobile-scroll-nav li.current-menu-item a,
.mobile-scroll-nav li.current_page_item a {
    color: #fb7299;
}
.mobile-scroll-nav li.current-menu-item a::after,
.mobile-scroll-nav li.current_page_item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #fb7299;
    border-radius: 1px;
}
.dark-theme .mobile-scroll-nav {
    background: #1a1a1a;
    border-bottom-color: #333;
}
.dark-theme .mobile-scroll-nav li a {
    color: #aaa;
}
.dark-theme .mobile-scroll-nav li a:hover,
.dark-theme .mobile-scroll-nav li.current-menu-item a {
    color: #fb7299;
}

/* 鎵嬫満绔悳绱㈡寜閽?*/
.mobile-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    margin-left: 4px;
    color: #666;
    font-size: 16px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}
.mobile-search-toggle:hover {
    background: rgba(251,114,153,0.1);
    color: #fb7299;
}
.mobile-search-toggle .vp-icon {
    font-size: 16px;
    line-height: 1;
}
.dark-theme .mobile-search-toggle {
    color: #ccc;
}

/* 鎵嬫満绔笅鎷夋悳绱㈡ */
.mobile-search-bar {
    display: none;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    position: relative;
    z-index: 100;
}
.mobile-search-bar.active {
    display: block;
}
.mobile-search-bar .search-form {
    display: flex;
    width: 100%;
}
.mobile-search-bar .search-field {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #e3e5e7;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
    outline: none;
}
.mobile-search-bar .search-field:focus {
    border-color: #fb7299;
}
.mobile-search-bar .search-submit {
    background: #fb7299;
    color: #fff;
    border: none;
    padding: 0 18px;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    font-size: 16px;
}
.dark-theme .mobile-search-bar {
    background: #1a1a1a;
    border-bottom-color: #333;
}
.dark-theme .mobile-search-bar .search-field {
    background: #2a2a2a;
    border-color: #444;
    color: #eee;
}

/* ============================================================
   浼氬憳绯荤粺鏍峰紡
   ============================================================ */

/* 閫氱敤鎸夐挳 */
.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1.4;
}
.vp-btn-primary {
    background: linear-gradient(135deg, #fb7299, #ff8fab);
    color: #fff;
}
.vp-btn-primary:hover {
    background: linear-gradient(135deg, #e85c85, #fb7299);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,114,153,0.4);
}
.vp-btn-block {
    width: 100%;
}
.vp-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}
.vp-btn-outline {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
}
.vp-btn-outline:hover {
    border-color: #fb7299;
    color: #fb7299;
}
.vp-btn-vip {
    background: linear-gradient(135deg, #f5a623, #f7c948);
    color: #fff;
}
.vp-btn-vip:hover {
    background: linear-gradient(135deg, #e0941a, #f5a623);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245,166,35,0.4);
}

/* 鐧诲綍娉ㄥ唽椤碉細闅愯棌椤甸潰鏍囬鍜屼晶杈规爮 */
.vp-auth-page .entry-title,
.vp-auth-page .post-title,
.vp-auth-page h1.entry-title,
.vp-auth-page .page-title,
.vp-auth-page .entry-header h1,
.vp-auth-page .entry-header,
.vp-auth-page article.page > header,
.vp-auth-page .post-header,
.vp-auth-page .article-header,
.vp-auth-page .content-area > h1,
.vp-auth-page .site-main > h1,
.vp-auth-page #primary > h1,
.vp-auth-page .widget-area,
.vp-auth-page #secondary,
.vp-auth-page .sidebar,
.vp-auth-page #primary > .page-header,
.vp-auth-page .search-form,
.vp-auth-page #searchform,
.vp-auth-page .widget_search,
.vp-auth-page .widget_recent_entries,
.vp-auth-page .widget_archive,
.vp-auth-page .widget_categories,
.vp-auth-page .widget_meta,
.vp-auth-page .widget {
    display: none !important;
}
.vp-auth-page .site-content {
    max-width: 100%;
}
.vp-auth-page .content-area {
    width: 100%;
    float: none;
}
.vp-auth-page article.page,
.vp-auth-page article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 鐧诲綍娉ㄥ唽椤?*/
.vp-auth-wrap {
    max-width: 440px;
    margin: 40px auto;
    padding: 0 20px;
}
.vp-auth-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.vp-auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.vp-auth-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #18191c;
    margin: 0 0 8px;
}
.vp-auth-header p {
    color: #9499a0;
    font-size: 14px;
    margin: 0;
}
.vp-auth-error {
    background: #fff0f0;
    color: #e54d42;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}
.vp-auth-success {
    background: #f0fff4;
    color: #34c759;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}
.vp-auth-form .vp-form-group {
    margin-bottom: 18px;
}
.vp-auth-form label {
    display: block;
    font-size: 13px;
    color: #61666d;
    margin-bottom: 6px;
    font-weight: 500;
}
.vp-auth-form input[type="text"],
.vp-auth-form input[type="email"],
.vp-auth-form input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e3e5e7;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.vp-auth-form input:focus {
    outline: none;
    border-color: #fb7299;
    box-shadow: 0 0 0 3px rgba(251,114,153,0.1);
}
.vp-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13px;
}
.vp-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #61666d;
    cursor: pointer;
}
.vp-forgot-link {
    color: #fb7299;
    text-decoration: none;
}
.vp-forgot-link:hover {
    text-decoration: underline;
}
.vp-form-tip {
    background: #f7f8fa;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    color: #9499a0;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vp-form-tip .vp-icon {
    color: #fb7299;
}
.vp-auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: #9499a0;
}
.vp-auth-footer a {
    color: #fb7299;
    text-decoration: none;
    font-weight: 500;
}
.vp-auth-footer a:hover {
    text-decoration: underline;
}
.required {
    color: #e54d42;
}
.vp-member-notice {
    max-width: 600px;
    margin: 60px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.vp-member-notice a {
    color: #fb7299;
    font-weight: 500;
}

/* 浼氬憳涓績甯冨眬 */
.vp-member-center {
    display: flex;
    gap: 20px;
    max-width: 960px;
    margin: 24px auto;
    padding: 0 16px;
}
.vp-member-sidebar {
    width: 200px;
    flex-shrink: 0;
}
.vp-member-profile-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.vp-member-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
    border: 3px solid #fb7299;
}
.vp-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vp-member-name {
    font-size: 16px;
    font-weight: 600;
    color: #18191c;
    margin-bottom: 4px;
}
.vp-member-id {
    font-size: 12px;
    color: #9499a0;
    margin-bottom: 10px;
}
.vp-vip-badge-normal {
    display: inline-block;
    padding: 3px 10px;
    background: #f4f5f7;
    color: #9499a0;
    border-radius: 10px;
    font-size: 11px;
}
.vp-vip-badge-active {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #f5a623, #f7c948);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.vp-member-nav {
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.vp-member-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #61666d;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.vp-member-nav-item:hover {
    background: #f7f8fa;
    color: #fb7299;
}
.vp-member-nav-item.active {
    background: linear-gradient(135deg, #fb7299, #ff8fab);
    color: #fff;
}
.vp-member-nav-item.vp-logout {
    color: #e54d42;
    border-top: 1px solid #f0f1f2;
    margin-top: 8px;
    padding-top: 16px;
}
.vp-member-nav-item.vp-logout:hover {
    background: #fff0f0;
}
.vp-member-nav-item ion-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.vp-member-content {
    flex: 1;
    min-width: 0;
}
.vp-member-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.vp-member-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #18191c;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f1f2;
}
.vp-member-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f1f2;
}
.vp-member-section-header .vp-member-section-title {
    margin: 0;
    padding: 0;
    border: none;
}
.vp-count {
    color: #9499a0;
    font-weight: 400;
    font-size: 14px;
}
.vp-member-msg {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}
.vp-member-msg.success {
    background: #f0fff4;
    color: #34c759;
}
.vp-member-msg.error {
    background: #fff0f0;
    color: #e54d42;
}

/* 浠〃鐩樼粺璁″崱鐗?*/
.vp-member-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.vp-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    background: #f7f8fa;
    border-radius: 10px;
}
.vp-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}
.vp-stat-label {
    font-size: 12px;
    color: #9499a0;
    margin-bottom: 2px;
}
.vp-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #18191c;
}

/* VIP妯箙 */
.vp-member-vip-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #2d1b4e, #4a2c7a);
    border-radius: 12px;
    margin-bottom: 24px;
    color: #fff;
}
.vp-vip-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.vp-vip-crown {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5a623, #f7c948);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}
.vp-vip-banner-left h4 {
    margin: 0 0 4px;
    font-size: 16px;
}
.vp-vip-banner-left p {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
}

/* 蹇嵎鎿嶄綔 */
.vp-member-quick h4 {
    font-size: 15px;
    color: #61666d;
    margin: 0 0 14px;
}
.vp-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.vp-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: #f7f8fa;
    border-radius: 10px;
    text-decoration: none;
    color: #61666d;
    font-size: 13px;
    transition: all 0.2s;
}
.vp-quick-item:hover {
    background: #fff0f5;
    color: #fb7299;
    transform: translateY(-2px);
}
.vp-quick-item .vp-icon,
.vp-quick-item ion-icon {
    font-size: 24px;
}

/* 瑙嗛鍒楄〃 */
.vp-member-video-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vp-member-video-item {
    display: flex;
    gap: 14px;
    padding: 12px;
    background: #f7f8fa;
    border-radius: 10px;
    align-items: center;
    transition: background 0.2s;
}
.vp-member-video-item:hover {
    background: #f0f1f2;
}
.vp-member-video-thumb {
    width: 160px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.vp-member-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vp-member-video-info {
    flex: 1;
    min-width: 0;
}
.vp-member-video-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #18191c;
    text-decoration: none;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-member-video-title:hover {
    color: #fb7299;
}
.vp-member-video-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #9499a0;
}
.vp-member-video-meta .vp-icon {
    margin-right: 3px;
}
.vp-member-video-remove {
    color: #9499a0;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
}
.vp-member-video-remove:hover {
    background: #fff0f0;
    color: #e54d42;
}
.vp-history-load-more-wrap {
    text-align: center;
    margin-top: 20px;
}
.vp-history-load-more {
    min-width: 140px;
}
.vp-history-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.dark-theme .vp-member-video-item {
    background: #1f1f23;
}
.dark-theme .vp-member-video-item:hover {
    background: #26262b;
}
.dark-theme .vp-member-video-title {
    color: #e3e5e7;
}

/* 绌虹姸鎬?*/
.vp-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9499a0;
}
.vp-empty-state .vp-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.vp-empty-state p {
    margin: 0 0 20px;
    font-size: 14px;
}

/* 琛ㄥ崟 */
.vp-member-form .vp-form-group {
    margin-bottom: 20px;
}
.vp-member-form label {
    display: block;
    font-size: 13px;
    color: #61666d;
    margin-bottom: 6px;
    font-weight: 500;
}
.vp-member-form input[type="text"],
.vp-member-form input[type="email"],
.vp-member-form input[type="password"],
.vp-member-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e3e5e7;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.vp-member-form input:focus,
.vp-member-form textarea:focus {
    outline: none;
    border-color: #fb7299;
}
.vp-member-form input:disabled {
    background: #f7f8fa;
    color: #9499a0;
}
.vp-form-desc {
    font-size: 12px;
    color: #9499a0;
    margin: 4px 0 0;
}

/* VIP濂楅 */
.vp-vip-status {
    margin-bottom: 24px;
}
.vp-vip-status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fff8e6, #fff3cd);
    border-radius: 12px;
}
.vp-vip-crown-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5a623, #f7c948);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    flex-shrink: 0;
}
.vp-vip-status-card h4 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #8a6d00;
}
.vp-vip-status-card p {
    margin: 0;
    font-size: 13px;
    color: #a0882e;
}
.vp-vip-expire {
    margin-top: 4px !important;
    font-size: 12px !important;
}
.vp-vip-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.vp-vip-plan {
    position: relative;
    border: 2px solid #e3e5e7;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.2s;
}
.vp-vip-plan:hover {
    border-color: #fb7299;
    transform: translateY(-2px);
}
.vp-vip-plan-featured {
    border-color: #f5a623;
    background: linear-gradient(180deg, #fffbf0, #fff);
}
.vp-vip-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f5a623, #f7c948);
    color: #fff;
    padding: 3px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.vp-vip-plan-header h4 {
    font-size: 16px;
    color: #18191c;
    margin: 0 0 10px;
}
.vp-vip-price {
    font-size: 32px;
    font-weight: 700;
    color: #fb7299;
    margin-bottom: 4px;
}
.vp-vip-price span {
    font-size: 14px;
    font-weight: 400;
    color: #9499a0;
}
.vp-vip-save {
    font-size: 12px;
    color: #f5a623;
    margin-bottom: 14px;
}
.vp-vip-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
}
.vp-vip-features li {
    padding: 6px 0;
    font-size: 13px;
    color: #61666d;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vp-vip-features .vp-icon {
    color: #34c759;
}
.vp-vip-notice {
    text-align: center;
    font-size: 12px;
    color: #9499a0;
    margin: 0;
}

/* 娣辫壊妯″紡 */
body.dark-theme .vp-auth-card,
body.dark-theme .vp-member-profile-card,
body.dark-theme .vp-member-nav,
body.dark-theme .vp-member-section,
body.dark-theme .vp-member-notice {
    background: #1a1a1d;
}
body.dark-theme .vp-auth-header h2,
body.dark-theme .vp-member-name,
body.dark-theme .vp-member-section-title,
body.dark-theme .vp-stat-value,
body.dark-theme .vp-member-video-title,
body.dark-theme .vp-vip-plan-header h4 {
    color: #e3e5e7;
}
body.dark-theme .vp-auth-form input,
body.dark-theme .vp-member-form input,
body.dark-theme .vp-member-form textarea {
    background: #2a2a2d;
    border-color: #3a3a3d;
    color: #e3e5e7;
}
body.dark-theme .vp-stat-card,
body.dark-theme .vp-member-video-item,
body.dark-theme .vp-quick-item,
body.dark-theme .vp-form-tip {
    background: #2a2a2d;
}
body.dark-theme .vp-member-nav-item {
    color: #9499a0;
}
body.dark-theme .vp-member-nav-item:hover {
    background: #2a2a2d;
}
body.dark-theme .vp-vip-plan {
    border-color: #3a3a3d;
    background: #1a1a1d;
}
body.dark-theme .vp-vip-plan-featured {
    background: linear-gradient(180deg, #2a2410, #1a1a1d);
}

/* 鍝嶅簲寮?*/
@media (max-width: 768px) {
    .vp-member-center {
        flex-direction: column;
    }
    .vp-member-sidebar {
        width: 100%;
    }
    .vp-member-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 8px;
    }
    .vp-member-nav::-webkit-scrollbar {
        display: none;
    }
    .vp-member-nav-item {
        flex-shrink: 0;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px;
        gap: 6px;
        white-space: nowrap;
    }
    .vp-member-nav-item .vp-icon {
        font-size: 16px;
        flex-shrink: 0;
    }
    .vp-member-nav-item.vp-logout {
        border-top: none;
        margin-top: 0;
        padding-top: 12px;
    }
    .vp-member-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .vp-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vp-vip-plans {
        grid-template-columns: 1fr;
    }
    .vp-member-video-thumb {
        width: 120px;
        height: 68px;
    }
    .vp-member-section {
        padding: 18px;
    }
}

/* 瀵艰埅鏍忕敤鎴峰尯鍩?*/
.btn-register {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: linear-gradient(135deg, #fb7299, #ff8fab);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-left: 8px;
    transition: all 0.2s;
}
.btn-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,114,153,0.4);
}
.vp-user-avatar-link {
    display: inline-flex;
    margin-left: 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fb7299;
    transition: transform 0.2s;
}
.vp-user-avatar-link:hover {
    transform: scale(1.1);
}
.vp-user-avatar-link img {
    display: block;
    border-radius: 50%;
}
.vp-user-avatar-link .vp-letter-avatar {
    display: inline-flex;
    border-radius: 50%;
}

/* 浼氬憳绯荤粺椤甸潰鍏ㄥ鏃犱晶鏍?*/
body.vp-fullwidth-page #secondary,
body.vp-fullwidth-page .widget-area,
body.vp-fullwidth-page .sidebar {
    display: none !important;
}
body.vp-fullwidth-page .content-area,
body.vp-fullwidth-page #primary {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}
body.vp-fullwidth-page .site-content {
    padding: 20px 0;
}

/* 棣栧瓧姣嶉粯璁ゅご鍍?*/
.vp-letter-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

/* 澶村儚涓婁紶鍣?*/
.vp-avatar-uploader {
    display: flex;
    align-items: center;
    gap: 20px;
}
.vp-avatar-preview {
    flex-shrink: 0;
}
.vp-avatar-preview img,
.vp-avatar-preview .vp-letter-avatar {
    border-radius: 50%;
    border: 3px solid #fb7299;
}
.vp-avatar-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vp-avatar-inputs input[type="url"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e3e5e7;
    border-radius: 6px;
    font-size: 13px;
}
.vp-avatar-inputs .vp-btn {
    align-self: flex-start;
}

/* ===== 鍒嗙被椤礏绔欓鏍煎崱鐗?===== */
.acfun-video-grid .vp-bili-card { width: auto; }
.acfun-video-grid .vp-bili-card-thumb { margin-bottom: 0; padding-top: 150%; }
.acfun-video-grid .vp-bili-card-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.acfun-video-grid .vp-bili-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 10px 8px; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); pointer-events: none; }
.acfun-video-grid .vp-bili-card-title { color: #fff; font-size: 13px; font-weight: 500; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.acfun-video-grid .vp-bili-card-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; z-index: 2; }
@media (max-width: 768px) {
  .acfun-video-grid .vp-bili-card-title { font-size: 11px; }
  .acfun-video-grid .vp-bili-card-overlay { padding: 20px 6px 6px; }
}

/* ===== 淇琛ㄥ崟鎶樺彔鐐瑰嚮 ===== */
.vp-form-section-title ion-icon { pointer-events: none; }
.vp-form-section-title .vp-section-arrow { pointer-events: none; }
.vp-form-section-title .vp-section-actions { pointer-events: auto; }
.vp-form-section-title .vp-section-actions button { pointer-events: auto; }
.vp-form-section.collapsed .vp-section-arrow { transform: rotate(0deg) !important; }
.vp-form-section:not(.collapsed) .vp-section-arrow { transform: rotate(180deg) !important; }

/* ===== 鎵嬫満绔瓫閫夋爮宸﹀彸婊戝姩 ===== */
@media (max-width: 768px) {
  .videopro-filter-bar {
    overflow: visible;
  }
  .filter-sort, .filter-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .filter-sort::-webkit-scrollbar,
  .filter-categories::-webkit-scrollbar {
    display: none;
  }
  .filter-label {
    flex-shrink: 0;
  }
  .sort-link, .cat-link {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ===== Hero鍖洪珮搴﹁皟鏁?+ 鐑棬姒滃崟缂╃暐鍥?===== */
.acfun-carousel { aspect-ratio: 16/5.5; }
.ranking-thumb { flex-shrink: 0; width: 50px; height: 70px; border-radius: 4px; overflow: hidden; background: #eee; }
.ranking-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ranking-item { gap: 10px; padding: 6px 18px; }
.ranking-name { margin-bottom: 0; }
@media (max-width: 768px) {
  .acfun-carousel { aspect-ratio: 16/8; }
  .ranking-thumb { width: 40px; height: 56px; }
}

/* ===== Hero鍖洪珮搴﹀啀璋冧綆 ===== */
.acfun-carousel { aspect-ratio: 16/4 !important; }
@media (max-width: 768px) {
  .acfun-carousel { aspect-ratio: 16/6 !important; }
}

/* ===== Hero鍖洪珮搴︾户缁皟浣?===== */
.acfun-carousel { aspect-ratio: 16/3 !important; }
@media (max-width: 768px) {
  .acfun-carousel { aspect-ratio: 16/5 !important; }
}

/* ===== Hero鍖洪珮搴︽渶缁堣皟浣?===== */
.acfun-hero { margin-bottom: 16px; }
.acfun-carousel { aspect-ratio: 16/2.5 !important; max-height: 320px; }
.acfun-ranking { max-height: 320px; }
.ranking-list { overflow-y: auto; }
.ranking-list::-webkit-scrollbar { width: 4px; }
.ranking-list::-webkit-scrollbar-thumb { background: var(--ac-border); border-radius: 2px; }
@media (max-width: 768px) {
  .acfun-carousel { aspect-ratio: 16/4 !important; max-height: none; }
  .acfun-ranking { max-height: none; }
}

/* ===== Hero鍖哄浐瀹氶珮搴?47px ===== */
.acfun-carousel { aspect-ratio: auto !important; height: 447px !important; max-height: 447px !important; }
.acfun-ranking { height: 447px !important; max-height: 447px !important; }
.acfun-ranking .ranking-list { height: calc(447px - 50px); overflow-y: auto; }
@media (max-width: 768px) {
  .acfun-carousel { height: auto !important; aspect-ratio: 16/4 !important; max-height: none !important; }
  .acfun-ranking { height: auto !important; max-height: none !important; }
  .acfun-ranking .ranking-list { height: auto; overflow-y: visible; }
}

/* ===== 鎵嬫満绔疆鎾浘楂樺害208px锛屾鍗曚繚鎸佽嚜閫傚簲 ===== */
@media (max-width: 768px) {
  .acfun-carousel { height: 208px !important; aspect-ratio: auto !important; max-height: 208px !important; }
  .acfun-ranking { height: auto !important; max-height: none !important; }
  .acfun-ranking .ranking-list { height: auto; overflow-y: visible; }
}

/* ===== 鎵嬫満绔疕ero鍨傜洿甯冨眬淇 ===== */
@media (max-width: 768px) {
  .acfun-hero { flex-direction: column; gap: 12px; }
  .acfun-carousel { width: 100%; flex: none; height: 208px !important; aspect-ratio: auto !important; max-height: 208px !important; }
  .acfun-ranking { width: 100%; flex: none; height: auto !important; max-height: none !important; }
  .ranking-list { height: auto; overflow-y: visible; }
}

/* ===== Hero妯″潡鎵嬫満绔殣钘忕儹闂ㄦ鍗?===== */
@media (max-width: 768px) {
  .acfun-hero.hero-hide-mobile-ranking .acfun-ranking {
    display: none !important;
  }
  .acfun-hero.hero-hide-mobile-ranking {
    flex-direction: row !important;
    gap: 0 !important;
  }
  .acfun-hero.hero-hide-mobile-ranking .acfun-carousel {
    width: 100% !important;
    flex: 1 !important;
  }
}

/* ===== 缁熶竴B绔欐ā鍧楀拰妯悜婊氬姩妯″潡鏍峰紡 ===== */
.vp-bili-cat-icon { border-radius: 8px !important; }
.vp-bili-cat-title { color: var(--ac-text) !important; }
.vp-bili-refresh { padding: 6px 14px !important; border-radius: 16px !important; gap: 6px !important; background: var(--ac-card) !important; border: 1px solid var(--ac-border) !important; color: var(--ac-text-2) !important; }
.vp-bili-refresh:hover { color: #fb7299 !important; border-color: #fb7299 !important; background: rgba(251,114,153,0.05) !important; }
.vp-bilibili-module, .vp-horizontal-module { margin-bottom: 24px !important; padding: 20px !important; border-radius: 12px !important; }
.vp-bili-header, .vp-hz-header { margin-bottom: 16px !important; }
.vp-bili-cat-title, .vp-hz-title { font-size: 20px !important; font-weight: 700 !important; }
.vp-bili-refresh, .vp-hz-refresh { font-size: 13px !important; }