/* Beekmark 通用组件库 - 基于现有样式提取和优化 */
/* 遵循 BEM 命名规范，保持与现有样式的兼容性 */

/* ===== 设计系统基础 ===== */

/* 全局基础样式 */
body {
  margin: 0;
  padding: 0;
  font-family: var(--bm-font-family-sans);
  line-height: var(--bm-line-height-base);
  color: var(--bm-color-text-primary);
  background: var(--bm-color-bg-primary);
  
  /* 添加背景图片设置 */
  background-image: url('../images/beekmark-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  /* 在背景图片上添加深色遮罩层以确保文字可读性 */
  background-color: rgba(0, 0, 0, 0.4);
  background-blend-mode: overlay;
}

:root {
  /* 强制深色主题 */
  color-scheme: dark;
  
  /* 颜色系统 - 前端主题 */
  --bm-color-primary: #388C6D;
  --bm-color-primary-hover: #2d7356;
  --bm-color-primary-light: rgba(56, 140, 109, 0.1);
  --bm-color-primary-dark: #235a42;
  
  --bm-color-secondary: #6c757d;
  --bm-color-success: #388C6D;
  --bm-color-danger: #dc3545;
  --bm-color-danger-hover: #c82333;
  --bm-color-warning: #ffba0b;
  
  /* 文字颜色 - 默认深色主题 */
  --bm-color-text-primary: #ffffff;
  --bm-color-text-secondary: #e0e0e0;
  --bm-color-text-tertiary: #b0b0b0;
  --bm-color-text-muted: #a0a0a0;
  --bm-color-text-subtle: rgba(255, 255, 255, 0.6);
  --bm-color-text-inverse: #333333;
  
  /* 语言标志宽度 */
  --bm-lang-flag-width: 1.5em;
  
  /* 背景颜色 - 默认深色主题 - 为背景图片优化透明度，产生毛玻璃效果 */
  --bm-color-bg-primary: rgba(0, 0, 0, 0.6);
  --bm-color-bg-secondary: rgba(40, 40, 40, 0.5);
  --bm-color-bg-tertiary: rgba(60, 60, 60, 0.6);
  --bm-color-bg-special: rgba(125, 125, 125, 0.1);
  --bm-color-bg-card: rgba(40, 40, 40, 0.6);
  --bm-color-bg-surface: rgba(42, 42, 42, 0.6);
  --bm-color-bg-elevated: rgba(60, 60, 60, 0.6);
  --bm-color-bg-hover: rgba(70, 70, 70, 0.6);
  --bm-color-bg-overlay: rgba(255, 255, 255, 0.05);
  --bm-color-bg-overlay-hover: rgba(255, 255, 255, 0.08);
  --bm-color-bg-overlay-light: rgba(255, 255, 255, 0.1);
  --bm-color-bg-overlay-medium: rgba(255, 255, 255, 0.2);
  --bm-color-bg-overlay-strong: rgba(255, 255, 255, 0.3);
  
  /* 边框颜色 - 默认深色主题 */
  --bm-color-border: rgba(255, 255, 255, 0.2);
  --bm-color-border-light: rgba(255, 255, 255, 0.1);
  --bm-color-border-focus: rgba(56, 140, 109, 0.6);
  
  /* 字体大小系统 */
  --bm-font-size-xs: 0.75rem;    /* 12px */
  --bm-font-size-sm: 0.875rem;   /* 14px */
  --bm-font-size-base: 1rem;     /* 16px */
  --bm-font-size-lg: 1.25rem;    /* 20px */
  --bm-font-size-xl: 1.5rem;     /* 24px */
  --bm-font-size-2xl: 2rem;      /* 32px */
  
  /* 间距系统 */
  --bm-spacing-xs: 0.25rem;   /* 4px - 小间距保持原值 */
  --bm-spacing-sm: 0.5rem;    /* 8px - 小间距保持原值 */
  --bm-spacing-md: 1rem;      /* 16px - 中等间距保持原值 */
  --bm-spacing-lg: 1.25rem;   /* 20px - 稍微减少 */
  --bm-spacing-xl: 1.5rem;    /* 24px - 减少大间距 */
  --bm-spacing-2xl: 2rem;     /* 32px - 大幅减少大容器间距 */
  --bm-spacing-3xl: 2.5rem;   /* 40px - 大幅减少大容器间距 */
  --bm-spacing-4xl: 3.5rem;   /* 50px - 大幅减少大容器间距 */

  /* 常用尺寸 */
  --bm-size-xs: 0.875rem;     /* 14px */
  --bm-size-sm: 1.25rem;      /* 20px */
  --bm-size-md: 1.875rem;     /* 30px */
  --bm-size-lg: 2.5rem;       /* 40px */
  --bm-size-xl: 3.75rem;      /* 60px */
  
  /* 容器和布局尺寸 */
  --bm-size-container-max: 1200px;
  --bm-size-container-xl: 1400px;
  --bm-size-content-large-max: 800px;
  --bm-size-content-medium-max: 600px;
  --bm-size-content-max-width: 900px;
  --bm-size-hero-height: 500px;
  --bm-size-feature-height: 400px;
  --bm-size-showcase-mobile: 250px;
  --bm-size-viewport-height: 100vh;
  --bm-size-viewport-full: 100%;
  --bm-size-modal-large-width: 90vw;
  --bm-size-modal-large-height: 90vh;
  --bm-size-modal-max-width: 600px;
  --bm-size-modal-max-height: 80vh;
  --bm-size-modal-width: 90%;
  --bm-size-modal-mobile-width: calc(100% - 2rem);
  --bm-size-modal-body-max-height: 60vh;
  --bm-size-modal-mobile-body-height: calc(100vh - 200px);
  --bm-size-divider: 1px;
  --bm-size-full: 100%;
  
  /* 网格和表单尺寸 */
  --bm-size-grid-feature-min: 250px;
  --bm-size-grid-min: 280px;
  --bm-size-dropdown-min: 120px;
  --bm-size-dropdown-sm: 120px;
  --bm-size-dropdown-max-height: 280px;
  --bm-size-form-max-width: 400px;
  --bm-size-form-min-width: 350px;
  --bm-size-textarea-min-height: 180px;
  
  /* 圆角系统 */
  --bm-radius-sm: 4px;
  --bm-radius-md: 8px;
  --bm-radius-lg: 12px;
  --bm-radius-xl: 16px;
  --bm-radius-2xl: 20px;
  --bm-radius-full: 50%;
  
  /* 阴影系统 - 默认深色主题 */
  --bm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --bm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --bm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --bm-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);
  --bm-shadow-text: 0 2px 4px rgba(0, 0, 0, 0.5);
  --bm-shadow-hover: 0 8px 25px rgba(56, 140, 109, 0.3);
  --bm-shadow-feature-hover: 0 12px 30px rgba(56, 140, 109, 0.2);
  --bm-shadow-danger-focus: 0 0 0 3px rgba(220, 53, 69, 0.25);
  
  /* 过渡动画 */
  --bm-transition-fast: 0.15s ease;
  --bm-transition-normal: 0.3s ease;
  --bm-transition-slow: 0.5s ease;
  
  /* 变换效果 */
  --bm-transform-dropdown-hidden: translateY(-10px);
  --bm-transform-hover-lift-xs: translateY(-2px);
  --bm-transform-hover-lift-sm: translateY(-4px);
  --bm-transform-hover-lift-md: translateY(-6px);
  --bm-transform-rotate-180: rotate(180deg);
  --bm-transform-modal-hidden: scale(0.95);
  --bm-transform-active: scale(1);
  --bm-transform-none: none;
  --bm-transform-hover-scale: scale(1.1);
  
  /* 渐变系统 */
  --bm-gradient-primary: linear-gradient(135deg, var(--bm-color-primary) 0%, var(--bm-color-primary-hover) 100%);
  --bm-gradient-primary-hover: linear-gradient(135deg, var(--bm-color-primary-hover) 0%, var(--bm-color-primary-dark) 100%);
  --bm-gradient-page-header: linear-gradient(135deg, var(--bm-color-primary) 0%, var(--bm-color-secondary) 100%);
  --bm-gradient-bg-primary: linear-gradient(135deg, var(--bm-color-bg-primary) 0%, var(--bm-color-bg-secondary) 100%);
  
  /* 边框系统 */
  --bm-border-default: 1px solid var(--bm-color-border);
  --bm-border-light: 1px solid var(--bm-color-border-light);
  --bm-border-focus: 1px solid var(--bm-color-border-focus);
  --bm-border-danger: 1px solid var(--bm-color-danger);
  --bm-border-outline: 1px solid currentColor;
  --bm-border-high-contrast: 2px solid currentColor;
  --bm-border-alert-left: 4px solid;
  --bm-border-width-thick: 2px;
  
  /* 字体系统 */
  --bm-font-family-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --bm-font-family-mono: 'Courier New', Courier, monospace;
  --bm-font-normal: 400;
  --bm-font-medium: 500;
  --bm-font-semibold: 600;
  --bm-font-bold: 700;
  --bm-line-height-tight: 1.2;
  --bm-line-height-snug: 1.3;
  --bm-line-height-normal: 1.5;
  --bm-line-height-base: 1.6;
  --bm-line-height-relaxed: 1.8;
  --bm-letter-spacing-normal: 0;
  --bm-letter-spacing-wide: 0.5px;
  
  /* 层级系统 */
  --bm-z-index-header: 1000;
  --bm-z-index-dropdown: 1000;
  --bm-z-index-dropdown-below: 999;
  --bm-z-index-modal: 9999;
  --bm-z-index-modal-top: 10001;
  --bm-z-index-modal-close: 10001;
  --bm-z-index-nav: 10;
  
  /* 透明度系统 */
  --bm-opacity-hidden: 0;
  --bm-opacity-low: 0.5;
  --bm-opacity-medium: 0.7;
  --bm-opacity-high: 0.9;
  --bm-opacity-full: 1;
  
  /* 滤镜效果 */
  --bm-filter-drop-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  --bm-backdrop-blur-sm: blur(8px);
  --bm-backdrop-blur-md: blur(16px);
  --bm-backdrop-blur-lg: blur(24px);
  
  /* 颜色扩展 */
  --bm-color-text-on-primary: white;
  --bm-color-danger-bg: rgba(220, 53, 69, 0.1);
  
  /* 响应式断点 */
  --bm-breakpoint-sm: 480px;
  --bm-breakpoint-md: 768px;
  --bm-breakpoint-lg: 1200px;
  
  /* Header高度 */
  --bm-header-height: 100px;
  
  /* Logo尺寸系统 */
  --bm-logo-height: 40px;           /* 桌面端默认logo高度 */
  --bm-logo-height-tablet: 36px;    /* 平板端logo高度 */
  --bm-logo-height-mobile: 32px;    /* 移动端logo高度 */
  --bm-logo-height-small: 28px;     /* 小屏幕logo高度 */
  
  /* 图标对齐系统 */
  --bm-icon-align-offset: 0.5em;    /* 图标与文字对齐的偏移量 */
}

