/* ========================================
   eyhtml 仿站主题 - 迅睿CMS
   主色 #1678ff / 强调 #ff8400 / 状态绿 #5ec255 / 角标 #ffc107
   ======================================== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;font-size:14px;color:#333;background:#f5f6f8;line-height:1.6;}
a{color:#333;text-decoration:none;transition:color .2s;}
a:hover{color:#1678ff;}
img{max-width:100%;border:0;display:block;}
ul,ol{list-style:none;}
.container{max-width:1200px;margin:0 auto;padding:0 15px;}
.c-orange{color:#ff8400!important;}
.c-green{color:#5ec255!important;}
.c-blue{color:#1678ff!important;}
.c-vip{color:#ff8400!important;}
.c-gray{color:#999!important;}

/* ===== 顶部信息条 ===== */
.topbar{background:#1678ff;color:#fff;font-size:12px;height:32px;line-height:32px;}
.topbar .container{display:flex;justify-content:space-between;}
.topbar-r a{color:#e6f0ff;margin-left:18px;}
.topbar-r a:hover{color:#fff;}

/* ===== 头部 ===== */
.header{background:#fff;border-bottom:1px solid #eee;}
.header .container{display:flex;align-items:center;height:72px;}
.logo{display:flex;align-items:center;}
.logo-icon{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#1678ff,#3d9bff);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin-right:10px;}
.logo-text{font-size:22px;font-weight:700;color:#1678ff;}
.header-search{flex:1;margin:0 30px;max-width:420px;}
.header-search form{display:flex;border:2px solid #1678ff;border-radius:24px;overflow:hidden;background:#fff;}
.header-search input{flex:1;border:0;outline:none;padding:8px 16px;font-size:13px;}
.header-search button{border:0;background:#1678ff;color:#fff;padding:0 22px;cursor:pointer;font-size:13px;}
.header-search button:hover{background:#0e5fd8;}
.vip-btn{background:linear-gradient(135deg,#ff8400,#ffa94d);color:#fff;padding:9px 26px;border-radius:22px;font-size:14px;font-weight:700;box-shadow:0 2px 8px rgba(255,132,0,.35);}
.vip-btn:hover{color:#fff;box-shadow:0 4px 14px rgba(255,132,0,.45);}

/* ===== 主导航 ===== */
.navbar{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);position:sticky;top:0;z-index:99;}
.navbar .container{display:flex;align-items:center;height:50px;}
.navbar a{font-size:14px;padding:0 13px;line-height:50px;color:#333;font-weight:500;position:relative;white-space:nowrap;flex-shrink:0;}
.navbar a:hover{color:#1678ff;}
.navbar a.active{color:#1678ff;font-weight:700;}
.navbar a.active::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;background:#1678ff;border-radius:3px 3px 0 0;}
.nav-drop{position:relative;flex-shrink:0;}
.nav-drop .caret{font-style:normal;font-size:10px;color:#999;margin-left:4px;}
.nav-drop-menu{position:absolute;top:50px;left:0;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);border-radius:8px;min-width:140px;padding:8px 0;display:none;z-index:100;}
.nav-drop:hover .nav-drop-menu{display:block;}
.nav-drop-menu li{list-style:none;}
.nav-drop-menu a{display:block;padding:9px 22px;line-height:1.5;font-size:13px;color:#333;}
.nav-drop-menu a:hover{color:#1678ff;background:#f0f5ff;}

/* ===== Banner 轮播 ===== */
.banner{position:relative;height:420px;overflow:hidden;background:#0b2e6b;}
.banner-slides,.banner-slides .slide{position:absolute;inset:0;}
.banner-slides .slide{opacity:0;transition:opacity .8s;display:flex;align-items:center;justify-content:center;text-align:center;}
.banner-slides .slide.active{opacity:1;}
.banner-slides .slide:nth-child(1){background:linear-gradient(135deg,#0b2e6b 0%,#1678ff 60%,#3d9bff 100%);}
.banner-slides .slide:nth-child(2){background:linear-gradient(135deg,#12306b 0%,#1c5fd0 55%,#1678ff 100%);}
.banner-slides .slide:nth-child(3){background:linear-gradient(135deg,#10275c 0%,#1678ff 50%,#0e5fd8 100%);}
.slide-inner h2{color:#fff;font-size:40px;font-weight:700;letter-spacing:2px;margin-bottom:18px;text-shadow:0 3px 12px rgba(0,0,0,.25);}
.slide-inner p{color:#dbe9ff;font-size:17px;letter-spacing:1px;}
.slide-inner .c-orange{color:#ffb25e!important;font-size:22px;margin:0 4px;}
.banner-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px;}
.banner-dots i{width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.35);cursor:pointer;}
.banner-dots i.on{background:#ff8400;}
.banner-prev,.banner-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(255,255,255,.18);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;z-index:5;transition:background .2s;}
.banner-prev{left:30px;}
.banner-next{right:30px;}
.banner-prev:hover,.banner-next:hover{background:rgba(255,255,255,.4);}

/* ===== 服务承诺三标签 ===== */
.promise{background:#fff;padding:26px 0;border-bottom:1px solid #f0f0f0;}
.promise .container{display:flex;justify-content:space-around;gap:20px;}
.promise-item{display:flex;align-items:center;gap:14px;}
.promise-icon{width:58px;height:58px;border-radius:50%;color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.p-blue{background:linear-gradient(135deg,#1678ff,#4aa2ff);}
.p-orange{background:linear-gradient(135deg,#ff8400,#ffb25e);}
.p-green{background:linear-gradient(135deg,#5ec255,#8ad682);}
.promise-txt h4{font-size:16px;color:#222;margin-bottom:2px;}
.promise-txt p{font-size:13px;color:#888;}

/* ===== 区块通用 ===== */
.section{padding:40px 0;}
.section-gray{background:#fff;}
.section-head{text-align:center;margin-bottom:28px;position:relative;}
.section-head h3{font-size:26px;font-weight:700;color:#222;position:relative;display:inline-block;}
.section-head h3::after{content:'';display:block;width:44px;height:3px;background:#1678ff;margin:10px auto 0;border-radius:2px;}
.section-head p{color:#888;font-size:14px;margin-top:8px;}
.section-more{text-align:center;margin-top:26px;}
.section-more a{display:inline-block;border:1px solid #1678ff;color:#1678ff;padding:7px 26px;border-radius:20px;font-size:13px;}
.section-more a:hover{background:#1678ff;color:#fff;}

/* ===== 模板卡片 ===== */
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.tpl-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .25s,box-shadow .25s;}
.tpl-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(22,120,255,.16);}
.tpl-card a{display:block;}
.tpl-pic{position:relative;height:190px;background:#eef2f7;overflow:hidden;}
.tpl-pic img{width:100%;height:100%;object-fit:cover;}
.no-pic{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#a5b3c6;font-size:13px;}
.tpl-tags{position:absolute;top:10px;left:10px;display:flex;gap:6px;}
.tpl-tags span{color:#fff;font-size:11px;padding:2px 8px;border-radius:3px;}
.tag-yellow{background:#ffc107;}
.tag-vip{background:#ff8400;}
.tag-free{background:#5ec255;}
.tpl-body{padding:14px 16px 16px;}
.tpl-no{font-size:12px;color:#999;margin-bottom:2px;}
.tpl-type{font-size:12px;color:#1678ff;margin-bottom:8px;}
.tpl-body h4{font-size:15px;color:#222;font-weight:600;line-height:1.5;height:44px;overflow:hidden;margin-bottom:10px;}
.tpl-body h4:hover{color:#1678ff;}
.tpl-meta{display:flex;justify-content:space-between;font-size:12px;color:#aaa;border-top:1px dashed #eee;padding-top:10px;margin-bottom:8px;}
.tpl-price b{font-size:18px;color:#ff5b23;font-weight:700;}
.tpl-price .c-green,.tpl-price .c-vip{font-size:14px;}

/* ===== 教程四栏 ===== */
.learn-section{background:#fff;}
.learn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.learn-col{background:#f8fafc;border-radius:10px;padding:20px 18px;border:1px solid #edf1f5;}
.learn-col h4{font-size:16px;font-weight:700;color:#222;padding-bottom:12px;margin-bottom:12px;border-bottom:2px solid #1678ff;position:relative;}
.learn-col h4 a{color:#222;}
.learn-col h4 a:hover{color:#1678ff;}
.learn-col ul li{display:flex;align-items:center;padding:8px 0;border-bottom:1px dashed #e6ebf0;}
.learn-col ul li:last-child{border-bottom:0;}
.learn-col .num{width:22px;height:22px;background:#1678ff;color:#fff;font-size:12px;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:10px;flex-shrink:0;}
.learn-col ul li:nth-child(n+4) .num{background:#c3d8f7;color:#1678ff;}
.learn-col ul li a{font-size:13px;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.learn-col ul li a:hover{color:#1678ff;}

/* ===== 标签云 ===== */
.tags-section{background:#f5f6f8;}
.tag-cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;background:#fff;border-radius:10px;padding:26px 20px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.tag-cloud a{background:#f0f5ff;color:#1678ff;font-size:13px;padding:6px 16px;border-radius:16px;border:1px solid #dbe8ff;}
.tag-cloud a:hover{background:#1678ff;color:#fff;}
.tag-cloud a em{font-style:normal;font-size:11px;color:#9ab8e8;margin-left:3px;}
.tag-cloud a:hover em{color:#e6f0ff;}

/* ===== 面包屑 ===== */
.breadcrumb{background:#fff;border-bottom:1px solid #f0f0f0;padding:12px 0;font-size:13px;color:#888;}
.breadcrumb a{color:#888;}
.breadcrumb a:hover{color:#1678ff;}

/* ===== 栏目页横幅 ===== */
.page-banner{background:linear-gradient(135deg,#0b2e6b,#1678ff);color:#fff;padding:46px 0;text-align:center;}
.page-banner h1{font-size:28px;font-weight:700;margin-bottom:8px;}
.page-banner p{color:#dbe9ff;font-size:14px;}

/* ===== 文章列表 ===== */
.inner{padding:26px 0 46px;}
.article-list{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.04);padding:6px 24px;}
.article-item{display:flex;padding:20px 0;border-bottom:1px solid #f2f4f7;}
.article-item:last-child{border-bottom:0;}
.article-thumb{width:120px;height:80px;border-radius:6px;overflow:hidden;margin-right:18px;flex-shrink:0;}
.article-thumb img{width:100%;height:100%;object-fit:cover;}
.article-main{flex:1;min-width:0;}
.article-title{font-size:16px;font-weight:600;color:#222;display:block;line-height:1.4;}
.article-title:hover{color:#1678ff;}
.article-meta{font-size:12px;color:#aaa;margin:8px 0;}
.article-meta span{margin-right:16px;}
.article-desc{font-size:13px;color:#888;line-height:1.7;}

/* ===== 分页 ===== */
.pages{text-align:center;margin:26px 0 10px;}
.pages a,.pages span,.pagination li a,.pagination li span{display:inline-block;padding:6px 14px;margin:0 4px;border:1px solid #ddd;border-radius:5px;font-size:13px;color:#555;background:#fff;line-height:1.4;vertical-align:middle;}
.pages a:hover,.pagination li a:hover{border-color:#1678ff;color:#1678ff;}
.pages .current,.pagination li.current a,.pagination li.current span{background:#1678ff;color:#fff;border-color:#1678ff;}.pagination{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}.pagination li{list-style:none;display:inline-block;line-height:1;}

/* ===== 内容页 ===== */
.show-box,.tpl-detail{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.04);padding:30px;}
.show-box h1{font-size:24px;color:#222;text-align:center;margin-bottom:14px;}
.show-info{text-align:center;font-size:13px;color:#999;border-bottom:1px solid #f0f0f0;padding-bottom:16px;margin-bottom:20px;}
.show-cover{margin-bottom:20px;}
.show-cover img{margin:0 auto;border-radius:8px;max-height:420px;}
.show-content{font-size:15px;line-height:2;color:#444;}
.show-content p{margin-bottom:14px;}
.show-content img{margin:8px auto;}
.prevnext{display:flex;justify-content:space-between;margin-top:26px;padding-top:18px;border-top:1px solid #f0f0f0;font-size:13px;color:#888;}
.prevnext a{color:#555;}
.prevnext a:hover{color:#1678ff;}

/* ===== 模板详情 ===== */
.tpl-detail-top{display:flex;gap:28px;padding-bottom:26px;border-bottom:1px solid #f0f0f0;}
.tpl-detail-pic{width:430px;height:300px;border-radius:10px;overflow:hidden;background:#eef2f7;flex-shrink:0;}
.tpl-detail-pic img{width:100%;height:100%;object-fit:cover;}
.tpl-detail-info{flex:1;}
.tpl-detail-info h1{font-size:24px;color:#222;margin-bottom:18px;line-height:1.4;}
.tpl-detail-info div{font-size:14px;color:#666;margin-bottom:10px;}
.tpl-detail-no b{color:#333;}
.tpl-detail-type{color:#1678ff!important;}
.tpl-detail-price{background:#fff7f2;border:1px solid #ffe3cc;border-radius:8px;padding:14px 16px;margin-top:12px!important;}
.price-label{color:#999;margin-right:10px;}
.tpl-detail-price .big{font-size:28px;}
.tpl-detail-btns{display:flex;gap:16px;margin-top:20px;}
.btn-demo,.btn-buy{display:inline-block;padding:12px 38px;border-radius:24px;font-size:15px;font-weight:600;}
.btn-demo{border:2px solid #1678ff;color:#1678ff;}
.btn-demo:hover{background:#1678ff;color:#fff;}
.btn-buy{background:linear-gradient(135deg,#ff8400,#ffa94d);color:#fff;box-shadow:0 4px 12px rgba(255,132,0,.3);}
.btn-buy:hover{color:#fff;box-shadow:0 6px 18px rgba(255,132,0,.4);}
.tpl-detail-content{margin-top:28px;}
.detail-tabs{border-bottom:2px solid #1678ff;margin-bottom:18px;}
.detail-tabs span{display:inline-block;background:#1678ff;color:#fff;padding:9px 24px;border-radius:6px 6px 0 0;font-size:14px;}
.detail-body{font-size:15px;line-height:2;color:#444;}
.detail-body p{margin-bottom:14px;}
.detail-body img{margin:8px auto;}

/* ===== 搜索 ===== */
.search-result-head{background:#fff;border-radius:8px;padding:14px 20px;margin-bottom:16px;font-size:14px;color:#555;box-shadow:0 2px 6px rgba(0,0,0,.04);}
.empty-box{background:#fff;border-radius:8px;padding:60px 20px;text-align:center;color:#999;font-size:14px;}

/* ===== 单页 ===== */
.page-txt{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.04);padding:34px;font-size:15px;line-height:2;color:#444;min-height:300px;}
.page-txt p{margin-bottom:14px;}
.page-txt img{margin:10px auto;}

/* ===== 页脚 ===== */
.footer{background:#1a2332;color:#9aa5b5;margin-top:10px;}
.footer .container{display:flex;gap:40px;padding:42px 15px 34px;}
.footer-col{flex:1;}
.footer-about{flex:1.6;}
.footer-logo{display:flex;align-items:center;margin-bottom:14px;}
.footer-logo .logo-icon{width:34px;height:34px;font-size:15px;border-radius:7px;}
.footer-logo span{color:#fff;font-size:18px;font-weight:700;}
.footer-col h5{color:#fff;font-size:15px;margin-bottom:16px;position:relative;padding-left:12px;}
.footer-col h5::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:3px;background:#1678ff;border-radius:2px;}
.footer-col a{display:block;color:#9aa5b5;font-size:13px;padding:4px 0;}
.footer-col a:hover{color:#fff;}
.footer-col p{font-size:13px;line-height:2;color:#9aa5b5;margin-bottom:6px;}
.footer-contact b{color:#fff;}
.footer-contact .c-orange{color:#ff8400!important;}
.copyright{border-top:1px solid #28344a;padding:16px 0;font-size:12px;color:#6d7889;text-align:center;}
.copyright a{color:#6d7889;}
.copyright a:hover{color:#fff;}

/* ===== 浮动客服 ===== */
.float-service{position:fixed;right:18px;bottom:120px;z-index:99;display:flex;flex-direction:column;gap:10px;}
.fs-item{width:58px;background:#fff;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.12);text-align:center;padding:8px 4px;font-size:11px;color:#666;}
.fs-item:hover{background:#1678ff;color:#fff;}
.fs-icon{display:block;font-size:18px;font-weight:700;color:#1678ff;margin-bottom:2px;}
.fs-item:hover .fs-icon{color:#fff;}

/* ===== 响应式 ===== */
@media (max-width:992px){
  .tpl-grid{grid-template-columns:repeat(3,1fr);}
  .learn-grid{grid-template-columns:repeat(2,1fr);}
  .slide-inner h2{font-size:30px;}
  .banner{height:340px;}
  .tpl-detail-top{flex-direction:column;}
  .tpl-detail-pic{width:100%;height:240px;}
  .header-search{display:none;}
  .footer .container{flex-wrap:wrap;gap:24px;}
  .footer-col{flex-basis:45%;}
}
@media (max-width:640px){
  .tpl-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .learn-grid{grid-template-columns:1fr;}
  .promise .container{flex-wrap:wrap;}
  .banner{height:260px;}
  .slide-inner h2{font-size:22px;}
  .navbar a{padding:0 10px;font-size:13px;}
  .footer-col{flex-basis:100%;}
}

/* 详情页：预览大图与参数区 */
.detail-pic{max-width:720px;margin:16px 0;border:1px solid #eee;border-radius:6px;overflow:hidden}
.detail-pic img{display:block;width:100%;height:auto}
.detail-params{display:flex;flex-wrap:wrap;gap:8px 24px;padding:14px 16px;background:#f6fdfc;border:1px solid #e8f5f2;border-radius:6px;margin:14px 0;font-size:14px;color:#333}
.param-label{color:#999}
.c-orange{color:#f60}
.c-green{color:#090}