.mode-switch {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}

.mode-switch button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.mode-switch button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.code-batch-form [hidden] {
  display: none !important;
}

.sub-head {
  padding-top: 4px;
}

.code-batch-form {
  display: grid;
  gap: 12px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.field-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 新建/导出两个模式面板：标题行与下方内容拉开安全距离（裸 div 无间距会贴在一起） */
[data-code-mode-panel] {
  display: grid;
  gap: 12px;
}
/* 上面的 display:grid 会盖掉浏览器对 hidden 属性的默认 display:none（作者样式压过 UA 样式），
   必须显式补回，否则两个面板同时可见、切换按钮看似失效 */
[data-code-mode-panel][hidden] {
  display: none;
}

/* 查询标题行：表单不甩最右，靠左贴着大字排 */
.lookup-head {
  justify-content: flex-start;
  gap: 24px;
}

/* 兑换码查询表单：挪进标题行、与大字同排（原来单独占一行太占高度）；
   不用 .inline-form 的四列网格，紧凑的 输入框+按钮 即可 */
.code-lookup-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.code-lookup-form input {
  width: 320px;
  max-width: 100%;
}

.export-batch-option {
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

/* 按压反馈：列表选项按 Apple 惯例是"变暗"，不是缩小——按下即时变暗(无过渡)，松开淡回 */
.export-batch-option:active {
  background: color-mix(in srgb, var(--soft) 75%, var(--panel));
  transition: none;
}

.export-batch-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.export-batch-option.selected:active {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
}