/* 后台主题变量覆盖 */
.admin-theme {
  --bm-color-primary: #388C6D;
  --bm-color-text-primary: #212529;
  --bm-color-text-secondary: #6c757d;
  --bm-color-bg-primary: rgba(255, 255, 255, 0.6);
  --bm-color-bg-secondary: rgba(248, 249, 250, 0.5);
  --bm-color-bg-card: rgba(255, 255, 255, 0.6);
  --bm-color-border: #dee2e6;
}

/* ===== 布局组件 ===== */

/* 容器组件 */
.bm-container {
  max-width: var(--bm-size-container-max);
  margin: 0 auto;
  padding: 0 var(--bm-spacing-lg);
}

/* 当 bm-container 作为 section 的直接子元素时，添加 flex 布局和 gap */
.bm-section > .bm-container {
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-xl);
}

/* 容器内段落间距通过父容器的gap控制，移除margin */
.bm-container p {
  margin: 0;
}

/* 区块组件 */
.bm-section {
  margin: 0; /* 移除外边距，间距由父级 gap 控制 */
  /* Section 作为容器，不设置内部间距，由子元素控制 */
}

/* 第一个区块 - 不需要margin-top，因为body已经有padding-top */


.bm-section__container {
  max-width: var(--bm-size-container-max);
  margin: 0 auto;
  padding: 0 var(--bm-spacing-md);
  display: flex;
  flex-direction: column;
  /* 统一使用 gap 控制 section 内部元素间距 */
  gap: var(--bm-spacing-2xl);
}



.bm-section__title {
  font-size: var(--bm-font-size-xl);
  font-weight: var(--bm-font-semibold);
  color: var(--bm-color-text-primary);
  text-align: center;
  margin: 0;
}

.bm-section__content {
  font-size: var(--bm-font-size-base);
  color: var(--bm-color-text-secondary);
  text-align: center;
  line-height: var(--bm-line-height-base);
  margin: 0;
}

/* Section features - 移除margin，通过父容器gap控制间距 */
.bm-section__features {
  margin: 0;
}



