/* ============================================
   全局基础样式 - 中研机械设备中文站
   深蓝科技感配色方案
   ============================================ */

/* --- CSS Reset / Normalize --- */
*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:none}
img,video,iframe{max-width:100%;height:auto;vertical-align:middle;border:0}
button,input,select,textarea{font:inherit;color:inherit;border:0;outline:0;background:none}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}

/* --- CSS 变量定义 --- */
:root{
  --color-primary:#165DFF;
  --color-primary-light:#4080FF;
  --color-primary-dark:#0E42D2;
  --color-accent:#36CFC9;
  --color-accent-light:#5CDBD3;
  --color-dark:#1D2129;
  --color-bg:#F5F7FA;
  --color-bg-white:#FFFFFF;
  --color-text:#4E5969;
  --color-text-light:#86909C;
  --color-border:#E5E6EB;
  --color-border-light:#F2F3F5;
  --color-success:#00B42A;
  --color-warning:#FF7D00;
  --color-danger:#F53F3F;
  --color-info:#165DFF;
  --shadow-sm:0 1px 2px rgba(29,33,41,.05);
  --shadow-md:0 4px 10px rgba(29,33,41,.08);
  --shadow-lg:0 8px 20px rgba(29,33,41,.12);
  --shadow-xl:0 12px 32px rgba(29,33,41,.16);
  --shadow-hover:0 8px 24px rgba(22,93,255,.15);
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-full:9999px;
  --font-pc:"Inter","Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;
  --font-mob:system-ui,-apple-system,"Microsoft YaHei","PingFang SC",sans-serif;
  --font-title-size:36px;
  --font-body-size:16px;
  --font-small-size:14px;
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-bold:700;
  --transition-fast:.15s ease;
  --transition-normal:.25s ease;
  --transition-slow:.4s ease;
  --container-max:1200px;
  --container-padding:20px;
  --header-height:80px;
  --sidebar-width:260px;
  --gap-xs:8px;
  --gap-sm:16px;
  --gap-md:24px;
  --gap-lg:32px;
  --gap-xl:48px;
  --gap-2xl:64px;
  --color:var(--color-primary);
  --fontcolortitle:var(--color-dark);
  --fontcolorintro:var(--color-text);
  --fonthometitle:var(--font-title-size);
  --fonttitle:18px;
  --fontintro:16px;
  --fontweight:var(--font-weight-bold);
  --fontfamily:var(--font-pc)
}

/* --- 响应式变量覆盖 --- */
@media(max-width:1280px){
  :root{--font-title-size:30px;--container-padding:20px}
}
@media(max-width:1024px){
  :root{--font-title-size:26px;--header-height:64px}
}
@media(max-width:768px){
  :root{
    --font-title-size:22px;
    --font-body-size:15px;
    --font-small-size:13px;
    --fonttitle:16px;
    --fontintro:14px;
    --fontfamily:var(--font-mob);
    --container-padding:16px;
    --header-height:56px
  }
}

/* --- 基础排版 --- */
body{
  margin:0 auto;
  max-width:1920px;
  color:var(--color-dark);
  font-size:var(--font-body-size);
  line-height:1.6;
  font-family:var(--fontfamily);
  overflow-x:hidden;
  background:var(--color-bg-white)
}
h1,h2,h3,h4,h5,h6{
  color:var(--color-dark);
  font-weight:var(--font-weight-bold);
  line-height:1.3
}
h1{font-size:2.25em}
h2{font-size:1.75em}
h3{font-size:1.375em}
h4{font-size:1.125em}
h5{font-size:1em}
h6{font-size:.875em}
p{margin-bottom:1em;color:var(--color-text)}
a{
  color:var(--color-primary);
  transition:color var(--transition-fast);
  text-decoration:none
}
a:hover{color:var(--color-primary-light)}

/* --- 容器 --- */
.l-wrap{
  width:100%;
  max-width:var(--container-max);
  padding:0 var(--container-padding);
  margin:0 auto
}
.l-wrap-wide{
  width:100%;
  max-width:1400px;
  padding:0 var(--container-padding);
  margin:0 auto
}
.l-wrap-full{
  width:100%;
  padding:0 var(--container-padding);
  margin:0 auto
}

/* --- 通用标题样式 --- */
.home-des{
  text-align:center;
  color:var(--color-primary);
  font-size:var(--font-small-size);
  font-weight:var(--font-weight-medium);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:8px
}
.home-title{
  text-align:center;
  color:var(--color-dark);
  font-size:var(--font-title-size);
  font-weight:var(--font-weight-bold);
  line-height:1.2;
  margin-bottom:16px
}
.home-subtitle{
  text-align:center;
  color:var(--color-text-light);
  font-size:var(--font-body-size);
  max-width:600px;
  margin:0 auto var(--gap-lg)
}
.section-header{
  text-align:center;
  margin-bottom:var(--gap-xl)
}

