
<style>

/* 默认基准：普通分辨率 */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* 低分辨率：屏幕宽度 ≤ 509px */
@media screen and (max-width: 509px) {
  html {
    font-size: 9px; /* 1rem = 9px */
  }
}

/* 中等分辨率：屏幕宽度 510px - 810px */
@media screen and (min-width: 510px) and (max-width: 810px) {
  html {
    font-size: 11px; /* 1rem = 13px */
  }
}

@media screen and (max-width: 980px) {
  .software-icon {
    width: 1.2em;                     /* 图标宽度与字体大小一致 */
    height: 1.2em;                    /* 图标高度与字体大小一致 */
    vertical-align: text-top;       /* 与文字顶部对齐 */
    display: block;                 /* 图标独占一行 */
    margin: 0 auto 0.2rem auto;     /* 水平居中，下方留间距 */
  }
}

/* 中等分辨率：屏幕宽度 811px - 1300px（如平板、普通PC） */
@media screen and (min-width: 811px) and (max-width: 1300px) {
  html {
    font-size: 13px; /* 1rem = 13px */
  }
}

/* 高分辨率（2500px 以上）：整体放大 */
@media (min-width: 2500px) {
  html {
    font-size: 22px; /* 1rem = 22px */
  }
}

body {
  font-family: Arial, sans-serif;     /* 页面使用的字体 */
  line-height: 1.5;                   /* 行间距，影响可读性 */
  width:92%;                          /* 页面最大宽度，避免在超大屏幕下太宽 */
  margin: 0 auto;                     /* 页面水平居中 */
  padding: 0.6rem 3rem;                 /* 页面上下左右内边距，增强阅读舒适度 */
  font-size: 16px;                    /* 设置整个页面的基础字体大小 */
}

/* =========================
   顶部导航栏整体样式
   ========================= */
.navbar {
  line-height: 2.2;             /* 高度 = 字体大小 × 2.2 */
  background-color: #f5f5f6;    /* 背景颜色：浅灰色 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);   /* 阴影效果 */
  border: 0.05rem solid #ddd;   /* 四周阴影线 */
  border-radius: 0.2rem;       /* 圆角 */
  display: flex;                /* 使用 Flex 布局，方便左右分布 */
  align-items: flex-start;      /* 保证右侧顶部对齐 */
  justify-content: space-between; /* 左右两端对齐：站点名靠左，菜单靠右 */
  padding: 0 0.5rem;              /* 左右内边距，避免内容贴边 */
}

/* 左侧：网站标题 */
.nav-left {
  font-size: 2rem;            /* 标题字体大小 */
  font-weight: bold;            /* 加粗 */
  color: #50a3da;                  /* 深灰色文字 */
}

/* 右侧：菜单容器 */
.nav-right {
  display: flex;                /* 横向排列菜单 */
  flex-direction: column;       /* 分上下两行 */
  align-items: flex-end;        /* 靠右对齐 */
  gap: 0.3rem;                  /* 两行之间的间距 *//
}

/* 右侧上面的ip相关 */
.nav-top-row {
  display: flex;
  gap: 1rem;               /* IP信息和线路切换之间的间距 */
  font-size: 0.8rem;
  color: #444;
}

/* 右侧下面的软件分类 */
.nav-bottom-row {
  display: flex;           /* 分类按钮保持横向 */
  gap: 0.3rem;             /* 4个软件分类之间的间距 */
}

/* 单个菜单项 */
.nav-item {
  cursor: pointer;              /* 鼠标悬停时变成手型 */
  font-weight: bold;                 /* 字体加粗 */
  font-size: 0.9rem;              /* 字体大小 */
  color: #2c3e50;              /* 深灰蓝，沉稳 */
  background-color: #f0f2f5;   /* 浅灰蓝背景，区别于白底按钮 */
  border-radius: 0.37rem;       /* 圆角 */
  padding: 0.0em 0.3em;        /* 内边距 */
  border: 0.06rem solid #ddd;   /* 四周阴影线 */
  transition: all 0.2s ease;
}

