/* ============================================================
   风格克隆：机械外壳模板 (保留原类名，换色)
   源站：https://fkjxsb66.jz.fkw.com/
   原色：#1a6bb0（蓝）→ #c40000（红工业风）
   适配：NAI_Template 标签系统
   ============================================================ */

:root {
  --primary: #c40000;
  --primary-hover: #ba0000;
  --primary-light: #f13a3a;
  --nav-bg: #2b2b2b;
  --nav-active: #c40000;
  --footer-bg: #282828;
  --footer-border: #ca0000;
  --footer-text: #666;
  --font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-family);color:#333;background:#f5f5f5;line-height:1.6}
a{color:#c40000;text-decoration:none;transition:color .2s}
a:hover{color:#ba0000}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 15px}

/* ========== Header ========== */
#header{background:#fff;border-bottom:3px solid #c40000;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.08)}
#header .container{display:flex;align-items:center;flex-wrap:wrap;padding:10px 15px}
.logo{flex:0 0 auto;margin-right:30px}
.logo img{max-height:60px}
.logo h1{font-size:1.3rem;color:#333;white-space:nowrap}
.logo h1 .highlight{color:#c40000}

/* ========== Navigation ========== */
#nav{flex:1 1 auto}
.nav-list{list-style:none;display:flex;gap:0}
.nav-list>li{position:relative}
.nav-list>li>a{display:block;padding:10px 16px;color:#333;font-size:15px;font-weight:500;border-bottom:2px solid transparent}
.nav-list>li>a:hover,.nav-list>li:hover>a{color:#c40000;border-bottom-color:#c40000}
.sub-nav{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid #ddd;border-radius:4px;min-width:180px;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.has-sub:hover .sub-nav{display:block}
.sub-nav li{list-style:none}
.sub-nav a{display:block;padding:8px 15px;color:#333;font-size:14px;border-bottom:1px solid #f0f0f0}
.sub-nav a:hover{background:#fff5f5;color:#c40000}
.nav-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;padding:5px 10px}

/* ========== Search ========== */
.search-box{flex:0 0 auto;margin-left:15px}
.search-box form{display:flex;border:1px solid #ddd;border-radius:4px;overflow:hidden}
.search-box input{border:none;padding:6px 10px;font-size:14px;width:150px;outline:none}
.search-box button{background:#c40000;color:#fff;border:none;padding:6px 14px;cursor:pointer;font-size:14px}
.search-box button:hover{background:#ba0000}

/* ========== Breadcrumb ========== */
.breadcrumb{background:#f5f5f5;padding:8px 0;font-size:13px;border-bottom:1px solid #e0e0e0}
.breadcrumb .container{display:flex;flex-wrap:wrap;align-items:center}
.breadcrumb a,.breadcrumb span{color:#666;margin:0 3px}
.breadcrumb a:hover{color:#c40000}
.breadcrumb .sep{color:#aaa;margin:0 5px}

/* ========== Main / Section ========== */
#main{min-height:500px}
.section{padding:30px 0}
.section h2{font-size:1.4rem;color:#c40000;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #c40000}

/* ========== Banner ========== */
.banner-slider{position:relative;margin-bottom:30px;border-radius:6px;overflow:hidden;max-height:400px}
.slider-wrapper{position:relative}
.slide{display:none}
.slide.active{display:block}
.slide img{width:100%;max-height:400px;object-fit:cover}
.slider-dots{text-align:center;padding:10px 0;position:absolute;bottom:10px;left:0;right:0}
.dot{display:inline-block;width:12px;height:12px;background:rgba(255,255,255,.5);border-radius:50%;margin:0 5px;cursor:pointer}
.dot.active{background:#fff}

/* ========== Category Grid ========== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-bottom:30px}
.cat-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;text-align:center;padding:20px 15px;transition:box-shadow .3s}
.cat-card:hover{box-shadow:0 4px 15px rgba(196,0,0,.12);border-color:#c40000}
.cat-img{margin-bottom:10px;height:100px;display:flex;align-items:center;justify-content:center}
.cat-img img{max-height:100px;object-fit:contain}
.cat-card h3{font-size:1rem;color:#333;margin-bottom:5px}
.cat-card p{font-size:12px;color:#999}
.cat-sub{margin-top:10px;padding-top:10px;border-top:1px solid #eee;display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.cat-sub-link{background:#f5f5f5;color:#666;padding:2px 8px;border-radius:3px;font-size:11px;border:1px solid #e8e8e8;transition:all .2s;display:inline-block}
.cat-sub-link:hover{background:#c40000;color:#fff;border-color:#c40000}

/* ========== News List ========== */
.news-item{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee}
.news-item h3{font-size:1.1rem;margin-bottom:5px}
.meta{font-size:13px;color:#999;margin-bottom:8px}
.meta span{margin-right:15px}
.summary{color:#666;line-height:1.7}

/* ========== Page Layout (List/Detail) ========== */
.page-layout{display:flex;gap:30px}
.sidebar{flex:0 0 260px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;padding:20px;align-self:flex-start;position:sticky;top:80px}
.sidebar h3,.sidebar h4{font-size:1rem;color:#c40000;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #c40000}
.sidebar ul{list-style:none}
.sidebar li{margin-bottom:0}
.sidebar a{display:block;padding:7px 10px;color:#555;font-size:14px;border-bottom:1px solid #f0f0f0;transition:all .2s}
.sidebar a:hover,.sidebar li.active a{color:#c40000;background:#fff5f5;padding-left:15px}
.main-content{flex:1;min-width:0;background:#fff;border:1px solid #e0e0e0;border-radius:6px;padding:25px}
.page-title{font-size:1.5rem;color:#333;margin-bottom:20px}
h1{font-size:1.5rem;color:#333;margin-bottom:20px}
h2{font-size:1.2rem;color:#c40000}
h3{font-size:1.1rem;color:#333}

/* ========== Article Detail ========== */
.article-title{font-size:1.6rem;color:#222;margin-bottom:12px;line-height:1.4}
.article-meta{font-size:13px;color:#999;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #eee}
.article-meta span{margin-right:15px}
.article-meta a{color:#c40000}
.article-content{font-size:15px;line-height:1.9;color:#444}
.article-content p{margin-bottom:15px}
.article-content img{margin:15px auto;border-radius:4px}
.article-content a{color:#c40000;text-decoration:underline}
.article-nav{margin-top:30px;padding:20px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;display:flex;justify-content:space-between}
.article-nav span{font-size:14px;color:#666;max-width:50%}
.article-nav a{color:#c40000}
.related-section{margin-top:25px}
.related-section h3{font-size:1.1rem;margin-bottom:12px;color:#c40000}
.related-section ul{list-style:none}
.related-section li{margin-bottom:6px}
.related-section a{font-size:14px;color:#555}
.related-section a::before{content:"· ";color:#c40000}

/* ========== Pagination ========== */
.pagination{text-align:center;padding:20px 0}
.pagination a,.pagination span{display:inline-block;padding:6px 14px;margin:0 3px;border:1px solid #ddd;border-radius:3px;font-size:14px;color:#555;background:#fff}
.pagination a:hover{background:#c40000;color:#fff;border-color:#c40000}
.pagination .current{background:#c40000;color:#fff;border-color:#c40000}
.pagination .disabled{color:#ccc;cursor:not-allowed}

/* ========== Search Page ========== */
.search-form-large{background:#fff;padding:20px;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:20px}
.search-form-large form{display:flex;gap:10px}
.search-form-large input{flex:1;padding:12px 15px;border:1px solid #ddd;border-radius:4px;font-size:16px}
.search-form-large button{background:#c40000;color:#fff;border:none;padding:12px 30px;border-radius:4px;cursor:pointer;font-size:16px}
.search-form-large button:hover{background:#ba0000}
.search-info{margin-bottom:20px;color:#666;font-size:14px}
.search-item{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee}

/* ========== Button ========== */
.btn{display:inline-block;background:#c40000;color:#fff;padding:8px 22px;border-radius:3px;font-size:14px;transition:background .2s;text-decoration:none;border:none;cursor:pointer}
.btn:hover{background:#ba0000;color:#fff}
.btn-outline{background:transparent;border:1px solid #c40000;color:#c40000}
.btn-outline:hover{background:#c40000;color:#fff}

/* ========== Footer ========== */
#footer{background:#282828;color:#666;padding:30px 0;text-align:center;font-size:13px;border-top:3px solid #ca0000}
#footer a{color:#888}
#footer a:hover{color:#fff}
.footer-info p{margin-bottom:5px}

/* ========== Empty State ========== */
.empty-state{text-align:center;padding:60px 20px;color:#999}
.empty-state p{font-size:16px}

/* ========== Responsive ========== */
@media(max-width:1024px){
  .sidebar{flex:1;position:static;margin-bottom:20px}
}
@media(max-width:768px){
  html{font-size:15px}
  .nav-list{display:none;flex-direction:column;width:100%;background:#fff;position:absolute;top:100%;left:0;z-index:300;border-top:2px solid #c40000;box-shadow:0 4px 12px rgba(0,0,0,.1)}
  .nav-list.show{display:flex}
  .nav-toggle{display:block;min-width:44px;min-height:44px}
  .page-layout{flex-direction:column}
  .sidebar{flex:1;position:static;margin-bottom:20px;width:100%}
  .sub-nav{position:static;box-shadow:none;border:none;padding-left:20px}
  .search-box{margin-left:auto;margin-top:8px}
  .search-box input{width:120px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .article-nav{flex-direction:column}
  .article-nav span{max-width:100%}
  .search-form-large form{flex-direction:column}
  .btn,.search-box button,.search-form-large button{min-height:44px}
  .section{padding:20px 0}
}
@media(max-width:480px){
  html{font-size:14px}
  .cat-grid{grid-template-columns:1fr}
  .banner-slider{max-height:200px}
  .banner-slider .slide img{max-height:200px}
  .main-content{padding:15px}
  .article-title{font-size:1.3rem}
}