/* ============================================================
   TP8导航网 - 卡片式布局主题 v3
   风格：深蓝背景 + 3列卡片网格 + 彩色图标
   ============================================================ */

/* === CSS Variables === */
:root {
    --bg-primary: #111c3a;
    --bg-secondary: #162244;
    --bg-card: #1a2a52;
    --bg-card-hover: #1e305e;
    --bg-input: rgba(255,255,255,0.07);
    --bg-glass: rgba(255,255,255,0.07);
    --border-card: rgba(100,140,220,0.15);
    --border-hover: rgba(100,160,255,0.35);
    --text-primary: #e8edf5;
    --text-secondary: #9aafcd;
    --text-muted: #5e7299;
    --accent: #4da3ff;
    --accent-cyan: #4da3ff;
    --accent-blue: #599cf7;
    --accent-orange: #f39c12;
    --accent-green: #2ecc71;
    --accent-glow: rgba(77,163,255,0.25);
    --gradient-accent: linear-gradient(135deg, #4da3ff, #6d8aff);
    --gradient-card: linear-gradient(155deg, rgba(26,42,78,0.85), rgba(18,28,56,0.88));
    --gradient-hero: linear-gradient(160deg, #0f1a3a 0%, #151e48 25%, #1c2a55 50%, #121838 75%, #0d1530 100%);
    --shadow-glow: 0 0 30px rgba(90,155,255,0.18);
    --shadow-card: 0 8px 32px rgba(0,0,0,0.25);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --transition: all 0.25s ease;
    --transition-bounce: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    --font-main: 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
}

/* === Reset === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:var(--font-main);
    background:var(--bg-primary);
    color:var(--text-primary);
    min-height:100vh;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    position:relative;
}
a{text-decoration:none;color:inherit}

/* === Background === */
.page-bg{
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
    background:linear-gradient(170deg, #0b1530 0%, #111c3a 30%, #14204a 60%, #0e1835 100%);
    overflow:hidden;
}
.page-bg::before{
    content:'';
    position:absolute;top:-30%;left:-30%;
    width:160%;height:160%;
    background:
        radial-gradient(ellipse at 25% 20%, rgba(77,163,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(120,80,255,0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 40% 80%, rgba(0,200,200,0.04) 0%, transparent 50%);
    animation:bgFloat 20s ease-in-out infinite;
}
@keyframes bgFloat{
    0%,100%{transform:translate(0,0)}
    33%{transform:translate(1%,-0.5%)}
    66%{transform:translate(-0.5%,1%)}
}

/* === Header === */
.main-header{
    position:sticky;top:0;z-index:100;
    background:rgba(17,28,58,0.82);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(100,140,220,0.12);
    padding:0 24px;
}
.header-inner{
    max-width:1280px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    height:62px;
}
.logo{
    display:flex;align-items:center;gap:8px;
    font-size:22px;font-weight:800;letter-spacing:2px;
    background:linear-gradient(135deg,#5cb8ff,#7b8cff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    white-space:nowrap;flex-shrink:0;
}
.logo-text{white-space:nowrap}
.logo-icon{font-size:26px;-webkit-text-fill-color:#5cb8ff}

.main-nav{display:flex;gap:2px;align-items:center}
/* 汉堡按钮 */
.hamburger{display:none;background:none;border:none;color:var(--text-primary);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .2s}
.hamburger:hover{background:rgba(255,255,255,.08)}
/* 移动端 */
@media(max-width:768px){.hamburger{display:block!important;flex-shrink:0;margin-left:auto}}
/* 移动端强制显示 */
@media(max-width:768px){.hamburger{display:block!important}}
/* 移动端菜单遮罩 */
.mobile-menu-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1001;opacity:0;transition:opacity .3s}
.mobile-menu-overlay.show{display:block;opacity:1}
/* 移动端侧滑菜单 */
.mobile-menu{display:none;position:fixed;top:0;right:-300px;width:280px;height:100%;background:var(--bg-card);z-index:1000;transition:right .3s ease;overflow-y:auto;box-shadow:-4px 0 20px rgba(0,0,0,.3)}
.mobile-menu.open{display:block;right:0}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-card);font-size:16px;font-weight:700;color:var(--text-primary)}
.mobile-close{background:none;border:none;font-size:20px;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:6px}
.mobile-close:hover{background:rgba(255,255,255,.08)}
.mobile-menu-body{padding:8px 0}
.mobile-menu-body a{display:flex;align-items:center;gap:10px;padding:14px 20px;font-size:15px;color:var(--text-secondary);text-decoration:none;transition:background .15s}
.mobile-menu-body a:hover,.mobile-menu-body a.active{background:rgba(77,163,255,.08);color:var(--accent)}
.mobile-menu-body .mm-icon{font-size:18px;width:24px;text-align:center}
.mm-divider{height:1px;background:var(--border-card);margin:8px 16px}
.main-nav a{
    padding:7px 16px;border-radius:var(--radius-sm);
    font-size:14px;color:var(--text-secondary);
    transition:var(--transition);font-weight:500;
}
.main-nav a:hover,
.main-nav a.active{
    color:#fff;
    background:rgba(77,163,255,0.12);
}
.main-nav a.btn-login{
    background:rgba(77,163,255,0.2);
    border:1px solid rgba(77,163,255,0.3);
    color:#fff;font-weight:600;
}
.main-nav a.btn-login:hover{
    background:rgba(77,163,255,0.35);
    box-shadow:0 0 16px rgba(77,163,255,0.2);
}

/* === Hero === */
.hero-section{
    text-align:center;padding:48px 20px 20px;
}
.hero-section h1{
    font-size:38px;font-weight:800;letter-spacing:2px;
    background:linear-gradient(135deg,#6dc5ff,#5cb8ff,#a78bfa);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-section p{
    color:var(--text-muted);font-size:15px;margin-top:8px;
}

/* === Search === */
.search-box{
    max-width:560px;margin:28px auto 0;padding:0 20px;position:relative;
}
.search-box input{
    width:100%;height:50px;
    padding:0 54px 0 20px;
    background:var(--bg-input);
    border:1.5px solid rgba(100,140,220,0.18);
    border-radius:50px;
    font-size:15px;color:var(--text-primary);
    outline:none;
    transition:var(--transition);
}
.search-box input::placeholder{color:var(--text-muted)}
.search-box input:focus{
    border-color:var(--accent);
    box-shadow:0 0 28px rgba(77,163,255,0.15);
    background:rgba(255,255,255,0.09);
}
.search-box button{
    position:absolute;right:26px;top:50%;
    transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;border:none;
    background:linear-gradient(135deg,#4da3ff,#6d8aff);
    color:#fff;font-size:18px;cursor:pointer;
    transition:var(--transition);
    box-shadow:0 3px 14px rgba(77,163,255,0.3);
}
.search-box button:hover{
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 4px 20px rgba(77,163,255,0.5);
}

/* === Container === */
.container{max-width:1260px;margin:0 auto;padding:24px 28px}

/* === Ad Banner === */
.ad-banner{display:block;margin-bottom:16px;max-width:100%;overflow:hidden}
.ad-banner img{width:100%;max-width:1200px;height:auto;max-height:180px;object-fit:cover;border-radius:var(--radius-md);display:block}
.ad-placeholder{width:100%;max-width:1200px;min-height:80px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px dashed var(--border-card);border-radius:var(--radius-md);padding:20px;text-align:center;color:var(--text-muted);font-size:14px;font-weight:500}

/* === Section Header === */
.section-header{
    display:flex;align-items:center;justify-content:space-between;
    margin:36px 0 18px;padding-left:14px;
    border-left:3px solid var(--accent);
}
.section-header h2{
    font-size:17px;font-weight:700;color:var(--text-primary);
    display:flex;align-items:center;gap:8px;
}
.section-icon{font-size:18px}
.cat-icon-img{width:20px;height:20px;border-radius:4px;object-fit:contain}
.more-link{
    font-size:13px;color:var(--accent);font-weight:500;
    transition:var(--transition);
}
.more-link:hover{color:#fff}

/* === Site Card Grid (3 columns) === */
.site-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.site-card{
    display:flex;align-items:center;gap:12px;
    background:var(--bg-card);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:14px 16px;
    transition:var(--transition);
    cursor:pointer;
    position:relative;overflow:hidden;
}
.site-card:hover{
    background:var(--bg-card-hover);
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.25),0 0 30px var(--accent-glow);
}
.site-card::after{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(77,163,255,0.3),transparent);
    opacity:0;transition:opacity 0.3s;
}
.site-card:hover::after{opacity:1}

.card-icon{
    width:42px;height:42px;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:700;color:#fff;flex-shrink:0;
    box-shadow:0 3px 10px rgba(0,0,0,0.2);
}

.card-info{flex:1;min-width:0}
.card-title{
    font-size:14px;font-weight:600;color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:6px;
}

/* === Tags === */
.tag{
    display:inline-block;font-size:10px;padding:2px 7px;border-radius:3px;
    font-weight:600;letter-spacing:.3px;flex-shrink:0;line-height:1.5;
}
.tag-top{background:rgba(231,76,60,0.2);color:#e74c3c}
.tag-rec{background:rgba(46,204,113,0.18);color:#2ecc71}
.tag-hot{background:rgba(243,156,18,0.18);color:#f39c12}

/* === Card Stats === */
.card-stats{
    display:flex;flex-direction:column;align-items:center;flex-shrink:0;
    gap:1px;
}
.card-stats .views{
    font-size:11px;color:var(--text-muted);
}
.card-stats .click-hint{
    font-size:10px;color:var(--text-muted);opacity:0.6;
}

/* === Hot List === */
.hot-list{
    background:var(--bg-card);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    overflow:hidden;
}
.hot-item{
    display:flex;align-items:center;gap:14px;
    padding:13px 20px;
    transition:var(--transition);
    border-bottom:1px solid rgba(100,140,220,0.06);
}
.hot-item:last-child{border-bottom:none}
.hot-item:hover{background:rgba(77,163,255,0.05)}

.hot-rank{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;flex-shrink:0;
}
.rank-top-1{background:linear-gradient(135deg,#ff4757,#ff6348);color:#fff;box-shadow:0 3px 10px rgba(255,71,87,0.3)}
.rank-top-2{background:linear-gradient(135deg,#ffa502,#ff7f50);color:#fff;box-shadow:0 3px 10px rgba(255,165,2,0.3)}
.rank-top-3{background:linear-gradient(135deg,#eccc68,#ffc048);color:#fff;box-shadow:0 3px 10px rgba(236,204,104,0.3)}
.rank-normal{background:rgba(255,255,255,0.05);color:var(--text-muted)}

.hot-info{flex:1;min-width:0}
.hot-title{font-size:14px;font-weight:500;color:var(--text-primary)}
.hot-desc{
    font-size:12px;color:var(--text-muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;
}
.hot-clicks{font-size:12px;color:var(--text-muted);flex-shrink:0}

/* === Article Cards === */
.article-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.article-card{
    display:block;
    background:var(--bg-card);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:20px;
    transition:var(--transition);
}
.article-card:hover{
    background:var(--bg-card-hover);
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.article-card h3{
    font-size:15px;font-weight:700;color:var(--text-primary);
    margin-bottom:8px;line-height:1.4;
}
.article-card p{
    font-size:13px;color:var(--text-muted);line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.article-meta{
    margin-top:12px;display:flex;gap:14px;
    font-size:12px;color:var(--accent);
}

/* === Empty tip === */
.empty-tip{
    grid-column:1/-1;
    text-align:center;color:var(--text-muted);
    padding:30px;font-size:13px;
    background:var(--bg-card);border-radius:var(--radius-md);
    border:1px solid var(--border-card);
}
.empty-tip a{color:var(--accent)}

/* === Footer === */
.main-footer{
    margin-top:60px;
    background:rgba(14,24,53,0.9);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(100,140,220,0.1);
    padding:36px 24px;text-align:center;
}
.footer-links{
    display:flex;justify-content:center;gap:24px;margin-bottom:18px;flex-wrap:wrap;
}
.footer-links a{font-size:13px;color:var(--text-muted);transition:var(--transition)}
.footer-links a:hover{color:var(--accent)}

.friend-links{margin:16px 0 12px;padding:16px 0;border-top:1px solid rgba(100,140,220,0.08);border-bottom:1px solid rgba(100,140,220,0.08)}
.fl-title{font-size:13px;color:var(--text-muted);margin-bottom:10px}
.fl-list{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center}
.fl-list a{font-size:13px;color:var(--text-secondary);transition:var(--transition)}
.fl-list a:hover{color:var(--accent)}

.copyright{font-size:12px;color:var(--text-muted)}

/* === Scrollbar === */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:rgba(100,140,220,0.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(100,140,220,0.4)}

/* === Animation === */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}
.site-card,.article-card{
    animation:fadeInUp .4s ease-out forwards;
}
.site-card:nth-child(1){animation-delay:.02s}
.site-card:nth-child(2){animation-delay:.04s}
.site-card:nth-child(3){animation-delay:.06s}
.site-card:nth-child(4){animation-delay:.08s}
.site-card:nth-child(5){animation-delay:.10s}
.site-card:nth-child(6){animation-delay:.12s}
.site-card:nth-child(7){animation-delay:.14s}
.site-card:nth-child(8){animation-delay:.16s}
.site-card:nth-child(9){animation-delay:.18s}
.site-card:nth-child(10){animation-delay:.20s}
.site-card:nth-child(11){animation-delay:.22s}
.site-card:nth-child(12){animation-delay:.24s}

/* === Bottom Banner === */
.bottom-banner-wrap{margin:0 28px 24px;max-width:1260px;margin-inline:auto}
.bottom-banner-wrap .ad-banner img{border-radius:var(--radius-md);width:100%;max-width:1200px;max-height:200px;object-fit:cover}

/* === Sidebar Layout (Category Page) === */
.page-layout{display:flex;gap:24px;max-width:1260px;margin:0 auto;padding:24px 28px}
.page-main{flex:1;min-width:0}
.page-sidebar{width:300px;flex-shrink:0}
.sidebar-widget{
    background:var(--bg-card);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:20px;margin-bottom:18px;
    transition:var(--transition);
}
.sidebar-widget:hover{
    border-color:var(--border-hover);
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.sidebar-widget h3{
    font-size:15px;font-weight:700;color:var(--text-primary);
    margin-bottom:14px;padding-left:12px;
    border-left:3px solid var(--accent);
    display:flex;align-items:center;gap:8px;
}
.sidebar-site-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px solid rgba(100,140,220,0.06);
    transition:var(--transition);
}
.sidebar-site-item:last-child{border-bottom:none}
.sidebar-site-item:hover{transform:translateX(4px);color:var(--accent)}
.sidebar-site-item .s-rank{
    width:22px;height:22px;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;flex-shrink:0;
    color:var(--text-muted);background:rgba(255,255,255,0.04);
}
.sidebar-site-item .s-rank.s-top{background:rgba(231,76,60,0.2);color:#e74c3c;font-weight:800}
.sidebar-site-item .s-title{font-size:13px;font-weight:500;color:var(--text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-site-item:hover .s-title{color:var(--accent)}

/* Ad in Sidebar */
.sidebar-ad img{width:100%;max-width:100%;height:auto;max-height:250px;object-fit:contain;border-radius:var(--radius-sm)}

/* === Article Detail Page === */
.article-detail{max-width:900px;margin:0 auto;padding:30px 28px 60px}
.article-detail .art-card{
    background:var(--bg-card);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:36px 40px;
    margin-bottom:24px;
}
.article-detail .art-card h1{font-size:24px;font-weight:800;color:var(--text-primary);line-height:1.5;margin-bottom:14px}
.article-detail .art-meta{
    display:flex;gap:20px;font-size:13px;color:var(--text-muted);
    padding-bottom:22px;margin-bottom:26px;
    border-bottom:1px solid var(--border-card);
}
.article-detail .art-body{line-height:1.85;color:var(--text-secondary);font-size:15px}
.article-detail .art-body p{margin-bottom:16px}
.article-detail .art-body img{max-width:100%;border-radius:var(--radius-md);margin:12px 0}
.article-detail .art-body a{color:var(--accent);text-decoration:underline}
.article-bottom-cta{
    max-width:900px;margin:0 auto 60px;padding:0 28px;
    display:flex;flex-direction:column;gap:20px;
}
.article-bottom-cta .cta-card{
    background:var(--bg-card);border:1px solid var(--border-card);
    border-radius:var(--radius-md);padding:20px 24px;text-align:center;
}
.article-bottom-cta .cta-card h4{font-size:15px;color:var(--text-primary);margin-bottom:8px}
.article-bottom-cta .cta-card p{font-size:13px;color:var(--text-muted)}
.article-bottom-cta .btn-back{
    display:inline-block;margin-top:12px;padding:8px 28px;
    background:var(--accent);color:#fff;border-radius:50px;
    font-size:14px;font-weight:600;transition:var(--transition);
}
.article-bottom-cta .btn-back:hover{
    background:#3d8bfd;box-shadow:0 4px 20px rgba(77,163,255,0.4);
}
.related-wrap{
    background:var(--bg-card);border:1px solid var(--border-card);
    border-radius:var(--radius-md);padding:24px;
}
.related-wrap h4{font-size:15px;color:var(--text-primary);margin-bottom:12px}
.related-wrap a{
    display:block;padding:7px 0;font-size:13px;color:var(--text-secondary);
    transition:var(--transition);border-bottom:1px solid rgba(100,140,220,0.05);
}
.related-wrap a:last-child{border-bottom:none}
.related-wrap a:hover{color:var(--accent);padding-left:8px}

/* === Category Header Card === */
.cat-header-card{
    background:var(--bg-card);border:1px solid var(--border-card);
    border-radius:var(--radius-md);padding:26px 32px;margin-bottom:20px;
}
.cat-header-card h1{font-size:24px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:10px}
.cat-header-card .count{font-size:13px;color:var(--text-muted);margin-top:6px}

/* === Pagination === */
.pagination-wrap{text-align:center;padding:24px 0 0}

/* === Empty State === */
.no-data{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:14px}
.no-data a{color:var(--accent)}

/* === Responsive === */
/* 1024px - 平板横向 */
@media(max-width:1024px){
    .site-grid{grid-template-columns:repeat(2,1fr)}
    .article-grid{grid-template-columns:repeat(2,1fr)}
    .page-layout{flex-direction:column;padding:16px}
    .page-sidebar{width:100%}
    .article-detail{padding:20px 16px}
    .article-detail .art-card{padding:24px 20px}
    .hero-section h1{font-size:36px}
    .hero-sub{font-size:15px}
}
/* 768px - 平板竖屏 / 大屏手机横屏 */
@media(max-width:768px){
    .site-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .article-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .hero-section{padding:36px 0 24px}
    .hero-section h1{font-size:24px;letter-spacing:1px}
    .hero-sub{font-size:13px;margin-top:6px;opacity:.7}
    .search-box{max-width:100%;margin:16px 14px 0}
    .search-box input{height:42px;font-size:13px;border-radius:21px;padding:0 44px 0 16px}
    .search-box button{width:38px;height:38px;top:2px;right:2px;border-radius:19px;font-size:15px}
    .main-header{background:rgba(11,16,35,.92)}
    .header-inner{height:48px;padding:0 14px}
    .main-nav{display:none}
    .hamburger{display:block}
    .mobile-menu-overlay{display:none}
    .mobile-menu-overlay.show{display:block}
    .logo{font-size:16px}
    .logo-icon{font-size:20px}
    .container{padding:12px 14px}
    .section-header{margin:18px 0 10px;padding-left:10px}
    .section-header h2{font-size:15px}
    .section-more{font-size:11px;padding:4px 10px}
    .site-card{border-radius:10px;padding:12px}
    .site-icon{width:36px;height:36px;font-size:16px;border-radius:8px}
    .card-info{padding-top:6px}
    .card-title{font-size:13px;line-height:1.3}
    .card-desc{font-size:11px;margin-top:2px;line-height:1.3}
    .card-tags{gap:3px;margin-top:5px}
    .card-tags .tag{font-size:10px;padding:1px 6px;border-radius:3px}
    .card-stats{font-size:10px;margin-top:4px}
    .cat-card{padding:12px;border-radius:10px}
    .cat-card .cat-icon{width:36px;height:36px;font-size:16px}
    .cat-card .cat-name{font-size:13px}
    .cat-card .cat-count{font-size:11px}
    .hot-grid{gap:8px}
    .hot-item{padding:10px 12px;border-radius:8px}
    .hot-rank{font-size:18px;width:28px}
    .hot-title{font-size:13px}
    .hot-desc{font-size:11px;margin-top:2px}
    .hot-stats{font-size:11px}
    .rank-num{width:22px;height:22px;font-size:11px}
    .ad-banner{margin-bottom:12px}
    .ad-banner img{max-height:120px;border-radius:10px}
    .footer-links{flex-wrap:wrap;gap:8px;padding:14px 16px}
    .footer-links a{font-size:12px;padding:4px 8px}
    .friend-links{flex-wrap:wrap;padding:10px 16px;gap:8px}
    .fl-title{font-size:11px;white-space:nowrap}
    .fl-list a{font-size:11px;margin-right:8px;padding:2px 0}
    .copyright{font-size:11px;padding:10px 16px}
    .page-layout{padding:12px 14px;gap:16px}
    .cat-header-card{padding:14px 16px;border-radius:10px}
    .cat-header-card h1{font-size:17px}
    .sidebar-widget{border-radius:10px;padding:14px}
    .article-detail{padding:16px 14px}
    .article-detail .art-card{padding:20px 16px;border-radius:10px}
    .article-detail .art-card h1{font-size:17px}
    .article-detail .art-body{font-size:14px;line-height:1.75}
    .article-bottom-cta{padding:0 14px}
    .related-wrap h4{font-size:14px}
    .related-wrap a{font-size:13px;padding:8px 0}
    .bottom-banner-wrap{margin:0}
    .pay-wrapper{margin:40px auto;padding:0 14px}
    .pay-card{padding:24px 20px}
    .pay-options{gap:8px}
    .pay-option{min-width:90px;padding:12px 8px}
    .pay-option .icon{font-size:22px}
    .pay-option .name{font-size:12px}
    .order-info{padding:14px}
}
/* 480px - 手机竖屏 */
@media(max-width:480px){
    /* 通用布局 */
    *{ -webkit-tap-highlight-color:transparent; }
    .site-grid{grid-template-columns:1fr;gap:8px}
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .article-grid{grid-template-columns:1fr;gap:10px}
    .hero-section{padding:28px 0 16px}
    .hero-section h1{font-size:20px}
    .hero-sub{font-size:12px}
    .search-box{margin:12px 10px 0}
    .search-box input{height:38px;font-size:12px;border-radius:19px;padding:0 40px 0 14px}
    .search-box button{width:34px;height:34px;top:2px;right:2px;border-radius:17px;font-size:14px}
    .header-inner{height:44px;padding:0 10px}
    .main-nav a{padding:5px 6px;font-size:11px}
    .logo{font-size:14px}
    .logo-icon{font-size:18px}
    .container{padding:8px 10px}
    .section-header{margin:14px 0 8px;padding-left:8px}
    .section-header h2{font-size:14px}
    .section-more{font-size:10px;padding:3px 8px}
    .site-card{padding:10px;border-radius:8px}
    .site-icon{width:32px;height:32px;font-size:14px;border-radius:7px}
    .card-info{padding-top:4px}
    .card-title{font-size:12px}
    .card-desc{font-size:10px}
    .card-tags .tag{font-size:9px;padding:0 5px}
    .card-stats{font-size:9px}
    .cat-grid{gap:6px}
    .cat-card{padding:10px;border-radius:8px}
    .cat-card .cat-icon{width:32px;height:32px;font-size:14px}
    .cat-card .cat-name{font-size:12px}
    .cat-card .cat-count{font-size:10px}
    .hot-grid{gap:6px}
    .hot-item{padding:8px 10px}
    .hot-rank{font-size:16px;width:24px}
    .hot-title{font-size:12px}
    .hot-desc{font-size:10px}
    .hot-stats{font-size:10px}
    .rank-num{width:20px;height:20px;font-size:10px}
    .ad-banner img{max-height:90px;border-radius:8px}
    .ad-banner{margin-bottom:8px}
    .footer-links{padding:12px;gap:6px}
    .footer-links a{font-size:11px}
    .friend-links{padding:8px 12px}
    .fl-title{font-size:10px}
    .fl-list a{font-size:10px}
    .copyright{font-size:10px;padding:8px 12px}
    .page-layout{padding:8px 10px;gap:12px}
    .cat-header-card{padding:12px 14px}
    .cat-header-card h1{font-size:15px}
    .sidebar-widget{padding:12px;border-radius:8px}
    .sidebar-widget h3{font-size:13px}
    .sidebar-site-item{padding:8px 0}
    .sidebar-site-item .s-title{font-size:12px}
    .article-detail{padding:12px 10px}
    .article-detail .art-card{padding:16px 14px}
    .article-detail .art-card h1{font-size:15px}
    .article-detail .art-body{font-size:13px}
    .article-bottom-cta{padding:0 10px;gap:14px}
    .related-wrap h4{font-size:13px}
    .related-wrap a{font-size:12px}
    .pay-wrapper{margin:20px auto;padding:0 10px}
    .pay-card{padding:20px 16px;border-radius:12px}
    .pay-card h2{font-size:18px}
    .pay-options{gap:6px;flex-wrap:wrap}
    .pay-option{min-width:80px;padding:10px 6px;flex:0 1 auto}
    .pay-option .icon{font-size:20px}
    .order-info{padding:12px;margin:12px 0}
    .order-row{font-size:13px}
    .order-row.total{font-size:16px}
    .pay-btn{height:42px;font-size:14px}
    .not-configured{padding:12px;font-size:12px}
}
/* 360px - 小屏手机 */
@media(max-width:360px){
    .header-inner{height:40px;padding:0 8px}
    .main-nav a{padding:4px 5px;font-size:10px}
    .logo{font-size:12px}
    .logo-icon{font-size:16px}
    .hero-section{padding:20px 0 12px}
    .hero-section h1{font-size:17px}
    .hero-sub{font-size:11px}
    .search-box{margin:10px 8px 0}
    .search-box input{height:34px;font-size:11px}
    .search-box button{width:30px;height:30px;font-size:12px}
    .container{padding:6px 8px}
    .site-grid{gap:6px}
    .site-card{padding:8px}
    .site-icon{width:28px;height:28px;font-size:12px;border-radius:6px}
    .card-title{font-size:11px}
    .cat-card{padding:8px}
    .cat-card .cat-icon{width:28px;height:28px;font-size:12px}
    .cat-card .cat-name{font-size:11px}
    .pay-option{min-width:70px;padding:8px 4px}
    .pay-option .icon{font-size:18px}
    .pay-option .name{font-size:11px}
}