/* 菜单项悬停效果 */
.nav-item:hover {
  background-color: #3498db;
  color: #fff;
  transform: translateY(-3px);      /* 向上移动3像素 */
}

/* 每个分类区域的容器样式 */
.category-box {
  margin-bottom: 1rem;               /* 每个分类之间的垂直间距 */
  align-items: center;  
  margin-top: 1rem;                  /* 距离顶部导航栏的距离 */
}

/* 小类容器（标题+软件）单独一个灰色圆角框 */
.sub-block {
  background-color: #e0e0e0;          /* 分类背景色（浅灰色） */
  border-radius: 0.55rem;                /* 分类容器圆角半径12px */
  border: 0.07rem solid #a8a8d8;             /* 四周阴影线 */
  padding: 0.35rem;                 /* 内边距 */
  margin-bottom: 0.6rem;               /* 每个分类之间的垂直间距 */
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);  /* 阴影效果 */
}

/* 分类标题项样式（放在网格中，和软件一起排列） */
.category-title {
  font-size: 1.2rem;                    /* 字体大小 */
  font-weight: bold;                 /* 字体加粗 */
  color: #2c3e50;                    /* 字体颜色 */
  margin: 0rem 0 0.1rem;              /* 分类标题距离上左下的距离 */
  padding: 0.3rem 0.3rem 0.2rem 0.3rem;             /* 内边距上右下左 */
  background: #f5f7fa;                /* 背景颜色 */
  border-left: 4px solid #0066cc;    /* 左侧蓝条 */
  border-radius: 0.35rem;            /* 圆角 */
}

/* 软件列表容器，使用网格布局 */
.software-grid {
  display: grid;                      /* 启用 CSS Grid 布局 */
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 固定 6 列，平均分配 */
  gap: 0.25rem;                           /* 网格之间的间距为2px */
}
/* 远程软件单独为5列 */
.remote-category .software-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}


/* 具体软件图标样式 */
.software-icon {
  width: 1.3em;      /* 图标宽度与字体大小一致 */
  height: 1.3em;     /* 图标高度与字体大小一致 */
  vertical-align: text-top;         /* 与文字顶部对齐 */
  margin-top: -0.1em;              /* 向上微调 */
}
/* 标题图标样式 */
.title-icon {
  width: 1.4em;      /* 图标宽度与字体大小一致 */
  height: 1.4em;     /* 图标高度与字体大小一致 */
  vertical-align: middle;           /* 垂直居中对齐 */
  margin-top: -0.3rem;              /* 向上微调 */
}


/* 软件链接样式 */
.software-grid a {
  color: #2c3e50;                    /* 链接文字颜色（蓝色） */
  text-decoration: none;            /* 移除下划线 */
  font-size: 1.15rem;                /* 相对根字体，约等于 19.2px */
  text-align: center;               /* 居中显示 */
  display: block;                   /* 使链接填满整个格子区域 */
  padding: 0.5rem 0.2rem;             /* 软件名称文字距离上下和左右的距离 */
  line-height: 1.1;                   /* 调整文字行距 */
  border-radius: 0.7rem;               /* 链接区域圆角 */
  background-color: #eff6ff;        /* 白色背景 */
  border: 1px solid #b2becc;           /* 淡灰边框 */
  word-wrap: break-word;    /* 新增：约束文字并允许换行 */ /* 老写法，兼容性好 */
  overflow-wrap: break-word; /* 新标准写法 */
  white-space: normal; /* 允许多行显示 */
  transition: all 0.15s ease; /* 动画时长 */
}
/* 仅远程软件调整边框上下距离和文字大小 */
.remote-category .software-grid a {
  padding: 1rem 0.2rem;   /* 上下边距加大 */
  font-size: 1.3rem;                /* 相对根字体，约等于 19.2px */
}

