@charset "utf-8";
@import url(reset.css);

/* ========== 现代简约主题 - Modern Theme ========== */

/* 基础设置 */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: #2c3e50;
    line-height: 1.6;
    font-size: 14px;
}

/* 容器布局 */
#wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* 头部样式 */
#header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0;
    position: relative;
}

#topbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    min-height: 80px;
}

.logo {
    background: url(logo.png) center no-repeat;
    background-size: contain;
    width: 200px;
    height: 60px;
    display: block;
}

/* 搜索框样式 */
#sobox {
    flex: 1;
    max-width: 500px;
    margin-left: 30px;
}

.sofrm {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    padding: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#selopt {
    position: relative;
    margin-right: 10px;
}

#cursel {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    border: none;
    min-width: 80px;
    text-align: center;
}

#options {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    overflow: hidden;
    min-width: 120px;
}

#options li {
    list-style: none;
}

#options li a {
    display: block;
    padding: 10px 15px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s ease;
}

#options li a:hover {
    background: #667eea;
    color: white;
}

.sipt {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
}

.sipt::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.sbtn {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 14px;
}

.sbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(238, 90, 36, 0.4);
}

/* 导航栏样式 */
#navbox {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.navbar li {
    margin: 0 2px;
}

.navbar li a {
    display: block;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 6px;
    margin: 5px 0;
}

.navbar li a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.navbar li a i {
    margin-right: 5px;
}

/* 统计信息栏 */
#txtbox {
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.count {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(116, 185, 255, 0.3);
}

.count b {
    color: #ffeaa7;
    font-weight: 600;
}

.link {
    color: #636e72;
    font-size: 12px;
    text-align: right;
}

.link a {
    color: #74b9ff;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s ease;
}

.link a:hover {
    color: #0984e3;
}

/* Modern主题 - 现代化容器布局 */
.modern-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    padding: 30px;
    background: white;
    min-height: 600px;
}

.modern-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.modern-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 区块标题样式 */
.section-header {
    text-align: center;
    margin-bottom: 25px;
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-title i {
    color: #667eea;
    font-size: 22px;
}

.section-subtitle {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}

/* 工具卡片网格 */
.tools-section {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    color: #2c3e50;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    color: #667eea;
    border-color: rgba(102, 126, 234, 0.3);
}

.tool-card i {
    font-size: 24px;
    color: #667eea;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.tool-card:hover i {
    transform: scale(1.1);
    color: #764ba2;
}

.tool-card span {
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* 分类网格布局 */
.categories-section {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 16px;
    padding: 30px;
    color: white;
}

.categories-section .section-title,
.categories-section .section-subtitle {
    color: white;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.category-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.category-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.category-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.category-header a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.category-header a:hover {
    color: #ffeaa7;
}

.category-count {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 10px;
    color: white;
}

.category-subcates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subcate-link {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 15px;
    font-size: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.subcate-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffeaa7;
    transform: translateY(-1px);
}

/* 侧边栏卡片样式 */
.sidebar-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.sidebar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.12);
    border-color: rgba(102, 126, 234, 0.2);
}

.card-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header i {
    font-size: 14px;
}

.more-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.3s ease;
}

.more-link:hover {
    color: white;
}

.card-body {
    padding: 20px;
}

/* 最新收录卡片 */
.latest-sites-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.latest-site-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.latest-site-item:hover {
    background: #f8f9fa;
}

.site-icon img {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.site-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-name {
    color: #2c3e50;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s ease;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-name:hover {
    color: #667eea;
}

.site-time {
    color: #7f8c8d;
    font-size: 11px;
}

.new-badge {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    align-self: flex-start;
}

/* 推荐网格 */
.recommend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.recommend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #2c3e50;
    transition: all 0.3s ease;
    border: 1px solid #f1f2f6;
}