.bm-section__header {
  text-align: center;
  margin: 0; /* 移除外边距，间距由父级 gap 控制 */
  /* header 内部元素使用 gap 控制间距 */
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-lg);
}

.bm-section__features-title {
  font-size: var(--bm-font-size-xl);
  font-weight: var(--bm-font-semibold);
  margin: 0;
  color: var(--bm-color-primary);
  text-align: center;
}

.bm-section__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--bm-size-grid-feature-min), 1fr));
  gap: var(--bm-size-sm);
}

.bm-section__feature-item {
  background: var(--bm-color-bg-elevated);
  backdrop-filter: var(--bm-backdrop-blur-lg);
  padding: var(--bm-spacing-lg);
  border-radius: var(--bm-radius-xl);
  text-align: center;
  transition: all var(--bm-transition-normal);
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-md);
}

.bm-section__feature-item:hover {
  transform: var(--bm-transform-hover-lift-sm);
  background: var(--bm-color-bg-hover);
}

.bm-section__feature-icon {
  font-size: var(--bm-font-size-2xl);
  margin: 0;
  display: block;
}

.bm-section__feature-title {
  font-size: var(--bm-font-size-lg);
  font-weight: var(--bm-font-semibold);
  margin: 0;
  color: var(--bm-color-text-secondary);
}

/* 网格布局 */
.bm-grid {
  display: grid;
  gap: var(--bm-spacing-lg);
}

.bm-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.bm-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.bm-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.bm-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--bm-size-grid-feature-min), 1fr));
}

.bm-grid--1-2 {
  grid-template-columns: 1fr 2fr;
}

/* Font Awesome 图标样式 */
.bm-feature__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--bm-spacing-md);
}

.bm-feature__icon i {
  font-size: 2.5rem;
  color: var(--bm-color-text-muted);
  display: block;
}

/* 弹性布局 */
.bm-flex {
  display: flex;
}

.bm-flex--column {
  flex-direction: column;
}

.bm-flex--gap-sm {
  gap: var(--bm-spacing-sm);
}

.bm-flex--gap-md {
  gap: var(--bm-spacing-md);
}

.bm-flex--gap-lg {
  gap: var(--bm-spacing-lg);
}

/* ===== 文本组件 ===== */

/* 标题样式 */
.bm-heading {
  color: var(--bm-color-text-primary);
  font-weight: var(--bm-font-semibold);
  line-height: var(--bm-line-height-tight);
  margin: 0;
}

.bm-heading--xl {
  font-size: var(--bm-font-size-2xl);
}

.bm-heading--lg {
  font-size: var(--bm-font-size-xl);
}

.bm-heading--md {
  font-size: var(--bm-font-size-lg);
}

.bm-heading--sm {
  font-size: var(--bm-font-size-base);
}

/* 文本样式 */
.bm-text {
  color: var(--bm-color-text-secondary);
  line-height: var(--bm-line-height-base);
  margin: 0;
}

/* 卡片内段落样式 */
.bm-card__content p {
  margin: 0;
  line-height: var(--bm-line-height-base);
  color: var(--bm-color-text-secondary);
}

/* 卡片内段落默认居中，但可被工具类覆盖 */
.bm-card__content p:not(.bm-text--left):not(.bm-text--right) {
    text-align: center;
}

/* 联系页面邮件容器样式 */
.bm-contact-group {
  background-color: var(--bm-color-bg-special);
  padding: var(--bm-spacing-md);
  border-radius: var(--bm-radius-md);
  /* 使用父容器的gap来控制间距，而不是margin-bottom */
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-xs);
}

.bm-contact-label {
    margin: 0; /* 保留margin: 0，这是重置默认样式 */
}

.bm-contact-email {
    margin: 0; /* 保留margin: 0，这是重置默认样式 */
}

.bm-text--primary {
  color: var(--bm-color-text-primary);
}

.bm-text--secondary {
  color: var(--bm-color-text-secondary);
}

.bm-text--muted {
  color: var(--bm-color-text-muted);
}

.bm-text--lg {
  font-size: var(--bm-font-size-lg);
}

.bm-text--base {
  font-size: var(--bm-font-size-base);
}

.bm-text--sm {
  font-size: var(--bm-font-size-sm);
}

.bm-text--xs {
  font-size: var(--bm-font-size-xs);
}

.bm-text--center {
  text-align: center;
}

.bm-text--left {
  text-align: left;
}

.bm-text--right {
  text-align: right;
}

/* 段落样式 - 移除margin，通过父容器gap控制间距 */
.bm-paragraph {
  color: var(--bm-color-text-secondary);
  line-height: var(--bm-line-height-base);
  margin: 0;
}

.bm-paragraph--lg {
  font-size: var(--bm-font-size-lg);
}

.bm-paragraph--base {
  font-size: var(--bm-font-size-base);
}

.bm-paragraph--sm {
  font-size: var(--bm-font-size-sm);
}

/* 链接样式 */
.bm-link {
  color: var(--bm-color-primary);
  text-decoration: none;
  transition: color var(--bm-transition-fast);
}

.bm-link:hover {
  color: var(--bm-color-primary-hover);
}

.bm-link--muted {
  color: var(--bm-color-text-muted);
}

.bm-link--muted:hover {
  color: var(--bm-color-text-secondary);
}

/* 间距工具类 - 使用gap替代margin */
.bm-gap-xs { gap: var(--bm-spacing-xs); }
.bm-gap-sm { gap: var(--bm-spacing-sm); }
.bm-gap-md { gap: var(--bm-spacing-md); }
.bm-gap-lg { gap: var(--bm-spacing-lg); }
.bm-gap-xl { gap: var(--bm-spacing-xl); }

/* 行间距工具类 */
.bm-row-gap-xs { row-gap: var(--bm-spacing-xs); }
.bm-row-gap-sm { row-gap: var(--bm-spacing-sm); }
.bm-row-gap-md { row-gap: var(--bm-spacing-md); }
.bm-row-gap-lg { row-gap: var(--bm-spacing-lg); }
.bm-row-gap-xl { row-gap: var(--bm-spacing-xl); }

/* 列间距工具类 */
.bm-column-gap-xs { column-gap: var(--bm-spacing-xs); }
.bm-column-gap-sm { column-gap: var(--bm-spacing-sm); }
.bm-column-gap-md { column-gap: var(--bm-spacing-md); }
.bm-column-gap-lg { column-gap: var(--bm-spacing-lg); }
.bm-column-gap-xl { column-gap: var(--bm-spacing-xl); }

/* 显示工具类 */
.bm-block { display: block; }
.bm-inline { display: inline; }
.bm-inline-block { display: inline-block; }

