/* 白天模式字体 */
body {
  background-color: #f0f2f5;
  color: #222; /* 深色文字，保证清晰 */
}

/* 暗黑模式背景+字体 */
body.dark-mode {
  background-color: #121212;
  color: #eee; /* 浅色文字 */
}

/* 主容器背景 */
body.dark-mode #app {
  background-color: #1e1e1e;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

/* 侧边栏 */
body {
  color: #222; /* 默认文字色 */
}
body.dark-mode .sidebar {
  background-color: #2a2a2a;
  border-color: #444;
  color: #eee; /* 暗黑模式侧边栏文字变浅 */
}

/* 主分类标题 */
body .main-category {
  color: #1890ff;
}
body.dark-mode .main-category {
  color: #40a9ff;
  border-bottom-color: #444;
}

/* 子分类 */
body .sub-category {
  color: #555;
}
body.dark-mode .sub-category {
  color: #ccc;
}

body.dark-mode .sub-category.active {
  background-color: #40a9ff;
  color: #000;
}

body.dark-mode .sub-category:hover {
  background-color: #333;
  color: #40a9ff;
}

/* 内容区 */
body .content {
  background-color: #fff;
  color: #222;
}
body.dark-mode .content {
  background-color: #1e1e1e;
  color: #eee;
}

/* 产品卡片 */
body .product {
  background-color: #fff;
  border-color: #ddd;
  color: #222;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}
body.dark-mode .product {
  background-color: #292929;
  border-color: #444;
  color: #eee;
  box-shadow: 0 2px 8px rgba(64, 169, 255, 0.3);
}

body.dark-mode .product:hover {
  box-shadow: 0 4px 15px rgba(64, 169, 255, 0.5);
}

/* 价格高亮 */
body .price-highlight {
  color: #ff1818;
  border-bottom-color: #1890ff;
}
body.dark-mode .price-highlight {
  color: #00e676;
  border-bottom-color: #40a9ff;
}

/* 按钮 */
body a button {
  background-color: #1890ff;
  color: white;
}
body a button:hover {
  background-color: #096dd9;
}

body button.disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}
body.dark-mode button.disabled {
  background-color: #555;
  color: #999;
  cursor: not-allowed;
}

/* 切换按钮 */
.skin-toggle .toggle-btn {
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
body.dark-mode .skin-toggle .toggle-btn {
  background-color: #333;
  color: #eee;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* 位置固定 */
.skin-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important; /* 主字体颜色 */
  }
  
  body.dark-mode #app {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }
  
  /* 左侧面板 */
  body.dark-mode .left-panel {
    background-color: #222 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
  }
  
  /* 基础信息和汇总标题 */
  body.dark-mode .basic-info h3,
  body.dark-mode .summary h3 {
    color: #40a9ff !important;
  }
  
  /* 产品标题 */
  body.dark-mode .title {
    color: #40a9ff !important;
  }
  
  /* 各行文本 */
  body.dark-mode .row {
    color: #ddd !important;
  }
  
  /* 价格高亮 */
  body.dark-mode .price-highlight {
    color: #00e676 !important;
    border-bottom-color: #40a9ff !important;
  }
  
  /* 按钮 */
  body.dark-mode button,
  body.dark-mode .copy-btn {
    background-color: #40a9ff !important;
    color: #000 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(64, 169, 255, 0.8) !important;
    transition: background-color 0.3s ease !important;
  }
  body.dark-mode button:hover,
  body.dark-mode .copy-btn:hover {
    background-color: #096dd9 !important;
    color: #fff !important;
  }
  
  /* 链接按钮 */
  body.dark-mode a button {
    background-color: #40a9ff !important;
    color: #000 !important;
  }
  
  body.dark-mode a button:hover {
    background-color: #096dd9 !important;
    color: #fff !important;
  }
  
  /* 禁用按钮 */
  body.dark-mode button.disabled {
    background-color: #555 !important;
    color: #999 !important;
    cursor: not-allowed !important;
  }
  
  .skin-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
  }
  
  .toggle-btn {
    background-color: #fff;
    color: #333;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
  }
  
  .toggle-btn i {
    font-size: 18px;
  }
  
  .skin-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    /* 不用 bottom，默认顶部右侧 */
  }
  
  .toggle-btn {
    background-color: #fff;
    color: #333;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
  }
  
  .toggle-btn i {
    font-size: 18px;
  }
  body.dark-mode label[for="osVersion"] {
    color: #eee;
    font-weight: 600;
  }
  
  
  /* 手机屏幕适配，不固定到底部，依然右上角 */
  @media (max-width: 480px) {
    .skin-toggle {
      top: 15px;
      right: 15px;
      /* 取消transform和bottom属性 */
    }
    .toggle-btn {
      padding: 10px 16px;
      font-size: 16px;
    }
    .toggle-btn i {
      font-size: 18px;
    }
  }