.recommend-item:hover {
    background: #f8f9fa;
    color: #667eea;
    border-color: rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

.recommend-item img {
    border-radius: 6px;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recommend-name {
    font-size: 11px;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* 标签云 */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f8f9fa;
    color: #2c3e50;
    text-decoration: none;
    border-radius: 15px;
    font-size: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.tag-item:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateY(-1px);
}

.tag-count {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 8px;
    font-weight: 600;
}

.tag-item:hover .tag-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* 资讯列表 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.news-item:hover {
    background: #f8f9fa;
}

.news-title {
    color: #2c3e50;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.news-title:hover {
    color: #667eea;
}

.news-time {
    color: #7f8c8d;
    font-size: 11px;
}

/* 卡片样式 */
.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px 20px;
    font-weight: 600;
    font-size: 16px;
}

.card-body {
    padding: 20px;
}

/* 网站列表样式 */
.sitelist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sitelist li {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid #f1f2f6;
    transition: all 0.3s ease;
    position: relative;
}

.sitelist li:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

.sitelist li:last-child {
    border-bottom: none;
}

.sitelist li .thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sitelist li .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sitelist li .info {
    flex: 1;
}

.sitelist li .info h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

.sitelist li .info h3 a {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sitelist li .info h3 a:hover {
    color: #764ba2;
}

.sitelist li .info p {
    margin: 0 0 8px 0;
    color: #636e72;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sitelist li .info address {
    color: #00b894;
    font-size: 12px;
    font-style: normal;
    margin: 0;
}

/* 分页样式 */
.showpage {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.showpage a,
.showpage span {
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
    min-width: 35px;
    text-align: center;
}

.showpage a {
    background: #f8f9fa;
    color: #667eea;
    border: 1px solid #e9ecef;
}

.showpage a:hover {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
}

.showpage .current {
    background: #667eea;
    color: white;
    border: 1px solid #667eea;
}

/* 侧边栏样式 */
#homebest,
#homecate,
#newbox,
#quickbox,
#newsbox {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
}

#homebest h3,
#homecate h3,
#newbox h3,
#quickbox h3,
#newsbox h3 {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.bestlist,
.catelist,
.newlist,
.quicklist,
.newslist {
    list-style: none;
    margin: 0;
    padding: 15px;
}

.bestlist li,
.catelist li,
.newlist li,
.quicklist li,
.newslist li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f2f6;
}

.bestlist li:last-child,
.catelist li:last-child,
.newlist li:last-child,
.quicklist li:last-child,
.newslist li:last-child {
    border-bottom: none;
}

.bestlist li a,
.catelist li a,
.newlist li a,
.quicklist li a,
.newslist li a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
}

.bestlist li a:hover,
.catelist li a:hover,
.newlist li a:hover,
.quicklist li a:hover,
.newslist li a:hover {
    color: #667eea;
}

/* 底部样式 */
#footer {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 30px;
    text-align: center;
}

#fmenu {
    margin-bottom: 15px;
}

#fmenu a {
    color: #bdc3c7;
    text-decoration: none;
    margin: 0 10px;
    font-size: 13px;
    transition: color 0.3s ease;
}

#fmenu a:hover {
    color: white;
}

#fcopy {
    color: #95a5a6;
    font-size: 12px;
    line-height: 1.5;
}

/* 面包屑导航 */
.sitepath {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 30px;
    font-size: 12px;
    color: #636e72;
    border-bottom: 1px solid #e9ecef;
}

.sitepath a {
    color: #667eea;
    text-decoration: none;
}

.sitepath a:hover {
    color: #764ba2;
}

