/* ============================================================
   PokeOrder · 截图2 1:1 复刻 v5
   - 物种搜索选择器（截图2样式）
   - 精灵立绘+名字文本（截图4样式）
   - 性格选择器（截图5样式）
   - 通用道具/招式/特性选择器
   ============================================================ */

:root {
  --bg: #f0f2f5;
  --card-bg: #ffffff;
  --border: #e8eaed;
  --border-light: #f0f0f0;
  --text: #1a1a2e; --text-secondary: #666e7a; --text-tertiary: #999;
  --primary: #6b8cce; --primary-hover: #5a7bc4; --primary-light: rgba(107,140,206,.10);
  --danger: #e05252;
  --radius: 14px; --radius-sm: 8px; --radius-lg: 24px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sw-off: #dcdfe4; --sw-on: var(--primary);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.5; min-height: 100vh; padding-top: 64px;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select { font-family: inherit; font-size: inherit; }
.hidden { display: none !important; }


/* ==================== 圆角胶囊导航栏 ==================== */
.navbar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  display: flex; align-items: center; gap: 4px;
  height: 44px; padding: 0 6px 0 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  width: auto; max-width: 480px;
}
.nb-home {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--text-secondary);
  border-radius: 50%; transition: background .15s; flex-shrink: 0;
}
.nb-home:hover { background: var(--border-light); }

.nb-tabs { display: flex; gap: 0; }
.ntab {
  padding: 7px 18px; font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary); border-radius: 20px;
  transition: all .15s; white-space: nowrap;
}
.ntab:hover { color: var(--text); background: var(--border-light); }
.ntab.active { color: var(--primary); font-weight: 600; }

.nb-cart {
  position: relative; font-size: 17px;
  padding: 6px 10px; border-radius: 50%; flex-shrink: 0; margin-left: 2px;
}
.nb-cart:hover { background: var(--border-light); }
.cc-dot {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.obadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #16a34a;
  background: #f0fdf4; border: 1.5px solid #bbf7d0;
  border-radius: 20px; padding: 4px 10px 4px 12px;
  white-space: nowrap;
  position: absolute; top: -68px; right: 0;
  z-index: 5;
}
.ob-icon { font-size: 13px; }
.obadge strong { font-weight: 600; color: #15803d; }
.ob-copy {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 0 2px; line-height: 1;
  opacity: 0.5; transition: opacity .15s; border-radius: 4px;
}
.ob-copy:hover { opacity: 1; background: #dcfce7; }

/* 右侧面板 tab 红点——纯内联小圆点，跟随文字不跳动 */
.bdot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-left: 3px;
}

/* ---------- 语言切换器 ---------- */
.lang-switcher {
  position: relative; flex-shrink: 0;
}
/* 主页语言切换器（居中、醒目） */
.lang-switcher-home {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 16px auto 8px; max-width: 400px;
}
.lang-label {
  font-size: 14px; font-weight: 500; color: var(--text-sub); white-space: nowrap;
}
#langSelectHome {
  appearance: none; -webkit-appearance: none;
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: 22px; padding: 6px 32px 6px 16px;
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
  outline: none; transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666e7a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
}
#langSelectHome:hover { border-color: var(--primary); }
#langSelectHome:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
/* 编辑器迷你语言切换器 */
.lang-switcher-editor { margin-left: auto; }
#langSelectEditor {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 1px solid var(--border);
  border-radius: 14px; padding: 2px 22px 2px 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text-sub); cursor: pointer;
  outline: none; transition: border-color .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666e7a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 8px 5px;
}
#langSelectEditor:hover { border-color: var(--primary); color: var(--text); }
/* 兼容旧 id 选择器（已从导航栏移除，保留防报错） */
#langSelect {
  appearance: none; -webkit-appearance: none;
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 4px 28px 4px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer;
  outline: none; transition: border-color .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666e7a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}


/* ---------- 视图 ---------- */
.view { display: block; }
.view.hidden { display: none; }


