/* 通用组件样式 - 按钮、输入框、标签等 */

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 2cqi, 10px) clamp(8px, 3.2cqi, 16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: calc(var(--font-size) * 1.0625);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
  min-width: 0;
  outline: none;
  background: var(--btn-default-bg);
  color: var(--btn-default-text);
}
.btn:active {
  opacity: 0.7;
}
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: var(--btn-danger-bg);
}
.btn-sm {
  padding: clamp(4px, 1.4cqi, 7px) clamp(6px, 2.4cqi, 12px);
  font-size: calc(var(--font-size) * 0.9375);
  min-width: 40px;
}

/* 故事列表「导入」：与 btn-sm 同尺寸，仅用主题色区分于「搜索」 */
.btn.btn-sm.btn-toolbar-import {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 14%, var(--btn-default-bg));
  color: var(--text-primary);
}
.btn.btn-sm.btn-toolbar-import:hover {
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 20%, var(--btn-default-bg));
}

.btn-block {
  display: flex;
  width: 100%;
  white-space: normal;
  word-break: break-word;
}

.save-list .save-list-item {
  cursor: default;
}
.save-list .save-list-item:active {
  background: transparent;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-icon {
  width: var(--ui-btn-min-h-sm);
  height: var(--ui-btn-min-h-sm);
  padding: 0;
  font-size: var(--ui-fs-15);
  border-radius: var(--radius-sm);
}

/* === 输入框 === */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea {
  width: 100%;
  padding: clamp(6px, 2cqi, 10px) clamp(7px, 2.4cqi, 12px);
  background: var(--input-bg);
  color: var(--text-primary);
  caret-color: var(--accent-color);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: calc(var(--font-size) * 1.0625);
  min-width: 0;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
input:focus, textarea:focus {
  border-color: var(--input-focus);
}
/* placeholder 跟主文字色明显区分，避免玩家看不出输入框是否已经填了内容 */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
/* 原生勾选/单选/范围条不会被前面 .ui-checkbox/.ui-radio 的自定义样式覆盖时，至少 accent-color 跟主题
 *（toggle 内部 hidden checkbox、临时使用的 input 等场景） */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--accent-color);
}
/* range slider 没文字但 fontFamily 默认是 Arial，统一 inherit 让任何派生场景都跟主题字体 */
input[type="range"] {
  font-family: inherit;
}
textarea {
  resize: none;
  min-height: 80px;
  line-height: 1.5;
  background-attachment: local;
}
/* 隐藏 number 输入的上下箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* 搜索框清除按钮样式 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background: var(--text-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover {
  background: var(--text-primary);
}

/* === 勾选 / 单选（仅针对已接入类名） === */
.ui-checkbox,
.ui-radio {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ui-checkbox-size);
  height: var(--ui-checkbox-size);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ui-checkbox { border-radius: var(--radius-sm); }
.ui-radio { border-radius: 999px; }
.ui-checkbox:focus-visible,
.ui-radio:focus-visible {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.ui-checkbox::before,
.ui-radio::before {
  content: "";
  width: calc(var(--ui-checkbox-size) - 8px);
  height: calc(var(--ui-checkbox-size) - 8px);
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
}
.ui-checkbox::before {
  background: var(--btn-primary-text);
  clip-path: polygon(14% 52%, 0 65%, 36% 100%, 100% 24%, 86% 12%, 35% 70%);
}
.ui-radio::before {
  border-radius: 999px;
  background: var(--btn-primary-text);
}
.ui-checkbox:checked,
.ui-radio:checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
}
.ui-checkbox:checked::before,
.ui-radio:checked::before { transform: scale(1); }
.ui-checkbox:disabled,
.ui-radio:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
input[type="file"] {
  font-family: inherit;
  font-size: var(--ui-fs-13);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--btn-default-bg);
  color: var(--btn-default-text);
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x);
  margin-right: var(--ui-gap-8);
  font-family: inherit;
  font-size: var(--ui-fs-12);
  cursor: pointer;
}

/* 原生 select 隐藏（全部由 Utils.createSelect 自定义下拉替代）*/
select { display: none; }

/* === 自定义下拉组件 === */
.custom-select {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: max-content;
  vertical-align: middle;
}
.custom-select-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: clamp(6px, 2cqi, 10px) clamp(7px, 2.4cqi, 12px);
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: calc(var(--font-size) * 1.0625);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 0.15s;
  min-height: 0;
  line-height: 1.4;
}
.custom-select.open .custom-select-display {
  border-color: var(--input-focus);
}
.custom-select.disabled .custom-select-display {
  opacity: 0.4;
  cursor: not-allowed;
}
.custom-select-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
/* 下拉箭头：SVG 三角 */
.custom-select-arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s;
}
.custom-select.open .custom-select-arrow {
  transform: rotate(180deg);
}