/* 工具类 */
.blank10 {
    height: 10px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 图片样式 */
img {
    max-width: 100%;
    height: auto;
}

.content img {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 链接样式 */
a {
    color: #667eea;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #764ba2;
}

/* 主题切换按钮 */
.theme-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.theme-switcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
}

.theme-switcher i {
    margin-right: 8px;
}

/* Modern主题响应式设计 */
@media (max-width: 1200px) {
    #wrapper {
        margin: 0 10px;
        border-radius: 8px;
    }

    #topbox {
        padding: 15px 20px;
    }

    .modern-container {
        padding: 20px;
        gap: 20px;
    }

    .sitepath {
        padding: 8px 20px;
    }

    .tools-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 992px) {
    .modern-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .modern-sidebar {
        order: -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }

    .navbar {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 10px;
    }

    .navbar li {
        flex-shrink: 0;
    }

    .tools-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }

    .categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .recommend-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    #wrapper {
        margin: 0;
        border-radius: 0;
    }

    #topbox {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .logo {
        width: 150px;
        height: 45px;
    }

    #sobox {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    .navbar {
        flex-wrap: wrap;
        padding: 10px;
    }

    .navbar li a {
        padding: 8px 12px;
        font-size: 12px;
    }

    #mainbox {
        padding: 10px;
        gap: 15px;
    }

    .sitelist li {
        flex-direction: column;
        text-align: center;
    }

    .sitelist li .thumb {
        margin-right: 0;
        margin-bottom: 10px;
        align-self: center;
    }

    .count {
        font-size: 12px;
        padding: 10px 15px;
    }

    .theme-switcher {
        top: 10px;
        right: 10px;
        padding: 10px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    #topbox {
        padding: 10px;
    }

    .navbar li a {
        padding: 6px 8px;
        font-size: 11px;
    }

    .sitelist li .thumb {
        width: 60px;
        height: 60px;
    }

    .sitelist li .info h3 {
        font-size: 14px;
    }

    .sitelist li .info p {
        font-size: 12px;
    }

    .showpage a,
    .showpage span {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 30px;
    }
}

/* NEW图标样式 - 现代化设计 */
span.new-icon, .new-icon, a .new-icon {
    display: inline-block !important;
    background: linear-gradient(45deg, #ff6b6b, #ee5a24) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    margin-left: 8px !important;
    margin-right: 2px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3) !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    position: relative !important;
    animation: modernPulse 2s ease-in-out infinite !important;
    min-width: 24px !important;
    text-align: center !important;
}

/* 现代化脉冲动画 */
@keyframes modernPulse {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(255, 107, 107, 0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }
}