/* --- 按钮样式 --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 24px;
  font-size:var(--font-body-size);
  font-weight:var(--font-weight-medium);
  line-height:1.5;
  border-radius:var(--radius-sm);
  transition:all var(--transition-normal);
  cursor:pointer;
  white-space:nowrap;
  user-select:none
}
.btn-primary{
  background:var(--color-primary);
  color:#FFF;
  box-shadow:0 2px 8px rgba(22,93,255,.3)
}
.btn-primary:hover{
  background:var(--color-primary-light);
  box-shadow:0 4px 16px rgba(22,93,255,.4);
  transform:translateY(-1px);
  color:#FFF
}
.btn-primary:active{
  background:var(--color-primary-dark);
  transform:translateY(0)
}
.btn-outline{
  border:1px solid var(--color-primary);
  color:var(--color-primary);
  background:transparent
}
.btn-outline:hover{
  background:var(--color-primary);
  color:#FFF;
  transform:translateY(-1px)
}
.btn-accent{
  background:var(--color-accent);
  color:#FFF;
  box-shadow:0 2px 8px rgba(54,207,201,.3)
}
.btn-accent:hover{
  background:var(--color-accent-light);
  color:#FFF;
  transform:translateY(-1px)
}
.btn-dark{
  background:var(--color-dark);
  color:#FFF
}
.btn-dark:hover{
  background:#2E3239;
  color:#FFF;
  transform:translateY(-1px)
}
.btn-lg{padding:14px 32px;font-size:18px;border-radius:var(--radius-md)}
.btn-sm{padding:6px 16px;font-size:var(--font-small-size)}
.btn-xs{padding:4px 12px;font-size:12px}
.btn-block{display:flex;width:100%}
.home-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary);
  height:45px;
  width:180px;
  color:#FFF;
  border-radius:var(--radius-sm);
  transition:all var(--transition-normal);
  font-weight:var(--font-weight-medium)
}
.home-more:hover{
  background:var(--color-primary-light);
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
  color:#FFF
}

/* --- 链接样式 --- */
.link-primary{color:var(--color-primary);transition:color var(--transition-fast)}
.link-primary:hover{color:var(--color-primary-light)}
.link-accent{color:var(--color-accent);transition:color var(--transition-fast)}
.link-accent:hover{color:var(--color-accent-light)}
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--color-primary);
  font-weight:var(--font-weight-medium);
  transition:all var(--transition-fast)
}
.link-arrow:hover{gap:10px;color:var(--color-primary-light)}

/* --- 分页样式 --- */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:var(--gap-lg) 0;
  flex-wrap:wrap
}
.pagination a,.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:var(--font-small-size);
  color:var(--color-text);
  transition:all var(--transition-fast);
  background:var(--color-bg-white)
}
.pagination a:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:rgba(22,93,255,.04)
}
.pagination .active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#FFF
}
.pagination .disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none
}

/* --- 面包屑样式 --- */
.breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:var(--gap-sm) 0;
  font-size:var(--font-small-size);
  color:var(--color-text-light)
}
.breadcrumb a{
  color:var(--color-text);
  transition:color var(--transition-fast)
}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb .separator{color:var(--color-border);margin:0 2px}
.breadcrumb .current{color:var(--color-primary);font-weight:var(--font-weight-medium)}

/* --- 懒加载占位样式 --- */
.lazy-wrap{
  position:relative;
  overflow:hidden;
  background:var(--color-border-light)
}
.lazy-wrap::before{
  content:"";
  display:block;
  padding-bottom:56.25%
}
.lazy-wrap.lazy-loaded::before{padding-bottom:0}
.lazy-wrap img[data-src]{
  opacity:0;
  transition:opacity var(--transition-slow)
}
.lazy-wrap img.loaded{opacity:1}
.lazy-load{
  position:absolute;
  top:50%;
  left:50%;
  width:32px;
  height:32px;
  margin:-16px 0 0 -16px;
  border:3px solid var(--color-border);
  border-top-color:var(--color-primary);
  border-radius:50%;
  animation:spin .8s linear infinite
}
.lazy-wrap.lazy-loaded .lazy-load{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
img.lazy{display:inline-block;opacity:0;transition:opacity .6s}
img.loaded{opacity:1}
img:not([src]){visibility:hidden;position:absolute}

/* --- 骨架屏 --- */
.skeleton{
  background:linear-gradient(90deg,var(--color-border-light) 25%,#f0f1f3 50%,var(--color-border-light) 75%);
  background-size:200% 100%;
  animation:skeleton-loading 1.5s ease infinite;
  border-radius:var(--radius-sm)
}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- 卡片基础样式 --- */
.card{
  background:var(--color-bg-white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-normal);
  overflow:hidden
}
.card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px)
}
.card-flat{
  background:var(--color-bg-white);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  transition:all var(--transition-normal);
  overflow:hidden
}
.card-flat:hover{
  border-color:var(--color-primary);
  box-shadow:var(--shadow-md)
}

