/* DestinyPro 短代码可视化插入 UI 样式（前后台共用）
 * 作用域约定：
 *   [data-scope="admin"] → 跟随 Typecho 后台原生按钮观感（白底/灰边/蓝主色）
 *   [data-scope="s3"]    → 跟随前台风格三终端观感（令牌色/等宽字体）
 * 两套作用域各自视觉统一，但共享同一份 DOM 结构与交互。
 */

/* ============ 作用域令牌 ============
 * 关键约定（2026-10-22 按「战术终端」双生主题重校）：
 *   · .dpui-bar（工具栏）在页面流内 → **必须跟随主题**：accent 取 var(--s3-accent)
 *     （白天深蓝 / 黑夜血红，由 body.theme-night 在页面上重定义），文字用 currentColor，
 *     白天黑夜自动正确。绝不能写死色号。
 *   · .dpui-mask（弹窗）白天 = 深色「终端 HUD」面板（与页面解耦，对比度稳定）；
 *     黑夜 = **整体翻转为浅色面板 + 血红强调**——站点黑夜本身就是浅底世界
 *     （--s3-white/#f4f6f9），深蓝弹窗在夜里是唯一的异物，用户实测反馈
 *     「插入窗口颜色不对」。翻转规则见下方 body.theme-night [data-scope="s3"]。
 * 两者共用同一份 DOM，靠不同选择器分别给色。
 */
.dpui-wrap, .dpui-mask { box-sizing: border-box; }
.dpui-wrap *, .dpui-mask * { box-sizing: border-box; }

