:root{--primary:#3498db;--secondary:#7f8c8d;--light-bg:#f8f9fa;--card-bg:#fff;--offline:#e74c3c;--online:#2ecc71;--shadow:0 2px 8px rgba(0,0,0,.05);--highlight:#f39c12;--border:#eaeaea}*{margin:0;padding:0;box-sizing:border-box;font-family:"PingFang SC","Microsoft YaHei",sans-serif}body{background-color:var(--light-bg);color:#333;background-image:radial-gradient(#e9ecef 0.5px,transparent 0.5px);background-size:15px 15px;-webkit-overflow-scrolling:touch}

.container{width:90%;max-width:1200px;margin:0 auto;padding:0 15px}header{background-color:rgba(255,255,255,0.95);padding:20px 0;box-shadow:var(--shadow);position:sticky;top:0;z-index:100;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-bottom:1px solid var(--border)}header h1{color:var(--primary);font-size:24px;margin-bottom:15px;display:flex;align-items:center;flex-wrap:wrap;letter-spacing:-0.5px}header .subtitle{font-size:14px;color:var(--secondary);margin-left:10px;font-weight:normal;opacity:0.8}.logo-highlight{color:var(--highlight);font-weight:bold;margin:0 2px;position:relative;display:inline-block}.logo-highlight::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:var(--highlight);transform:scaleX(0);transition:transform 0.2s;transform-origin:bottom right}.logo-highlight:hover::after{transform:scaleX(1);transform-origin:bottom left}.search-box{position:relative;margin-bottom:15px}.search-box input{width:100%;padding:10px 15px 10px 40px;border:1px solid var(--border);border-radius:6px;font-size:14px;outline:none;transition:all .2s;background-color:rgba(255,255,255,0.8)}.search-box input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(52,152,219,.1);background-color:#fff}.search-box i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#999}.filter{display:flex;flex-wrap:wrap;gap:10px}.filter button{padding:7px 14px;background:none;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .2s;font-size:14px}.filter button.active{background-color:var(--primary);color:#fff;border-color:var(--primary)}.filter button:hover:not(.active){background-color:rgba(52,152,219,0.05)}.status-info{display:flex;flex-wrap:wrap;gap:15px;margin:20px 0;padding:15px;background:var(--card-bg);border-radius:6px;box-shadow:var(--shadow)}.status-info div{flex:1;min-width:120px;position:relative;padding-left:12px}.status-info div::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:70%;border-radius:3px}.status-info #totalCount::before{background-color:var(--primary)}.status-info #onlineCount::before{background-color:var(--online)}.status-info #offlineCount::before{background-color:var(--offline)}.status-info div span{font-weight:bold;color:var(--primary)}.last-updated{text-align:right;color:var(--secondary);font-size:13px}.sites-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:20px 0}.site-card{
    background:var(--card-bg);
    border-radius:6px;
    overflow:hidden;
    transition:all .25s ease;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:160px;
    border:1px solid var(--border);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    position:relative;
    opacity:1;
    transform:translateY(0);
    transition:opacity 0.3s ease, transform 0.3s ease;
}

.site-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,var(--highlight),var(--primary));
    opacity:0;
    transition:opacity .3s ease;
}

.site-card:hover::before{
    opacity:1;
}

.site-card:active{
    transform:scale(0.98);
}

