/*
Theme Name:     喵CG子主题
Theme URI:      https: //mewcg.com/
Description:    喵CG良心作品
Author:         喵CG
Author URI:     https: //mewcg.com/
Template:       b2
Version:        5.0
*/

/* 修复导航菜单的overflow问题 */
.header-banner ul, 
.menu ul, 
.header-banner-left ul,
.header-banner-left .menu ul,
.top-menu ul {
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
}

/* 桌面端菜单样式 */
@media screen and (min-width: 769px) {
    .header-banner ul, 
    .menu ul, 
    .header-banner-left ul,
    .header-banner-left .menu ul,
    .top-menu ul {
        overflow-x: visible !important;
        overflow-y: visible !important;
        white-space: normal !important;
    }
}


/* 修复logo显示不完整问题 */
.logo, 
.header-logo,
.site-logo {
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
}

.logo img, 
.header-logo img,
.site-logo img {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
    display: block !important;
}

/* 确保logo容器有足够空间 */
.header-banner-left,
.header-content-left {
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-width: auto !important;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    /* logo适配 */
    .logo img, 
    .header-logo img,
    .site-logo img {
        max-height: 44px !important;
    }
    
    /* 移动端菜单容器样式重置 */
    .mobile-menu,
    .mobile-nav {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    .mobile-menu ul,
    .mobile-nav ul {
        overflow-x: hidden !important;
        white-space: normal !important;
    }
    
    /* 移动端子菜单基础样式 */
    .mobile-nav .sub-menu,
    .mobile-nav .children,
    .mobile-menu .sub-menu,
    .mobile-menu .children {
        white-space: normal !important;
    }
    
    /* 让主题自己的JavaScript控制子菜单显示/隐藏 */
    /* 不强制隐藏，让主题原生控制生效 */
    
    /* 导航字体大小优化 */
.header-banner .menu a,
.header-banner-left .menu a,
.top-menu a,
.menu ul li a {
    font-size: calc(1em + 2px) !important;
}

/* 移动端导航字体大小 */
@media screen and (max-width: 768px) {
    .mobile-menu a,
    .mobile-nav a {
        font-size: calc(1em + 2px) !important;
    }
}

/* 用户归属地样式优化 */
.user-info .user-info-title {
    display: inline-block;
    width: 70px;
    font-weight: 500;
    color: #666;
}

.user-info p span:last-child {
    color: #333;
}

.user-info p span i {
    margin-right: 4px;
    color: #10b981;
}

/* 移动端不显示桌面端头部菜单的子菜单 */
    .header-banner .sub-menu,
    .header-banner-left .sub-menu {
        display: none !important;
    }
    
    /* 但允许移动端专用菜单的子菜单正常显示 */
    .mobile-nav .sub-menu,
    .mobile-menu .sub-menu {
        display: block !important;
    }
}

/* B2主题菜单样式美化代码 - 修正版 */
@media screen and (min-width: 769px) {
    /* 桌面端菜单样式美化 */
    .social-top .top-menu ul li.depth-0 > a {
        color: inherit;
        padding: 18px 30px;
        transition: all 0.3s ease;
    }
    
    /* 子菜单容器美化 */
    .has_children .sub-menu {
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #ebeef5;
    }
    
    /* 隐藏多余的箭头 */
    .top-menu .b2-jt-down {
        display: none !important;
    }
    
    /* 子菜单动画效果 */
    .top-menu-ul .sub-menu-0,
    .social-top .top-menu .sub-menu-0 {
        border-top: 0;
        padding: 15px;
        transform: translateY(10px);
        transition: all 0.3s ease;
        opacity: 0;
        visibility: hidden;
    }
    
    /* 悬停时显示子菜单 */
    .top-menu ul li:hover .sub-menu-0,
    .social-top .top-menu ul li:hover .sub-menu-0 {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    /* 子菜单项样式 */
    .top-menu-ul .sub-menu-0 > li,
    .social-top .top-menu .sub-menu-0 > li {
        border-left: 1px solid #ebeef5;
        position: relative;
        margin-bottom: 2px;
    }
    
    /* 子菜单链接样式 */
    .b2-menu-3 .sub-menu-0 > li > a,
    .social-top .b2-menu-3 .sub-menu-0 > li > a {
        color: #4c4c4c;
        padding: 8px 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        transition: all 0.3s ease;
        border-radius: 4px;
        margin: 2px;
    }
    
    /* 子菜单项装饰点 */
    .b2-menu-3 .sub-menu-0 > li:after,
    .social-top .b2-menu-3 .sub-menu-0 > li:after {
        content: '';
        position: absolute;
        top: 12px;
        left: -5px;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid #3d7eff;
        z-index: 1;
    }
    
    /* 装饰点颜色变化 */
    .b2-menu-3 .sub-menu-0 > li:nth-child(2n+1):after,
    .social-top .b2-menu-3 .sub-menu-0 > li:nth-child(2n+1):after {
        border: 3px solid #f1787f;
    }
    
    .b2-menu-3 .sub-menu-0 > li:nth-child(3n+1):after,
    .social-top .b2-menu-3 .sub-menu-0 > li:nth-child(3n+1):after {
        border: 3px solid #61e1b9;
    }
    
    /* 子菜单悬停效果 */
    .b2-menu-3 .sub-menu-0 > li > a:hover,
    .social-top .b2-menu-3 .sub-menu-0 > li > a:hover {
        background: #f0f2f5;
        color: #333;
        transform: translateX(3px);
    }
    
    .b2-menu-3 .sub-menu-0 > li:hover > a,
    .b2-menu-3 .sub-menu-0 a:hover,
    .social-top .b2-menu-3 .sub-menu-0 > li:hover > a,
    .social-top .b2-menu-3 .sub-menu-0 a:hover {
        color: #333;
        background: #f0f2f5;
    }
    
    /* 主菜单悬停效果 */
    .social-top .top-menu ul li.depth-0:hover > a {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
}

/* 用户查询中心美化样式 */
.user-query-center {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.user-query-center:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.user-query-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 查询中心标题美化 */
.query-center-title {
    text-align: center;
    margin-bottom: 40px;
}

.query-center-title h2 {
    font-size: 32px !important;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
}

.query-center-title h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
    border-radius: 2px;
}

/* 查询表单美化 */
.user-query-form {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    text-align: center;
}

.user-query-form input[type="text"] {
    width: 350px !important;
    height: 48px !important;
    border: 2px solid #e1e8ed;
    border-radius: 24px;
    padding: 0 20px !important;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-right: 15px;
    outline: none;
}

.user-query-form input[type="text"]:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.user-query-form button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 24px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.user-query-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 用户信息卡片美化 */
.user-info.box {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
}

.user-info.box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

.user-info.box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
}

.user-info-title {
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.user-info-title:before {
    content: '';
    width: 6px;
    height: 6px;
    background: #667eea;
    border-radius: 50%;
    margin-right: 8px;
}

/* 头像美化 */
.user-info .avatar {
    border: 3px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease;
}

.user-info .avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* 用户链接美化 */
.tiels {
    color: #667eea !important;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tiels:hover {
    color: #764ba2 !important;
    text-shadow: 0 2px 4px rgba(118, 75, 162, 0.3);
}

/* 等级和VIP图标美化 */
.user-page-lv {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.user-page-lv img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: all 0.3s ease;
}

.user-page-lv img:hover {
    transform: scale(1.1);
}

/* 统计信息美化 */
.query-stats {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    backdrop-filter: blur(10px);
}

.query-stats p {
    color: #fff !important;
    font-size: 16px;
    margin: 0;
}

.query-stats b {
    color: #ff6b6b !important;
    font-size: 18px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .user-query-form {
        padding: 30px 20px;
    }
    
    .user-query-form input[type="text"] {
        width: 100% !important;
        margin-bottom: 15px;
        margin-right: 0;
    }
    
    .user-query-form button {
        width: 100%;
    }
    
    .query-center-title h2 {
        font-size: 24px !important;
    }
}

/* 加载动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-info.box {
    animation: fadeInUp 0.6s ease-out;
}

.query-center-title {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.user-query-form {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

/* 额外美化元素 */
.user-query-center .user-query-container {
    position: relative;
    z-index: 1;
}

/* 成功提示动画 */
@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.query-stats {
    animation: successPulse 0.6s ease-out;
}

/* 用户信息卡片增强效果 */
.user-info.box .b2-pd {
    position: relative;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.user-info.box .b2-pd:last-child {
    border-bottom: none;
}

.user-info.box .b2-pd:hover {
    background: rgba(102, 126, 234, 0.02);
    transform: translateX(5px);
    transition: all 0.3s ease;
}

/* 搜索按钮增强效果 */
.user-query-form button:active {
    transform: translateY(1px) scale(0.98);
}

/* 悬浮微粒效果 */
.user-query-center:after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* 表单聚焦时的整体效果 */
.user-query-form:focus-within {
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

/* 用户信息内容美化 */
.user-info-content {
    color: #4a5568;
    font-weight: 500;
}

/* 等级显示美化 */
.user-level-display {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* VIP状态美化 */
.vip-status {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* 无VIP状态 */
.no-vip-status {
    background: #e2e8f0;
    color: #64748b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    margin-left: 8px;
}

/* 关注粉丝数字美化 */
.follow-stats {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.follow-item {
    background: rgba(102, 126, 234, 0.1);
    padding: 6px 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.follow-number {
    color: #667eea;
    font-weight: 700;
    font-size: 16px;
}

/* 财富信息美化 */
.wealth-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.wealth-item {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 10px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.wealth-label {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.wealth-value {
    color: #667eea;
    font-weight: 700;
    font-size: 16px;
}

/* 认证状态美化 */
.verify-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.verify-badge {
    background: #10b981;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.unverify-badge {
    background: #f59e0b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* 性别标识美化 */
.gender-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gender-female {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.gender-male {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.gender-unknown {
    background: #e2e8f0;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 会员天数和注册信息美化 */
.member-info {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid #10b981;
    padding: 12px 15px;
    border-radius: 8px;
    margin: 8px 0;
}

.member-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.member-stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #065f46;
    font-weight: 500;
}

.member-number {
    background: #10b981;
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}

/* 简介区域美化 */
.user-description {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
    padding: 12px 15px;
    border-radius: 8px;
    margin: 8px 0;
    font-style: italic;
    color: #92400e;
}

/* 信息图标 */
.info-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    opacity: 0.7;
}

/*优设样式网格美化块-开始*/
.thumb4566 {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 0
}
.list-item .item-wrap {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    height: 429px;
    overflow: hidden;
    position: relative;
     padding:10px;
}

.list-item .item-wrap:hover {
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05)
}
.list-item .item-thumb {
    display: block
}
.list-item .item-meta {
    position: absolute;
    height: 22px;
    line-height: 20px;
    overflow: hidden;
    color: #b5b5b5
}
@media (min-width: 768px) {
    .list-item .item-meta {
        left: 10px;
    }
}
@media (min-width: 768px) {
    .list-item .item-meta {
        right: 10px;
    }
}
@media (min-width: 768px) {
    .list-item .item-meta {
        bottom: 11px;
    }
}
.list-item .item-meta a {
    color: #b5b5b5
}
.list-item .item-meta a:hover {
    color: #FF6A4E;
}
.list-item .item-meta .meta-right {
    position: absolute;
    right: 0;
    top: 0
}

.list-item .item-meta .meta-tag .tag-ico {
    display: inline-block;
    vertical-align: middle;
    background-color: #ffefda;
    color: #ff6000;
    margin-top: -2px;
    font-size: 12px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: .5em;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9)
}
.list-item .item-meta .meta-time {
    display: block;
}
.item-article .item-top {
    overflow: hidden;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius:10px;
    border-radius: 10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
}
.item-article .item-term .term-i:hover, .item-article .item-term a:hover {
    opacity: 1
}
.item-article .item-thumb {
    overflow: hidden;
    position: relative
}

.post-7.post-list ul.b2_gap {
    display: flex;
    flex-flow: wrap;
    align-items: stretch;
}
.item-article .item-thumb .thumb4566 {
    position: relative;
    padding-top: 63.63636364%;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}
.item-article .item-main {
    margin-top: 22px;
    position: relative;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    z-index: 3
}
.item-article .item-title {
    font-size:20px;
    height: 60px;
    line-height:30px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff
}
.item-article .item-title a:hover {
    color: #FF6A4E;
}
.item-article .item-top-extra {
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: normal
}
.item-article .item-top-extra .extra-item {
    float: left;
    white-space: nowrap;
    height: 25px;
    line-height:25px;
    font-size:14px;
    padding: 10px;
    color: #fff;
    letter-spacing: 1px
}
.item-article .item-top-extra .extra-item:last-child {
    background-color: #FF6A4E;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    padding-left: 8px;
    padding-right:8px
}
.item-article .item-top-extra .extra-item:first-child {
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px
}
.item-article .item-top-extra .extra-item.extra-term {
    padding: 0
}
.item-article .item-top-extra .extra-item.extra-term a {
    display: block;
    padding-left: 12px;
    padding-right: 10px
}
.item-article .item-top-extra .extra-item {
    font-size:14px
}
@media (min-width: 768px) {
    .item-article .item-wrap:hover .item-top .thumb4566 {
        -webkit-transform:scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1)
    }
}
.item-article .item-desc {
    background-color: #fafafa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #8a8a8a;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}
.item-article .item-desc .desc-wrap {
    padding: 16px 20px;
    display: block;
    font-size: 14px;
    line-height: 25px;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    color: #8a8a8a
}
.item-article .item-desc .desc-wrap span {
    display: block;
    height: 50px;
    overflow: hidden;
}
.item-article .item-desc .desc-wrap {
    font-size:14px;
}
.meta-tag a {
    font-size: 14px;
}
i.uname {
    font-size: 12px;
}
.meta-right a:before {
    content: '#';
    line-height: 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    margin-right: 3px;
    color: #fff;
    text-align: center;
    float: left;
    background: #FF6A4E;
    border-radius: 50%;
    display: block;
}
.vip_tj_qinghe {
    position: absolute;
    top: 9px;
    right: -37px;
    z-index: 1;
    overflow: hidden !important;
    width: 120px;
    height: 30px;
    color: #fff;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*优设样式网格美化块-结束*/

/*加载更多按钮*/
.load-more.box-in.box.b2-radius.mg-t {
    box-shadow: 0px 0px 0px rgb(98 124 153 / 10%) !important;
}
.post-list .load-more button span {
    color: #fff;
    font-size: 16px;
}
.load-more {
    width: 146px;
    background-color: #FF6A4E;
    margin: 0 auto;
    margin-top: 23px;
}
@media screen and (max-width:768px) {
    .load-more {
        margin-top: 1px;
        border-radius: 6px;
    }
    div#post-item-shoujiduan {
        padding-bottom: 10px;
    }
}
/*加载更多按钮*/

/*举报美化*/
.jubao-form .picked {
    background-color: #FF795F;
    color: #fff;
}
/*举报美化*/



/*pre高亮代码美化-开始*/
 .enlighter-t-atomic .enlighter-toolbar .enlighter-btn-website {
    display: none;
}
.enlighter::-webkit-scrollbar {
    width:4px;
    height:4px
}
.enlighter::-webkit-scrollbar-thumb {
    background-color:#FF6A4E;
    border-radius:6px;
}
.enlighter::-webkit-scrollbar-track-piece {
    background:#272b33
}
.enlighter-default {
    border-radius:8px;
    padding-top:34px!important;
    margin-bottom:20px!important;
    background:#2a2b2c
}
.enlighter-default .enlighter {
    max-height:510px;
    overflow:auto;
    display:block;
    background:#272b33
}
.enlighter-default:after {
    content:" ";
    position:absolute;
    -webkit-border-radius:50%;
    border-radius:50%;
    background:#35cd4b;
    width:12px;
    height:12px;
    top:0;
    left:15px;
    margin-top:11px;
    -webkit-box-shadow:20px 0 #c7c7c7, 40px 0 #c7c7c7;
    box-shadow:20px 0 #fc625d, 40px 0 #fdbc40;
    transition-duration:.3s
}
.enlighter-default:hover:after {
    background:#fdbc40;
    -webkit-box-shadow:20px 0 #fc625d, 40px 0 #35cd4b;
    box-shadow:20px 0 #fc625d, 40px 0 #35cd4b
}
.enlighter-t-monokai.enlighter-linenumbers div.enlighter>div:before {
    color:#ccc;
    background:#2a2b2c
}
.enlighter-default.enlighter-hover div.enlighter>div:hover:before {
    color:#fff
}
.enlighter-t-monokai .enlighter span {
    font-size:1.8em
}
.enlighter-t-monokai .enlighter-toolbar .enlighter-btn-raw {
    border-radius:4px
}
.enlighter-t-monokai .enlighter-toolbar .enlighter-btn-copy {
    border-radius:4px
}
.enlighter-t-monokai .enlighter-toolbar .enlighter-btn-window {
    border-radius:4px
}

div#item-name.picked .n-thumb b {
    color: #fff;
    background-color: #FF6A4E;
    opacity: .9;
}
div#item-name.picked .n-thumb{
    background:#FF6A4E;
}
div#item-name.picked span{
    font-weight:700;
}

.wp-block-image {
    text-align: center;
    border-radius: 6px;
}
span#qinghe-docx-hover {
    color: #FF6A4E;
}
a#qinghe-docx {
    color: #000;
}
a#qinghe-docx:hover {
    color: #FF6A4E;
}

.post-audio {
	position:relative;
	display:block;
	overflow:hidden;
	text-align:center;
}
.overflow-hidden {
	position:absolute;
	top:0;
	left:0;
	display:flex;
	overflow:hidden;
	width:100%;
	height:100%;
}
.post-audio:before {
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	filter:blur(5px);
	backdrop-filter:saturate(150%) blur(32px);
	background-color:rgb(0 0 0 / 20%);
	overflow:hidden;
	border-radius:10px;
}
.audio-pan {
	height:100%;
}
.play-icon {
	position:absolute;
	top:calc((100% - 66px) / 2);
	right:calc((100% - 60px) / 2);
	z-index:1;
	z-index:2;
	width:60px;
	height:60px;
	border:5px solid #ffffff9e;
	border-radius:60px;
}
.play-pan {
	position:absolute;
	top:calc((100% - 136px) / 2);
	right:calc((100% - 130px) / 2);
	z-index:1;
	width:120px;
	height:120px;
	border:10px solid #f5f6f766;
	border-radius:100% !important;
	box-shadow:rgb(0 0 0 / 15%) 0 4px 12px;
}

@-webkit-keyframes z {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
        -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
        transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1);
        -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1) scaleZ(1)
    }

    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
        -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
        transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
        -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1)
    }
}

