/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.7;color:#333;background:#f5f6f8}
a{color:#222;text-decoration:none;transition:color .25s}a:hover{color:#0077ff}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:700;line-height:1.3}
.container{max-width:100%;margin:0 auto;padding:0 12px;width:100%}

/* Top Bar */
.topbar{background:#1a1a2e;color:#999;font-size:12px;line-height:34px}
.topbar .container{display:flex;justify-content:space-between}
.topbar a{color:#999;margin-left:12px}.topbar a:hover{color:#fff}
.tb-date{margin-right:18px}.tb-slogan{color:#0077ff;font-weight:600}

/* Header */
.header{background:#fff;border-bottom:1px solid #e8e8e8;padding:18px 0}
.header .container{display:flex;justify-content:space-between;align-items:center}
.logo h1{font-size:28px;color:#0077ff;font-weight:900;letter-spacing:1px}
.logo-desc{font-size:12px;color:#999;display:block}
.search-form{display:flex}
.search-form input{width:260px;padding:7px 14px;border:2px solid #e0e0e0;border-radius:4px 0 0 4px;font-size:14px;outline:none;transition:border-color .3s}
.search-form input:focus{border-color:#0077ff}
.search-form button{padding:7px 16px;background:#0077ff;color:#fff;border:none;border-radius:0 4px 4px 0;cursor:pointer;font-size:16px}

/* Navigation */
.main-nav{background:#fff;border-bottom:2px solid #0077ff;box-shadow:0 2px 8px rgba(0,119,255,.08);position:sticky;top:0;z-index:100}
.nav-list{display:flex}
.nav-list li{position:relative}
.nav-list a{display:block;padding:0 20px;line-height:46px;color:#333;font-size:15px;font-weight:500}
.nav-list a:hover,.nav-list .current-menu-item a{color:#0077ff;background:#f0f7ff}
.menu-toggle{display:none;background:none;border:none;color:#0077ff;font-size:16px;padding:12px 16px;cursor:pointer;width:100%;text-align:left}

/* Hero Section */
.hero-flex{display:flex;gap:15px;margin-top:20px;background:#fff;border-radius:10px;overflow:hidden;padding:0}
.hero-main{flex:2;position:relative;overflow:hidden;min-height:380px}
.hero-slide{display:none}.hero-slide.active{display:block}
.hero-slide img{width:100%;height:380px;object-fit:cover}
.hero-placeholder{width:100%;height:380px;background:linear-gradient(135deg,#0077ff,#00aaff)}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;padding:25px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.hero-cat{background:#0077ff;color:#fff;padding:2px 12px;border-radius:4px;font-size:12px;display:inline-block;margin-bottom:6px}
.hero-overlay h2 a{color:#fff;font-size:20px}.hero-overlay h2 a:hover{color:#66bbff}
.hero-dots{position:absolute;bottom:12px;right:16px;display:flex;gap:6px}
.hero-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer}
.hero-dots .dot.on{background:#fff}
.hero-side{flex:1;padding:14px;display:flex;flex-direction:column;justify-content:center}
.hs-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f0f0f0}
.hs-item:last-child{border-bottom:none}
.hs-num{font-size:13px;font-weight:700;color:#ccc;min-width:22px}
.hs-item:nth-child(-n+3) .hs-num{color:#0077ff}
.hs-item a{font-size:14px;color:#444}.hs-item a:hover{color:#0077ff}

/* Breaking News */
.breaking{display:flex;background:#fff;border-radius:8px;margin:15px 0;overflow:hidden;border:1px solid #e8e8e8}
.b-label{background:#0077ff;color:#fff;padding:8px 18px;font-weight:700;font-size:14px;white-space:nowrap}
.b-wrap{flex:1;padding:8px 16px;overflow:hidden;white-space:nowrap}
.b-wrap span{margin-right:36px}.b-wrap a{color:#333;font-size:14px}.b-wrap a:hover{color:#0077ff}

/* Section */
.section{background:#fff;border-radius:10px;padding:20px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.sec-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #0077ff;padding-bottom:10px;margin-bottom:16px}
.sec-head h3{font-size:18px;color:#0077ff}.more{font-size:13px;color:#999}.more:hover{color:#0077ff}

/* Grids */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gc h4{margin-top:8px;font-size:14px;line-height:1.4}.gc h4 a{color:#333}.gc h4 a:hover{color:#0077ff}
.gc-date{font-size:12px;color:#bbb}
.gc img{width:100%;height:180px;object-fit:cover;border-radius:6px}

/* Two Columns */
.two-col{display:flex;gap:18px;margin-bottom:0}
.two-col .col-l,.two-col .col-r{flex:1}
.lead-item{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #f0f0f0}
.lead-item img{width:100%;height:200px;object-fit:cover;border-radius:6px;margin-bottom:10px}
.lead-item h4{font-size:16px;margin-bottom:6px}
.lead-item p{font-size:13px;color:#888;line-height:1.6}
.list-item{display:flex;align-items:center;padding:6px 0;border-bottom:1px dashed #eee}
.list-item span{color:#0077ff;margin-right:8px;font-size:12px}
.list-item a{flex:1;font-size:14px;color:#444}.list-item a:hover{color:#0077ff}

/* Page Layout */
.page-layout{display:flex;gap:25px;margin-top:20px}
.content-area{flex:1;min-width:0}
.sidebar{width:310px;flex-shrink:0}

/* Archive */
.archive-header{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.archive-header h1{font-size:24px;color:#1a1a2e}

/* Post Card */
.post-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.pc-thumb{position:relative;height:200px;overflow:hidden}
.pc-thumb img{width:100%;height:100%;object-fit:cover}
.pc-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0077ff,#00ccff)}
.pc-cat{position:absolute;top:10px;left:10px;background:#0077ff;color:#fff;padding:3px 14px;border-radius:4px;font-size:12px}
.pc-body{padding:16px}.pc-body h3{font-size:16px;margin-bottom:8px}
.pc-body h3 a{color:#222}.pc-body h3 a:hover{color:#0077ff}
.pc-meta{font-size:12px;color:#999;margin-bottom:8px}
.pc-body p{font-size:13px;color:#666;line-height:1.6}

/* Post List */
.post-item{display:flex;gap:20px;background:#fff;border-radius:10px;padding:20px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.pi-thumb{width:240px;flex-shrink:0}
.pi-thumb img{width:100%;height:160px;object-fit:cover;border-radius:6px}
.pi-info{flex:1}.pi-info h2{font-size:18px;margin-bottom:8px}
.pi-info h2 a{color:#222}.pi-info h2 a:hover{color:#0077ff}
.pi-meta{font-size:12px;color:#999;margin-bottom:8px;display:flex;gap:16px}
.pi-info p{font-size:14px;color:#666;margin-bottom:10px;line-height:1.6}
.read-more{font-size:13px;color:#0077ff;font-weight:600}.read-more:hover{text-decoration:underline}

/* Single */
.single-post{background:#fff;border-radius:10px;padding:30px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.breadcrumb{font-size:13px;color:#999;margin-bottom:18px}
.breadcrumb a{color:#666}.breadcrumb a:hover{color:#0077ff}
.sp-header{margin-bottom:22px}
.sp-header h1{font-size:26px;color:#222;margin-bottom:12px}
.sp-meta{font-size:13px;color:#999;margin-bottom:16px}
.sp-img img{width:100%;max-height:450px;object-fit:cover;border-radius:8px}
.sp-content{font-size:16px;line-height:1.9;color:#333}
.sp-content p{margin-bottom:18px}
.sp-tags{margin:22px 0;padding:14px 0;border-top:1px solid #eee}
.sp-tags span{font-weight:600;margin-right:6px}
.sp-tags a{color:#666;font-size:13px;background:#f0f0f0;padding:3px 10px;border-radius:4px;margin:0 2px}
.sp-tags a:hover{background:#0077ff;color:#fff}

/* Related */
.related{margin-top:26px;padding-top:18px;border-top:2px solid #0077ff}
.related h3{font-size:18px;margin-bottom:14px;color:#1a1a2e}
.ri img{width:100%;height:140px;object-fit:cover;border-radius:6px}
.ri h4{margin-top:8px;font-size:14px}.ri h4 a{color:#333}.ri h4 a:hover{color:#0077ff}

/* Widgets */
.widget{background:#fff;border-radius:10px;padding:18px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.w-title{font-size:16px;color:#0077ff;border-bottom:2px solid #0077ff;padding-bottom:8px;margin-bottom:12px}
.w-hot li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed #eee}
.w-num{min-width:22px;height:22px;border-radius:4px;text-align:center;line-height:22px;font-size:12px;font-weight:700;color:#fff;background:#ccc}
.w-num.t{background:#0077ff}
.w-hot li a{font-size:14px;color:#444;flex:1}.w-hot li a:hover{color:#0077ff}
.widget ul li{padding:5px 0;border-bottom:1px dashed #eee}
.widget ul li a{font-size:14px;color:#444}.widget ul li a:hover{color:#0077ff}

/* Pagination */
.pagination{margin:24px 0;text-align:center}
.pagination .page-numbers{display:inline-block;padding:8px 14px;margin:0 2px;border:1px solid #ddd;border-radius:6px;color:#666;font-size:14px}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:#0077ff;color:#fff;border-color:#0077ff}

/* Footer */
.footer{background:#1a1a2e;color:#bbb;margin-top:40px;padding:36px 0 18px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:24px}
.fw h4{color:#fff;font-size:16px;margin-bottom:10px}
.fw a{color:#bbb;font-size:13px}.fw a:hover{color:#fff}
.footer-bottom{text-align:center;padding-top:16px;border-top:1px solid #333;font-size:13px;color:#888}

/* Responsive */
@media(max-width:992px){
    .hero-flex{flex-direction:column}
    .grid-4,.grid-3,.grid-2col{grid-template-columns:repeat(2,1fr)}
    .two-col{flex-direction:column}
    .page-layout{flex-direction:column}
    .sidebar{width:100%}
    .post-item{flex-direction:column}
    .pi-thumb{width:100%}
}
@media(max-width:768px){
    .logo h1{font-size:22px}
    .header .container{flex-direction:column;gap:10px}
    .search-form input{width:200px}
    .grid-4,.grid-3,.grid-2col{grid-template-columns:1fr}
    .menu-toggle{display:block}
    .nav-list{display:none;flex-direction:column}
    .nav-list.active{display:flex}
    .hero-slide img,.hero-placeholder{height:240px}
}
@media(max-width:480px){
    .search-form{display:none}
    .footer-cols{grid-template-columns:1fr}
}
/* Full-width fixes */
@media(min-width:1200px){
.container{padding:0 20px}
}
@media(max-width:480px){
.container{padding:0 8px}
.site-title{font-size:20px!important}
.logo-desc{font-size:11px!important}
.hero-slide img,.hero-placeholder{height:200px!important}
}
@media(max-width:380px){
.container{padding:0 6px}
}
/* Compact mobile header */
@media(max-width:768px){
.header .container{flex-direction:row!important;gap:6px;padding:8px}
.logo h1{font-size:18px!important;margin:0}
.search-form input{width:140px!important;padding:5px 8px!important;font-size:12px!important}
.search-form button{padding:5px 10px!important;font-size:13px!important}
.main-nav{border-bottom-width:1px}
.nav-list a{line-height:38px!important;padding:0 12px!important;font-size:13px!important}
.hero-flex{margin-top:8px!important}
.hero-slide img,.hero-placeholder{height:200px!important}
.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)!important;gap:8px}
}