/* MOREYCN 站点编辑器样式。只在编辑模式开启时才会被引入。 */

:root {
  --ed: #e0607e;
  --ed-bg: rgba(224, 96, 126, .08);
  --ed-ok: #1f9d55;
  --ed-warn: #e0a800;
}

/* 可编辑元素的提示态 */
body.editing [data-edit] {
  outline: 1px dashed rgba(224, 96, 126, .45);
  outline-offset: 3px;
  background: var(--ed-bg);
  border-radius: 4px;
  cursor: text;
  min-width: 1.5em;
}
body.editing [data-edit]:hover { outline-style: solid; }
body.editing [data-edit]:focus {
  outline: 2px solid var(--ed);
  background: #fff;
  /* 深色区块里的文字本来是白的，聚焦后底色变白就看不见了，强制改深色 */
  color: #16202b !important;
  box-shadow: 0 0 0 4px rgba(224, 96, 126, .15);
  caret-color: var(--ed);
}
/* 字段中文名标签 */
body.editing [data-edit]:hover::after {
  content: attr(data-edlabel);
  position: absolute;
  transform: translateY(-2.1em);
  background: #16202b; color: #fff;
  font: 500 11px/1.5 var(--f-body, system-ui);
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; pointer-events: none; z-index: 9998;
}

/* 已改动的元素 */
body.editing [data-edit].ed-dirty {
  outline: 2px solid var(--ed-ok);
  background: rgba(31, 157, 85, .1);
}
body.editing [data-edit].ed-dirty::before {
  content: '已改';
  position: absolute;
  transform: translate(-0.2em, -1.9em);
  background: var(--ed-ok); color: #fff;
  font: 700 10px/1 system-ui; letter-spacing: .06em;
  padding: 3px 6px; border-radius: 3px;
  pointer-events: none; z-index: 9997;
}

/* 空字段：正常模式下隐藏，编辑模式下要能点进去填 */
.ed-slot:empty { display: none; }
body.editing .ed-slot:empty {
  display: block;
  min-height: 1.6em;
  outline: 1px dashed rgba(224, 96, 126, .4);
}
body.editing li.ed-slot:empty { display: list-item; }
body.editing .ed-slot:empty::before {
  content: '（点击填写）';
  color: #9aa7b5; font-size: .9em; font-style: italic;
}

/* 图片位 */
body.editing [data-img] { position: relative; }
.ed-imgbtn {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  background: #16202b; color: #fff; border: 0;
  font: 700 12px/1 system-ui; padding: 9px 13px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.ed-imgbtn:hover { background: var(--ed); }
.ed-imgbtn.ed-hasset { background: var(--ed-ok); }
body.editing [data-img].ed-dirty { box-shadow: inset 0 0 0 3px var(--ed-ok); }

/* 「加一项」按钮是构建时写进 HTML 的，所以默认必须隐藏，
   只有编辑器真正激活（body.editing）才显示，否则普通访客也会看到。 */
.ed-add { display: none; }
body.editing .ed-add {
  display: block; margin: 14px auto 0; padding: 8px 16px;
  background: transparent; color: var(--ed);
  border: 1px dashed var(--ed); border-radius: 999px;
  font: 600 13px/1 system-ui; cursor: pointer;
}
body.editing .ed-add:hover { background: var(--ed-bg); }
body.editing .stats-grid .ed-add,
body.editing .trust-grid .ed-add,
body.editing .why-grid .ed-add,
body.editing .ticks .ed-add,
body.editing .chips .ed-add {
  display: inline-block; margin: 8px;
}
body.editing .specs + .ed-add { margin: 14px 0 0; }

[hidden] { display: none !important; }

/* 数组项的删除按钮。同样默认隐藏，只有编辑模式才出现 */
.ed-del { display: none; }
body.editing .ed-item { position: relative; }
body.editing .ed-del {
  display: grid; place-items: center;
  position: absolute; top: 4px; right: 4px; z-index: 6;
  width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(22, 32, 43, .78); color: #fff;
  font: 700 11px/1 system-ui; cursor: pointer; opacity: .5;
}
body.editing .ed-del:hover { opacity: 1; background: #d80026; }
/* 卡片整块是链接，按钮别压住图片右下角的「换图」 */
body.editing .card .ed-del { top: 6px; right: 6px; }
/* 规格行：按钮摆在行的右上角，spec-v 留了内边距 */
body.editing .spec-row .ed-del { top: 50%; right: 8px; transform: translateY(-50%); }

/* 编辑模式下空占位项要显示出来给领导填，按标签恢复各自的 display */
body.editing .ed-empty { display: block; }
body.editing li.ed-empty { display: list-item; }
body.editing .spec-row.ed-empty { display: grid; }

/* 被删除（隐藏）的数组项。删除是隐藏而非移除，
   这样「加一项」永远有可克隆的参照物，下标也不会错位 */
.ed-gone { display: none !important; }
.ed-undel { border-color: var(--ed) !important; color: #ffd9e2 !important; }
.ed-undel:hover { background: rgba(224, 96, 126, .28) !important; }

/* ── 底部工具条 ─────────────────────────────────────────────── */
.ed-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 9999; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #16202b; color: #fff;
  border-radius: 999px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  font: 500 13px/1 system-ui; max-width: calc(100vw - 24px); flex-wrap: wrap;
}
.ed-bar b { font-weight: 700; }
.ed-bar .ed-count { color: #8ecbff; padding-left: 4px; }
.ed-bar button {
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 600 12px/1 system-ui;
}
.ed-bar button:hover { background: rgba(255, 255, 255, .22); }
.ed-bar .ed-export { background: var(--ed-ok); border-color: var(--ed-ok); }
.ed-bar .ed-export:hover { background: #17783f; }
.ed-bar .ed-export:disabled { opacity: .4; cursor: not-allowed; background: var(--ed-ok); }
.ed-bar .ed-quit { background: transparent; border-color: transparent; opacity: .7; }

/* ── 弹窗 ─────────────────────────────────────────────────────── */
.ed-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(9, 25, 40, .6); display: grid; place-items: center; padding: 20px;
}
.ed-panel {
  background: #fff; color: #16202b; border-radius: 16px;
  max-width: 620px; width: 100%; max-height: 84vh; overflow: auto; padding: 28px 30px;
}
.ed-panel h3 { margin: 0 0 6px; font-size: 1.3rem; }
.ed-panel h4 { margin: 22px 0 6px; font-size: .95rem; }
.ed-panel p, .ed-panel li { font-size: .93rem; line-height: 1.65; color: #3d4c5c; }
.ed-panel ul, .ed-panel ol { padding-left: 22px; }
.ed-panel code { background: #eef2f7; padding: .1em .35em; border-radius: 4px; font-size: .88em; }
.ed-close {
  display: block; margin: 24px 0 0; width: 100%;
  background: #16202b; color: #fff; border: 0; padding: 12px;
  border-radius: 999px; font-weight: 700; cursor: pointer;
}
.ed-spec {
  background: #f5f7fa; border: 1px solid #e0e6ee; border-radius: 10px;
  padding: 14px 16px; margin: 14px 0; font-size: .92rem;
}
.ed-spec b { color: #0d2438; }
.ed-warn { color: #8a6100; background: #fff8e6; border-left: 3px solid var(--ed-warn); padding-left: 10px; }
.ed-ok { color: #17783f; }

/* 编辑模式下给底部留出工具条空间 */
body.editing { padding-bottom: 88px; }