.audio-box:after {
	content:"";
	width:100%;
	height:230px;
	position:absolute;
	top:0;
	left:0;
	filter:blur(10px);
	backdrop-filter:saturate(150%) blur(32px);
}
.audio-left {
	display:flex;
	z-index:1;
	padding:20px;
	border-radius:50%;
	width:190px;
	height:190px;
	align-items:center;
	justify-content:center;
	background:#00000057;
	flex-direction:column
}
.audio-left img {
	position:absolute;
	z-index:3;
	display:initial;
	margin:0!important;
	width:80px;
	height:80px;
	cursor:pointer
}
#jitheme_post_mp3 .cover-bg {
	width:150px;
	height:150px;
	border-radius:50%;
	background-color:#000;
	background-position:center center;
	background-size:auto 100%;
	background-repeat:no-repeat;
	justify-content:center;
	align-items:center;
	-webkit-animation:z 5s linear 0s infinite;
	-moz-animation:z 5s linear 0s infinite;
	-ms-animation:z 5s linear 0s infinite;
	animation:z 5s linear 0s infinite
}
#jitheme_post_mp3 {
	margin-bottom:20px;
}
#jitheme_post_mp3 .audio-right {
	margin-left:20px;
	margin-right:0;
	padding:20px;
	z-index:1;
	border-radius:24px;
	background:#00000057;
	width:100%;
	color:#333333
}
#jitheme_post_mp3 .audio-box {
	display:flex;
	padding:20px;
}
#jitheme_post_mp3 .audio-right h1 {
	display:-webkit-box;
	overflow:hidden;
	margin-bottom:10px;
	padding-left:0!important;
	text-overflow:ellipsis;
	text-overflow:ellipsis;
	color:#fff;
	letter-spacing:.5px;
	font-weight:500;
	font-size:1.5em!important;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2
}
#jitheme_post_mp3 .audio-right .b2timeago {
	color:#fff
}
#jitheme_post_mp3 .audio-right h1:after {
	position:absolute;
	left:0;
	width:0!important;
	height:100%;
	border-radius:2px;
	content:''
}
#jitheme_post_mp3 .progress-bar-bg {
	position:relative;
	height:10px;
	background-color:#d9d9d9;
	border-radius:20px;
	cursor:pointer
}
#jitheme_post_mp3 .progress-yinfu {
	position:absolute;
	border-radius:150px;
	width:101%;
	height:100%
}
#jitheme_post_mp3 .progress-bar-bg span {
	position:absolute;
	width:2px;
	height:100%;
	content:" ";
	cursor:pointer
}
#jitheme_post_mp3 .progress-bar {
	width:0;
	height:100%;
	border-radius:20px;
	background-image:linear-gradient(to top,#4481eb 0,#04befe 100%)
}
#jitheme_post_mp3 .audio-time {
	overflow:hidden;
	margin-top:10px;
	color:#eee
}
#jitheme_post_mp3 .audio-length-current {
	float:left;
	font-size:14px
}
#jitheme_post_mp3 .audio-length-total {
	float:right;
	font-size:14px
}
#jitheme_post_mp3 .n-box fieldset {
	padding:10px;
	border:1px dashed #bdbdbd;
	border-radius:5px;
	text-align:center;
	font-size:12px;
	line-height:2em
}
#jitheme_post_mp3 .audio-pan .play-icon {
	position:relative;
	top:0;
	z-index:2;
	padding:10px 50px
}
#jitheme_post_mp3 .audio-pan .play-zhen {
	position:absolute;
	top:20px;
	right:24px;
	z-index:2;
	width:auto!important;
	height:100px;
	height:50%!important;
	transition:all .6s ease-in-out;
	transform:rotate(-9deg);
	transform-origin:right top
}
#jitheme_post_mp3 .audio-pan .play-dot {
	position:absolute;
	top:15px;
	right:17px;
	z-index:3;
	width:20px!important;
	height:20px
}
#jitheme_post_mp3 .audio-pan .play-pan {
	position:relative;
	top:0;
	margin-top:-70%;
	padding:10px 50px
}
#jitheme_post_mp3 .poster-footer {
	font-size:14px;
	padding:16px 0;
	border-top:unset
}