/* 鼠标悬停效果 */
.software-grid a:hover {
  text-decoration: underline;       /* 悬停时添加下划线 */
  background-color: #f9fbff;        /* 背景高亮为浅灰色 */
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
  transform: translateY(-3px);      /* 向上移动3像素 */
  color: #0066cc;
}

/* 多线路软件白色对齐 */
.software-links {
  display: contents; /* 让里面的 <a> 直接作为 grid item */
}

/* 默认隐藏非远程软件类 */
.system-category,
.other-category,/* 后期扩展留空other other2 */
.other2-category {
  display: none;
}

/* 下方为悬浮备注框 */
/* 为带有 data-note 属性的元素设置悬浮备注功能 */
[data-note] {
  position: relative;  /* 设置为相对定位，作为悬浮窗的定位参考 */
  cursor: pointer;     /* 鼠标悬停变成手型 */
}

/* 鼠标悬停时显示悬浮备注窗 */
[data-note]:hover::after {
  content: attr(data-note);            /* 显示 data-note 属性中的内容 */
  position: absolute;                  /* 绝对定位，相对于父元素定位 */
  bottom: 100%;                        /* 定位在元素上方（避免被其他元素遮挡）*/
  left: 50%;                           /* 水平居中定位的起始点 */
  transform: translateX(-50%);         /* 通过变换实现真正的水平居中 */
  
  background: #d1e0f4;               /* 矩形背景颜色 */
  border-radius: 0.4rem;               /* 矩形圆角 */
  border: 0.05rem solid #b4b1b1;     /* 四周阴影线 */
  font-size: 0.87rem;                  /* 字体大小 */
  color: #333;                       /* 字体颜色 */
  padding: 0.3rem;                     /* 文字距离四周边框距离 */
  text-align: left;                    /* 文字靠左显示 */
  white-space: pre-line;               /* 允许手动换行 */
  min-width: 20vw;                     /* 最小宽度固定为屏幕 13% */
  max-width: 20vw;                     /* 最大宽度固定为屏幕 13% */
  pointer-events: none;                /* 悬浮窗本身不响应鼠标事件 */
}

/* Mac 专区主格子外观（不可点击） */
.software-box {
  color: #2c3e50;
  font-size: 1.3rem;
  text-align: center;
  display: block;
  padding: 1rem 0.2rem;
  line-height: 1.1;
  border-radius: 0.7rem;
  background-color: #e6fdee;
  border: 1px solid #b2becc;
  user-select: none;
  cursor: default;
}

/* Mac 下拉菜单 */
.software-mac {
  position: relative;
}
.mac-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #a0c3ac;
  padding: 0.2rem 0.2rem;  
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  min-width: 14vw;
  max-width: 14vw;
  z-index: 999;
}
.remote-category .mac-dropdown a {
  display: block;
  color: #0066cc;  /* 默认蓝色字体 */
  font-size: 1rem;
  padding: 0.5rem 1rem;
  text-decoration: underline;  /* 默认有下划线 */
  background-color: #fff;
  margin: 0.2rem 0;          /* 下载链接矩形框之间的间距 */
}
.mac-dropdown a:hover {
  background: #eff6ff;
  color: #004499;
}
.software-mac:hover .mac-dropdown {
  display: block;
}



/* 操作系统检测的显示控制CSS */
/* 默认都显示（无JavaScript或检测失败时的降级方案） */
#win-remote-block, 
#mac-remote-block { 
  display: block; 
}

/* Windows系统：隐藏Mac远程软件 */
.os-windows #mac-remote-block { 
  display: none; 
}

/* Mac系统：隐藏Windows远程软件 */
.os-mac #win-remote-block { 
  display: none; 
}

/* 其他系统：都显示（默认行为，可以省略这条规则） */
.os-other #win-remote-block,
.os-other #mac-remote-block { 
  display: block; 
}




</style>
