.lang-switcher-container {
  position: relative;         /* 让下拉浮层以此为定位依据 */
  z-index: 1999;             /* 浮层始终在最上层 */
  background: transparent;    /* 不要任何背景色 */
  border: none;               /* 不要外层边框 */
  border-radius: 0;           /* 不要圆角 */
  padding: 0;                 /* 紧贴文字，无额外内边距 */
  margin: 0;                  /* 紧贴，没有额外外边距 */
  display: inline-block;      /* 容器宽度随文字宽度自适应 */
  float: right;
  margin-right: 0px; /* 如果父容器有内边距，可根据需要调整 */
}

.lang-switcher summary.lang-summary {
  list-style: none;           /* 取消默认三角标记 */
  cursor: pointer;            /* 鼠标悬停时为手型 */
  font-size: 12px;            /* 保持 12px 字号 */
  color: #02185a;             /* 深蓝文字 */
  font-weight: 500;
  display: inline-block;      /* 宽度与内容一致 */
  background: #ffffff;        /* 白色背景 */
  border: 1px solid #000000;  /* 黑色细边框 */
  border-radius: 4px;         /* 轻微圆角 */
  padding: 2px 6px;           /* 上下 2px、左右 6px，尽量紧贴文字 */
  line-height: 2;             /* 保证高度最小，仅为一行文字 */
  margin: 0;                  /* 没有额外外边距 */
}

/* 隐藏默认的 <summary> 三角标记 */
.lang-switcher summary.lang-summary::-webkit-details-marker {
  display: none;
}

/* 保留自定义小箭头的位置和大小 */
.lang-switcher summary.lang-summary .icon-arrow {
  display: inline-block;
  margin-left: 4px;
  width: 5px;
  height: 5px;
  border: solid #02185a;
  border-width: 0 1.2px 1.2px 0;
  transform: rotate(45deg);
  transition: transform 0.12s;
}

/* 打开时箭头向上 */
.lang-switcher[open] summary.lang-summary .icon-arrow {
  transform: rotate(-135deg);
}

/* ────── 3. 下拉浮层（<ul class="lang-options">） ────── */
.lang-switcher .lang-options {
  display: none;                    /* 默认不显示 */
  position: absolute;               /* 绝对定位到容器下方 */
  top: calc(100% + 4px);            /* 距离按钮底部 4px */
  left: 50%;                        /* 水平先定位到容器中心 */
  transform: translateX(-50%);      /* 再水平偏移让它居中对齐 */
  background: #ffffff;              /* 纯白背景 */
  border: 1px solid #000000;        /* 黑色边框 */
  border-radius: 6px;               /* 6px 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); /* 轻微阴影 */
  margin: 4px 0 0;                  /* 顶部空 4px */
  padding: 0;                       /* 不要 ul 内边距 */
  list-style: none;                 /* 去掉默认列表标记 */
  white-space: nowrap;              /* 一行显示，防止强制换行 */
  z-index: 99999;                   /* 与容器同等层级，保证不被遮挡 */
}

/* 详情打开时，显示浮层 */
.lang-switcher[open] .lang-options {
  display: block;
}

/* ────── 4. 下拉项 <li><a>…</a></li> ────── */
.lang-switcher .lang-options li a {
  display: block;
  padding: 2px 12px;         /* 上下 6px，左右 12px 的内边距 */
  font-size: 12px;           /* 14px 字号 */
  color: #02185a;             /* 深蓝文字 */

  text-decoration: none;      /* 无下划线 */
  transition: background 0.14s, color 0.14s; /* 悬停渐变效果 */
  white-space: nowrap;        /* 防止在单行内换行 */
}

/* 当前语言高亮 或 鼠标悬停时 */
.lang-switcher .lang-options li.active a,
.lang-switcher .lang-options li a:hover {
  background: #02185a;       /* 深蓝背景 */
  color: #ffffff;            /* 白色文字 */
}