/* --- 标签 --- */
.tag{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  font-size:12px;
  border-radius:var(--radius-full);
  font-weight:var(--font-weight-medium);
  line-height:1.6
}
.tag-primary{background:rgba(22,93,255,.1);color:var(--color-primary)}
.tag-accent{background:rgba(54,207,201,.1);color:#0E6E6C}
.tag-success{background:rgba(0,180,42,.1);color:var(--color-success)}
.tag-warning{background:rgba(255,125,0,.1);color:var(--color-warning)}
.tag-danger{background:rgba(245,63,63,.1);color:var(--color-danger)}

/* --- 文本截断 --- */
.line1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.line2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.line3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* --- 响应式工具类 --- */
.hidden{display:none!important}
.block{display:block!important}
.flex{display:flex!important}
.grid{display:grid!important}
.text-center{text-align:center!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-primary{color:var(--color-primary)!important}
.text-accent{color:var(--color-accent)!important}
.text-dark{color:var(--color-dark)!important}
.text-muted{color:var(--color-text-light)!important}
.bg-primary{background-color:var(--color-primary)!important}
.bg-accent{background-color:var(--color-accent)!important}
.bg-dark{background-color:var(--color-dark)!important}
.bg-light{background-color:var(--color-bg)!important}
.bg-white{background-color:var(--color-bg-white)!important}
.w-full{width:100%!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.rounded{border-radius:var(--radius-md)!important}
.rounded-lg{border-radius:var(--radius-lg)!important}
.rounded-full{border-radius:var(--radius-full)!important}
.shadow{box-shadow:var(--shadow-md)!important}
.shadow-lg{box-shadow:var(--shadow-lg)!important}
.overflow-hidden{overflow:hidden!important}
.relative{position:relative!important}
.absolute{position:absolute!important}
.sticky{position:sticky!important}

.gap-xs{gap:var(--gap-xs)}
.gap-sm{gap:var(--gap-sm)}
.gap-md{gap:var(--gap-md)}
.gap-lg{gap:var(--gap-lg)}
.gap-xl{gap:var(--gap-xl)}

.pt-0{padding-top:0!important}
.pb-0{padding-bottom:0!important}
.mt-sm{margin-top:var(--gap-sm)!important}
.mt-md{margin-top:var(--gap-md)!important}
.mt-lg{margin-top:var(--gap-lg)!important}
.mt-xl{margin-top:var(--gap-xl)!important}
.mb-sm{margin-bottom:var(--gap-sm)!important}
.mb-md{margin-bottom:var(--gap-md)!important}
.mb-lg{margin-bottom:var(--gap-lg)!important}
.mb-xl{margin-bottom:var(--gap-xl)!important}

/* --- 响应式显隐 --- */
@media(max-width:1536px){.hide-2xl{display:none!important}.show-2xl{display:block!important}}
@media(max-width:1280px){.hide-xl{display:none!important}.show-xl{display:block!important}}
@media(max-width:1024px){.hide-lg{display:none!important}.show-lg{display:block!important}}
@media(max-width:768px){.hide-md{display:none!important}.show-md{display:block!important}}
@media(max-width:640px){.hide-sm{display:none!important}.show-sm{display:block!important}}

/* --- Grid 工具 --- */
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}
}

/* --- Flex 工具 --- */
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-start{display:flex;align-items:center;justify-content:flex-start}
.flex-end{display:flex;align-items:center;justify-content:flex-end}
.flex-col{display:flex;flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}

/* --- 页面通用布局 --- */
header{position:relative;z-index:100000}
.common-main{padding:50px 0 80px}
article p{color:var(--color-text)}
article a{color:var(--color-primary);text-decoration:underline}
article a:hover{color:var(--color-primary-light)}
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid var(--color-border);padding:8px 12px}
.table-wrap{overflow-x:auto;width:100%}
iframe,video{max-width:100%;outline:0;border:none;vertical-align:middle}

/* --- 分隔线 --- */
.divider{
  width:60px;
  height:3px;
  background:var(--color-primary);
  border-radius:2px;
  margin:16px auto
}
.divider-accent{background:var(--color-accent)}

/* --- 滚动条美化 --- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--color-border-light)}
::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}

/* --- 选中样式 --- */
::selection{background:rgba(22,93,255,.15);color:var(--color-primary-dark)}