@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeUp { animation: fadeInUp 0.4s ease forwards; }
.animate-fadeRight { animation: fadeInUp 0.4s ease forwards; }
.animate-delay-1,.animate-delay-2,.animate-delay-3,.animate-delay-4,.animate-delay-5{opacity:0;}

*{margin:0;padding:0;box-sizing:border-box}
body{background:#f5f7fa;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.container{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:20px;width:100%}
#main{flex:1 1 calc(100% - 340px);min-width:300px}
#side{width:320px;flex:0 0 320px}
.card{background:white;border-radius:12px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.06);overflow:hidden;transition:all 0.3s;width:100%}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.1)}
.card-head{padding:12px 15px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;background:#fafbfc}
.card-head i{margin-right:8px;color:#ff7f00}
.card-title{font-weight:600;font-size:15px;flex:1}
.card-body{padding:15px;width:100%}
.more{color:#999;font-size:12px;text-decoration:none}
.more:hover{color:#ff7f00}

.top-sites-container{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.site-item1.top{width:calc(16.666% - 7px);min-width:100px;flex:1 0 calc(16.666% - 7px);background:rgba(255,255,250,0.8);border:1px solid #e0e0e0;border-radius:8px;padding:6px;display:flex;flex-direction:column;align-items:center;text-align:center;height:70px;text-decoration:none}
.site-item1.top:hover{background:#fff;border-color:#ff7f00}
.site-header{display:flex;align-items:center;width:100%;margin-bottom:5px;height:35px}
.site-item1.top .icon{margin-right:8px}
.site-item1.top .icon img{width:25px;height:25px;border-radius:50%;object-fit:cover}
.site-item1.top .name{font-size:14px;font-weight:bold;text-align:left;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;height:25px;line-height:25px}
.site-item1.top .expire-time{font-size:12px;color:#ff5722;background:rgba(255,87,34,0.1);padding:4px 8px;border-radius:10px;text-align:center;height:22px;line-height:14px}
.site-item1.top .expire-time.permanent{background:rgba(144,238,144,0.25);color:#2E8B57;font-weight:bold}

.card:not(#置顶站点):not(:has(.category-top-item)):not(:has(.site-ranking)):not(:has(.link-item)):not(.board):not(.warning-card) .card-body{padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:8px;padding-bottom:8px}
.card:not(#置顶站点):not(:has(.category-top-item)):not(:has(.site-ranking)):not(:has(.link-item)):not(.board):not(.warning-card) .site-item{display:flex;align-items:center;padding:0 8px;border:1px solid #f0f0f0;border-radius:6px;text-decoration:none;background:#fafafa;height:40px;width:100%}
.card:not(#置顶站点):not(:has(.category-top-item)):not(:has(.site-ranking)):not(:has(.link-item)):not(.board):not(.warning-card) .site-item .icon{margin-right:8px}
.card:not(#置顶站点):not(:has(.category-top-item)):not(:has(.site-ranking)):not(:has(.link-item)):not(.board):not(.warning-card) .site-item .icon img{width:20px;height:20px;border-radius:4px;object-fit:cover}
.card:not(#置顶站点):not(:has(.category-top-item)):not(:has(.site-ranking)):not(:has(.link-item)):not(.board):not(.warning-card) .site-item .name{font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.card:not(#置顶站点):not(:has(.category-top-item)):not(:has(.site-ranking)):not(:has(.link-item)):not(.board):not(.warning-card) .site-item:hover{background:#fff;border-color:#ff7f00}
.site-item .fa-external-link{display:none}

.card.board .card-body{padding:0}
.card.board marquee{font-size:14px;padding:10px 15px;color:#ff7f00}

.site-ranking{display:flex;align-items:center;padding:8px 10px;text-decoration:none;border-bottom:1px solid #f0f0f0;width:100%}
.site-ranking .rank{width:28px;font-size:14px;font-weight:bold;color:#ff7f00}
.site-ranking .icon img{width:20px;height:20px;border-radius:50%;margin-right:10px}
.site-ranking .name{flex:1;font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.category-top-item{display:flex;align-items:center;padding:10px 15px;border-bottom:1px solid #f0f0f0;text-decoration:none;width:100%}
.category-top-item .rank{width:24px;height:24px;background:#f0f0f0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;margin-right:10px}
.category-top-item:nth-child(1) .rank{background:#6a11cb;color:white}
.category-top-item:nth-child(2) .rank{background:#257fc0;color:white}
.category-top-item:nth-child(3) .rank{background:#2d9aff;color:white}
.category-top-item .name{flex:1;font-size:14px;color:#333}
.category-top-item .count{font-size:12px;color:#666;background:#f0f0f0;padding:3px 8px;border-radius:10px}

.oz-timeline-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #f0f0f0;text-decoration:none}
.oz-timeline-time{width:80px;font-size:12px;color:#999}
.oz-timeline-main{flex:1;display:flex;align-items:center;gap:10px}
.oz-timeline-main .icon img{width:20px;height:20px;border-radius:50%}
.oz-timeline-main .name{font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.link-item{display:inline-block;padding:5px 12px;margin:5px;background:#f5f7fa;border-radius:20px;font-size:12px;text-decoration:none;color:#666}
.link-item:hover{background:linear-gradient(135deg,#ff7f00,#ff5722);color:white}

.header{background:white;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:sticky;top:0;z-index:100;width:100%}
.header .container{display:flex;align-items:center;padding:12px 20px}
.logo img{height:40px}
.nav{display:flex;list-style:none;margin-left:auto;gap:20px}
.nav a{text-decoration:none;color:#333;font-size:14px}

.banner{background-size:cover;background-position:center;padding:50px 20px;text-align:center;background-color:#2d9aff;position:relative;overflow:hidden;width:100%}
.banner::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2))}
.banner > *{position:relative;z-index:1}
.search-form{display:flex;justify-content:center;max-width:500px;margin:0 auto;width:100%}
.search-input{flex:1;padding:12px 16px;border:none;border-radius:30px 0 0 30px;outline:none}
.search-btn{padding:12px 24px;background:#ff7f00;color:white;border:none;border-radius:0 30px 30px 0;cursor:pointer}

.footer{text-align:center;padding:20px;background:#2c3e50;color:white;margin-top:20px;width:100%}
.footer a{color:#ff7f00;text-decoration:none}

.suspend{position:fixed;right:20px;bottom:80px;list-style:none;z-index:99}
.suspend li{width:45px;height:45px;background:white;margin-bottom:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.back-top{display:none}
.text-center{text-align:center}
.text-gray{color:#999}
.fa{margin-right:5px}

.warning-card{border-left:4px solid #ff7f00}
.warning-card .card-head{background:linear-gradient(90deg,#fff3e0,#ffffff)}
.warning-card .card-body{line-height:1.7;font-size:14px;color:#555}
.warning-card p{margin-bottom:8px}
.warning-card .red-text{color:#ff5722;font-weight:bold}

.dev-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:99999;display:none;align-items:center;justify-content:center}
.dev-box{background:#fff;width:90%;max-width:400px;border-radius:20px;padding:30px;text-align:center;}
.dev-btn{background:#ff7f00;color:#fff;border:none;padding:10px 20px;border-radius:50px;cursor:pointer}
@media (max-width:768px){
    #side,#main{width:100%;flex:1 1 100%}
    .site-item1.top{width:calc(33.333% - 7px);flex:1 0 calc(33.333% - 7px)}
}

/* ========== 新增右键防复制弹窗样式 ========== */
.right-click-tip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid #06b6d4;
    border-radius: 15px;
    padding: 25px 35px;
    z-index: 99999;
    text-align: center;
    box-shadow: 0 0 50px rgba(6, 182, 212, 0.5);
    animation: tipPop 0.3s ease-out;
    pointer-events: none;
}

.right-click-tip .tip-icon {
    font-size: 48px;
    color: #06b6d4;
    margin-bottom: 15px;
    animation: tipIconFloat 2s infinite;
}

.right-click-tip .tip-title {
    font-size: 20px;
    font-weight: bold;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.right-click-tip .tip-message {
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
    opacity: 0.9;
    line-height: 1.6;
}

.right-click-tip .tip-footer {
    color: #f59e0b;
    font-size: 12px;
    border-top: 1px solid rgba(6, 182, 212, 0.3);
    padding-top: 15px;
    margin-top: 10px;
}

.right-click-tip .tip-progress {
    width: 100%;
    height: 3px;
    background: rgba(6, 182, 212, 0.2);
    border-radius: 3px;
    margin-top: 15px;
    overflow: hidden;
}

.right-click-tip .tip-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #06b6d4, #8b5cf6);
    animation: progressShrink 2s linear forwards;
}

@keyframes tipPop {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes tipIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes progressShrink {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}