/* EFP Record buttons: Show / Download */
.efp-record-btn {
  width: 180px;        /* 两个按钮一样宽 */
  height: 44px;        /* 一样高 */
  display: block;      /* 竖排 */
  margin: 10px 0;      /* 上下间距 */
  font-size: 16px;
}
/* ====================
   Toggle Switch 样式
   ==================== */
.switch {
  /* ====================
     1. 你自定义的颜色配置
     ==================== */
  --_switch-bg-clr: #5d6163;       /* 背景色：灰色 */
  --_switch-padding: 4px;          /* 按钮周围留白 */
  --_slider-bg-clr: rgb(36, 36, 36);    /* 滑块颜色 (未选中) - 已修正为 valid rgb */
  --_slider-bg-clr-on: rgb(36, 36, 36); /* 滑块颜色 (选中)   - 已修正为 valid rgb */
  --_slider-txt-clr: #ffffff;      /* 文字颜色 */
  
  /* 注意：这里强制把上下 padding 设为 0，因为高度已经被锁死为 38px 了 */
  /* 如果设为 0.5rem 会导致按钮变厚，和 TOP 按钮对不齐 */
  --_label-padding: 0 1.5rem;      

  --_switch-easing: cubic-bezier(0.47, 1.64, 0.41, 0.8);

  /* ====================
     2. 强制对齐的核心样式 (勿动)
     ==================== */
  height: 38px;                 /* 强制高度 38px (Bootstrap 标准) */
  vertical-align: top !important; /* 强制顶部对齐 (解决黑边空隙问题) */
  margin: 0 !important;         /* 去除干扰边距 */
  
  display: inline-flex;         /* 布局模式 */
  align-items: center;          /* 垂直居中 */
  justify-content: center;      /* 水平居中 */

  /* ====================
     3. 其他基础样式
     ==================== */
  color: white;
  width: fit-content;
  position: relative;
  isolation: isolate;
  border-radius: 9999px;
  cursor: pointer;
  user-select: none;
}

.switch input[type="checkbox"] {
  position: absolute;
  width: 6px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.switch > span {
  display: grid;
  place-content: center;
  transition: opacity 300ms ease-in-out 150ms;
  padding: var(--_label-padding);
  z-index: 2; /* 确保文字在滑块上面 */
}

.switch::before,
.switch::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  transition: inset 150ms ease-in-out;
}

/* 滑块 (Slider) */
.switch::before {
  background-color: var(--_slider-bg-clr);
  inset: var(--_switch-padding) 50% var(--_switch-padding) var(--_switch-padding);
  transition: inset 500ms var(--_switch-easing), background-color 500ms ease-in-out;
  z-index: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.3);
}

/* 背景 (Background) */
.switch::after {
  background-color: var(--_switch-bg-clr);
  inset: 0;
  z-index: -1;
}

/* 交互效果 */
.switch:has(input:checked):hover > span:first-of-type,
.switch:has(input:not(:checked)):hover > span:last-of-type {
  opacity: 1;
  transition-duration: 100ms;
}

.switch:has(input:checked):hover::before {
  inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding) 45%;
}

.switch:has(input:not(:checked)):hover::before {
  inset: var(--_switch-padding) 45% var(--_switch-padding) var(--_switch-padding);
}

/* 选中状态 (Checked - Right) */
.switch:has(input:checked)::before {
  background-color: var(--_slider-bg-clr-on);
  inset: var(--_switch-padding) var(--_switch-padding) var(--_switch-padding) 50%;
}

/* 文字透明度变化 */
.switch > span:last-of-type,
.switch > input:checked + span:first-of-type {
  opacity: 0.6;
}

.switch > input:checked ~ span:last-of-type {
  opacity: 1;
}

/* =========================
   填空输入框（Blank Input）
   ========================= */
input.blank {
  width: 6em;          /* ⭐ 原来太小改大 */
  min-width: 6em;
  padding: 2px 6px;
  margin: 0 4px;
  font-family: monospace;
  font-size: 14px;
}