/* NEW图标悬停效果 */
.new-icon:hover {
    background: linear-gradient(45deg, #ee5a24, #d63031) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.5) !important;
}

/* 响应式NEW图标 */
@media (max-width: 768px) {
    span.new-icon, .new-icon, a .new-icon {
        font-size: 8px !important;
        padding: 2px 6px !important;
        margin-left: 6px !important;
        border-radius: 10px !important;
        min-width: 20px !important;
    }
}

@media (max-width: 480px) {
    span.new-icon, .new-icon, a .new-icon {
        font-size: 7px !important;
        padding: 2px 5px !important;
        margin-left: 4px !important;
        border-radius: 8px !important;
        min-width: 18px !important;
    }
}

/* 特殊元素样式 */
.web_ai_intro {
    font-size: 14px;
    display: inline-block;
    padding: 8px 16px;
    color: #fff;
    border-radius: 20px;
    line-height: 1.4;
    background: linear-gradient(135deg, #667eea, #764ba2);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
    margin: 5px 0;
}

.access-button {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
}

.access-button:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
}

/* 表单样式 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
    color: #2c3e50;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 按钮样式 */
button,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.aattr,.atitle,.pagenav li,.rellist li,.wdata li{text-align:center}.first_page,.jump_page,.last_page,.next_page,.pages,.prev_page,.total_page{border:1px solid #096cb2;padding:2px 6px;margin-right:5px;display:block;float:left}.jump_page,.total_page{background:#0080c6;color:#fff}.first_page,.last_page,.next_page,.pages,.prev_page{background:#fff;color:#486ba2;text-decoration:none}.current{background:#0080c6;color:#fff;display:block;float:left;margin-right:5px;padding:3px 6px}#artinfo,#siteinfo{border-top:2px solid #08c;padding:8px}.wtitle{padding-bottom:15px}.wtitle font{font:12px normal}.wdata{background:#fcfcfc;border-top:1px dotted #dadada;border-bottom:1px dotted #dadada;height:50px;padding:5px}.wdata li{color:#9177aa;display:block;float:left;padding:0 5px}.wdata li em{color:#666;display:block;font-size:12px;padding-top:3px}.line{border-right:1px solid #ddd}#retips{display:block;height:13px;margin-top:10px}#retips a{font-size:12px}.params{padding-top:15px}.wthumb{background:#fff;border:1px solid #dadada;float:left;padding:1px;width:140px}.linkname,.pagenav li{border-bottom:1px dashed #e8e8e8}.linkitem,.siteitem{margin-left:160px}.siteitem li{padding-bottom:8px}.rellist li{float:left;font-size:12px;margin:1px;padding:10px 0 5px 13px}.rellist li img{background:#fff;padding:2px}.rellist li strong{display:block;font-weight:400;height:15px;width:106px}#catebox h2 a:hover,#catebox ul li a:hover,.rellist li a:hover{color:#f30;text-decoration:underline}.atitle{color:#06c;padding:8px 0}.aattr{background:#fcfcfc;padding:3px}.content{font:14px/25px normal;padding:10px 0:font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}#linkinfo{border-top:2px solid #08c;padding:10px}.linkname{color:#f60;font:24px "微软雅黑";padding-bottom:15px}#allcate,#bestart,#bestweb,#subbox,.topsite{border:1px solid #e8e8e8}.linkitem li{padding-bottom:10px}#otherinfo h2{color:#333;font-size:14px;margin-bottom:10px}#otherinfo p{line-height:25px;padding:0 10px}#allcate,#subbox{padding:10px}#catebox h2{color:#333}#catebox h2 a,.weblist_b li strong a{color:#06c}#catebox h2 em,#catebox ul li em{color:#888;font:10px normal}#catebox ul{display:block;margin-top:2px}#catebox ul li{float:left;height:23px;line-height:23px;margin:1px;text-indent:30px;width:121px}#catebox ul li a{color:#444}.artlist_b{padding:0 10px 0 0;counter-reset:rank}.artlist_b li{padding:6px 0 6px 26px;text-overflow:ellipsis;counter-increment:rank}.artlist_b li::before{content:counter(rank);position:absolute;left:5px;top:50%;transform:translateY(-50%);font:700 18px/1 'Roboto Condensed',Arial,sans-serif;color:#666}.artlist_b li:first-child::before{color:#ff4757;font-size:22px}.artlist_b li:nth-child(2)::before{color:#ffa502;font-size:20px}.artlist_b li:nth-child(3)::before{color:#2ed573;font-size:18px}.artlist_b li:nth-child(n+4)::before{color:#a4b0be;font-weight:500}.weblist_b{padding:0 10px}.weblist_b li{padding:8px 0 5px}.weblist_b li img{background:#fff;border:1px solid #dbdbdb;height:65px;width:85px}.weblist_b li strong{display:block;font:12px '';height:15px;top:8px;width:135px}.weblist_b li p{display:block;height:35px;line-height:18px;top:25px}.weblist_b li address{display:block;height:15px;top:60px;width:180px}.topsite{float:left;padding:1px;width:390px;margin:5px;}.topsite h3{background:url(blue.png) 0 -95px repeat-x;font-size:13px;padding:6px}.fbform li,.toplist{padding:10px}.toplist li{padding:3px 0}.toplist li span{color:#f30;padding-right:10px}.toplist li em{font:12px Arial}.fbform{margin-left:200px}.fbform li strong{float:left;font-weight:400;text-align:right;width:60px}.fbform li p{float:left;margin-left:5px}.fbform li span{color:#999}.fipt{background:url(ipt.png) left top no-repeat;border:1px solid #dadada;padding:4px}.fbtn{background:#08c;border:1px solid #08c;color:#fff;font-weight:700;padding:3px 8px}#pagebox-left{float:left;width:310px}#pagebox-right{width:880px}.pagenav{background:#f9f9f9;border:1px solid #e8e8e8}.pagenav li{margin:5px;padding:7px}.prevnext li{width:100%;margin-top:20px}.donate-button-container button{padding:10px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:14px;}.donate-button-container button:hover{background-color:#45a049}#donate-popup{position:fixed;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:9999}.donate-popup-content{background:#fff;padding:20px;border-radius:10px;position:relative;width:300px}.close{position:absolute;top:10px;right:15px;font-size:24px}.donate-qr-codes div{text-align:center;margin-top:10px}.donate-qr-codes img{width:150px;height:150px}.web_ai_intro{font-size:14px;display:inline-table;width:auto;padding:0 2em 0 .5em;color:#fff;border-radius:1em 4em 0 1em;line-height:1.6em;background:linear-gradient(to right,#ff5e00,#ffb200); font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.access-button {display: inline-block;  /* 确保按钮作为内联块元素显示 */padding: 10px 20px;     /* 内边距，使按钮有足够空间 */background-color: #007bff;  /* 蓝色背景色（可根据主题更换，如 #4CAF50） */color: white;           /* 文字颜色 */text-decoration: none;  /* 去除默认的下划线 */border-radius: 5px;     /* 圆角边框，增加现代感 */border: none;           /* 无边框 */font-size: 14px;        /* 字体大小 */font-weight: bold;      /* 字体加粗 */cursor: pointer;        /* 鼠标指针变为手型 */transition: all 0.3s ease;  /* 平滑过渡效果 */box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 轻微初始阴影 */}.access-button:hover {background-color: #0056b3;  /* 悬停时背景色变深 */box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);  /* 增加阴影，实现凸起效果 */transform: translateY(-2px);  /* 向上移动 2px，模拟凸起 */}@media (min-width:768px){.wap{display:none}}@media (max-width:767px){#topbox,.logo{height:60px}.logo,.navbar li,.sipt,.wdata li,.wthumb{float:left}#catebox ul li,.navbar li,.rellist li,.wdata li{text-align:center}body{background:#fff}#wrapper{margin:0 auto;width:100%}#header{margin-top:-20px}.clearfix{clear:both}#navbox{background:#0089d4;display:block;height:106px}.navbar li{font:14px/35px "微软雅黑";height:35px;width:25%}.navbar li:nth-last-child(2),li.navline{display:none!important}.logo,.sipt,.sofrm,.wdata li{display:block}.logo{background:url(logo.png) center/100% 100%;width:140px}#sobox{float:right;padding-top:0}.sipt{background:url(ipt.png) top left no-repeat;border:1px solid #dadada;font:13px/30px normal;height:30px;padding:0 5px 0 90px;width:176px}.sofrm{margin:0 auto;padding-top:14px;position:relative;width:auto}.sbtn{background:#65bc0b;border:0;color:#fff;cursor:pointer;font-size:14px;height:32px;width:50px;margin-right:3px}#mainbox-right,#pagebox-left,#pagebox-right,.wthumb{width:100%}#mainbox #mainbox-left{float:left;width:100%}.wdata{background:#fcfcfc;border-top:1px dotted #dadada;border-bottom:1px dotted #dadada;height:80px;list-style:none;padding:5px}.wdata li{color:#9177aa;width:20%;padding:0}.line{border-right:0px solid #ddd}.wthumb{background:#fff;border:0 solid #dadada;padding:0 0 10px;margin:0;height:auto}.fbform,.linkitem,.siteitem{margin-left:0}.topsite{border:1px solid #e8e8e8;float:none;padding:0;width:99%;margin:0 auto 10px;margin-top:0!important;margin-right:0!important}.sitelist li .thumb{width:25%;height:75px}.sitelist li .info{margin-left:30%;width:69%}.sitelist li .info p{height:40px!important;line-height:20px;width:auto}.sitelist li .info address{color:#080;font-size:12px;padding:0 10px 3px 0;position:absolute;top:63px}.sitelist li .info h3{font-size:14px;height:15px;line-height:17px;overflow:hidden}.linkname{font:18px "微软雅黑"}.atitle{font:20px "微软雅黑"}.sitepath{margin:0 1%}#inbox,#mainbox{margin:1%}#catebox ul li{float:left;text-indent:0;width:24%}#listbox h2{color:#333;font-size:14px;margin-bottom:20px}.content img{max-width:100%!important;height:auto!important}#topbar{display:none}.rellist li{float:left;font-size:12px;margin:1px;padding:10px 0 0 15px}#topbg{height:20px;line-height:32px}.count{float:left;padding:6px}}@media(max-width:480px){.rellist li {float: left;font-size: 12px;margin: 1px;padding: 10px 0px 0px 10px;}}/* NEW图标样式 */
/* NEW图标样式 - 强制优先级，确保显示 */
span.new-icon, .new-icon, a .new-icon {
    display: inline-block !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
    margin-right: 2px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.4) !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    position: relative !important;
    animation: newIconBlink 2s ease-in-out infinite !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* 闪烁动画效果 */
@keyframes newIconBlink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* 悬停效果 */
.new-icon:hover {
    background: #ff3742 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 3px 6px rgba(255, 71, 87, 0.6) !important;
}

/* 响应式调整 */
@media (max-width: 767px) {
    span.new-icon, .new-icon, a .new-icon {
        font-size: 8px !important;
        padding: 1px 4px !important;
        margin-left: 4px !important;
        border-radius: 3px !important;
    }
}

@media (max-width: 480px) {
    span.new-icon, .new-icon, a .new-icon {
        font-size: 7px !important;
        padding: 1px 3px !important;
        margin-left: 3px !important;
    }
}

/* NEW图标样式 - 强制优先级，确保显示 */
span.new-icon, .new-icon, a .new-icon {
    display: inline-block !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
    margin-right: 2px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.4) !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    position: relative !important;
    animation: newIconBlink 2s ease-in-out infinite !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* 闪烁动画效果 */
@keyframes newIconBlink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* 悬停效果 */
.new-icon:hover {
    background: #ff3742 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 3px 6px rgba(255, 71, 87, 0.6) !important;
}

/* 响应式调整 */
@media (max-width: 767px) {
    span.new-icon, .new-icon, a .new-icon {
        font-size: 8px !important;
        padding: 1px 4px !important;
        margin-left: 4px !important;
        border-radius: 3px !important;
    }
}

@media (max-width: 480px) {
    span.new-icon, .new-icon, a .new-icon {
        font-size: 7px !important;
        padding: 1px 3px !important;
        margin-left: 3px !important;
    }
}

/* NEW图标样式 - 使用!important确保优先级 */
.new-icon {
    display: inline-block !important;
    background: linear-gradient(45deg, #ff4757, #ff6b7a) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 3px rgba(255, 71, 87, 0.3) !important;
    animation: newPulse 2s infinite !important;
    position: relative !important;
    z-index: 999 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    border: none !important;
    text-decoration: none !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
}

/* 确保NEW图标在链接中正常显示 */
a .new-icon {
    display: inline-block !important;
    background: linear-gradient(45deg, #ff4757, #ff6b7a) !important;
    color: white !important;
}

/* 悬停效果 */
.new-icon:hover {
    background: linear-gradient(45deg, #ff3742, #ff5865) !important;
    transform: scale(1.1) !important;
}

@keyframes newPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* 响应式调整 */
@media (max-width: 767px) {
    .new-icon {
        font-size: 9px !important;
        padding: 1px 3px !important;
        margin-left: 3px !important;
    }
}

/* 确保在不同容器中都能正常显示 */
.newlist .new-icon,
.quicklist .new-icon,
.newslist .new-icon,
li .new-icon,
a .new-icon {
    display: inline-block !important;
    background: linear-gradient(45deg, #ff4757, #ff6b7a) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    animation: newPulse 2s infinite !important;
}