/* 下拉选项面板（fixed 定位挂到 body，避免 overflow 裁切） */
.custom-select-dropdown {
  position: fixed;
  z-index: 10100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: scaleY(0.92);
  transform-origin: top center;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.custom-select-dropdown.flip-up {
  transform-origin: bottom center;
}
.custom-select-dropdown.open {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}
/* 选项 */
.custom-select-option {
  padding: clamp(7px, 2cqi, 11px) clamp(8px, 2.4cqi, 14px);
  color: var(--text-primary);
  font-size: calc(var(--font-size) * 0.9375);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
  word-break: break-word;
}
.custom-select-option:hover {
  background: var(--bg-secondary);
}
.custom-select-option.active {
  background: var(--bg-tertiary);
  font-weight: 600;
}
/* 主题选择器选项：JS 内联设了主题预览背景，CSS 普通规则覆盖不了 inline。
   选中/悬停反馈用 outline 做结构装饰（outline 不在 inline 中，能正常生效），
   描边色取 currentColor 跟随当前选项的主题文字色，确保对比清晰且不漂白主题底色 */
.custom-select-option.theme-preview-opt {
  outline: 2px solid transparent;
  outline-offset: -3px;
  transition: outline 0.15s, opacity 0.15s;
}
.custom-select-option.theme-preview-opt:hover {
  outline-color: currentColor;
}
.custom-select-option.theme-preview-opt.active {
  outline-width: 3px;
  outline-offset: -4px;
  outline-color: currentColor;
}
/* 下拉面板滚动条美化 */
.custom-select-dropdown::-webkit-scrollbar {
  width: 4px;
}
.custom-select-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.custom-select-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* === 颜色选择器美化（用 .ui-color-swatch 类显式启用，避免影响刮刮卡/弹幕等保留原生外观的位置） === */
.ui-color-swatch {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  background: var(--input-bg);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.ui-color-swatch:focus-visible {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.ui-color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  overflow: hidden;
}
.ui-color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
}
.ui-color-swatch::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
}

/* === range（滑条/进度）美化 === */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-tertiary));
  border: 1px solid var(--border-light);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent-color);
  border: 2px solid color-mix(in srgb, var(--btn-primary-text) 65%, transparent);
  margin-top: -6px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color) 35%, transparent);
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-tertiary));
  border: 1px solid var(--border-light);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent-color);
  border: 2px solid color-mix(in srgb, var(--btn-primary-text) 65%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* === 设置页：提示/字体预览选择器 === */
.settings-hint {
  font-size: var(--ui-fs-12);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 var(--ui-gap-10);
}
.btn.settings-picker {
  justify-content: space-between;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ui-pad-sm-x) center;
  padding-right: calc(var(--ui-pad-sm-x) * 2 + 12px);
}
.settings-font-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap-6);
}
.settings-font-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-light);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: var(--ui-pad-sm-y) var(--ui-pad-md-x);
}
.settings-font-item.is-active {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-tertiary));
}
.settings-font-name {
  font-size: var(--ui-fs-13);
  color: var(--text-secondary);
  margin-bottom: var(--ui-gap-4);
}
.settings-font-sample {
  font-size: var(--ui-fs-14);
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-word;
}
.settings-font-dropdown {
  position: relative;
  /* min-width 180px 是 flex 压缩下限；同行兄弟（导出 / 导入按钮）挤占空间让
     下拉计算宽度 < 180 时，父容器 .form-row 的 flex-wrap: wrap 会自动把下拉
     换到下一行独占整宽，长字体名能完整显示，不被压成 "Source Han Sa…" */
  flex: 1 1 auto;
  min-width: 180px;
}
.settings-font-trigger {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
}
.settings-font-trigger-label {
  display: block;
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.settings-font-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  bottom: auto;
  max-height: min(42vh, 260px);
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--modal-bg);
  box-shadow: var(--shadow);
  z-index: 20;
  padding: 4px;
}
/* PopupFlip.place 检测到下方空间不够时加这个类，panel 从上方展开。 */
.settings-font-panel.is-flip-up {
  top: auto;
  bottom: calc(100% + 4px);
}
.settings-font-panel.hidden {
  display: none;
}
.settings-font-dd-item {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: var(--ui-fs-13);
}
.settings-font-dd-item:hover,
.settings-font-dd-item.is-active {
  background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-tertiary));
  border-color: var(--border-light);
}

/* === 作弊器列表 === */
.settings-cheat-list {
  max-height: min(56vh, 620px);
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--ui-gap-6);
  background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}