[data-scope="admin"] {
  --dpui-accent: #4676a5;
  --dpui-accent-hover: #3a6188;
  --dpui-line: #d9dee4;
  --dpui-bg: #f6f8fa;
  --dpui-ink: #24292f;
  --dpui-muted: #6b7684;
  --dpui-radius: 6px;
  --dpui-font: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  /* 弹窗独立配色（不继承页面） */
  --dpui-modal-bg: #fff;
  --dpui-modal-ink: #24292f;
  --dpui-modal-muted: #6b7684;
  --dpui-modal-bg-soft: #f6f8fa;
}
[data-scope="s3"] {
  /* 强调色跟随站点令牌：白天 --s3-accent=#2370c6 / 黑夜 =#c81c23（body.theme-night
     在 destiny-page.css 里重定义），hover 压暗 18% */
  --dpui-accent: var(--s3-accent, #3d8bfd);
  --dpui-accent-hover: color-mix(in srgb, var(--s3-accent, #3d8bfd) 82%, #000);
  --dpui-radius: 10px;
  --dpui-font: var(--s3-font, "SFMono-Regular", Consolas, monospace);
  /* 工具栏跟随主题：currentColor 继承页面文字色，白天黑夜自动正确 */
  --dpui-ink: currentColor;
  --dpui-muted: var(--s3-muted, #7b8ba3);
  --dpui-line: color-mix(in srgb, currentColor 18%, transparent);
  --dpui-bg: color-mix(in srgb, currentColor 5%, transparent);
  /* 弹窗（白天）：固定深色 HUD 面板 + 冷蓝灰描边，与页面主题解耦 */
  --dpui-modal-bg: #10151d;
  --dpui-modal-ink: #dfe8f5;
  --dpui-modal-muted: #9db0cc;
  --dpui-modal-bg-soft: rgba(120, 160, 210, .10);
  /* 弹窗分隔线 / 描边 / 输入框描边：白天冷蓝灰；夜间在下方覆盖为血红 */
  --dpui-modal-line: rgba(120, 160, 210, .30);
  /* 弹窗输入框底色：白天深色面板上的半透明深底；夜间翻转为站点浅底 */
  --dpui-modal-inp-bg: rgba(6, 10, 16, .78);
  /* 颜色选择器底板（白天深底；夜间浅底） */
  --dpui-modal-swatch-bg: rgba(8, 12, 18, .72);
}
/* —— 黑夜 Chaos：弹窗整体翻转为浅色面板 + 血红强调 ——
 * 站点黑夜是「浅灰底 + 血红」世界（--s3-white #f4f6f9 / --s3-accent #c81c23），
 * 白天那套深蓝 HUD 面板在夜里成为唯一异物（用户实测：「插入窗口颜色不对」）。
 * 这里把弹窗的底色 / 文字 / 描边全部改走站点令牌，面板、输入框、色板、
 * 页眉页脚带一并翻转。
 * 注意：--s3-* 定义在 body.theme-night 上（destiny-page.css），
 * 必须带 body.theme-night 前缀，弹窗（挂在 body 末尾）才解析得到。 */
body.theme-night [data-scope="s3"] {
  --dpui-modal-bg: var(--s3-white, #f4f6f9);
  --dpui-modal-ink: var(--s3-ink, #14171c);
  --dpui-modal-muted: var(--s3-muted, #6f6b74);
  --dpui-modal-bg-soft: color-mix(in srgb, var(--s3-accent, #c81c23) 7%, var(--s3-white, #f4f6f9));
  --dpui-modal-line: color-mix(in srgb, var(--s3-accent, #c81c23) 34%, transparent);
  --dpui-modal-inp-bg: var(--s3-bg, #d9dee5);
  --dpui-modal-swatch-bg: var(--s3-white, #f4f6f9);
}

/* ============ 工具栏 ============ */
.dpui-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; margin: 0 0 10px;
  border: 1px solid var(--dpui-line); border-radius: var(--dpui-radius);
  background: var(--dpui-bg);
  color: var(--dpui-ink);
  font-family: var(--dpui-font); font-size: 13px;
}
/* 工具栏内的按钮/文字强制继承页面色，不被宿主样式（Typecho button{color:...}）覆盖 */
.dpui-bar, .dpui-bar * { color: inherit; }
.dpui-bar .dpui-tb { color: inherit; }
/* hover 态需比上面的继承规则更具体，否则白字被 inherit 吃掉 */
.dpui-bar .dpui-tb:hover, .dpui-bar .dpui-tb:focus-visible { color: #fff; }
.dpui-bar__grp { display: inline-flex; gap: 4px; align-items: center; }
.dpui-bar__grp + .dpui-bar__grp { margin-left: 4px; padding-left: 8px; border-left: 1px dashed var(--dpui-line); }

/* ============ 合并模式（opt.mergeInto）============
 * 按钮组进入宿主工具栏容器（后台 #wmd-button-bar = display:flex），
 * 不建 .dpui-bar 外壳：宿主提供边框/底色（见 s3editor.css），
 * 这里只管排版。data-scope 在 .dpui-merge 自身上，令牌照常解析。
 * 注意：等宽字体/字号原先由 .dpui-bar 提供，合并态没有 bar 外壳，
 * 必须在这里显式设一次，否则按钮会回落成页面默认无衬线。 */
.dpui-merge {
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--dpui-font); font-size: 13px;
}
.dpui-merge .dpui-tb { color: inherit; }
.dpui-merge .dpui-tb:hover, .dpui-merge .dpui-tb:focus-visible { color: #fff; }

.dpui-tb {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; line-height: 1.6;
  color: var(--dpui-ink);
  background: transparent;
  border: 1px solid var(--dpui-line); border-radius: calc(var(--dpui-radius) - 2px);
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.dpui-tb:hover {
  background: var(--dpui-accent); border-color: var(--dpui-accent); color: #fff;
}
/* 前台（s3）按钮实底化：透明底 + 细描边铺在工具栏浅色底上「发虚」（用户实测
   「插入按键颜色不对」）。给一层 --s3-white 实底 + 同色系描边，按钮成为明确的
   浅色 chips；hover 仍走 accent 实底（日蓝 #2370c6 / 夜红 #c81c23 自动翻转）。 */
[data-scope="s3"] .dpui-tb {
  background: var(--s3-white, #fff);
  border-color: color-mix(in srgb, var(--s3-ink, #16181d) 16%, transparent);
}
.dpui-tb__i { font-style: normal; opacity: .75; font-size: 12px; }
.dpui-tb:hover .dpui-tb__i { opacity: 1; }

/* ============ Typecho 后台元素选择器隔离 ============
 * Typecho 后台 style.css 里有裸元素选择器：
 *   button{display:inline-block;padding:0 6px;min-width:12px;height:18px;...;border-radius:30px}
 *   input[type=text],textarea{background:#FFF;border:1px solid #D9D9D6;padding:7px;...}
 * 它们会压扁本 UI 的按钮（固定 18px 高）、覆盖输入框样式。
 * 这里用「作用域属性 + 类」双选择器提升特异性，并显式重置这些属性。
 * 注意 .dpui-merge（合并进原生工具栏的模式）也要覆盖 —— 它没有 .dpui-wrap
 * 外壳，按钮直接暴露在后台裸选择器下，不重置会被打成 30px 胶囊。 */
[data-scope="admin"] .dpui-wrap button,
[data-scope="admin"] .dpui-merge button,
[data-scope="admin"] .dpui-mask button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: auto;
  padding: 4px 9px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  border-radius: calc(var(--dpui-radius) - 2px);
  text-align: center;
  zoom: normal;
}
[data-scope="admin"] .dpui-wrap input,
[data-scope="admin"] .dpui-wrap textarea,
[data-scope="admin"] .dpui-wrap select,
[data-scope="admin"] .dpui-merge input,
[data-scope="admin"] .dpui-merge textarea,
[data-scope="admin"] .dpui-merge select,
[data-scope="admin"] .dpui-mask input,
[data-scope="admin"] .dpui-mask textarea,
[data-scope="admin"] .dpui-mask select {
  height: auto;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.6;
  font-family: var(--dpui-font);
}

/* ============ 纯图标按钮 + 悬停中文提示（2026-10-23 用户要求） ============
 * 用户原话：「都按照第一排的格式只保留图标，鼠标悬停显示中文按钮名称」——
 * 对齐后台原生 pagedown 第一排的图标形态。文字名称移入悬停提示
 * （data-tip → ::after，比原生 title 响应快、可随主题配色）。
 * ⚠️ 必须放在上面的后台隔离块之后：隔离块用 [data-scope="admin"] .dpui-merge
 *    button 设了 padding，同特异性下后者胜，否则后台按钮会被打回 4px 9px。 */
.dpui-tb {
  position: relative;
  padding: 0; width: 30px; height: 28px;
  justify-content: center; gap: 0;
}
.dpui-tb__i { margin: 0; font-size: 14px; line-height: 1; }
[data-scope="admin"] .dpui-wrap .dpui-tb,
[data-scope="admin"] .dpui-merge .dpui-tb {
  padding: 0; width: 30px; height: 28px;
}

/* 悬停提示：短代码排（.dpui-tb）与 Markdown 排（.mdb-btn）共用一套。
 * 配色：后台 = 深色气泡（GitHub 风）；前台（s3）跟随弹窗令牌——
 * 白天深色 HUD / 黑夜自动翻浅面板 + 血红描边，与插入弹窗同源。 */
.dpui-tb::after,
.mdb-btn::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(2px);
  padding: 4px 9px; border-radius: 4px;
  font-family: var(--dpui-font); font-size: 11.5px; font-weight: 600;
  line-height: 1.5; letter-spacing: .02em;
  white-space: nowrap; pointer-events: none;
  opacity: 0; z-index: 20;
  transition: opacity .12s ease, transform .12s ease;
}
.dpui-tb:hover::after, .dpui-tb:focus-visible::after,
.mdb-btn:hover::after, .mdb-btn:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.dpui-tb::after, .mdb-btn::after {
  background: #24292f; color: #fff;
  box-shadow: 0 4px 14px rgba(10, 15, 22, .3);
}
[data-scope="s3"] .dpui-tb::after,
[data-scope="s3"] .mdb-btn::after {
  background: var(--dpui-modal-bg); color: var(--dpui-modal-ink);
  border: 1px solid var(--dpui-modal-line);
}

/* ============ 前台 Markdown 原生按钮排（.s3-mdbar，2026-10-23 新增） ============
 * 对齐后台 pagedown 第一排：加粗/斜体/引用/代码/链接/图片/列表/标题/分割线。
 * 图标为后台同一张雪碧图（--mdb-sprite 由 JS 从 PHP 传入的 admin URL 设置），
 * 形态与短代码排统一（纯图标 + 悬停提示）。
 * 与下方短代码排拼接：本排去底边框、方角只留上方；紧随其后的 .dpui-bar
 * 去顶边框、圆角只留下方——视觉上成为一个工具栏的两行（同后台合并态）。 */
.s3-mdbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 8px 10px; margin: 0;
  border: 1px solid var(--dpui-line);
  border-bottom: none;
  border-radius: var(--dpui-radius) var(--dpui-radius) 0 0;
  background: var(--dpui-bg);
  font-family: var(--dpui-font);
}
.mdb-grp { display: inline-flex; gap: 4px; align-items: center; }
.mdb-grp + .mdb-grp { margin-left: 4px; padding-left: 8px; border-left: 1px dashed var(--dpui-line); }
.mdb-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; cursor: pointer;
  background: transparent;
  border: 1px solid transparent; border-radius: calc(var(--dpui-radius) - 2px);
  transition: background .15s, border-color .15s;
}
.mdb-btn:hover, .mdb-btn:focus-visible {
  background: var(--dpui-accent); border-color: var(--dpui-accent);
}
.mdb-i {
  display: block; width: 20px; height: 20px;
  background-image: var(--mdb-sprite, none);
  background-size: 20px 300px; background-repeat: no-repeat;
  opacity: .72; transition: opacity .15s, filter .15s;
}
.mdb-btn:hover .mdb-i, .mdb-btn:focus-visible .mdb-i {
  opacity: 1; filter: brightness(0) invert(1);   /* 深色线条图标在 accent 底上反白 */
}
/* 拼接：下方短代码排去顶边框 + 下圆角 */
.s3-mdbar + .dpui-wrap .dpui-bar {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--dpui-radius) var(--dpui-radius);
}
@media (max-width: 600px) {
  .mdb-btn { width: 28px; height: 26px; }
}

/* ============ 弹窗遮罩 ============ */
.dpui-mask {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 20, 28, .55);
  backdrop-filter: blur(2px);
  font-family: var(--dpui-font);
}
.dpui-modal {
  width: 100%; max-width: 520px; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--dpui-modal-bg); color: var(--dpui-modal-ink);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(10, 15, 22, .32);
  overflow: hidden;
  animation: dpui-in .16s ease-out;
}
[data-scope="s3"] .dpui-modal {
  background: var(--dpui-modal-bg); color: var(--dpui-modal-ink);
  border: 1px solid var(--dpui-modal-line);
}
@keyframes dpui-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }

.dpui-modal__hd {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--dpui-line);
  background: var(--dpui-bg);
}
[data-scope="s3"] .dpui-modal__hd { border-bottom-color: var(--dpui-modal-line); background: var(--dpui-modal-bg-soft); }
.dpui-modal__title {
  font-size: 14.5px; font-weight: 700; color: var(--dpui-ink);
  display: flex; align-items: center; gap: 8px;
}
.dpui-modal__title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--dpui-accent);
}
[data-scope="s3"] .dpui-modal__title { color: var(--dpui-modal-ink); }
.dpui-modal__x {
  margin-left: auto; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--dpui-muted); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
}
.dpui-modal__x:hover { color: #e5534b; background: rgba(229, 83, 75, .1); }

.dpui-modal__bd { padding: 16px; overflow-y: auto; flex: 1; }

.dpui-field { margin-bottom: 14px; }
.dpui-field:last-child { margin-bottom: 0; }
.dpui-lab {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--dpui-modal-muted);
}

.dpui-inp {
  width: 100%; padding: 8px 10px;
  font-family: inherit; font-size: 13.5px; line-height: 1.6;
  color: var(--dpui-modal-ink); background: var(--dpui-modal-bg);
  border: 1px solid var(--dpui-line); border-radius: 6px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
[data-scope="s3"] .dpui-inp {
  color: var(--dpui-modal-ink);
  background: var(--dpui-modal-inp-bg);
  border-color: var(--dpui-modal-line);
}
/* 占位符同样要给浅色，否则深色底上几乎不可见（见前台反馈） */
[data-scope="s3"] .dpui-inp::placeholder { color: var(--dpui-modal-muted); opacity: 1; }
[data-scope="admin"] .dpui-inp::placeholder { color: #9aa4b0; opacity: 1; }
.dpui-inp::placeholder { color: var(--dpui-modal-muted); opacity: 1; }
/* 下拉高度必须放开：Typecho 后台全局 select{height:28px} 会把带 8px padding 的
   .dpui-inp 钉死裁字；弹窗挂 body 直下无 data-scope 祖先，scope 前缀规则救不了 */
select.dpui-inp { height: auto; }
.dpui-inp:focus {
  border-color: var(--dpui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpui-accent) 18%, transparent);
}
.dpui-ta { resize: vertical; min-height: 78px; }
[data-scope="s3"] .dpui-ta { min-height: 92px; line-height: 1.7; }
.dpui-num { max-width: 110px; }

.dpui-colorwrap { display: inline-flex; align-items: center; gap: 8px; }
.dpui-color {
  width: 40px; height: 34px; padding: 2px; cursor: pointer;
  background: #fff; border: 1px solid var(--dpui-line); border-radius: 6px;
}
[data-scope="s3"] .dpui-color { background: var(--dpui-modal-swatch-bg); }
.dpui-color-txt { width: 120px; }

.dpui-hint {
  margin: 4px 0 0; padding: 9px 11px;
  font-size: 12px; line-height: 1.65; color: var(--dpui-modal-muted);
  background: var(--dpui-modal-bg-soft);
  border-left: 3px solid var(--dpui-accent);
  border-radius: 0 6px 6px 0;
}
.dpui-note { margin: 0; font-size: 13px; color: var(--dpui-muted); }

.dpui-modal__ft {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--dpui-line);
  background: var(--dpui-modal-bg-soft);
}
[data-scope="s3"] .dpui-modal__ft { border-bottom: 0; border-top-color: var(--dpui-modal-line); background: var(--dpui-modal-bg-soft); }

.dpui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: auto; min-width: 0; margin: 0;
  padding: 8px 20px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.5;
  border-radius: 6px; border: 1px solid transparent;
  zoom: normal;
  transition: background .15s, border-color .15s, color .15s;
}
.dpui-btn--primary { background: var(--dpui-accent); color: #fff; }
.dpui-btn--primary:hover { background: var(--dpui-accent-hover); }
.dpui-btn--ghost {
  background: transparent; color: var(--dpui-muted); border-color: var(--dpui-line);
}
[data-scope="s3"] .dpui-btn--ghost { color: var(--dpui-modal-muted); border-color: var(--dpui-modal-line); }
.dpui-btn--ghost:hover { color: var(--dpui-ink); border-color: var(--dpui-accent); }
[data-scope="s3"] .dpui-btn--ghost:hover { color: var(--dpui-modal-ink); border-color: var(--dpui-accent); }

/* ============ 响应式 ============ */
@media (max-width: 600px) {
  .dpui-mask { padding: 12px; }
  .dpui-modal { max-width: 100%; max-height: 92vh; }
  .dpui-bar__grp + .dpui-bar__grp { margin-left: 0; padding-left: 4px; border-left: none; }
  /* 纯图标形态下窄屏只需微调间距（按钮本就是图标钮，无需再藏文字） */
  .dpui-tb { width: 28px; height: 26px; }
  .dpui-tb__i { font-size: 13px; }
}