/* 字体权重工具类 */
.bm-font-normal { font-weight: normal; }
.bm-font-medium { font-weight: 500; }
.bm-font-semibold { font-weight: 600; }
.bm-font-bold { font-weight: 700; }

/* 字体样式工具类 */
.bm-italic { font-style: italic; }
.bm-not-italic { font-style: normal; }

/* ===== 按钮组件 ===== */

/* 基础按钮 */
.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
  border: none;
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-font-size-base);
  font-weight: var(--bm-font-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--bm-transition-fast);
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
}

.bm-btn:disabled {
  opacity: var(--bm-opacity-medium);
  cursor: not-allowed;
  transform: none !important;
}

/* 按钮变体 */
.bm-btn--primary {
  background: var(--bm-gradient-primary);
  color: var(--bm-color-text-on-primary);
  box-shadow: var(--bm-shadow-sm);
}

.bm-btn--primary:hover:not(:disabled) {
  background: var(--bm-gradient-primary-hover);
  transform: var(--bm-transform-hover-lift-xs);
  box-shadow: var(--bm-shadow-md);
}



/* ===== 表单组件 ===== */

/* 表单容器 */
.bm-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-lg); /* 控制表单组之间的间距 */
  margin: 0; /* 确保没有外边距 */
}

/* ===== 表单组件（深色主题优化）===== */

.bm-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-sm); /* 控制标签、输入框、错误信息之间的间距 */
  margin: 0; /* 确保没有外边距 */
}

.bm-form__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--bm-font-size-base);
  font-weight: var(--bm-font-medium);
  color: var(--bm-color-text-secondary);
  letter-spacing: var(--bm-letter-spacing-normal);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-form__label--required::after {
  content: ' *';
  color: var(--bm-color-primary);
  font-weight: var(--bm-font-semibold);
}

.bm-form__label .required {
  /* 移除 margin-left，父级 flex 布局会自动处理间距 */
  /* margin-left: var(--bm-spacing-xs); */
  color: var(--bm-color-primary);
}

.bm-form__label-text {
  display: flex;
  align-items: baseline;
  gap: var(--bm-spacing-xs); /* 新增: 控制 "称呼" 和 "*" 之间的间距 */
}

/* 输入框基础样式（深色主题优化）*/
.bm-form__input,
.bm-form__textarea,
.bm-form__select {
  width: 100%;
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
  background: var(--bm-color-bg-overlay);
  border: var(--bm-border-default);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-text-secondary);
  font-size: var(--bm-font-size-base);
  font-family: inherit;
  transition: var(--bm-transition-normal);
  box-sizing: border-box;
}

.bm-form__input:focus,
.bm-form__textarea:focus,
.bm-form__select:focus {
  outline: none;
  border-color: var(--bm-color-border-focus);
  background: var(--bm-color-bg-overlay-hover);
}

.bm-form__input::placeholder,
.bm-form__textarea::placeholder {
  color: var(--bm-color-text-subtle);
}

.bm-form__textarea {
  min-height: var(--bm-size-textarea-min-height);
  resize: vertical;
}

/* 表单提交按钮 */
.bm-form__submit {
  background: var(--bm-gradient-primary);
  color: var(--bm-color-text-on-primary);
  border: none;
  padding: var(--bm-spacing-md) var(--bm-spacing-2xl); /* 控制按钮内部间距 */
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-font-size-base);
  font-weight: var(--bm-font-semibold);
  cursor: pointer;
  transition: var(--bm-transition-normal);
  width: 100%;
  box-shadow: var(--bm-shadow-sm);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-form__submit:hover {
  background: var(--bm-gradient-primary-hover);
  transform: var(--bm-transform-hover-lift-xs);
  box-shadow: var(--bm-shadow-md);
}

.bm-form__submit:active {
  transform: var(--bm-transform-none);
  box-shadow: var(--bm-shadow-sm);
}

.bm-form__submit:disabled {
  background: var(--bm-color-secondary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 表单消息样式 - JS动态创建 */
.bm-form__message {
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-font-size-sm);
  font-weight: var(--bm-font-medium);
  margin: 0;
  display: block;
  line-height: var(--bm-line-height-base);
}

.bm-form__message--success {
  background: var(--bm-color-success-light);
  color: var(--bm-color-success);
  border: 1px solid var(--bm-color-success);
}

.bm-form__message--error {
  background: var(--bm-color-danger-light);
  color: var(--bm-color-danger);
  border: 1px solid var(--bm-color-danger);
}

/* 表单字段错误样式 - JS动态创建 */
.bm-form__error {
  color: var(--bm-color-danger);
  font-size: var(--bm-font-size-xs);
  margin: 0; /* 间距由父级 gap 控制 */
  padding: var(--bm-spacing-xs) 0 0 0;
  display: block;
  line-height: var(--bm-line-height-tight);
  text-align: left;
}

/* 表单输入框错误状态 - JS动态添加类 */
.bm-form__input--error,
.bm-form__textarea--error,
.bm-form__select--error {
  border-color: var(--bm-color-danger) !important;
  background: var(--bm-color-danger-light) !important;
}

.bm-form__input--error:focus,
.bm-form__textarea--error:focus,
.bm-form__select--error:focus {
  border-color: var(--bm-color-danger) !important;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
}

/* 字符计数器样式 - JS动态创建 */
.bm-form__char-count {
  font-size: var(--bm-font-size-xs);
  color: var(--bm-color-text-muted);
  font-weight: var(--bm-font-normal);
  margin: 0; /* 间距由父级 gap 控制 */
  padding: 0;
  display: inline;
  line-height: var(--bm-line-height-tight);
}

/* 图片模态框样式 - JS动态创建 */
.bm-image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  z-index: var(--bm-z-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--bm-transition-normal);
  margin: 0;
  padding: 0;
}

.bm-image-modal.show {
  opacity: 1;
  visibility: visible;
}

.bm-image-modal__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.bm-image-modal__slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin: 0;
  padding: 0;
}

.bm-image-modal__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--bm-spacing-xl);
}

.bm-image-modal__image {
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-xl);
  margin: 0;
  padding: 0;
}

.bm-image-modal__close {
  position: absolute;
  top: var(--bm-spacing-xl);
  right: var(--bm-spacing-xl);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bm-font-size-lg);
  transition: all var(--bm-transition-fast);
  z-index: 10;
  margin: 0;
  padding: 0;
}

.bm-image-modal__close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.bm-image-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bm-font-size-lg);
  transition: all var(--bm-transition-fast);
  z-index: 10;
  margin: 0;
  padding: 0;
}