.settings-cheat-sec + .settings-cheat-sec {
  margin-top: var(--ui-gap-8);
}
.settings-cheat-sec-hd,
.settings-cheat-group-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-gap-8);
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--ui-fs-12);
  cursor: pointer;
  user-select: none;
}
.settings-cheat-fold-chev {
  flex-shrink: 0;
  font-size: var(--ui-fs-12);
  line-height: 1;
  color: var(--text-muted);
}
.settings-cheat-group-hd {
  margin-top: var(--ui-gap-6);
}
.settings-cheat-row {
  margin-top: var(--ui-gap-6);
  padding: var(--ui-pad-sm-y) var(--ui-pad-sm-x);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}
.settings-cheat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-gap-8);
  margin-bottom: var(--ui-gap-4);
}
.settings-cheat-name {
  font-size: var(--ui-fs-13);
  color: var(--text-primary);
  font-weight: 600;
}
.settings-cheat-meta {
  font-size: var(--ui-fs-11);
  color: var(--text-muted);
}
.settings-cheat-error {
  margin-top: var(--ui-gap-4);
  font-size: var(--ui-fs-12);
  line-height: 1.55;
  /* 不用红色告警，跟随主题强调色做“就地提示” */
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-tertiary));
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-light));
  border-radius: var(--radius-sm);
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x);
}

/* === 作弊器列表类型：每个 item 一行，左 name 右 数量框/开关 === */
.settings-cheat-list-items {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap-4);
  width: 100%;
}
.settings-cheat-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-gap-8);
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}
.settings-cheat-head.settings-cheat-foldable {
  cursor: pointer;
  user-select: none;
}
.settings-cheat-fold-arrow {
  margin-left: var(--ui-gap-6);
  color: var(--text-muted);
  font-size: var(--ui-fs-12);
  flex-shrink: 0;
}
.settings-cheat-list-img {
  /* 顶格正方形：不管原图比例如何，统一裁成正方形 cell，object-fit:cover 等比放大裁剪。
     背景透明：透明 PNG/SVG 直接显示底层（父行的背景），不会硬叠米色 */
  width: clamp(28px, 9cqmin, 44px);
  height: clamp(28px, 9cqmin, 44px);
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-light);
}
.settings-cheat-list-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ui-fs-12);
  color: var(--text-primary);
  word-break: break-word;
}
/* 控件不抢左侧 name 的宽度：custom-select 默认 width:100% 在这里被收回 */
.settings-cheat-list-row .custom-select {
  flex: 0 0 auto;
  width: clamp(96px, 30cqmin, 150px);
}
.settings-cheat-list-row .settings-cheat-list-count {
  flex: 0 0 auto;
  width: clamp(70px, 24cqmin, 110px);
  text-align: right;
}
.settings-cheat-list-empty {
  font-size: var(--ui-fs-12);
  color: var(--text-muted);
  padding: var(--ui-pad-sm-y) var(--ui-pad-sm-x);
  text-align: center;
}

/* === 游戏记录（历史）弹窗：一条一卡，正文 pre-wrap 完整展示 === */
.settings-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap-4);
}
.settings-history-row {
  padding: var(--ui-pad-sm-y) var(--ui-pad-sm-x);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}
.settings-history-text {
  font-size: var(--ui-fs-13);
  color: var(--text-primary);
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

/* === Toast 提示（全局统一） === */
#toast-container {
  /* absolute 定位在 #app（整卡）内，不是 fixed 到浏览器视口——原因同 #modal-container，
     否则宽屏桌面上提示条会贴在浏览器窗口右上角，而不是整卡右上角。 */
  position: absolute;
  top: var(--ui-pad-lg-x);
  right: var(--ui-pad-lg-x);
  z-index: 10010;
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap-8);
  pointer-events: none;
  max-width: min(88%, 420px);
}
.toast-item {
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: var(--ui-pad-form-y) var(--ui-pad-md-x);
  font-size: var(--ui-fs-13);
  line-height: 1.5;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  word-break: break-word;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}
.toast-item:hover {
  opacity: .85;
}
.toast-item.is-show {
  opacity: 1;
  transform: translateY(0);
}
.toast-item.is-hide {
  opacity: 0;
  transform: translateY(-6px);
}

/* === 标签 === */
.tag {
  display: inline-block;
  padding: var(--ui-pad-xs-y) var(--ui-pad-xs-x);
  background: var(--tag-bg);
  color: var(--tag-text);
  border-radius: 3px;
  font-size: var(--ui-fs-11);
}

/* === 进度条 === */
.progress-bar {
  width: 100%;
  height: 16px;
  background: var(--progress-bg);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: var(--progress-fill);
  border-radius: 8px;
  transition: width 0.3s ease;
}
.progress-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--ui-fs-10);
  line-height: 16px;
  color: var(--text-primary);
}