/* ==================== 游戏选择页 ==================== */
.games-wrap { max-width: 720px; margin: 32px auto; padding: 0 20px; }
.gw-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.gw-hint { text-align: center; color: var(--text-secondary); font-size: 13.5px; margin-bottom: 26px; }

.game-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px;
}
.game-card {
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; text-align: center; padding-bottom: 10px;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.game-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(107,140,206,.15); }
.game-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.game-card img { width: 100%; height: 140px; object-fit: contain; display: block; pointer-events: none; background: var(--bg); }
.gc-placeholder { height: 140px; display: flex; align-items: center; justify-content: center; font-size: 48px; background: var(--bg); }
.gc-name { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-top: 4px; padding: 0 8px; }

.lookup-section {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px;
}
.lookup-section h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.lookup-row { display: flex; gap: 8px; }
.lookup-row input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; outline: none; transition: border-color .15s;
}
.lookup-row input:focus { border-color: var(--primary); }
.btn-sm {
  padding: 8px 20px; background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 500; border-radius: var(--radius-sm);
  transition: background .15s;
}
.btn-sm:hover { background: var(--primary-hover); }
.lr-result { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; white-space: pre-wrap; line-height: 1.65; }
.lr-result.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.lr-result.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }


/* ==================== 编辑器+盒子 双栏 ==================== */
.workspace {
  max-width: 920px; margin: 20px auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start;
}
.panel { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }


/* ===== 左栏：编辑器 ===== */
.editor-card { padding: 18px 22px; overflow: visible; }

/* ---- 物种行：立绘 + 名字（截图4样式）+ 搜索触发器 ---- */
.species-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 6px;
}
.sp-img-wrap {
  width: 64px; height: 64px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fafbfc; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  position: relative;
}
.sp-img {
  width: 52px; height: 52px; object-fit: contain;
  image-rendering: pixelated; transition: filter .2s;
  /* 默认隐藏，有src时显示 */
  display: none;
}
.sp-img[src] { display: block; }
/* 无图片时显示占位文字或精灵名 */
.sp-img-wrap:not(:has(.sp-img[src])) .sp-name-fallback {
  display: flex;
}
.sp-name-fallback {
  display: none;
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.2;
  padding: 2px 4px;
  word-break: break-all;
  max-width: 60px;
  max-height: 24px;
  overflow: hidden;
}
/* 闪光效果 */
.sp-img.shiny {
  filter: brightness(1.15) saturate(1.6) hue-rotate(10deg) contrast(1.05);
}

/* 精灵名字显示区（只读，选择功能在顶部导航栏）*/
.sp-input-area { flex: 1; min-width: 0; }
.sp-trigger {
  display: flex; align-items: center;
  width: 100%; padding: 6px 0;
}
.sp-trigger-icon { display: none; } /* 隐藏前面的图标 */
.sp-trigger-text {
  font-size: 15px; font-weight: 500; color: var(--text);
}
.sp-trigger-arrow { display: none; } /* 不显示下拉箭头 */
/* 已选中状态 */
.sp-trigger.has-value .sp-trigger-text { color: var(--primary); }