.bm-image-modal__nav:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.bm-image-modal__nav--prev {
  left: var(--bm-spacing-xl);
}

.bm-image-modal__nav--next {
  right: var(--bm-spacing-xl);
}

/* 移动端适配已移至theme.css统一管理 */





/* ===== 卡片组件 ===== */

.bm-card {
  background: var(--bm-color-bg-card);
  backdrop-filter: var(--bm-backdrop-blur-lg);
  border-radius: var(--bm-radius-xl);
  /* 必须有 padding 来创建内部空间 */
  padding: var(--bm-spacing-xl) var(--bm-spacing-xl) calc(var(--bm-spacing-xl) + var(--bm-spacing-md)) var(--bm-spacing-xl);
  display: flex;
  flex-direction: column;
  /* 使用 gap 控制卡片内直接子元素的间距 */
  gap: var(--bm-spacing-lg);
  transition: all var(--bm-transition-normal);
  margin: 0; /* 确保没有外边距 */
}

.bm-card--elevated {
  box-shadow: var(--bm-shadow-md);
}

.bm-card--hoverable:hover {
  transform: var(--bm-transform-hover-lift-sm);
  box-shadow: var(--bm-shadow-lg);
}

.bm-card__header {
  display: flex;
  flex-direction: column;
  /* header 内部元素间距 */
  gap: var(--bm-spacing-md);
  text-align: center;
  /* 移除所有 margin 和 padding，间距完全由 gap 控制 */
  margin: 0;
  padding: 0;
}

.bm-card__title {
  font-size: var(--bm-font-size-base);
  font-weight: var(--bm-font-semibold);
  color: var(--bm-color-text-primary);
  margin: 0;
  padding: 0 var(--bm-spacing-md); /* 添加左右padding */
  text-align: center;
}

.bm-card__icon {
  font-size: var(--bm-font-size-2xl);
  display: block;
  text-align: center;
}

.bm-card__content {
    /* .bm-card__content 自身也应是 flex 容器，以控制其内部元素的间距 */
    display: flex;
    flex-direction: column;
    gap: var(--bm-spacing-md); /* 例如，控制段落和联系方式组的间距 */
    padding: 0 var(--bm-spacing-md); /* 添加左右padding */
    margin: 0;
}

.bm-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0;
}

/* 图文混合排版样式 */
.bm-card__content--image-text {
    display: flex;
    align-items: center;
    gap: var(--bm-spacing-xl);
    flex-wrap: nowrap; /* 防止换行 */
}

.bm-card__text {
    flex: 1;
    min-width: 0; /* 允许文字收缩 */
}

.bm-card__image-wrapper {
    flex: 0 0 auto;
    width: 70%; /* 固定宽度 */
}

.bm-card__content--image-text .bm-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: var(--bm-shadow-md);
}

/* 响应式调整 - 只在很小的屏幕上才垂直排列 */
@media (max-width: 600px) {
    .bm-card__content--image-text {
        flex-direction: column;
        text-align: center;
        flex-wrap: wrap;
    }
    
    .bm-card__text {
        min-width: auto;
    }
    
    .bm-card__image-wrapper {
        width: 100%;
        max-width: 100%;
    }
}

/* 移除所有子元素的 margin */
.bm-card__title, .bm-card__content p, .bm-contact-group {
    margin: 0;
}





/* ===== Dropdown 组件 ===== */

/* 基础下拉菜单 */
.bm-dropdown {
  position: relative;
  display: inline-block;
}

.bm-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-spacing-sm); /* 控制触发器内部元素间距 */
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
  background: var(--bm-color-bg-overlay);
  color: var(--bm-color-text-primary);
  border: var(--bm-border-default);
  border-radius: var(--bm-radius-lg);
  cursor: pointer;
  font-size: var(--bm-font-size-base);
  font-weight: var(--bm-font-normal);
  transition: all var(--bm-transition-fast);
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0; /* 确保没有外边距 */
}

.bm-dropdown__trigger:hover {
  background: var(--bm-color-bg-overlay-hover);
  color: var(--bm-color-primary);
}

.bm-dropdown__trigger .bm-dropdown__icon {
  font-size: var(--bm-font-size-xs);
  transition: transform var(--bm-transition-fast);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-dropdown--active .bm-dropdown__trigger .bm-dropdown__icon {
  transform: var(--bm-transform-rotate-180);
}

.bm-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--bm-spacing-sm));
  right: 0;
  background: rgb(40, 40, 40); /* 不透明的深色背景，确保一致性 */
  border: 1px solid var(--bm-color-border-primary);
  border-radius: var(--bm-radius-xl);
  min-width: var(--bm-size-dropdown-min);
  width: 100%;
  opacity: var(--bm-opacity-hidden);
  visibility: hidden;
  transform: var(--bm-transform-dropdown-hidden);
  transition: all var(--bm-transition-fast);
  z-index: var(--bm-z-index-dropdown);
  overflow: hidden;
  box-shadow: var(--bm-shadow-lg);
}

.bm-dropdown--active .bm-dropdown__menu {
  opacity: var(--bm-opacity-full);
  visibility: visible;
  transform: var(--bm-transform-none);
}

/* DEPRECATED: 兼容旧的激活状态类名，建议使用 --active 修饰符 */
/* 计划在 v2.0 中移除 */
.bm-dropdown.active .bm-dropdown__menu {
  opacity: var(--bm-opacity-full);
  visibility: visible;
  transform: var(--bm-transform-none);
}

/* 悬停触发的下拉菜单 */
.bm-dropdown--hover:hover .bm-dropdown__menu {
  opacity: var(--bm-opacity-full) !important;
  visibility: visible !important;
  transform: var(--bm-transform-none) !important;
}

.bm-dropdown--hover:hover .bm-dropdown__trigger .bm-dropdown__icon {
  transform: var(--bm-transform-rotate-180);
}

/* 下拉菜单项 */
.bm-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--bm-spacing-sm); /* 控制菜单项内部元素间距 */
  padding: var(--bm-spacing-md);
  color: var(--bm-color-text-primary);
  text-decoration: none;
  transition: all var(--bm-transition-fast);
  cursor: pointer;
  font-size: var(--bm-font-size-base);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0; /* 确保没有外边距 */
}

.bm-dropdown__item:hover {
  background: var(--bm-color-bg-overlay);
  color: var(--bm-color-primary);
}

.bm-dropdown__item--danger {
  color: var(--bm-color-danger);
}

.bm-dropdown__item--danger:hover {
  background: var(--bm-color-danger-light);
  color: var(--bm-color-danger);
}

