@charset "UTF-8";

/* ===== 悦海科技 - 布局与栅格系统 ===== */

/* 容器 */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.container-full {
  width: 100%;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* 栅格系统 - Flex布局 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
}

.col {
  flex: 1;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.col-1 { width: 8.333333%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-2 { width: 16.666667%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-3 { width: 25%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-4 { width: 33.333333%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-5 { width: 41.666667%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-6 { width: 50%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-7 { width: 58.333333%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-8 { width: 66.666667%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-9 { width: 75%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-10 { width: 83.333333%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-11 { width: 91.666667%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.col-12 { width: 100%; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }

/* 页面内边距区域 */
.section {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

.section-sm {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.section-lg {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

/* 页面标题区域 */
.page-header {
  background-color: var(--primary);
  color: var(--text-white);
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.page-header h1 {
  color: var(--text-white);
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.page-header .breadcrumb {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
}

.page-header .breadcrumb a {
  color: var(--secondary);
}

/* 卡片 */
.card {
  background-color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: var(--transition);
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* 内容区域 */
.content-area {
  background-color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
}

/* 侧边栏 */
.sidebar {
  background-color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* ===== 响应式断点 ===== */

/* 平板 (768px - 1024px) */
@media (max-width: 1024px) {
  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  
  .col-md-1 { width: 8.333333%; }
  .col-md-2 { width: 16.666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.333333%; }
  .col-md-5 { width: 41.666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.333333%; }
  .col-md-8 { width: 66.666667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.333333%; }
  .col-md-11 { width: 91.666667%; }
  .col-md-12 { width: 100%; }
  
  .section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
  }
}

/* 手机 (< 768px) */
@media (max-width: 767px) {
  .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
  
  .col-sm-1 { width: 8.333333%; }
  .col-sm-2 { width: 16.666667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.333333%; }
  .col-sm-5 { width: 41.666667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.333333%; }
  .col-sm-8 { width: 66.666667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.333333%; }
  .col-sm-11 { width: 91.666667%; }
  .col-sm-12 { width: 100%; }
  
  .row {
    margin-left: calc(-1 * var(--spacing-sm));
    margin-right: calc(-1 * var(--spacing-sm));
  }
  
  [class*="col-"] {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
  
  .section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
  
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
}

/* IE兼容模式 - 浮动布局兜底 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .row::after {
    content: "";
    display: table;
    clear: both;
  }
  
  [class*="col-"] {
    float: left;
  }
}