/* =====================================================================
 *  app.css — 前台附加样式（加载态、安装引导）+ 后台编辑器样式
 *  编辑器按手机优先设计：单列、大点击区、底部固定发布按钮
 * ===================================================================== */

/* ------------------------- 前台：加载态 ------------------------- */
.loading-paper {
  padding: 80px 0; text-align: center;
  font-family: var(--serif); font-size: 16px; color: var(--ink-3); letter-spacing: .2em;
}
.loading-paper.error { color: var(--red); letter-spacing: .04em; line-height: 2; }

/* 工具条里的链接按钮 */
.tb-link { text-decoration: none; display: inline-block; }

/* ------------------------- 添加到主屏幕引导 ------------------------- */
.a2hs {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10,9,7,.72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 18px; backdrop-filter: blur(4px);
  animation: a2hsIn .25s ease;
}
/* 作者样式里的 display 会盖掉 UA 的 [hidden]，必须显式处理，否则浮层永远显示 */
.a2hs[hidden] { display: none !important; }
.a2hs[hidden] ~ * { filter: none; }
@keyframes a2hsIn { from { opacity: 0 } to { opacity: 1 } }
.a2hs-box {
  position: relative;
  width: 100%; max-width: 460px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 20px 20px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.a2hs-close {
  position: absolute; right: 8px; top: 6px;
  width: 34px; height: 34px; line-height: 1;
  font-size: 24px; color: var(--ink-3);
  background: none; border: none; cursor: pointer;
}
.a2hs-title {
  font-family: var(--serif); font-size: 20px; font-weight: 800;
  letter-spacing: .08em; margin-bottom: 12px; padding-bottom: 9px;
  border-bottom: 2px solid var(--red);
}
.a2hs-body { font-family: var(--sans); font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.a2hs-body ol { padding-left: 1.3em; }
.a2hs-body li { margin-bottom: 7px; }
.a2hs-body b { color: var(--ink); }
.a2hs-ico { display: inline-block; color: var(--red); font-size: 15px; }
.a2hs-tip {
  margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--rule);
  font-size: 12.5px; color: var(--ink-3);
}

/* =====================================================================
 *  后台编辑器
 * ===================================================================== */
body.editor { background: #e8e4d9; padding: 0 0 92px; font-family: var(--sans); }
body.editor[data-theme="night"] { background: #0e0d0c; }

.ed-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(23,21,15,.95); color: #e6e0d2;
  backdrop-filter: blur(6px);
}
.ed-bar .ed-title { font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: .14em; flex: 1; }
.ed-bar .ed-sub { font-size: 11px; color: #9c9585; letter-spacing: .06em; }

.ed-wrap { max-width: 760px; margin: 0 auto; padding: 14px; }

/* 折叠分组 */
.ed-sec { background: var(--paper); border: 1px solid var(--rule); margin-bottom: 10px; }
.ed-sec > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; font-size: 14.5px; font-weight: 700;
  color: var(--ink); letter-spacing: .1em;
  border-left: 4px solid var(--red);
}
.ed-sec > summary::-webkit-details-marker { display: none; }
.ed-sec > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); font-size: 12px; transition: .2s; }
.ed-sec[open] > summary::after { transform: rotate(180deg); }
.ed-sec > summary .ed-count { font-size: 11px; color: var(--ink-3); font-weight: 400; letter-spacing: .04em; }
.ed-body { padding: 4px 14px 16px; border-top: 1px solid var(--rule); }

/* 字段 */
.f { margin-top: 13px; }
.f > label {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .1em; margin-bottom: 5px;
}
.f .hint { font-size: 11px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.f input[type=text], .f input[type=password], .f textarea, .f select {
  width: 100%; font-family: var(--sans); font-size: 15px; line-height: 1.7;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 0;
  padding: 10px 11px; outline: none; transition: .15s;
  -webkit-appearance: none; appearance: none;
}
.f textarea { resize: vertical; min-height: 84px; font-size: 14.5px; }
.f textarea.body { min-height: 210px; font-family: var(--serif); font-size: 15px; line-height: 1.9; }
.f input:focus, .f textarea:focus, .f select:focus { border-color: var(--red); background: var(--paper); }
.f select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .f-row { grid-template-columns: 1fr; } }

/* 标记语法提示 */
.md-help {
  margin-top: 7px; font-size: 11.5px; line-height: 1.8; color: var(--ink-3);
  background: var(--paper-2); border-left: 3px solid var(--rule); padding: 7px 10px;
}
.md-help code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  background: rgba(0,0,0,.06); padding: 1px 4px; color: var(--red); white-space: nowrap;
}

/* 可增删条目 */
.item {
  border: 1px dashed var(--rule); padding: 11px 12px 13px; margin-top: 11px;
  background: var(--paper-2); position: relative;
}
.item-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.item-head .idx {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  background: var(--ink); color: var(--paper); padding: 2px 7px;
}
.item-head .grow { flex: 1; }
.btn-x {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  color: var(--red); background: none; border: 1px solid var(--red);
  padding: 4px 9px; cursor: pointer;
}
.btn-x:hover { background: var(--red); color: #fff; }

.btn-add {
  display: block; width: 100%; margin-top: 11px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .1em;
  color: var(--ink); background: var(--paper-2);
  border: 1px dashed var(--rule-dark); padding: 11px; cursor: pointer;
}
.btn-add:hover { border-color: var(--red); color: var(--red); }

/* 底部固定操作条 */
.ed-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 9px; align-items: center;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(23,21,15,.96); backdrop-filter: blur(8px);
}
.ed-foot .grow { flex: 1; font-size: 11.5px; color: #9c9585; letter-spacing: .04em; }
.ed-btn {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .12em;
  padding: 11px 18px; cursor: pointer; border: none;
  background: var(--red); color: #fff;
}
.ed-btn.ghost { background: rgba(255,255,255,.08); color: #e6e0d2; border: 1px solid rgba(255,255,255,.22); }
.ed-btn:disabled { opacity: .45; cursor: default; }
.ed-btn.wide { width: 100%; }

/* 登录页 */
.ed-login {
  max-width: 420px; margin: 0 auto; padding: 40px 20px;
}
.ed-login h1 {
  font-family: var(--serif); font-size: 27px; font-weight: 900;
  letter-spacing: .16em; text-align: center; margin-bottom: 6px; color: var(--ink);
}
.ed-login p.sub {
  text-align: center; font-size: 12.5px; color: var(--ink-3);
  letter-spacing: .1em; margin-bottom: 24px;
}
.ed-login .card { background: var(--paper); border: 1px solid var(--rule); padding: 20px; }
.ed-msg { margin-top: 12px; font-size: 13px; line-height: 1.7; }
.ed-msg.err { color: var(--red); }
.ed-msg.ok { color: #2f7d4f; }

/* 状态提示条 */
.ed-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px);
  background: rgba(23,21,15,.95); color: #f0ead9;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .04em;
  padding: 11px 18px; z-index: 60; opacity: 0; pointer-events: none;
  transition: .22s; max-width: 88vw; text-align: center;
  border-left: 3px solid var(--red);
}
.ed-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ed-toast.ok { border-left-color: #4fbf7a; }

/* 历史版本列表 */
.hist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dotted var(--rule); font-size: 13px;
}
.hist-item .grow { flex: 1; color: var(--ink-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* 编辑器内的小按钮 */
.mini {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  padding: 6px 11px; cursor: pointer;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.mini:hover { border-color: var(--red); color: var(--red); }
.preview-frame {
  width: 100%; height: 60vh; border: 1px solid var(--rule); background: #fff; margin-top: 10px;
}