/* editorv2 样式:自 editor_class/editor.html 的 <style> 原样迁出(去掉两格缩进),
   保证新旧版视觉一致。新增样式追加在文件末尾的「editorv2 新增」段。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, "Microsoft YaHei", sans-serif; background: #15120c; color: #d8cba8;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* 顶栏 */
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: #1e1a10; border-bottom: 1px solid #4a4028; flex-shrink: 0; }
.topbar h1 { font-size: 15px; color: #e0c878; font-weight: 600; }
.topbar select, .topbar button,
.map-toolbar select, .map-toolbar button { font-size: 13px; padding: 5px 10px; border-radius: 5px;
  border: 1px solid #5a4a2c; background: #2a2418; color: #d8cba8; cursor: pointer; }
.topbar button:hover, .map-toolbar button:hover { background: #3a3220; border-color: #c0a050; }
.topbar .spacer, .map-toolbar .spacer { flex: 1; }
/* 地图页专属工具栏:置于主菜单标签下方、画布上方,整行 map-only 随地图页显隐 */
.map-toolbar { display: flex; align-items: center; gap: 12px; padding: 6px 14px;
  background: #1a160e; border-bottom: 1px solid #4a4028; flex-shrink: 0; }
.topbar .save { background: #2d4a2d; border-color: #4a7a4a; color: #cfe8cf; }
.topbar .save:hover { background: #3a5f3a; }
.topbar .reload { background: #2d3a4a; border-color: #4a6a8a; color: #cfe0f0; }
.topbar .reload:hover { background: #3a4f6a; }
.topbar .reload:disabled { opacity: .5; cursor: default; }
.topbar #tabLogout { background: #4a2d2d; border-color: #8a4a4a; color: #f0cfcf; }
.topbar #tabLogout:hover { background: #5f3a3a; border-color: #c05050; }
.topbar .hint { font-size: 12px; color: #8a7d60; }
/* 顶栏标签页切换 */
.tabs { display: flex; gap: 4px; }
.tabs button { font-size: 13px; padding: 5px 12px; border-radius: 5px;
  border: 1px solid #5a4a2c; background: #2a2418; color: #b0a079; cursor: pointer; }
.tabs button:hover { background: #3a3220; }
.tabs button.active { background: #332b16; border-color: #c0a050; color: #f0c878; }
.server-stats { display: flex; align-items: center; gap: 9px; margin-left: 2px;
  color: #b0a079; font-size: 12px; white-space: nowrap; }
.server-stats span + span { border-left: 1px solid #4a4028; padding-left: 9px; }
.server-stats.stale { color: #b77969; }
.map-only.hidden { display: none; }
/* 背景下拉框的容器:原内联 display 改走类,使 .map-only.hidden 能盖过它正常隐藏 */
.mapbg-label { display: inline-flex; align-items: center; gap: 4px; color: #cdbf9a; font-size: 13px; }
/* 地点/连线 模式切换开关(分段式) */
.modeswitch { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #5a4a2c; }
.modeswitch button { font-size: 13px; padding: 5px 14px; border: none; border-radius: 0;
  background: #2a2418; color: #9a8d6a; cursor: pointer; }
.modeswitch button + button { border-left: 1px solid #5a4a2c; }
.modeswitch button:hover { background: #3a3220; }
.modeswitch button.active[data-mode="place"] { background: #332b16; color: #f0c878; }
.modeswitch button.active[data-mode="link"] { background: #213245; color: #7ec0f0; }
#toast { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 50;
  padding: 8px 18px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity .25s;
  pointer-events: none; }
#toast.show { opacity: 1; }
#toast.ok { background: #2d4a2d; color: #cfe8cf; border: 1px solid #4a7a4a; }
#toast.err { background: #4a2d2d; color: #e8cfcf; border: 1px solid #7a4a4a; }

/* 连线方向浮动菜单 */
#roadPop { position: fixed; z-index: 60; background: #221d12; border: 1px solid #6b5f3a;
  border-radius: 8px; padding: 10px 12px; box-shadow: 0 6px 20px #000a; min-width: 180px;
  display: none; }
#roadPop.show { display: block; }
#roadPop .rp-title { font-size: 12px; color: #b0a079; margin-bottom: 8px; }
#roadPop label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #d8cba8;
  padding: 4px 0; cursor: pointer; }
#roadPop label input { width: auto; }
#roadPop .rp-arrow { color: #e0c878; font-weight: 600; }
#roadPop .rp-del { width: 100%; margin-top: 8px; padding: 5px; font-size: 12px; border-radius: 5px;
  border: 1px solid #7a4a4a; background: #3a2020; color: #e8c0c0; cursor: pointer; }
#roadPop .rp-del:hover { background: #5a2d2d; }
#roadPop .rp-note { font-size: 11px; color: #8a7d60; margin-top: 6px; line-height: 1.4; }

/* 主体:画布 + 侧栏 */
.body { flex: 1; display: flex; overflow: hidden; }
.canvas-wrap { flex: 1; position: relative; overflow: auto; background:
  repeating-linear-gradient(0deg, #1a160e 0 1px, transparent 1px 60px),
  repeating-linear-gradient(90deg, #1a160e 0 1px, transparent 1px 80px), #120f09; }
/* 回中按钮:置于顶栏地点/连线模式开关旁(仅地图页显示) */
.recenter-btn { font-size: 13px; padding: 5px 12px; border-radius: 6px;
  border: 1px solid #5a4a2c; background: #2a2418; color: #d8cba8; cursor: pointer; }
.recenter-btn:hover { background: #3a3220; border-color: #c0a050; color: #e0c878; }
#world { position: relative; transform-origin: 0 0; }
#lines { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
#lines line { pointer-events: stroke; cursor: pointer; }
.node { position: absolute; transform: translate(-50%, -50%);
  width: 92px; height: 46px; padding: 3px 4px; border-radius: 7px;
  border: 1px solid #6b5f3a; background: #2a2418; color: #d8cba8;
  font-size: 12px; text-align: center; cursor: grab; user-select: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.25; }
.node:hover { border-color: #c0a050; }
.node.sel { border-color: #f0c040; box-shadow: 0 0 0 2px #f0c04055; background: #332b16; }
.node.linksrc { border-color: #5aa0e0; box-shadow: 0 0 0 2px #5aa0e055; }
.node .nid { font-size: 9px; color: #8a7d60; }
.node .badge { font-size: 10px; }
.node.dragging { opacity: .7; cursor: grabbing; }

/* 空格占位:可点击新建 */
.emptycell { position: absolute; transform: translate(-50%, -50%);
  width: 86px; height: 40px; border-radius: 7px;
  border: 1px dashed #3f3826; background: transparent;
  color: #6a5d44; font-size: 11px; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.2; opacity: .5; }
.emptycell:hover { opacity: 1; border-color: #c0a050; color: #e0c878; background: #2a241833; }
.emptycell .plus { font-size: 15px; }
.emptycell .xy { font-size: 10px; }

/* 侧栏 */
.side { width: 320px; flex-shrink: 0; background: #1b1810; border-left: 1px solid #4a4028;
  overflow-y: auto; padding: 12px; }
.side h2 { font-size: 14px; color: #e0c878; margin-bottom: 10px; border-bottom: 1px solid #3a3220;
  padding-bottom: 6px; }
.side .empty { color: #8a7d60; font-size: 13px; padding: 20px 0; text-align: center; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: #b0a079; margin-bottom: 4px; }
.field input, .field textarea, .field select { width: 100%; font-size: 13px; padding: 6px 8px;
  border-radius: 5px; border: 1px solid #5a4a2c; background: #15120c; color: #e8dcb8; }
.field input:disabled { opacity: .55; }
/* 数字输入保留数值语义,但不显示浏览器原生上下调节器。 */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 复选框/单选框复位:否则会被上面"全宽文本框"规则撑成大方块,与文字错位 */
.field input[type=checkbox], .field input[type=radio] { width: auto; padding: 0; margin: 0 6px 0 0; vertical-align: middle; }
.field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.field .row { display: flex; gap: 6px; }
.checklist { max-height: 150px; overflow-y: auto; border: 1px solid #3a3220; border-radius: 5px;
  padding: 6px; background: #15120c; }
.checklist label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #d8cba8;
  padding: 2px 0; margin: 0; cursor: pointer; }
.checklist input { width: auto; }
.spawn-row { display: flex; gap: 4px; align-items: center; margin-bottom: 5px; }
.spawn-row select { flex: 1; }
.spawn-row input { width: 56px; }
.spawn-row .del { width: 26px; flex-shrink: 0; padding: 6px 0; text-align: center;
  background: #3a2218; border-color: #6a4a3a; cursor: pointer; border-radius: 5px;
  border: 1px solid #6a4a3a; color: #e8c0b0; }
.spawn-row .del:hover { background: #5a3528; }
.spawn-hdr { display: flex; gap: 4px; font-size: 11px; color: #8a7d60; margin-bottom: 4px; }
.spawn-hdr .h-mon { flex: 1; } .spawn-hdr .h-n { width: 56px; text-align: center; }
.spawn-hdr .h-iv { width: 56px; text-align: center; } .spawn-hdr .h-x { width: 26px; }
.btn-add { width: 100%; padding: 6px; font-size: 12px; border-radius: 5px;
  border: 1px dashed #5a4a2c; background: transparent; color: #b0a079; cursor: pointer; }
.btn-add:hover { border-color: #c0a050; color: #e0c878; }
.btn-del-loc { width: 100%; padding: 7px; font-size: 13px; border-radius: 5px; margin-top: 8px;
  border: 1px solid #7a4a4a; background: #3a2020; color: #e8c0c0; cursor: pointer; }
.btn-del-loc:hover { background: #5a2d2d; }
.side .note { font-size: 11px; color: #8a7d60; line-height: 1.5; margin-top: 4px; }

/* 通路列表 */
.road-item { border: 1px solid #3a3220; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px;
  background: #15120c; }
.road-item .rt-peer { font-size: 12px; color: #cdbf9c; margin-bottom: 4px; }
.road-dir { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; }
.road-dir .dir-lbl { flex: 1; color: #b0a079; }
.road-dir.off .dir-lbl { color: #5a5240; text-decoration: line-through; }
.road-dir .dir-arrow { color: #e0c878; }
.road-dir.off .dir-arrow { color: #5a5240; }
.road-dir button { padding: 2px 8px; font-size: 11px; border-radius: 4px; cursor: pointer;
  border: 1px solid #5a4a2c; background: #2a2418; color: #d8cba8; }
.road-dir button.rm { border-color: #6a4a3a; background: #3a2218; color: #e8c0b0; }
.road-dir button.rm:hover { background: #5a3528; }
.road-dir button.add:hover { background: #3a3220; border-color: #c0a050; }
.roads-empty { font-size: 12px; color: #8a7d60; padding: 4px 0; }

/* 怪物 / NPC 编辑视图:左列表 + 右表单 */
.dbview { flex: 1; display: none; overflow: hidden; }
.dbview.show { display: flex; }
.db-list { width: 340px; flex-shrink: 0; background: #1b1810; border-right: 1px solid #4a4028;
  overflow-y: auto; padding: 8px; }
.db-list .db-new { width: 100%; padding: 7px; font-size: 13px; border-radius: 5px; margin-bottom: 8px;
  border: 1px dashed #5a4a2c; background: transparent; color: #b0a079; cursor: pointer; }
.db-list .db-new:hover { border-color: #c0a050; color: #e0c878; }
/* 物品列表的分类过滤下拉:下拉菜单黑底暗金字(覆盖 .db-new 透明底 + 浏览器默认白底 option) */
#itemFilter, #itemFilter option, #itemEquipFilter, #itemEquipFilter option {
  background: #000; color: #b8860b;
}
.db-item { padding: 7px 9px; border-radius: 6px; margin-bottom: 3px; cursor: pointer;
  font-size: 13px; color: #cdbf9c; border: 1px solid transparent; display: flex; gap: 6px; align-items: center; }
.db-item:hover { background: #2a2418; }
.db-item.sel { background: #332b16; border-color: #c0a050; color: #f0c878; }
.db-item .di-id { font-size: 10px; color: #8a7d60; margin-left: auto; }
.db-item .di-lv { font-size: 10px; color: #c0a050; }
.db-form { flex: 1; overflow-y: auto; padding: 16px 20px; max-width: 720px; }
.db-form .empty { color: #8a7d60; font-size: 13px; padding: 40px 0; text-align: center; }
.db-form h2 { font-size: 15px; color: #e0c878; margin-bottom: 12px; border-bottom: 1px solid #3a3220;
  padding-bottom: 6px; }
.db-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.db-form .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.db-form .sub { border: 1px solid #3a3220; border-radius: 6px; padding: 10px; margin-bottom: 12px;
  background: #15120c; }
.db-form .sub-title { font-size: 12px; color: #b0a079; margin-bottom: 8px; display: flex;
  align-items: center; gap: 8px; }
.db-form .toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #d8cba8;
  cursor: pointer; }
.db-form .toggle input { width: auto; }

/* 任务奖励和采集物品共用同一种无卡片条目布局。 */
.quest-entry-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.quest-entry-label { display: block; font-size: 12px; color: #b0a079; margin: 4px 0; }
.task-objective { margin-bottom: 8px; }
/* 任务目标编辑器:每个控件下方可放一行短说明。 */
.objective-fields { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 4px; }
.objective-field { flex: 1 1 150px; min-width: 120px; }
.objective-field.objective-type { flex: 0 0 110px; }
.objective-field.objective-count { flex: 0 0 90px; }
.objective-field > input:not([type="checkbox"]), .objective-field > select { width: 100%; font-size: 13px; padding: 6px 8px;
  border-radius: 5px; border: 1px solid #5a4a2c; background: #15120c; color: #e8dcb8; }
.objective-field .cfghint { min-height: 2.9em; }
.objective-checkbox { flex: 1 1 170px; min-width: 150px; padding-top: 6px; }
.objective-checkbox label { display: block; font-size: 13px; color: #d8cba8; }
.objective-advanced { margin: 4px 0 8px; }
.objective-advanced summary { display: inline-block; color: #a09472; font-size: 12px; cursor: pointer; }
.objective-advanced summary:hover { color: #e0c878; }
.objective-advanced .objective-field { margin-top: 6px; max-width: 360px; }

/* drops 编辑行 */
.drop-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; padding: 6px;
  background: #1b1810; border: 1px solid #3a3220; border-radius: 5px; }
.drop-row select, .drop-row input { font-size: 12px; }
.drop-row .drop-type, .drop-row .cdrop-type { width: 80px; }
.btn-del-drop, .btn-del-cdrop { padding: 4px 8px; font-size: 11px; border-radius: 4px; cursor: pointer;
  border: 1px solid #6a4a3a; background: #3a2218; color: #e8c0b0; }
.btn-del-drop:hover, .btn-del-cdrop:hover { background: #5a3528; }


/* ===== editorv2 新增 ===== */
/* Vue 挂载点:body 是 flex column,#app 多出一层会吃掉高度,故让它接管 body 的布局角色 */
#app { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
/* 任务页包含顶部模式标签和下方左右 CRUD 区域。固定在编辑器可用高度内，
   让右侧详情(.db-form)接管内容滚动，避免新增较长的随机任务配置被外层裁掉。 */
.task-editor { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.task-editor > .dbview { min-height: 0; }
/* 提示行:老版用了 .cfghint 类但从未定义(全靠内联 style),这里补成正式规则,
   使词缀页占比/示例等提示文字有统一观感,不再靠内联色值。 */
.cfghint { font-size: 11px; color: #a09472; margin-top: 3px; line-height: 1.5; }
/* 地点属性侧栏的分块/开关/两列栅格:老版把 warp/enter 那几块也画在 .side 里,
   但 .sub / .sub-title / .toggle / .grid2 的规则只写在 .db-form 下(侧栏靠内联样式凑)。
   v2 侧栏复用了同一批组件与类名,故把这几条也授予 .side,免得再写内联。 */
.side .sub { border: 1px solid #3a3220; border-radius: 6px; padding: 10px; margin-bottom: 12px;
  background: #15120c; }
.side .sub-title { font-size: 12px; color: #b0a079; margin-bottom: 8px; display: flex;
  align-items: center; gap: 8px; }
.side .toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #d8cba8;
  cursor: pointer; margin: 0; }
.side .toggle input { width: auto; }
.side .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 爆率查询页 */
.drop-rates-page { flex-direction: column; overflow: hidden; padding: 12px 16px; }
.drop-rates-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.drop-rates-toolbar .modeswitch { flex-shrink: 0; }
.drop-search { min-width: 220px; flex: 1; padding: 7px 9px; border-radius: 5px;
  border: 1px solid #5a4a2c; background: #15120c; color: #e8dcb8; font-size: 13px; }
.drop-filter, .drop-reset { padding: 7px 9px; border-radius: 5px; border: 1px solid #5a4a2c;
  background: #2a2418; color: #d8cba8; font-size: 13px; cursor: pointer; }
.drop-reset:hover { background: #3a3220; border-color: #c0a050; }
.drop-rates-note { flex-shrink: 0; padding: 9px 2px; color: #8a7d60; font-size: 12px; }
.drop-rates-table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid #3a3220; border-radius: 6px; }
.drop-rates-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.drop-rates-table th { position: sticky; top: 0; z-index: 1; background: #2a2418; color: #b0a079;
  text-align: left; font-weight: 500; padding: 8px 9px; border-bottom: 1px solid #5a4a2c; }
.drop-rates-table td { padding: 8px 9px; border-bottom: 1px solid #2d271a; color: #d8cba8; vertical-align: middle; }
.drop-rates-table tbody tr:hover { background: #211c12; }
.drop-main { display: block; color: #e0c878; }
.drop-id { display: block; color: #8a7d60; font-size: 11px; margin-top: 2px; }
.drop-invalid { color: #e8a080 !important; }
.drop-actions { white-space: nowrap; }
.drop-edit { padding: 4px 7px; border: 1px solid #6b5f3a; border-radius: 4px; background: #332b16;
  color: #f0c878; font-size: 11px; cursor: pointer; }
.drop-edit:hover { background: #493c1d; border-color: #c0a050; }
.drop-edit.secondary { margin-left: 5px; background: #2a2418; color: #b0a079; }
.drop-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #8a7d60; font-size: 13px; }
@media (max-width: 760px) {
  .drop-rates-page { padding: 9px; }
  .drop-search { min-width: 150px; }
  .drop-rates-toolbar .modeswitch button { padding-left: 8px; padding-right: 8px; }
}