.bm-dropdown__item .bm-dropdown__item-icon {
  font-size: var(--bm-font-size-sm);
  margin: 0; /* 间距由父级 gap 控制 */
}



/* 下拉菜单分隔线 */
.bm-dropdown__divider {
  height: var(--bm-size-divider);
  background: var(--bm-color-border-light);
  margin: 0; /* 间距由父级 gap 控制 */
}

/* 表单下拉菜单变体 */
.bm-dropdown--form {
  display: block;
  width: auto;
  max-width: var(--bm-size-form-max-width);
}

.bm-dropdown--form .bm-dropdown__trigger {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  background: var(--bm-color-bg-overlay);
  color: var(--bm-color-text-secondary);
  border-radius: var(--bm-radius-md); /* 与表单输入框保持一致 */
  padding: var(--bm-spacing-md) var(--bm-spacing-lg); /* 与表单输入框保持一致的padding */
}

.bm-dropdown--form .bm-dropdown__current {
  text-align: left;
  flex: 1;
}

.bm-dropdown--form .bm-dropdown__icon {
  margin-left: auto; /* 保留，这是布局需要 */
}

.bm-dropdown--form .bm-dropdown__trigger:hover,
.bm-dropdown--form .bm-dropdown__trigger:focus {
  border-color: var(--bm-color-border-focus);
  background: var(--bm-color-bg-overlay-hover);
  /* 移除发光效果，与表单输入框保持一致 */
}

.bm-dropdown--form .bm-dropdown__menu {
  left: 0;
  right: 0;
  border-radius: var(--bm-radius-md); /* 与表单输入框保持一致 */
}

.bm-dropdown--form .bm-dropdown__item {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
}

.bm-dropdown__item-content {
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-xs);
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.bm-dropdown__item-title {
  font-size: var(--bm-font-size-base);
  color: var(--bm-color-text-secondary);
  line-height: var(--bm-line-height-tight);
}

.bm-dropdown__item-desc {
  font-size: var(--bm-font-size-sm);
  color: var(--bm-color-text-muted);
  line-height: var(--bm-line-height-snug);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bm-dropdown--form .bm-dropdown__item:hover .bm-dropdown__item-title {
  color: var(--bm-color-primary);
}

.bm-dropdown--form .bm-dropdown__item:hover .bm-dropdown__item-desc {
  color: var(--bm-color-text-secondary);
}

/* 下拉框选中状态指示器 */
.bm-dropdown__item-check {
  color: var(--bm-color-primary);
  font-size: var(--bm-font-size-sm);
  /* 使用flex的margin-left: auto来推到右侧，这是布局需要 */
  margin-left: auto;
  opacity: var(--bm-opacity-hidden);
  transition: opacity var(--bm-transition-fast);
  flex-shrink: 0;
}

.bm-dropdown__item--selected .bm-dropdown__item-check {
  opacity: var(--bm-opacity-full);
}

/* 语言下拉框特定样式 */
.bm-lang-dropdown .bm-dropdown__item-check {
  /* 使用父容器的gap来控制间距，而不是margin-left */
  position: static;
}

.bm-lang-dropdown .bm-dropdown__item--selected .bm-dropdown__item-check {
  opacity: var(--bm-opacity-full);
}

/* 表单下拉框特定样式 */
.bm-dropdown--form .bm-dropdown__item {
  position: relative;
}

.bm-dropdown--form .bm-dropdown__item-check {
  position: static;
  /* 使用父容器的gap来控制间距，而不是margin-left */
  transform: none;
}

/* 表单下拉框中的标题行样式 */
.bm-dropdown--form .bm-dropdown__item-title {
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* 小尺寸下拉菜单 */
.bm-dropdown--sm .bm-dropdown__trigger {
  padding: var(--bm-spacing-sm) var(--bm-spacing-md);
  font-size: var(--bm-font-size-sm);
  min-width: var(--bm-size-dropdown-sm);
}

.bm-dropdown--sm .bm-dropdown__item {
  padding: var(--bm-spacing-sm) var(--bm-spacing-md);
  font-size: var(--bm-font-size-sm);
}

/* 大尺寸下拉菜单 */
.bm-dropdown--lg .bm-dropdown__trigger {
  padding: var(--bm-spacing-lg) var(--bm-spacing-xl);
  font-size: var(--bm-font-size-lg);
}

.bm-dropdown--lg .bm-dropdown__item {
  padding: var(--bm-spacing-lg);
  font-size: var(--bm-font-size-lg);
}

/* ===== 模态框组件 ===== */

.bm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bm-color-modal-overlay);
  backdrop-filter: var(--bm-backdrop-blur-md);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--bm-z-index-modal);
  opacity: var(--bm-opacity-hidden);
  transition: opacity var(--bm-transition-normal);
}

.bm-modal--show {
  display: flex;
  opacity: var(--bm-opacity-full);
}

.bm-modal__content {
  background: var(--bm-color-bg-card);
  border-radius: var(--bm-radius-xl);
  max-width: var(--bm-size-modal-max-width);
  max-height: var(--bm-size-modal-max-height);
  width: var(--bm-size-modal-width);
  position: relative;
  backdrop-filter: var(--bm-backdrop-blur-md);
  box-shadow: var(--bm-shadow-xl);
  transform: var(--bm-transform-modal-hidden);
  transition: transform var(--bm-transition-normal);
}

.bm-modal--show .bm-modal__content {
  transform: var(--bm-transform-active);
}

.bm-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bm-spacing-md); /* 控制标题和关闭按钮间距 */
  padding: var(--bm-spacing-xl) var(--bm-spacing-xl) 0;
}

.bm-modal__title {
  font-size: var(--bm-font-size-lg);
  font-weight: var(--bm-font-semibold);
  color: var(--bm-color-text-primary);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-modal__close {
  background: none;
  border: none;
  font-size: var(--bm-font-size-lg);
  color: var(--bm-color-text-secondary);
  cursor: pointer;
  padding: var(--bm-spacing-sm);
  border-radius: var(--bm-radius-sm);
  transition: color var(--bm-transition-fast);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-modal__close:hover {
  color: var(--bm-color-danger);
}

.bm-modal__body {
  padding: var(--bm-spacing-xl);
  overflow-y: auto;
  max-height: var(--bm-size-modal-body-max-height);
}

.bm-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--bm-spacing-md);
  padding: 0 var(--bm-spacing-xl) var(--bm-spacing-xl);
}

/* ===== 警告提示组件 ===== */

.bm-alert {
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
  border-radius: var(--bm-radius-md);
  border-left: var(--bm-border-alert-left);
  display: flex;
  align-items: flex-start;
  gap: var(--bm-spacing-md); /* 控制图标和内容间距 */
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-alert__icon {
  font-size: var(--bm-font-size-lg);
  flex-shrink: 0;
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-alert__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-xs); /* 控制标题和消息间距 */
  margin: 0;
}