.site-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.08)}.site-header{padding:12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background-color:rgba(52,152,219,0.03)}.site-header h3{font-size:15px;color:#333;font-weight:600;display:flex;align-items:center;letter-spacing:0.2px}.site-header h3 i{margin-right:6px;font-size:14px}.site-status{font-size:12px;padding:4px 10px;border-radius:10px;font-weight:600;letter-spacing:0.5px}.status-online{background-color:rgba(46,204,113,.15);color:var(--online);border:1px solid rgba(46,204,113,.2)}.status-offline{background-color:rgba(231,76,60,.15);color:var(--offline);border:1px solid rgba(231,76,60,.2)}.site-content{padding:15px;flex-grow:1;display:flex;flex-direction:column;justify-content:center}.site-url{font-weight:bold;color:#333;margin-bottom:8px;word-break:break-all;font-size:13px}.site-url a{color:inherit;text-decoration:none;transition:color .2s;border-bottom:1px dashed rgba(52,152,219,.2)}.site-url a:hover{color:var(--primary);border-bottom-color:var(--primary)}.site-ping{color:var(--secondary);font-size:13px;display:flex;align-items:center;gap:6px;margin:0 auto}.site-ping i{font-size:10px;opacity:0.7}.site-actions{padding:12px;display:flex;justify-content:center;border-top:1px solid var(--border)}.site-btn{
    padding:10px 15px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    transition:all .25s;
}

.visit-btn{
    background-color:var(--primary);
    color:#fff;
    width:100%;
    text-decoration:none;
    letter-spacing:0.5px;
}

.visit-btn:hover{
    opacity:1;
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(52,152,219,0.4);
    background-color:#2980b9;
}

.full-width{width:100%}footer{margin-top:40px;text-align:center;padding:20px 0;color:var(--secondary);font-size:14px;border-top:1px solid var(--border);background-color:rgba(255,255,255,0.5)}.back-to-top{position:fixed;bottom:30px;right:30px;width:36px;height:36px;border-radius:50%;background:var(--primary);color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:var(--shadow);z-index:99;transition:all 0.2s;opacity:0.8}.back-to-top:hover{opacity:1;transform:translateY(-3px);box-shadow:0 5px 15px rgba(52,152,219,.3)}@media (max-width:768px){
    .sites-container{grid-template-columns:repeat(auto-fill,minmax(48%,1fr));gap:10px}
    .filter button{flex:1;padding:8px 5px;font-size:13px}
    .status-info{flex-direction:column;gap:10px;padding:12px}
    .status-info div{padding-left:8px;min-width:100%}
    header h1{font-size:20px}
    header .subtitle{display:block;margin-left:0;margin-top:5px;font-size:12px}
    .container{width:95%;padding:0 10px}
    .site-card{border-radius:5px}
    .back-to-top{width:32px;height:32px;font-size:14px;bottom:20px;right:20px}
    .site-header h3{font-size:13px}
    .site-content{padding:10px}
    .site-url{font-size:12px}
    .site-actions{padding:10px}
    .site-btn{padding:8px 10px;font-size:12px}
}

@media (max-width:480px){
    .sites-container{grid-template-columns:repeat(auto-fill,minmax(100%,1fr))}
}

.notice-box{background-color:rgba(243,156,18,0.1);border:1px solid rgba(243,156,18,0.2);border-radius:6px;padding:12px 15px;margin:15px 0;color:#333;font-size:13px;display:flex;align-items:center;gap:8px}.notice-box i{color:var(--highlight);font-size:16px}.notice-box strong{color:var(--highlight);margin-right:3px}

*{-webkit-tap-highlight-color:transparent}

/* 骨架屏样式 */
.skeleton-card{background:#fff;pointer-events:none}
.skeleton-text,.skeleton-badge,.skeleton-btn{background:linear-gradient(90deg,#f0f0f0 25%,#f8f8f8 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}
.skeleton-text{height:14px;border-radius:4px;margin-bottom:8px;width:80%}
.skeleton-text-long{width:100%}
.skeleton-text-short{width:60%}
.skeleton-badge{height:20px;width:50px;border-radius:10px}
.skeleton-btn{height:36px;width:100%;border-radius:4px}
.skeleton-header{justify-content:space-between;display:flex;padding:12px;border-bottom:1px solid #f0f0f0}
.skeleton-content{padding:12px;flex-grow:1}
.skeleton-actions{padding:12px;border-top:1px solid #f0f0f0}

@keyframes skeleton-loading{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}