#Onecad_vido {
	position:absolute;
	top:0;
	left:0;
	display:flex;
	width:100%;
	height:100%;
}
#Onecad_vido .post-has-video span {
	position:absolute;
	top:calc(100% / 2 - 25px);
	left:calc(100% / 2 - 25px);
	z-index:1;
	display:block;
	width:50px;
	height:50px;
	background:url(/wp-content/themes/b2child/Assets/imgs/play_cover.png) center no-repeat;
}
#Onecad_vido canvas,#Onecad_vido img,#Onecad_vido video,#Onecad_vido.onecad_app_img {
	position:absolute;
	top:50%;
	left:50%;
	box-sizing:border-box;
	width:calc(100% + 2px);
	height:calc(100% + 2px);
	max-width:none;
	background-color:#000;
	transform:translate(-50%,-50%)
}

#jitheme_post_mp3 .audio-time {
    color: #fff;
    font-size: 12px;
    padding-top: 5px;
}

#jitheme_post_mp3 .volume-control-wrapper {
    display: flex;
    align-items: center;
    margin-top: 12px;
    position: relative;
    width: 100%;
}

#jitheme_post_mp3 .volume-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0;
}

#jitheme_post_mp3 .volume-slider {
    width: 120px;
    height: 6px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 11px;
    outline: none;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    position: relative;
    top: 0;
}

