/*
Theme Name: SEOPro 搜索引擎优化资讯
Theme URI: https://yourdomain.com
Author: WPS灵犀
Description: 清爽蓝白风格SEO研究资讯模板
Version: 1.1
*/

/* ====== Reset ====== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;line-height:1.8;color:#333;background:#f5f6fa}
a{color:#1a73e8;text-decoration:none;transition:all .25s}
a:hover{color:#0d47a1}
img{max-width:100%;height:auto;vertical-align:middle}
ul,ol{list-style:none}
::selection{background:rgba(26,115,232,.2);color:#333}
.container{width:1200px;margin:0 auto;padding:0 20px}
@media(max-width:1200px){.container{width:100%;padding:0 16px}}

/* ====== 头部导航 ====== */
.header{background:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;height:64px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;color:#1a73e8;flex-shrink:0}
.logo i{color:#1a73e8;font-size:22px}
.logo-text{letter-spacing:-1px}
.logo-highlight{color:#1a73e8}
.logo img{height:32px;width:auto}
.nav{display:flex;align-items:center;flex:1;margin:0 24px}
.nav a{display:block;padding:0 16px;color:#555;font-size:14px;line-height:64px;white-space:nowrap;transition:all .25s;position:relative}
.nav a:hover{color:#1a73e8}
.nav a.active{color:#1a73e8;font-weight:600}
.nav a.active::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:3px;background:#1a73e8;border-radius:3px 3px 0 0}
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.search-toggle,.menu-toggle{background:none;border:none;color:#666;font-size:18px;cursor:pointer;padding:8px 10px;border-radius:6px;transition:all .25s}
.search-toggle:hover,.menu-toggle:hover{color:#1a73e8;background:#f0f7ff}
.menu-toggle{display:none}

/* ====== 搜索浮层 ====== */
.search-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.97);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .35s}
.search-overlay.active{opacity:1;visibility:visible}
.search-overlay-inner{position:relative;width:100%;max-width:600px;padding:0 20px}
.search-overlay-inner form{display:flex;border-bottom:2px solid #e0e0e0;transition:border-color .3s}
.search-overlay-inner form:focus-within{border-color:#1a73e8}
.search-overlay-inner input{flex:1;background:none;border:none;color:#333;font-size:22px;padding:16px 0;outline:none;min-width:0}
.search-overlay-inner input::placeholder{color:#bbb}
.search-overlay-inner button{background:none;border:none;color:#1a73e8;font-size:20px;cursor:pointer;padding:16px 12px}
.search-close{position:absolute;top:-60px;right:20px;background:none;border:none;color:#999;font-size:28px;cursor:pointer;transition:color .25s}
.search-close:hover{color:#333}

/* ====== Hero 大屏 ====== */
.hero{position:relative;padding:60px 0 56px;overflow:hidden;background:linear-gradient(135deg,#e8f0fe 0%,#f0f7ff 50%,#e8f0fe 100%)}
.hero-bg-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(26,115,232,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(26,115,232,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero-content{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto}
.hero-title{font-size:36px;font-weight:800;margin-bottom:16px;line-height:1.2;color:#1a73e8;letter-spacing:-1px}
.hero-accent{color:#0d47a1}
.hero-desc{font-size:16px;color:#555;margin-bottom:32px;line-height:1.6}
.hero-stats{display:flex;justify-content:center;gap:40px}
.hero-stat{text-align:center}
.hero-stat-num{display:block;font-size:26px;font-weight:800;color:#1a73e8;margin-bottom:4px}
.hero-stat-label{font-size:13px;color:#888}

/* ====== 面包屑 ====== */
.breadcrumb{padding:16px 0;font-size:13px;color:#999}
.breadcrumb a{color:#999}
.breadcrumb a:hover{color:#1a73e8}
.breadcrumb span{margin:0 6px;color:#ddd}

/* ====== 面板 ====== */
.panel{background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.04);margin-bottom:16px;overflow:hidden}
.panel-head{padding:18px 22px;border-bottom:1px solid #f0f0f0;font-size:15px;font-weight:700;color:#333;display:flex;justify-content:space-between;align-items:center}
.panel-head i{color:#1a73e8;margin-right:8px}
.panel-head .more{font-size:12px;font-weight:500;color:#1a73e8}
.panel-head .more:hover{color:#0d47a1}
.panel-badge{font-size:11px;font-weight:500;color:#999;background:#f5f5f5;padding:3px 10px;border-radius:20px}
.panel-body{padding:16px 22px}

/* ====== 精选区域 ====== */
.featured-panel .panel-body{padding:0}
.featured-main{display:flex;gap:0;border-bottom:1px solid #f0f0f0}
.featured-img{width:380px;min-height:240px;flex-shrink:0;background-size:cover;background-position:center;position:relative}
.featured-text{flex:1;padding:24px 28px;display:flex;flex-direction:column;justify-content:center}
.featured-badge{display:inline-block;padding:3px 10px;background:#1a73e8;color:#fff;font-size:11px;font-weight:600;border-radius:4px;margin-bottom:12px;width:fit-content}
.featured-title{font-size:20px;font-weight:700;margin-bottom:12px;line-height:1.4}
.featured-title a{color:#222}
.featured-title a:hover{color:#1a73e8}
.featured-desc{font-size:14px;color:#666;margin-bottom:14px;line-height:1.6}
.featured-meta{font-size:12px;color:#999;display:flex;gap:16px}
.featured-sub{display:flex;gap:16px;padding:14px 22px;border-bottom:1px solid #f0f0f0;transition:background .2s}
.featured-sub:last-child{border-bottom:none}
.featured-sub:hover{background:#fafbfc}
.featured-sub-img{width:80px;height:56px;flex-shrink:0;border-radius:6px;background-size:cover;background-position:center}
.featured-sub-text{flex:1;display:flex;flex-direction:column;justify-content:center}
.featured-sub-text h3{font-size:14px;font-weight:600;margin-bottom:4px;line-height:1.4}
.featured-sub-text h3 a{color:#333}
.featured-sub-text h3 a:hover{color:#1a73e8}
.featured-sub-meta{font-size:12px;color:#999}

/* ====== 主布局 ====== */
.main{display:flex;gap:20px;margin-top:16px}
.content{flex:1;min-width:0}
.sidebar{width:320px;flex-shrink:0}

/* ====== 文章列表 ====== */
.post-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid #f0f0f0;transition:all .3s}
.post-item:last-child{border-bottom:none}
.post-item:hover{background:#fafbfc;margin:-4px -8px;padding:20px 12px;border-radius:8px}
.post-item-img{width:200px;height:140px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#f5f5f5}
.post-item-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-item:hover .post-item-img img{transform:scale(1.05)}
.post-item-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:#ddd;font-size:32px}
.post-item-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.post-item-cate{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.post-cate-tag{display:inline-block;padding:2px 10px;background:#e8f0fe;color:#1a73e8;font-size:11px;font-weight:600;border-radius:4px}
.post-item-time{font-size:12px;color:#999}
.post-item-title{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.4}
.post-item-title a{color:#222}
.post-item-title a:hover{color:#1a73e8}
.post-item-desc{font-size:14px;color:#666;line-height:1.6;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-item-meta{font-size:12px;color:#999;display:flex;flex-wrap:wrap;gap:6px 18px}
.post-item-meta i{margin-right:3px}
.post-item-tag{color:#1a73e8;font-size:12px}
.post-item-tag:hover{color:#0d47a1}

/* ====== 侧栏 ====== */
.sidebar .panel-body{padding:14px 18px}
.sidebar-search .panel-body{padding:14px 18px}
.sidebar-search-inner{display:flex;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;transition:border-color .3s}
.sidebar-search-inner:focus-within{border-color:#1a73e8}
.sidebar-search-inner input{flex:1;padding:10px 14px;background:transparent;border:none;color:#333;font-size:13px;outline:none;min-width:0}
.sidebar-search-inner input::placeholder{color:#bbb}
.sidebar-search-inner button{padding:10px 14px;background:transparent;border:none;color:#1a73e8;cursor:pointer;font-size:14px}
.cate-list li{padding:4px 0}
.cate-list a{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:6px;color:#555;font-size:13px;transition:all .2s}
.cate-list a:hover{background:#e8f0fe;color:#1a73e8}
.cate-list a.active{background:#e8f0fe;color:#1a73e8;font-weight:600}
.cate-list i{width:16px;margin-right:6px;color:#1a73e8}
.cate-count{font-size:11px;color:#999;background:#f5f5f5;padding:1px 8px;border-radius:10px}
.hot-list li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f5}
.hot-list li:last-child{border-bottom:none}
.hot-num{font-size:12px;color:#bbb;white-space:nowrap;min-width:36px;text-align:right;font-weight:700}
.hot-list a{flex:1;font-size:13px;color:#555;line-height:1.4}
.hot-list a:hover{color:#1a73e8}
.new-list li{padding:9px 0;border-bottom:1px solid #f5f5f5}
.new-list li:last-child{border-bottom:none}
.new-list a{display:flex;justify-content:space-between;align-items:center;gap:8px}
.new-title{flex:1;font-size:13px;color:#555;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.new-title:hover{color:#1a73e8}
.new-date{font-size:11px;color:#bbb;white-space:nowrap}
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag-cloud a{display:inline-block;padding:4px 14px;background:#f5f5f5;color:#666;border-radius:20px;font-size:12px;transition:all .25s}
.tag-cloud a:hover{background:#1a73e8;color:#fff}

/* ====== 详情页 ====== */
.article-panel{background:transparent;box-shadow:none}
.article-header{padding:16px 0 20px;border-bottom:1px solid #eee;margin-bottom:24px}
.article-cate{margin-bottom:12px}
.article-title{font-size:26px;font-weight:800;color:#222;line-height:1.3;margin-bottom:14px}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:#999}
.article-meta i{margin-right:4px;color:#1a73e8}
.article-body{padding:0}
.article-content{line-height:1.9;font-size:15px;color:#333}
.article-content img{max-width:100%;border-radius:8px;margin:20px 0;display:block}
.article-content p{margin-bottom:18px}
.article-content h2{font-size:22px;font-weight:700;margin:32px 0 14px;color:#222;padding-bottom:8px;border-bottom:2px solid #1a73e8}
.article-content h3{font-size:18px;font-weight:600;margin:24px 0 10px;color:#333}
.article-content blockquote{padding:14px 18px;margin:16px 0;border-left:4px solid #1a73e8;background:#f8faff;border-radius:0 6px 6px 0;color:#555}
.article-content code{padding:2px 8px;background:#f0f0f0;color:#d63384;border-radius:4px;font-size:13px}
.article-content pre{background:#f6f8fa;border:1px solid #eee;border-radius:6px;padding:18px;margin:16px 0;overflow-x:auto;font-size:13px;line-height:1.6}
.article-content pre code{background:transparent;padding:0;color:#333;font-size:13px}
.article-content ul,.article-content ol{padding-left:22px;margin:14px 0}
.article-content ul li{list-style:disc;margin-bottom:6px}
.article-content ol li{list-style:decimal;margin-bottom:6px}
.article-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.article-content th,.article-content td{padding:10px 14px;border:1px solid #e0e0e0;text-align:left}
.article-content th{background:#f5f7fa;color:#333;font-weight:600}
.article-tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:24px;padding-top:18px;border-top:1px solid #eee}
.article-tags span{font-size:13px;color:#999;margin-right:4px}
.article-tags a{display:inline-block;padding:4px 14px;background:#f5f5f5;color:#666;border-radius:20px;font-size:12px;transition:all .25s}
.article-tags a:hover{background:#1a73e8;color:#fff}

/* ====== 相关推荐 ====== */
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-item{padding:14px 16px;border:1px solid #eee;border-radius:8px;transition:all .25s}
.related-item:hover{border-color:#1a73e8;background:#f8faff}
.related-item-title{font-size:14px;font-weight:600;margin-bottom:6px;line-height:1.4}
.related-item-title a{color:#333}
.related-item-title a:hover{color:#1a73e8}
.related-item-meta{font-size:12px;color:#999;display:flex;gap:12px}

/* ====== 分类描述 ====== */
.catalog-intro{padding:12px 22px;background:#fafbfc;border-bottom:1px solid #f0f0f0;font-size:13px;color:#666}

/* ====== 分页 ====== */
.pagebar{text-align:center;padding:24px 0}
.pagebar a,.pagebar span{display:inline-block;padding:7px 16px;margin:0 3px;border:1px solid #e0e0e0;border-radius:6px;font-size:13px;color:#555;background:#fff;transition:all .25s}
.pagebar a:hover{border-color:#1a73e8;color:#1a73e8}
.pagebar span.current{background:#1a73e8;color:#fff;border-color:#1a73e8}
.pagebar-info{display:inline-block;margin-left:8px;font-size:12px;color:#bbb}

/* ====== 页脚 ====== */
.footer{background:#1a2332;color:rgba(255,255,255,.5);padding:48px 0 24px;margin-top:40px}
.footer a{color:rgba(255,255,255,.5)}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.footer-logo{font-size:20px;font-weight:800;color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-logo i{color:#64b5f6}
.footer-col h4{color:rgba(255,255,255,.8);font-size:14px;margin-bottom:12px;font-weight:600}
.footer-col p,.footer-col li{font-size:13px;line-height:2}
.footer-social{display:flex;gap:10px;margin-top:14px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.4);transition:all .25s}
.footer-social a:hover{border-color:rgba(255,255,255,.3);color:#fff}
.footer-bottom{text-align:center;padding-top:24px;margin-top:24px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:rgba(255,255,255,.3)}
.footer-bottom a{color:rgba(255,255,255,.4)}
.footer-bottom a:hover{color:#fff}

/* ====== 返回顶部 ====== */
.back-to-top{position:fixed;bottom:30px;right:30px;width:42px;height:42px;border-radius:50%;background:#1a73e8;border:none;color:#fff;font-size:16px;cursor:pointer;box-shadow:0 4px 12px rgba(26,115,232,.3);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s;z-index:999}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#0d47a1;transform:translateY(-3px)}

.no-data{text-align:center;padding:40px 0;color:#999;font-size:14px}

/* ====== 响应式 ====== */
@media(max-width:992px){
    .sidebar{display:none}
    .featured-main{flex-direction:column}
    .featured-img{width:100%;min-height:180px}
    .hero-title{font-size:28px}
    .hero-stats{gap:24px}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .header-inner{height:auto;padding:12px 0}
    .nav{display:none;width:100%;order:3;flex-direction:column;background:#fff;border-radius:8px;margin:8px 0 0;padding:8px 0;border:1px solid #eee}
    .nav.active{display:flex}
    .nav a{line-height:40px;padding:0 16px;font-size:14px}
    .nav a.active::after{display:none}
    .nav a.active{background:#e8f0fe;border-radius:4px}
    .menu-toggle{display:block}
    .hero{padding:36px 0 32px}
    .hero-title{font-size:22px}
    .hero-desc{font-size:14px}
    .hero-stats{flex-wrap:wrap;gap:16px}
    .hero-stat-num{font-size:22px}
    .post-item{flex-direction:column;gap:12px}
    .post-item-img{width:100%;height:180px}
    .featured-text{padding:16px 18px}
    .featured-title{font-size:17px}
    .article-title{font-size:20px}
    .related-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;gap:24px}
    .panel-head{padding:14px 16px}
    .panel-body{padding:12px 16px}
    .breadcrumb{font-size:12px;padding:10px 0}
}
@media(max-width:480px){
    .post-item-img{height:150px}
    .hero-title{font-size:18px}
    .article-title{font-size:17px}
    .search-overlay-inner input{font-size:18px}
}