.bm-alert__title {
  font-weight: var(--bm-font-semibold);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-alert__message {
  line-height: var(--bm-line-height-normal);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-alert--success {
  background: var(--bm-color-primary-light);
  border-color: var(--bm-color-primary);
  color: var(--bm-color-primary);
}

.bm-alert--error {
  background: var(--bm-color-danger-light);
  border-color: var(--bm-color-danger);
  color: var(--bm-color-danger);
}

.bm-alert--warning {
  background: var(--bm-color-warning-light);
  border-color: var(--bm-color-warning);
  color: var(--bm-color-warning);
}

.bm-alert--info {
  background: var(--bm-color-secondary-light);
  border-color: var(--bm-color-secondary);
  color: var(--bm-color-secondary);
}

/* ===== 徽章组件 ===== */

.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-spacing-xs); /* 控制徽章内部元素间距 */
  padding: var(--bm-spacing-xs) var(--bm-spacing-sm);
  font-size: var(--bm-font-size-xs);
  font-weight: var(--bm-font-semibold);
  border-radius: var(--bm-radius-full);
  text-transform: uppercase;
  letter-spacing: var(--bm-letter-spacing-wide);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-badge--primary {
  background: var(--bm-color-primary);
  color: var(--bm-color-text-on-primary);
}

.bm-badge--secondary {
  background: var(--bm-color-secondary);
  color: var(--bm-color-text-on-primary);
}

.bm-badge--success {
  background: var(--bm-color-success);
  color: var(--bm-color-text-on-primary);
}

.bm-badge--danger {
  background: var(--bm-color-danger);
  color: var(--bm-color-text-on-primary);
}

.bm-badge--warning {
  background: var(--bm-color-warning);
  color: var(--bm-color-text-on-primary);
}

.bm-badge--outline {
  background: transparent;
  border: var(--bm-border-outline);
}

/* ===== 表格组件 ===== */

.bm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bm-color-bg-card);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  box-shadow: var(--bm-shadow-sm);
  margin: 0; /* 间距由父级 gap 控制 */
}

.bm-table__header {
  background: var(--bm-color-bg-secondary);
}

.bm-table__header th {
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
  text-align: left;
  font-weight: var(--bm-font-semibold);
  color: var(--bm-color-text-primary);
  font-size: var(--bm-font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--bm-letter-spacing-wide);
  margin: 0; /* 确保没有外边距 */
}

.bm-table__body td {
  padding: var(--bm-spacing-md) var(--bm-spacing-lg);
  border-top: var(--bm-border-light);
  color: var(--bm-color-text-secondary);
  margin: 0; /* 确保没有外边距 */
}

.bm-table__row:hover {
  background: var(--bm-color-bg-overlay);
}

.bm-table--striped .bm-table__row:nth-child(even) {
  background: var(--bm-color-bg-overlay);
}

.bm-table--bordered {
  border: var(--bm-border-default);
}

.bm-table--bordered th,
.bm-table--bordered td {
  border-right: var(--bm-border-light);
}

.bm-table--bordered th:last-child,
.bm-table--bordered td:last-child {
    border-right: none;
  }

/* Section responsive styles */
@media (max-width: 768px) {
  .bm-section__container--enhanced {
    padding: var(--bm-radius-xl) var(--bm-size-sm);
    margin: 0 var(--bm-spacing-md); /* 保留margin: 0 auto，这是居中布局需要 */
  }
  
  .bm-section__title {
    font-size: var(--bm-font-size-xl);
  }
  
  .bm-section__content {
    font-size: var(--bm-font-size-base);
  }
  
  .bm-section__sub-container {
    padding: var(--bm-radius-xl) var(--bm-spacing-md);
  }
  
  .bm-section__features-grid {
    grid-template-columns: 1fr;
    gap: var(--bm-spacing-lg);
  }
  
  .bm-section__feature-item {
    padding: var(--bm-size-sm);
  }
  
  .bm-section__feature-icon {
    font-size: var(--bm-font-size-2xl);
  }
}

/* Header组件样式已移至 theme.css（深色主题版本）*/

/* ===== 响应式设计 ===== */

/* what-is section 使用网格布局，无需特殊宽度限制 */

/* what-is section 卡片内容左对齐 */
#what-is .bm-card__content,
#what-is .bm-card__title,
#what-is .bm-card__description {
  text-align: left;
}

/* what-is section 中间卡片高亮显示 */
#what-is .bm-grid--3 .bm-card:nth-child(2) {
  background: var(--bm-color-bg-elevated);
  border: 2px solid var(--bm-color-primary);
  box-shadow: 0 4px 12px rgba(0, 191, 174, 0.15);
}

/* 高亮卡片字体放大 */
#what-is .bm-grid--3 .bm-card:nth-child(2) .bm-card__description {
  font-size: var(--bm-font-size-lg);
  font-weight: var(--bm-font-medium);
}

/* features页面卡片内容左对齐 */
.bm-card__title,
.bm-card__content,
.bm-card__content p {
  text-align: left !important;
}