/* === 分组标题 === */
.section-title {
  display: block;
  font-size: var(--ui-fs-14);
  color: var(--text-secondary);
  padding: var(--ui-pad-md-y) 0 var(--ui-pad-xs-y);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--ui-gap-8);
  text-align: left;
}

/* === 列表项 === */
.list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--ui-pad-sm-x) var(--ui-pad-md-x);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.1s;
}
.list-item:active {
  background: var(--bg-hover);
}
.list-item-title {
  flex: 1;
  font-size: var(--ui-fs-15);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.list-item-sub {
  font-size: var(--ui-fs-13);
  color: var(--text-muted);
}

/* 列表卡片右侧操作按钮组（故事列表/草稿箱等） */
.list-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.story-actions-row .btn {
  min-height: var(--ui-btn-min-h-md);
  font-size: var(--ui-fs-13);
  padding: var(--ui-pad-sm-y) var(--ui-pad-md-x);
}

/* 窄屏下操作按钮保持 flex 自然宽度，不强制撑满 */
@media (max-width: 640px) {
  .list-item-actions {
    gap: 4px;
  }
  .list-item-actions .btn {
    min-width: 0;
    padding-left: clamp(4px, 1.6cqi, 8px);
    padding-right: clamp(4px, 1.6cqi, 8px);
  }
}

/* === 表单组 === */
.form-group {
  margin-bottom: var(--ui-gap-10);
}
.form-label {
  display: block;
  font-size: var(--ui-fs-14);
  color: var(--text-secondary);
  margin-bottom: var(--ui-gap-4);
}
.form-row {
  display: flex;
  gap: var(--ui-gap-8);
  align-items: center;
  flex-wrap: wrap;
}

/* === 是否 === */
.toggle {
  position: relative;
  width: var(--ui-switch-track-w);
  height: var(--ui-switch-track-h);
  flex-shrink: 0;
  cursor: pointer;
}
.toggle input {
  display: none;
}
.toggle-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-switch-radius);
  transition: background 0.2s;
}
.toggle input:checked + .toggle-track {
  background: var(--accent-color);
  border-color: var(--accent-color);
}
.toggle-thumb {
  position: absolute;
  top: var(--ui-switch-inset);
  left: var(--ui-switch-inset);
  width: var(--ui-switch-knob);
  height: var(--ui-switch-knob);
  background: var(--btn-primary-text);
  border-radius: 50%;
  transition: transform 0.2s;
  pointer-events: none;
}
.toggle input:checked ~ .toggle-thumb {
  transform: translateX(calc(var(--ui-switch-track-w) - var(--ui-switch-knob) - var(--ui-switch-inset) * 2));
}

/* === 空状态 === */
.empty-state {
  text-align: center;
  padding: var(--ui-empty-pad-y) var(--ui-pad-lg-x);
  color: var(--text-muted);
  font-size: var(--ui-fs-15);
}

/* === 分割线 === */
.divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 12px 0;
}

/* === 横向滚动容器 === */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* === 状态栏内的操作按钮 === */
/* 挂在 #status-bar 里（跟状态栏的变量展示同一个 flex 行，靠右对齐），不悬浮、
   不遮挡 nav-bar 的设置/故事/编辑器/存读档等按钮。教程演示预览的「我看好了」、
   课程菜单的「退出教程」共用这一套外观。 */
.status-bar-fab {
  flex-shrink: 0;
  align-self: center;
  /* 状态栏自身左右无内边距（头像贴左边缘），按钮靠 margin 留出右侧间距，
     不然按钮边框压在窄屏的屏幕边缘上 */
  margin-left: auto;
  margin-right: var(--ui-gap-2);
  padding: var(--ui-pad-sm-y) var(--ui-pad-md-x);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--modal-bg);
  color: var(--text-primary);
  font-size: var(--ui-fs-13);
  font-weight: normal;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.status-bar-fab:hover,
.status-bar-fab:focus-visible {
  border-color: color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
  outline: none;
}
/* 退回态：#status-bar 不存在时挂在 #app（居中的竖屏整卡）内部，position:absolute
   相对 #app 定位，不用 fixed——避免宽屏电脑上贴着真实浏览器窗口边缘、和居中的整卡脱节。 */
.status-bar-fab--floating {
  position: absolute;
  top: max(var(--ui-gap-10), env(safe-area-inset-top, 0px));
  right: max(var(--ui-gap-10), env(safe-area-inset-right, 0px));
  z-index: 8500;
  margin-left: 0;
  margin-right: 0;
}

/* === 颜色预览块 === */
.color-preview {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid var(--border-color);
  vertical-align: middle;
}