.species-row > input.invalid { border-color: #e5484d; background: rgba(229,72,77,.08); }
.sp-hint { font-size: 12px; color: var(--text-tertiary); margin: 4px 2px 0; min-height: 16px; line-height: 1.4; }
.sp-hint.err { color: #e5484d; }

.meta-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px; padding-left: 2px;
}

/* 性别文字切换 */
.gender-text {
  font-size: 14px; font-weight: 500; color: var(--primary);
  cursor: pointer; user-select: none;
  transition: opacity .15s, color .15s; letter-spacing: 0.5px;
}
.gender-text:hover { opacity: .75; }
/* 母的用红色显示 */
.gender-text.female { color: #e5484d; }

/* iOS 风格滑动开关 */
.sw-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.sw-label input { display: none; }
.sw-txt { font-size: 12.5px; }
.sw-txt.shiny-active {
  color: #e65100; font-weight: 700; font-size: 13.5px;
  text-shadow: 0 0 8px rgba(230,81,0,0.6);
  animation: txtShimmer 1.5s ease-in-out infinite;
}
@keyframes txtShimmer {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .75; transform: scale(1.03); }
}
/* ★ 闪光开关激活时整行高亮 */
.sw-label.shiny-row-active {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  margin: -3px -6px;
}
.sw-label.shiny-row-active .sw-track {
  box-shadow: 0 0 10px rgba(230,81,0,0.4);
}
.sw-track {
  width: 36px; height: 20px; background: var(--sw-off); border-radius: 10px;
  position: relative; transition: background .2s; flex-shrink: 0;
}
.sw-thumb {
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  position: absolute; top: 2px; left: 2px; transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.sw-label input:checked + .sw-track { background: var(--sw-on); }
.sw-label input:checked + .sw-track .sw-thumb { transform: translateX(16px); }


/* ===== 表单行列表 ===== */
.flist { margin-top: 6px; }
.frow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px; border-bottom: 1px solid var(--border-light);
  cursor: pointer; min-height: 42px; transition: background .1s;
}
.frow:last-child { border-bottom: none; }
.frow:hover { background: rgba(0,0,0,.015); }
/* 蛋模式下禁用的字段（置灰+不可交互） */
.frow-disabled { cursor: not-allowed; background: rgba(0,0,0,.03); }
.frow-disabled:hover { background: rgba(0,0,0,.03); }
/* 配信锁定字段（紫色边框+提示）— 完全不可修改 */
.frow-dist-locked { border-left: 3px solid #6a1b9a; background: #faf5ff; }
.frow-dist-locked .fr-label { color: #6a1b9a; font-weight: 600; }
/* 配信约束字段（蓝色边框）— 有下限可编辑（等级/IV） */
.frow-dist-constrained { border-left: 3px solid #0288d1; background: #e5f4ff; }
.frow-dist-constrained .fr-label { color: #0288d1; font-weight: 500; }
/* 锁性格配信的性格行 🔒 标记（仍可点选，但仅薄荷修正） */
.dist-lock-icon { margin-left: 4px; font-size: 12px; cursor: help; }
/* 下限可编辑标记 📊（等级/IV有下限但可上调） */
.dist-floor-icon { margin-left: 4px; font-size: 12px; cursor: help; color: #0288d1; }

.fr-label {
  font-size: 14px; color: var(--text); flex-shrink: 0; min-width: 40px;
}
.frow.move-empty .fr-label { visibility: hidden; }

.fr-value {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--text-secondary);
  text-align: right; max-width: 58%;
}
.fr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-arrow { color: #bbb; font-size: 17px; flex-shrink: 0; margin-left: 2px; font-weight: 300; }

/* 行内可见控件（select/number/text 直接可编辑，不隐藏不跳动）*/
.fr-control {
  height: 26px; padding: 0 8px; font-size: 13px; line-height: 1;
  color: var(--text); background: #fff;
  border: 1px solid var(--border); border-radius: 6px;
  outline: none; max-width: 150px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.fr-control:hover { border-color: #c9c9d4; }
.fr-control:focus {
  border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.18);
  cursor: text;
}
.fr-num { width: 64px; text-align: center; cursor: text; }
.fr-text { max-width: 160px; }

/* toggle 行 */
.frow-toggle { cursor: default; }
.ft-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.ft-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

/* 分隔线 */
.fsep { height: 1px; background: var(--border-light); margin: 2px 0; }


/* ===== 能力值表格 ===== */
.stats-block {
  margin-top: 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.st-head {
  display: grid; grid-template-columns: 1fr 70px 70px;
  padding: 8px 14px; background: #fafafa; border-bottom: 1px solid var(--border-light);
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
}
.st-head span:nth-child(1) { text-align: left; }
.st-head span:nth-child(2), .st-head span:nth-child(3) { text-align: right; }

.srow {
  display: grid; grid-template-columns: 1fr 70px 70px; align-items: center;
  padding: 7px 14px; border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}
.srow:last-of-type { border-bottom: none; }
.sname { color: var(--text); font-size: 14px; }
.siv, .sev { text-align: right; }
.siv input, .sev input {
  width: 48px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 5px;
  font-size: 13.5px; text-align: center; outline: none; background: transparent;
  transition: border-color .15s;
}
.siv input:focus, .sev input:focus { border-color: var(--primary); }

.st-foot {
  padding: 8px 14px; background: #fafafa; font-size: 12px; color: var(--text-tertiary);
  text-align: right; border-top: 1px solid var(--border-light);
}
.st-foot strong { color: var(--text-secondary); font-weight: 600; }


/* ===== 底部按钮 ===== */
.btn-primary {
  width: 100%; padding: 11px; background: var(--primary); color: #fff;
  font-size: 14.5px; font-weight: 600; border-radius: var(--radius);
  transition: background .15s, opacity .15s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary.disabled { opacity: .45; cursor: not-allowed; }
.btn-submit { background: #8fa4c4; }
.btn-submit:hover:not(:disabled) { background: #7b93b8; }


/* ===== 右栏：盒子 ===== */
.box-card {
  padding: 0; display: flex; flex-direction: column; position: relative;
}
/* 右侧面板固定不跟随左侧滚动 */
.panel-right {
  position: sticky;
  top: 76px; /* navbar(64px padding-top) + navbar自身高度 */
}
/* ===== 从已有订单载入 ===== */
.order-load {
  padding: 12px 16px 10px; border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, rgba(124,58,237,.06), transparent);
}
.ol-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.ol-row { display: flex; gap: 8px; }
.ol-input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input, #fff);
  color: var(--text); text-transform: uppercase; letter-spacing: .5px;
}
.ol-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,58,237,.15); }
.ol-btn {
  flex: 0 0 auto; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--primary, #7c3aed); border: none; border-radius: 8px; cursor: pointer;
  transition: background .15s, transform .05s;
}
.ol-btn:hover { background: var(--primary-dark, #6d28d9); }
.ol-btn:active { transform: scale(.97); }
.ol-result { margin-top: 8px; font-size: 12.5px; line-height: 1.5; border-radius: 8px; padding: 8px 10px; }
.ol-result.ok { color: #15803d; background: rgba(34,197,94,.1); }
.ol-result.err { color: #b91c1c; background: rgba(239,68,68,.1); }
.ol-result b { color: var(--text); }

/* 落地页：已有订单提示 */
.gw-order-hint {
  margin: 18px auto 0; max-width: 520px; font-size: 13px; line-height: 1.6;
  color: var(--text-secondary); text-align: center;
  background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.18);
  border-radius: 10px; padding: 10px 16px;
}

.box-tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 10px 16px 0; border-bottom: 1px solid var(--border-light);
}
.btab {
  padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  border-radius: 8px 8px 0 0; transition: color .15s, background .15s;
  overflow: visible;
}
.btab:hover { color: var(--text); background: var(--border-light); }
.btab.active { color: var(--text); font-weight: 600; position: relative; }
.btab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px;
  height: 2px; background: var(--primary); border-radius: 1px;
}
/* "盒子列表"是标题不是TAB选项 */
.btab[data-btab="list"] {
  font-weight: 700; font-size: 14px; color: var(--text);
  cursor: default; pointer-events: none;
  padding-left: 0; padding-right: 16px;
}
.btab[data-btab="list"]:hover { background: none; }
.btab[data-btab="list"].active::after { display: none; }
.btab-close { position: relative; }
.btab-x { margin-left: 2px; font-size: 14px; color: var(--text-tertiary); }

.box-body { padding: 14px 16px; min-height: 480px; }
.box-poke-area { }
.box-items-area { display: flex; flex-direction: column; }
.box-empty { color: var(--text-tertiary); font-size: 13.5px; text-align: center; padding: 36px 0; line-height: 1.7; }
.box-empty small { color: #bbb; }

.box-list { display: flex; flex-direction: column; gap: 8px; }
.bi-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #fafbfd; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); transition: border-color .15s;
}
.bi-item:hover { border-color: #ccc; }
.bi-icon { font-size: 26px; flex-shrink: 0; }
.bi-icon-wrap { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.bi-sprite { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.bi-info { flex: 1; min-width: 0; }
.bi-name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-tag-shiny { color: #d4a000; font-size: 12px; }
/* 盒子列表中闪光精灵的红色星星 */
.bi-star-shiny {
  color: #ef4444; font-size: 15px; font-weight: 700;
  margin-left: 3px; vertical-align: middle;
}
.bi-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-actions { display: flex; gap: 4px; flex-shrink: 0; }
.bi-act {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--text-tertiary); border-radius: 6px; transition: all .15s;
}
.bi-act:hover { background: var(--border-light); color: var(--text); }
.bi-act.del:hover { color: var(--danger); background: #fef2f2; }


/* ============================================================
   弹出选择器（物种/通用/性格）
   ============================================================ */

/* ---- 遮罩层 ---- */
.picker-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.25);
}

/* ---- 弹窗容器 ---- */
.picker-popup {
  position: fixed; z-index: 2001;
  width: 340px; max-height: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pickerIn .15s ease-out;
}
@keyframes pickerIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 居中定位（JS动态设置top/left）*/
.picker-popup.picker-centered {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* 物种弹窗更宽 */
#speciesPicker { width: 380px; max-height: 520px; }

/* ---- 弹窗头部 ---- */
.picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border-light);
}
.picker-title { font-size: 16px; font-weight: 600; color: var(--text); }
.picker-close {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--text-tertiary); border-radius: 50%;
  transition: background .15s;
}
.picker-close:hover { background: var(--border-light); color: var(--text); }

/* ---- 搜索框 ---- */
.picker-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}
.picker-search-icon { font-size: 15px; flex-shrink: 0; }
.picker-search {
  flex: 1; border: none; outline: none;
  font-size: 14.5px; color: var(--text);
  background: transparent;
  min-width: 0;
}
.picker-search::placeholder { color: var(--text-tertiary); }

/* ---- 列表区域 ---- */
.picker-list {
  flex: 1; overflow-y: auto; padding: 6px 0;
  overscroll-behavior: contain;
}
.picker-list::-webkit-scrollbar { width: 5px; }
.picker-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

/* ---- 物种列表项（截图2样式：名字 + ID + 闪光标签）---- */
.pi-species {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer; transition: background .12s;
  border-left: 3px solid transparent;
}
.pi-species:hover { background: var(--primary-light); }
.pi-species.active,
.pi-species.selected { background: #e8eeF8; border-left-color: var(--primary); }
.pi-sp-sprite {
  width: 36px; height: 36px; flex-shrink: 0;
  object-fit: contain; image-rendering: pixelated;
  border-radius: 6px; background: #f5f5f5;
}
.pi-sp-info { flex: 1; min-width: 0; }
.pi-sp-name {
  font-size: 14.5px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pi-sp-id {
  font-size: 12px; color: var(--text-tertiary);
}
.pi-sp-tag {
  font-size: 11.5px; font-weight: 600; color: #d4a000;
  background: #fff8e1; padding: 2px 8px; border-radius: 10px;
  flex-shrink: 0; letter-spacing: 0.5px;
}
.pi-sp-tag-gmax { color: #1565c0; background: #e3f2fd; }
.pi-sp-tag-mightiest { color: #c62828; background: #ffebee; font-size: 11px; }
.pi-sp-tag-transfer { color: #ef6c00; background: #fff3e0; }
.pi-sp-tag-dist { color: #6a1b9a; background: #f3e5f5; }
.pi-sp-tag-shiny { color: #e65100; background: #fff3e0; font-weight: 700; animation: shimmer 2s ease-in-out infinite; }
@keyframes shimmer {
  0%, 100% { box-shadow: 0 0 2px rgba(230,81,0,0.3); }
  50% { box-shadow: 0 0 8px rgba(230,81,0,0.6); }
}
.pi-sp-special { border-left-color: var(--primary); }

/* ---- 通用列表项（道具/招式/特性/球种）---- */
.pi-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; cursor: pointer;
  transition: background .12s;
  border-left: 3px solid transparent;
}
.pi-item:hover { background: var(--primary-light); }
.pi-item.selected { background: #e8eef8; border-left-color: var(--primary); }
.pi-item-name { font-size: 14px; color: var(--text); }
.pi-item-check { color: var(--primary); font-size: 15px; flex-shrink: 0; }

/* ---- 性格列表项（截图5样式：名字 + 能力值加减）---- */
.nature-list .pi-item {
  flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 16px;
}
.nature-list .pi-item .pi-nature-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.pi-nature-name {
  font-size: 14.5px; font-weight: 600; color: var(--text);
}
.pi-nature-eff {
  font-size: 12.5px; color: var(--text-secondary);
  font-weight: 400;
}
.pi-nature-check {
  color: var(--primary); font-weight: 700; font-size: 15px;
}


/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .workspace { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .navbar { max-width: calc(100% - 24px); }
  .picker-popup { width: calc(100vw - 32px); max-width: 380px; }
  #speciesPicker { width: calc(100vw - 32px); max-width: 380px; }
}


/* ===================== PKHeX 合法检测弹窗 ===================== */
.legal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998;
}
.legal-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 9999; min-width: 360px; max-width: 520px; width: 90%;
  background: #fff; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  font-family: -apple-system, "Microsoft YaHei", sans-serif; overflow: hidden;
}
.legal-dialog.legal-invalid { border: 2px solid #c62828; }
.legal-dialog.legal-valid { border: 2px solid #2e7d32; }

.legal-header {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  font-size: 17px; font-weight: 700;
}
.legal-dialog.legal-invalid .legal-header { background: #c62828; color: #fff; }
.legal-dialog.legal-valid .legal-header { background: #2e7d32; color: #fff; }
.legal-icon { font-size: 22px; }

.legal-body { padding: 14px 18px 8px; }
.legal-summary {
  font-size: 14px; line-height: 1.7; color: #333;
}
.legal-summary .err-line { color: #c62828; font-weight: 600; }
.legal-summary .warn-line { color: #e65100; }
.legal-summary .ok-line { color: #2e7d32; }

.legal-details { margin-top: 10px; }
.legal-details summary {
  cursor: pointer; font-size: 13px; color: #666; padding: 4px 0;
  outline: none; user-select: none;
}
.legal-details summary:hover { color: #333; text-decoration: underline; }
.legal-report {
  margin: 6px 0 0; padding: 10px 12px; background: #f5f5f5; border-radius: 6px;
  font-size: 12px; line-height: 1.75; white-space: pre-wrap; word-break: break-all;
  color: #444; max-height: 300px; overflow-y: auto;
}

.legal-footer {
  display: flex; justify-content: flex-end; gap: 8px; padding: 10px 18px 14px;
  border-top: 1px solid #eee;
}
.btn-legal-copy, .btn-legal-ok {
  padding: 6px 18px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.btn-legal-copy { background: #f5f5f5; color: #333; }
.btn-legal-copy:hover { background: #eee; }
.btn-legal-ok { background: #1976d2; color: #fff; }
.btn-legal-ok:hover { background: #1565c0; }

/* ==================== 道具盒子（Item Box）==================== */
.ibox-overlay {
  position: fixed; inset: 0; z-index: 990; background: rgba(0,0,0,.35);
}
.ibox-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 991; width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
}
.ibox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #eee;
  background: #fafafa;
}
.ibox-tabs { display: flex; gap: 4px; align-items: center; }
.itab {
  padding: 6px 14px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #666; background: transparent;
  transition: all .15s; position: relative; white-space: nowrap;
}
.itab:hover { background: #eef2ff; color: var(--primary); }
.itab.active { background: var(--primary); color: #fff; }
.itab-danger { color: #c62828; margin-left: auto; }
.itab-danger:hover { background: #fef2f2; }
.idot {
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
}
.ibox-close {
  padding: 4px 10px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 18px; color: #999; background: transparent;
}
.ibox-close:hover { background: #f0f0f0; color: #333; }
/* body */
.ibox-body {
  flex: 1; overflow-y: auto; padding: 12px 14px; min-height: 200px;
}
/* 隐藏右侧面板选具tab内的"+ 添加道具"按钮 */
.box-items-area .ibox-toolbar { display: none; }
.ibox-toolbar {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.ibox-search {
  flex: 1; padding: 7px 12px; border: 1.5px solid #ddd; border-radius: 8px;
  font-size: 13px; outline: none; transition: border-color .15s;
}
.ibox-search:focus { border-color: var(--primary); }
.btn-ibox-add {
  padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; background: var(--primary); color: #fff;
  white-space: nowrap;
}
.btn-ibox-add:hover { opacity: .9; }
/* item list rows */
.ibox-list { display: flex; flex-direction: column; gap: 6px; }
.ibox-empty {
  text-align: center; color: #aaa; font-size: 13px; padding: 32px 0;
}
/* 宝可梦行（截图2样式：名称左 + LV右） */
.ibox-poke-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 10px; border: 1px solid #eee;
  background: #fff; transition: background .15s;
}
.ibox-poke-row:hover { background: #f8f9fa; }
.ibox-poke-name {
  font-size: 15px; font-weight: 600; color: #1a1a1a;
}
.ibox-poke-lv {
  font-size: 14px; font-weight: 500; color: #888;
}
/* 道具行（截图3/4样式：名称 + 数量 + 删除） */
.ibox-item-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 10px; border: none;
  border-bottom: 1px solid #f0f0f0;
  background: #fff; transition: background .15s;
}
.ibox-item-row:hover { background: #f8f9fa; }
.ibox-item-row:last-child { border-bottom: none; }
.ibox-item-name {
  font-size: 15px; font-weight: 500; color: #1a1a1a; flex: 1;
}
.ibox-item-qty {
  display: flex; align-items: center; gap: 6px;
}
.ibox-qty-label { font-size: 13px; color: #888; }
.ibox-item-qty input {
  width: 56px; padding: 5px 8px; border: 1.5px solid #e0e0e0; border-radius: 8px;
  font-size: 14px; font-weight: 600; text-align: center; outline: none;
  background: #fafafa;
}
.ibox-item-qty input:focus { border-color: var(--primary); background: #fff; }
.ibox-item-del {
  padding: 5px 8px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 16px; color: #ccc; background: transparent; margin-left: 8px;
}
.ibox-item-del:hover { color: #c62828; background: #fef2f2; }
/* summary + footer */
.ibox-summary {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  background: #f0f7ff; font-size: 12px; color: #555; text-align: center;
}
.ibox-footer {
  padding: 10px 14px 14px; border-top: 1px solid #eee;
  display: flex; align-items: center; justify-content: space-between;
  background: #fafafa;
}
.ibox-hint { font-size: 12px; color: #888; }
.btn-ibox-submit {
  padding: 8px 24px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; background: linear-gradient(135deg,#1976d2,#1565c0); color: #fff;
  box-shadow: 0 2px 8px rgba(25,118,210,.3);
}
.btn-ibox-submit:hover { opacity: .92; }
.btn-ibox-submit:active { transform: scale(.97); }

/* ==================== 网站底部（ICP 备案） ==================== */
.site-footer {
  width: 100%;
  padding: 22px 16px 26px;
  margin-top: 32px;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}
.footer-inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: var(--text-tertiary);
}
.footer-copy { white-space: nowrap; }
.footer-beian {
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.footer-beian:hover { color: var(--primary); text-decoration: underline; }

/* ==================== 公安备案图标 ==================== */
.footer-mps { white-space: nowrap; }
.footer-mps .mps-icon {
  height: 14px;
  width: auto;
  vertical-align: -2px;
  margin-right: 4px;
}