@media (max-width: 768px) {
  /* 中等屏幕优化 */
  .bm-container {
    padding: 0 var(--bm-spacing-sm);
  }
  
  /* 移动端减少 bm-container 在 section 中的间距 */
  .bm-section > .bm-container {
    gap: var(--bm-spacing-md); /* 移动端进一步减少间距 */
  }
  
  /* 组件间距调整 */
  .bm-section__container {
    gap: var(--bm-spacing-md); /* 减少section内部间距 */
  }
  
  .bm-card {
    gap: var(--bm-spacing-sm); /* 减少卡片内部间距 */
  }
  
  .bm-container--fluid {
    padding: 0 var(--bm-spacing-sm);
  }
  
  /* 网格响应式 */
  .bm-grid {
    grid-template-columns: 1fr;
    gap: var(--bm-spacing-md);
  }
  
  .bm-grid--2 {
    grid-template-columns: 1fr;
  }
  
  .bm-grid--3 {
    grid-template-columns: 1fr;
  }
  
  .bm-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 按钮响应式 */
  .bm-btn {
    width: 100%;
    justify-content: center;
  }
  
  .bm-btn-group {
    flex-direction: column;
  }
  
  .bm-btn-group .bm-btn {
    border-radius: var(--bm-radius-md);
    /* 使用父容器的gap来控制间距，而不是margin-bottom */
  }
  
  .bm-btn-group .bm-btn:last-child {
    /* 使用父容器的gap来控制间距，而不是margin-bottom */
  }
  
  /* 表单响应式 */
  .bm-form-row {
    flex-direction: column;
  }
  
  .bm-form-group {
    /* 使用父容器的gap来控制间距，而不是margin-bottom */
  }
  
  /* 下拉菜单响应式 */
  .bm-dropdown--form .bm-dropdown__trigger {
    min-width: var(--bm-size-full);
  }
  
  .bm-dropdown__menu {
    left: 0;
    right: 0;
    min-width: var(--bm-size-full);
  }
  
  /* 模态框响应式 */
  .bm-modal__content {
    width: var(--bm-size-modal-mobile-width);
    /* 使用父容器的padding来控制间距，而不是margin */
  }
  
  .bm-modal__header,
  .bm-modal__body,
  .bm-modal__footer {
    padding-left: var(--bm-spacing-md);
    padding-right: var(--bm-spacing-md);
  }
  
  .bm-modal__footer {
    flex-direction: column;
  }
  
  .bm-modal__footer .bm-btn {
    /* 使用父容器的gap来控制间距，而不是margin-bottom */
  }
  
  .bm-modal__footer .bm-btn:last-child {
    /* 使用父容器的gap来控制间距，而不是margin-bottom */
  }
  
  /* 表格响应式 */
  .bm-table {
    font-size: var(--bm-font-size-sm);
  }
  
  .bm-table__header th,
  .bm-table__body td {
    padding: var(--bm-spacing-sm) var(--bm-spacing-md);
  }
  
  /* 卡片响应式 */
  .bm-card {
    /* 使用父容器的gap来控制间距，而不是margin-bottom */
  }
  
  .bm-card__header,
  .bm-card__body,
  .bm-card__footer {
    padding: var(--bm-spacing-md);
  }
  
  /* 图标响应式 - 平板和手机端 */
  .bm-feature__icon i {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  /* 超小屏幕优化 */
  .bm-container {
    padding: 0 var(--bm-spacing-xs);
  }
  
  /* 小屏幕进一步减少 bm-container 在 section 中的间距 */
  .bm-section > .bm-container {
    gap: var(--bm-spacing-sm); /* 超小屏幕最小化间距 */
  }
  
  /* 组件间距进一步调整 */
  .bm-section__container {
    gap: var(--bm-spacing-sm); /* 超小屏幕最小化section内部间距 */
  }
  
  .bm-card {
    gap: var(--bm-spacing-xs); /* 超小屏幕最小化卡片内部间距 */
    padding: var(--bm-spacing-md); /* 进一步减少卡片padding */
  }
  
  .bm-grid--4 {
    grid-template-columns: 1fr;
  }
  
  .bm-modal__content {
    width: var(--bm-size-viewport-full);
    height: var(--bm-size-viewport-full);
    border-radius: 0;
    margin: 0; /* 保留margin: 0，这是重置默认样式 */
  }
  
  .bm-modal__body {
    max-height: var(--bm-size-modal-mobile-body-height);
  }
  
  /* 图标响应式 - 手机端进一步调整 */
  .bm-feature__icon i {
    font-size: 1.8rem;
  }
}

/* 高分辨率屏幕优化 */
@media (min-width: 1200px) {
  .bm-container {
    max-width: var(--bm-size-container-xl);
  }
  
  /* Header容器保持1200px宽度 - 注释掉因为header样式已移至theme.css */
  /* .bm-header .bm-container {
     max-width: var(--bm-size-container-max);
   } */
  
  .bm-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--bm-size-grid-min), 1fr));
  }
}

/* 打印样式 */
@media print {
  .bm-btn,
  .bm-dropdown,
  .bm-modal {
    display: none !important;
  }
  
  .bm-card {
    box-shadow: none;
    border: var(--bm-border-default);
  }
  
  .bm-alert {
    border: var(--bm-border-outline);
  }
}

/* 深色主题 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文字颜色 - 深色主题 */
    --bm-color-text-primary: #ffffff;
    --bm-color-text-secondary: #e0e0e0;
    --bm-color-text-tertiary: #b0b0b0;
    --bm-color-text-muted: #a0a0a0;
    --bm-color-text-subtle: rgba(255, 255, 255, 0.6);
    --bm-color-text-inverse: #333333;
    
    /* 背景颜色 - 深色主题，保持透明度以显示背景图片 */
    --bm-color-bg-primary: rgba(0, 0, 0, 0.6);
    --bm-color-bg-secondary: rgba(40, 40, 40, 0.5);
    --bm-color-bg-tertiary: rgba(60, 60, 60, 0.6);
    --bm-color-bg-special: rgba(125, 125, 125, 0.1);
    --bm-color-bg-card: rgba(40, 40, 40, 0.6);
    --bm-color-bg-surface: rgba(42, 42, 42, 0.6);
    --bm-color-bg-elevated: rgba(60, 60, 60, 0.6);
    --bm-color-bg-hover: rgba(70, 70, 70, 0.6);
    --bm-color-bg-overlay: rgba(255, 255, 255, 0.05);
    --bm-color-bg-overlay-hover: rgba(255, 255, 255, 0.08);
    --bm-color-bg-overlay-light: rgba(255, 255, 255, 0.1);
    --bm-color-bg-overlay-medium: rgba(255, 255, 255, 0.2);
    --bm-color-bg-overlay-strong: rgba(255, 255, 255, 0.3);
    
    /* 边框颜色 - 深色主题 */
    --bm-color-border: rgba(255, 255, 255, 0.2);
    --bm-color-border-light: rgba(255, 255, 255, 0.1);
    
    /* 阴影系统 - 深色主题 */
    --bm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --bm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --bm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --bm-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);
    --bm-shadow-text: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  /* 下拉菜单在深色主题中使用不透明背景 */
  .bm-dropdown__menu {
    background: #2a2a2a !important; /* 不透明的深色背景 */
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .bm-btn {
    border: var(--bm-border-high-contrast);
  }
  
  .bm-card {
    border: var(--bm-border-default);
  }
  
  .bm-alert {
    border-width: var(--bm-border-width-thick);
  }
}

/* 列表组件 */
.bm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bm-spacing-sm);
}

.bm-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-spacing-sm);
  padding: var(--bm-spacing-xs) 0;
  color: var(--bm-color-text-secondary);
  line-height: var(--bm-line-height-relaxed);
}

.bm-list__icon {
  color: var(--bm-color-primary);
  font-size: var(--bm-font-size-sm);
  flex-shrink: 0;
  transform: translateY(var(--bm-icon-align-offset)); /* 使用变量控制图标对齐 */
}