#jitheme_post_mp3 .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

#jitheme_post_mp3 .volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
}

#jitheme_post_mp3 .audio-length-current {
    float:left;
    font-size:14px
}




/*首页动态背景搜索样式代码开始*/
.search_360{
    color:#fff;
    background-color:#28bc5b;
}
.search_baidu{
    color:#fff;
    background-color:#4E6EF2;
}
.search_bing{
    color:#fff;
    background-color:#ffc20e;
}
.search_toutiao{
    color:#fff;
    background-color:#f04142;
}
.search_zhihu{
    color:#fff;
    background-color:#06f;
}
#page-wrapper {
	padding-bottom:16px;
	margin-top:-85px
}
.home-banner {
	height:550px;
	position:relative;
	/* z-index:1; */
	background-position:0 100%;
	animation:gradient 12s ease-in-out infinite;
}
.home-banner .section {
	position:relative;
	width:100%;
	overflow:hidden;
	max-height:550px;
	height:100vh
}
.home-banner .section .video-wrapper {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	z-index:0
}
.home-banner .section .video-wrapper video {
	visibility:visible;
	pointer-events:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:100%;
	width:100%;
	object-fit:cover
}
.home-banner .section .video-overlay {
	height:100%;
	width:100%;
	top:0;
	left:0;
	position:absolute;
	background:rgba(45,47,54,.15)
}
.home-banner .corner {
    width: 28px;
    height: 21px;
    border-radius: 4px;
    left: 340px;
    top: 10px;
}
.home-banner .home-menus {
	margin-left:70px
}
.home-banner .home-menus .cus-dropbox-trigger a,.home-banner .home-menus>a {
	color:#fff;
	font-size:14px;
	margin-right:20px;
	line-height:60px
}
.home-banner .home-menus .cus-dropbox-trigger a:hover,.home-banner .home-menus>a:hover {
	color:var(--b2color);
}
.home-banner>.layout-center {
	height:100%
}
.home-banner-content {
    padding-top: 130px;
    margin-left: 182px;
    margin-bottom: 30px;
}
.home-banner-content .slogan-text p {
	font-size:18px;
	line-height:24px;
	letter-spacing:2px;
	font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.home-banner-content .slogan-text p:nth-of-type(1) {
	font-weight:600;
	font-size:28px;
	line-height:46px;
	letter-spacing:6px;
	text-shadow:0 2px 4px rgba(0,0,0,.25);
	margin-bottom:20px
}
.home-banner-search {
	width:800px;
	margin-left:209px;
	height:auto
}
.home-banner-search .tag {
    position: absolute;
    right: 100px;
    top: 0;
    padding: 15px 10px;
}
.home-banner-search .tag a:hover {
    background: var(--b2color);
    color: #fff;
}
.home-banner-search .tag a {
    display: inline;
    padding: 0px 8px;
    border-radius: 10px;
    background: #EFEFEF;
    float: left;
    margin: 5px;
    height: 20px;
    line-height: 20px;
    color: #A0A0A0;
    font-size: 12px;
}

.home-banner-search form>input {
	width:100%;
	height: 50px;
	background:#fff;
	border:none;
	padding:18px 22px;
	font-size:14px;
	color:#333;
}
.home-banner-search form>input::placeholder {
	color:#979797
}
.home-banner-search .hot-top {
	position:absolute;
	top:13px;
	right:115px;
	color: #000;
	font-size:13px
}
.home-banner-search .hot-top i {
	margin-right:4px
}
.home-banner-search .hot-words-container,.home-banner-search .rec-words-container {
	width:100%;
	top:56px
}
.home-banner-links {
    width: 80%;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-shadow: 0 2px 4px rgba(0,0,0,.27);
}
.home-banner-links a {
	margin-right:19px;
	color:inherit
}
.home-banner-links a:hover {
	color:var(--b2color);
}
.home-banner .search-types-cycles {
	width:106px;
	height:290px;
	background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgb(255 96 0 / 17%) 51.04%,rgba(0,0,0,0) 100%);
	left:625px;
	top:-95px;
	text-align:center;
	z-index:-1
}
.home-banner .search-types-cycles .search-types-btn {
	width:100%;
	height:20px;
	line-height:20px;
	cursor:pointer;
	user-select:none;
	left:0;
	bottom:-20px;
	z-index:1
}
.home-banner .search-types-cycles .search-types-btn i {
	color:#fff;
	font-size:12px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) {
	bottom:auto;
	top:-20px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) i {
	transform:rotate(180deg)
}
.home-banner .search-types-cycles .search-types-btn:hover i {
	color:var(--b2color);
}
.home-banner .search-types-cycles ul {
	width:100%;
	height:100%;
	padding-top:5px
}
.home-banner .search-types-cycles ul:after,.home-banner .search-types-cycles ul:before {
	content:'';
	width:1px;
	height:100%;
	display:block;
	position:absolute;
	left:0;
	top:0;
	background:linear-gradient(0,transparent 0,var(--b2color) 50%,transparent 100%)
}
.home-banner .search-types-cycles ul:after {
	left:auto;
	right:0
}
.home-banner .search-types-cycles ul li {
	height:30px !important;
	line-height:30px !important;
	font-size:16px;
	text-align:center;
	cursor:pointer;
	user-select:none
}
.home-banner .search-types-cycles ul li:hover {
	color:var(--b2color);
}
.home-banner .search-types-cycles ul li:nth-of-type(4) {
	height:60px!important;
	line-height:60px!important;
}
.home-banner .search-types-cycles ul li a {
	color:rgba(255,255,255,.6);
	transition:none
}
.home-banner .search-types-cycles ul li a:hover {
	color:var(--b2color);
}
.home-banner .search-types-cycles button:hover {
	background:#46dacf !important;
	opacity:1;
	transition:opacity .2s
}
.home-banner .search-types-cycles button i {
	font-size:18px;
	color:#fff;
	margin-right:6px
}
.home-banner .search-types-cycles button span {
	font-size:16px;
	color:#fff
}
.top-navs {
	width:100%;
	/* height:70px; */
	bottom: 0px;
	padding-top: 16px;
	left:0;
	/* padding:12px 0; */
	/* z-index:1; */
	backdrop-filter: blur(10px);
}
.top-navs .top-navs-l {
	width: calc(100% - 180px);
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;
	border-right:1px solid rgb(255 255 255 / 10%)
}
.top-navs .top-navs-l-item {
	width:20%;
	margin:0 18px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center
}
.top-navs .top-navs-l-item .top-navs-l-title a {
	font-weight:600;
	font-size:18px;
	line-height:25px;
	height:25px;
	margin-bottom:12px;
	color:#fff;
	text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-title .wz {
	font-weight:600;
	font-size:18px;
	line-height:25px;
	height:25px;
	margin-bottom:12px;
	color:#fff;
	text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-title a i {
	font-size:34px;
	margin-right:8px;
	vertical-align:-4px
}
.top-navs .top-navs-l-item .top-navs-l-title a img {
	float:left;
	width:34px;
	height:34px;
	margin-right:8px;
	vertical-align:-4px;
	margin-top: -5px;
}
.top-navs .top-navs-l-item .top-navs-l-title a:hover {
	color:var(--b2color);
}
.top-navs .top-navs-l-item .top-navs-l-links {
	font-size:14px;
	line-height:20px;
	display:flex;
	justify-content:space-around;
	margin:0 -10px
}
.top-navs .top-navs-l-item .top-navs-l-links a {
	color:#fff;
	margin:0 10px;
	text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-links a:hover {
	color:var(--b2color);
}
.top-navs .top-navs-m {
	width:176px;
	height:61px;
	border-right:1px solid rgba(255,255,255,.25);
	padding:0 24px;
	display:none;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center
}
.top-navs .top-navs-m a,.top-navs .top-navs-m p,.top-navs .top-navs-m>div {
	width:50%;
	text-align:center;
	color:#fff;
	font-size:14px;
	line-height:20px;
	cursor:pointer;
	user-select:none;
	text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-m a:hover,.top-navs .top-navs-m p:hover,.top-navs .top-navs-m>div:hover {
	color:var(--b2color);
}
.top-navs .top-navs-m div p,.top-navs .top-navs-m>a {
	margin-bottom: 25px;
}
.top-navs .top-navs-m div p {
	width:100%;
	margin-bottom:0;
	margin-top:-20px
}
.top-navs .top-navs-m .top-navs-m-box {
	top:-16px;
	left:-72px;
	width:157px;
	height:66px;
	background:#444;
	border-radius:8px;
	padding:8px 14px 0;
	display:none;
	margin-top:-70px
}
.top-navs .top-navs-m .top-navs-m-box a {
	margin-bottom:9px
}
.top-navs .top-navs-m .top-navs-m-box a:hover {
	color:var(--b2color);
}
.top-navs .top-navs-r {
	width:176px
}
.top-navs .top-navs-r a {
	width:50%;
	padding-left:30px;
	text-align:center;
}
.top-navs .top-navs-r a i {
	font-size:36px;
	margin-bottom:10px
}
.top-navs .top-navs-r img {
	height: 40px;
	width: 40px;
	margin-top: -3px;
}
.top-navs .top-navs-r a p {
	font-size:14px;
	line-height:40px;
	color:#fff;
	text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-r a p:hover {
	color:var(--b2color);
}
.por {
	position:relative
}
.poa {
	position:absolute
}
.pof {
	position:fixed
}
.Onecad_clearfix:after {
	content:'';
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
	font-size:0;
	line-height:0
}
.fl {
	float:left
}
.fr {
	float:right
}
.ovh {
	overflow:hidden
}
.block {
	display:block
}
.icon-rank {
	width:auto;
	display:inline-block;
	border:none;
	overflow:hidden;
	vertical-align:-3px
}
img.icon-rank {
	width:20px;
	height:20px;
	margin-right:0px
}
a.hot-top.text-notify:hover {
	color:var(--b2color);
}
p.top-navs-l-title {
	margin-bottom:8px
}
.top-navs-l-title i{
   	width:1em;
	height:1em;
	float: left;
}
.left-cont{
	border: 5px solid rgb(255 255 255 / 18%);
}
.home-banner-search>form>button {
	box-sizing:border-box;
	min-width:100px;
	transform:translateY(0px);
	font-size:15px;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
	position:absolute;
	right:1px;
	top:0;
	z-index:1;
	border:1px solid #23d1c3;
	padding:0 15px;
	width:147px;
	height:56px;
	background:linear-gradient(90deg,#35eee3 0,#21cec0 100%);
	border-radius:0 8px 8px px 0;
	right:0;
	text-align:center;
	padding-left:25px;
	margin-right:-7px;
	border-bottom-left-radius:1px;
	border-top-left-radius:1px
}
.home-banner-search .search.hidden {
	display:none
}
.primary-menus .left-cont button {
	height: 50px;
	box-sizing:border-box;
	min-width:100px;
	/* margin-left: 0px; */
	cursor:pointer;
	color:#fff;
	font-size:15px;
	line-height:40px;
	position:absolute;
	right: 5px;
	top: 5px;
	border-radius:1px;
	padding:0 15px;
	width:106px;
	transform:translateY(0px);
}
.slogan-text.por.fl {
    margin-left: 200px;
    text-align: center;
    margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	#page-wrapper {
	display:none
}
}
/*首页动态背景搜索样式代码结束*/

/* 新的热搜词样式 - 调整大小 & 居中 */
.hot-links-container-new {
  display: flex; /* 让标题和词语水平排列 */
  align-items: center; /* 垂直居中对齐 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 8px; /* 减小词语之间的间隙 */
  margin-top: 15px; /* 与上方搜索框的间距 */
  padding-left: 10px; /* 左侧留一点空间 */
  color: #ffffff; /* 默认文字颜色 */
  font-size: 13px; /* 减小基础字号 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 文字阴影保持一致 */
}

.hot-links-title-new {
  white-space: nowrap; /* 防止标题换行 */
  color: #e0e0e0; /* 标题颜色稍暗 */
}

.hot-link-item-new {
  text-decoration: none; /* 移除链接下划线 */
  color: inherit; /* 继承父元素颜色 */
  display: inline-block; /* 使链接表现为块级元素以便应用样式 */
}

.hot-link-pill {
  display: inline-flex; /* 使内部元素水平排列 */
  align-items: center; /* 垂直居中图标和文字 */
  padding: 4px 12px; /* 减小内边距 */
  border: 1px solid rgba(255, 255, 255, 0.8); /* 白色半透明边框 */
  border-radius: 16px; /* 减小圆角半径 */
  color: #ffffff; /* 内部文字和图标颜色 */
  background-color: rgba(0, 0, 0, 0.1); /* 轻微的深色背景 */
  transition: background-color 0.2s ease, border-color 0.2s ease; /* 平滑过渡效果 */
  cursor: pointer;
}

.hot-link-item-new:hover .hot-link-pill {
  background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停时背景变亮 */
  border-color: #ffffff; /* 边框变实白 */
}

.hot-link-icon {
  width: 14px; /* 固定图标宽度 */
  height: 14px; /* 固定图标高度 */
  fill: currentColor; /* 图标颜色使用当前文字颜色 */
  margin-right: 6px; /* 减小图标与文字之间的距离 */
  /* vertical-align: middle; */ /* Remove this as align-items should handle it */
  display: block; /* Help normalize SVG behavior in flex */
}

.hot-link-text {
  white-space: nowrap; /* 防止文字换行 */
  /* line-height: 1; */ /* Reset line-height */
  line-height: normal; /* Use normal line-height for better vertical alignment */
}

/* Fix for sidebar and widget visibility */
.widget-area {
    display: block;
    visibility: visible;
}

.sidebar {
    display: block;
    visibility: visible;
}

.widget {
    display: block;
    visibility: visible;
}

@media screen and (max-width: 768px) {
    #secondary,
    .widget-area {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 30px !important;
    }
}
@media screen and (max-width: 768px) {
    .social-top .header-banner {
        height: 91px!important;
    }
}
.icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    transform: translateY(-1px);
    fill: currentColor;
    overflow: hidden;
}
/* 这里保留后面部分的其他CSS */

/* For mobile devices */
@media screen and (max-width: 768px) {
    .social-top .logo img {
        max-width: 120px !important;
        max-height: 44px !important;
    }
    
    .social-top .mobile-box .header-logo {
        margin-left: 44px;
        max-width: calc(100% - 43px);
    }
}

/* 标签云简洁样式 */
.widget_tag_cloud .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px;
}

/* 标签云容器简洁化 */
.widget_tag_cloud {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* 标签云标题简洁化 */
.widget_tag_cloud .widget-title {
    background: #f9fafb !important;
    color: #374151 !important;
    margin: 0 !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0 !important;
}

/* 标签项简洁样式 */
.widget_tag_cloud .tagcloud a {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 400;
    transition: all 0.2s ease;
}

/* 标签悬停效果简洁化 */
.widget_tag_cloud .tagcloud a:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

/* 移除所有复杂的字体大小样式，统一为简洁样式 */
.widget_tag_cloud .tagcloud a[style*="font-size: 22pt"],
.widget_tag_cloud .tagcloud a[style*="font-size: 19.2pt"],
.widget_tag_cloud .tagcloud a[style*="font-size: 15pt"],
.widget_tag_cloud .tagcloud a[style*="font-size: 12.2pt"],
.widget_tag_cloud .tagcloud a[style*="font-size: 8pt"] {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    font-size: 13px !important;
    font-weight: 400;
    box-shadow: none !important;
    transform: none !important;
}

.widget_tag_cloud .tagcloud a[style*="font-size: 22pt"]:hover,
.widget_tag_cloud .tagcloud a[style*="font-size: 19.2pt"]:hover,
.widget_tag_cloud .tagcloud a[style*="font-size: 15pt"]:hover,
.widget_tag_cloud .tagcloud a[style*="font-size: 12.2pt"]:hover,
.widget_tag_cloud .tagcloud a[style*="font-size: 8pt"]:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 移除所有before伪元素（#号图标） */
.widget_tag_cloud .tagcloud a:before {
    display: none !important;
}

/* 移除所有动画效果 */
.widget_tag_cloud .tagcloud {
    animation: none;
}

.widget_tag_cloud .tagcloud a {
    animation: none;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .widget_tag_cloud .tagcloud {
        padding: 12px;
        gap: 6px;
    }
    
    .widget_tag_cloud .tagcloud a {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
    
    .widget_tag_cloud .widget-title {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* =================== 3D导航图标样式 =================== */

/* WordPress 兼容性重置 */
.wp-nav-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* WordPress 主容器样式 */
.wp-nav-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    position: relative;
    padding: 2rem 1.5rem 3rem; /* 增加底部padding为工具提示留空间 */
    border-radius: 20px;
    margin: 2rem auto;
    max-width: 1400px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.1);
    overflow: hidden;
}

/* 背景视频样式 */
.wp-nav-container.has-video-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.wp-nav-container .nav-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

/* 视频加载完成后显示 */
.wp-nav-container .nav-background-video.loaded {
    opacity: 1;
}

/* 视频加载中的优雅过渡 */
.wp-nav-container.has-video-bg.loading {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.wp-nav-container.has-video-bg.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

.wp-nav-container.has-video-bg.loaded {
    background: transparent;
}

.wp-nav-container.has-video-bg.loaded::after {
    display: none;
}

/* 加载动画 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 背景图片样式 */
.wp-nav-container.has-image-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* 确保图片完全覆盖容器，防止黑边 */
.wp-nav-container.has-image-bg {
    overflow: hidden;
    position: relative;
}

.wp-nav-container.has-image-bg::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -3;
    border-radius: inherit;
    transform: scale(1.05);
}

/* 背景遮罩层 */
.wp-nav-container .nav-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

/* 渐变背景样式（默认） */
.wp-nav-container.has-gradient-bg {
    background: linear-gradient(135deg, var(--nav-gradient-1, #667eea) 0%, var(--nav-gradient-2, #764ba2) 100%);
}

/* 3D导航标题样式 */
.wp-nav-container .nav-3d-title {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease-out;
}

.wp-nav-container .nav-3d-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    text-align: center;
    margin: 0 0 2rem 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* 移动端标题调整 */
@media screen and (max-width: 768px) {
    .wp-nav-container .nav-3d-title {
        font-size: 1.5rem;
    }
    
    .wp-nav-container .nav-3d-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}

/* 标题动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 当仅显示3D导航时的特殊间距处理 */
#page-wrapper > .wp-nav-container {
    margin-top: 3rem; /* 增加与页面顶部的间距 */
}

/* 当3D导航是页面第一个元素时 */
body.home #page-wrapper > .wp-nav-container:first-child {
    margin-top: 4rem; /* 作为首个元素时更多间距 */
}

/* 在页面顶部时确保与导航菜单有足够间距 */
.home .wp-nav-container {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

/* 桌面端间距调整 */
@media screen and (min-width: 769px) {
    #page-wrapper > .wp-nav-container {
        margin-top: 4rem;
    }
    
    body.home #page-wrapper > .wp-nav-container:first-child {
        margin-top: 5rem;
    }
    
    .home .wp-nav-container {
        margin-top: 4rem;
        margin-bottom: 3rem;
    }
}

/* 移动端间距调整 */
@media screen and (max-width: 768px) {
    #page-wrapper > .wp-nav-container {
        margin-top: 2rem;
    }
    
    body.home #page-wrapper > .wp-nav-container:first-child {
        margin-top: 2.5rem;
    }
    
    .home .wp-nav-container {
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem 1rem 2.5rem; /* 移动端调整padding */
    }
    
    /* 移动端工具提示调整 */
    .icon-tooltip {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
    
    /* 移动端图标网格调整 */
    .icon-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem;
    }
    
    .icon-3d {
        width: 80px;
        height: 80px;
    }
    
    .icon-face img {
        width: 50px;
        height: 50px;
    }
}

/* 超小屏幕优化 */
@media screen and (max-width: 480px) {
    .icon-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.8rem;
    }
    
    .icon-3d {
        width: 70px;
        height: 70px;
    }
    
    .icon-face img {
        width: 45px;
        height: 45px;
    }
    
    .icon-tooltip {
        font-size: 0.7rem;
        padding: 5px 8px;
    }
}

.wp-nav-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* WordPress 集成时的额外样式 */
.wp-nav-container.wp-integrated {
    border: 2px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

/* 标题样式已移除，现在直接显示图标网格 */

.icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 5;
}

/* 动态列数支持 */
.icon-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.icon-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.icon-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
.icon-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
.icon-grid.columns-8 { grid-template-columns: repeat(8, 1fr); }

/* 自适应网格布局 */
@supports (display: grid) {
    .icon-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.icon-wrapper {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 15px;
}

.icon-wrapper:hover {
    transform: translateY(-10px);
}

.icon-border {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.icon-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.icon-wrapper:hover .icon-border {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(255, 255, 255, 0.2);
    transform: scale(1.03) translateY(-2px);
}

.icon-wrapper:hover .icon-border::before {
    opacity: 1;
}

.icon-3d {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.icon-wrapper:hover .icon-3d {
    transform: rotateY(180deg);
}

/* 禁用动画时的样式 */
.no-animations .icon-wrapper:hover .icon-3d {
    transform: none;
}

.no-animations .icon-border,
.no-animations .icon-wrapper {
    transition: none !important;
    animation: none !important;
}

.icon-face {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.icon-face.front {
    transform: translateZ(60px);
    background: rgba(255,255,255,0.1);
}

.icon-face.back {
    transform: rotateY(180deg) translateZ(60px);
    background: rgba(255,255,255,0.8);
    color: #333;
    font-weight: bold;
    font-size: 1.1rem;
}

.icon-face.left {
    transform: rotateY(-90deg) translateZ(60px);
    background: linear-gradient(45deg, #667eea, #764ba2);
}

.icon-face.right {
    transform: rotateY(90deg) translateZ(60px);
    background: linear-gradient(45deg, #764ba2, #667eea);
}

.icon-face.top {
    transform: rotateX(90deg) translateZ(60px);
    background: linear-gradient(45deg, #667eea, #764ba2);
}

.icon-face.bottom {
    transform: rotateX(-90deg) translateZ(60px);
    background: linear-gradient(45deg, #764ba2, #667eea);
}

.icon-face img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* 悬停工具提示样式 */
.icon-tooltip {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 工具提示箭头 */
.icon-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.9);
}

/* 悬停时显示工具提示 */
.icon-wrapper:hover .icon-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: -40px;
    animation: tooltipFadeIn 0.3s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 点击动画效果 */
.icon-wrapper.clicked .icon-3d {
    animation: clickPopAnimation 0.6s ease-out;
}

.icon-wrapper.clicked .icon-border {
    animation: borderPopAnimation 0.6s ease-out;
}

@keyframes clickPopAnimation {
    0% {
        transform: scale(1) rotateY(0deg);
    }
    20% {
        transform: scale(1.3) rotateY(180deg);
    }
    40% {
        transform: scale(0.8) rotateY(360deg);
    }
    60% {
        transform: scale(1.2) rotateY(540deg);
    }
    80% {
        transform: scale(0.9) rotateY(720deg);
    }
    100% {
        transform: scale(1) rotateY(720deg);
    }
}

@keyframes borderPopAnimation {
    0% {
        transform: scale(1);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    20% {
        transform: scale(1.3);
        box-shadow: 
            0 25px 50px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.4),
            0 0 0 3px rgba(255, 255, 255, 0.3),
            0 0 30px rgba(255, 255, 255, 0.2);
    }
    40% {
        transform: scale(0.8);
        box-shadow: 
            0 15px 35px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 0 2px rgba(255, 255, 255, 0.2),
            0 0 20px rgba(255, 255, 255, 0.15);
    }
    60% {
        transform: scale(1.2);
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.25),
            inset 0 2px 0 rgba(255, 255, 255, 0.35),
            0 0 0 2px rgba(255, 255, 255, 0.25),
            0 0 25px rgba(255, 255, 255, 0.18);
    }
    80% {
        transform: scale(0.9);
        box-shadow: 
            0 12px 30px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.15),
            0 0 15px rgba(255, 255, 255, 0.1);
    }
    100% {
        transform: scale(1);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

/* 弹出效果 */
.popup-effect {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: popupShow 0.8s ease-out;
}

@keyframes popupShow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

.popup-effect .popup-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.popup-effect .popup-icon img {
    width: 50px;
    height: 50px;
}

.popup-effect .popup-text {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 加载状态指示器 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    color: white;
    font-size: 1.1rem;
    margin-top: 20px;
    font-weight: 500;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 图标加载动画 */
@keyframes iconFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.icon-wrapper {
    animation: iconFadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.icon-wrapper:nth-child(1) { animation-delay: 0.1s; }
.icon-wrapper:nth-child(2) { animation-delay: 0.2s; }
.icon-wrapper:nth-child(3) { animation-delay: 0.3s; }
.icon-wrapper:nth-child(4) { animation-delay: 0.4s; }
.icon-wrapper:nth-child(5) { animation-delay: 0.5s; }
.icon-wrapper:nth-child(6) { animation-delay: 0.6s; }
.icon-wrapper:nth-child(7) { animation-delay: 0.7s; }
.icon-wrapper:nth-child(8) { animation-delay: 0.8s; }
.icon-wrapper:nth-child(9) { animation-delay: 0.9s; }
.icon-wrapper:nth-child(10) { animation-delay: 1.0s; }

/* 切换按钮样式 */
.home-module-switch {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    padding: 10px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch-btn {
    background: #f0f0f0;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.switch-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.switch-btn:hover:not(.active) {
    background: #e0e0e0;
}

/* 响应式设计优化 */
@media (max-width: 1200px) {
    .wp-nav-container {
        padding: 1rem;
        margin: 0.8rem;
        min-height: 25vh;
    }
    
    .icon-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
    }
    
    .icon-grid.columns-8 { grid-template-columns: repeat(6, 1fr); }
    .icon-grid.columns-6 { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 768px) {
    .wp-nav-container {
        padding: 0.8rem;
        margin: 0.4rem;
        border-radius: 12px;
        min-height: 20vh;
    }
    
    .nav-header {
        margin-bottom: 0.5rem;
    }
    
    .icon-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.6rem;
        padding: 0;
    }
    
    .icon-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
    .icon-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
    .icon-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
    .icon-grid.columns-6 { grid-template-columns: repeat(5, 1fr); }
    .icon-grid.columns-8 { grid-template-columns: repeat(5, 1fr); }
    
    .icon-wrapper {
        padding: 4px;
    }
    
    .icon-border {
        padding: 10px;
        border-radius: 15px;
    }
    
    .icon-3d,
    .icon-face {
        width: 80px;
        height: 80px;
    }
    
    .icon-face.front,
    .icon-face.back {
        transform: translateZ(40px);
    }
    
    .icon-face.left {
        transform: rotateY(-90deg) translateZ(40px);
    }
    
    .icon-face.right {
        transform: rotateY(90deg) translateZ(40px);
    }
    
    .icon-face.top {
        transform: rotateX(90deg) translateZ(40px);
    }
    
    .icon-face.bottom {
        transform: rotateX(-90deg) translateZ(40px);
    }
    
    .icon-face img {
        width: 40px;
        height: 40px;
    }
    
    .icon-label {
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }
    
    .home-module-switch {
        top: 10px;
        right: 10px;
        padding: 8px 16px;
    }
    
    .switch-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .wp-nav-container {
        padding: 0.4rem;
        margin: 0.2rem;
        min-height: 25vh;
    }
    
    .icon-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.2rem;
    }
    
    .icon-wrapper {
        padding: 2px;
    }
    
    .icon-border {
        padding: 6px;
        border-radius: 10px;
        border-width: 2px;
    }
    
    .icon-3d,
    .icon-face {
        width: 60px;
        height: 60px;
    }
    
    .icon-face.front,
    .icon-face.back {
        transform: translateZ(30px);
    }
    
    .icon-face.left {
        transform: rotateY(-90deg) translateZ(30px);
    }
    
    .icon-face.right {
        transform: rotateY(90deg) translateZ(30px);
    }
    
    .icon-face.top {
        transform: rotateX(90deg) translateZ(30px);
    }
    
    .icon-face.bottom {
        transform: rotateX(-90deg) translateZ(30px);
    }
    
    .icon-face img {
        width: 30px;
        height: 30px;
    }
    
    .icon-label {
        font-size: 0.75rem;
        margin-top: 0.3rem;
        line-height: 1.2;
    }
}

/* 超小屏幕优化 */
@media (max-width: 360px) {
    .wp-nav-container {
        padding: 0.3rem;
        margin: 0.1rem;
        min-height: 22vh;
    }
    
    .icon-grid {
        gap: 0.1rem;
    }
    
    .icon-wrapper {
        padding: 1px;
    }
    
    .icon-border {
        padding: 4px;
        border-radius: 8px;
    }
    
    .icon-3d,
    .icon-face {
        width: 50px;
        height: 50px;
    }
    
    .icon-face.front,
    .icon-face.back {
        transform: translateZ(25px);
    }
    
    .icon-face.left {
        transform: rotateY(-90deg) translateZ(25px);
    }
    
    .icon-face.right {
        transform: rotateY(90deg) translateZ(25px);
    }
    
    .icon-face.top {
        transform: rotateX(90deg) translateZ(25px);
    }
    
    .icon-face.bottom {
        transform: rotateX(-90deg) translateZ(25px);
    }
    
    .icon-face img {
        width: 25px;
        height: 25px;
    }
    
    .icon-label {
        font-size: 0.7rem;
        margin-top: 0.2rem;
    }
}

/* 无障碍访问优化 */
.icon-wrapper:focus {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

.icon-wrapper[aria-label]:hover::after {
    content: attr(aria-label);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
}

/* WordPress 后台兼容性 */
.wp-admin .wp-nav-container {
    background: #f1f1f1;
    color: #333;
}

.wp-admin .nav-title,
.wp-admin .nav-subtitle {
    color: #333;
}

/* 打印样式 */
@media print {
    .wp-nav-container {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .icon-3d {
        transform: none !important;
    }
    
    .popup-effect,
    .loading-overlay,
    .home-module-switch {
        display: none !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .wp-nav-container {
        background: #000;
        border: 2px solid #fff;
    }
    
    .icon-border {
        border: 3px solid #fff;
        background: #333;
    }
    
    .nav-title,
    .nav-subtitle,
    .icon-label {
        color: #fff;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    .icon-3d,
    .icon-border,
    .icon-wrapper {
        transition: none !important;
        animation: none !important;
    }
    
    .popup-effect {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .wp-nav-container::before {
        display: none;
    }
}

/* 性能优化 */
.icon-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.icon-wrapper {
    contain: layout style;
}

/* 模块隐藏/显示控制 */
.home-video-search.hidden,
.wp-nav-container.hidden {
    display: none !important;
}

.home-video-search.visible,
.wp-nav-container.visible {
    display: flex !important;
}