/*! v7工作室AI版 · [R99] 注入弹窗重构：两栏布局 + 右侧实时预览（mk-tplprev.css）
 * ------------------------------------------------------------------
 * 只作用于「注入 - xxx」那个悬浮窗（JS 给它加 .mk-tpl2 才生效，别的弹窗完全不受影响）。
 * 结构：  .ctrl-modal > h3（标题，占满一行）
 *                   > .ctrl-modal-body（左栏：目标包名 / 模板选择 / 注入路径 / 上传 / 按钮）
 *                   > .mk-tp-pane（右栏：本脚本挂载的预览面板，手机边框 + iframe）
 * 回退：删掉 index.html 里 mk-tplprev 的两行即可。
 */

.ctrl-modal.mk-tpl2{
  width: min(1240px, 96vw) !important;
  max-width: 96vw !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 0 !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.28) !important;
}
.ctrl-modal.mk-tpl2.mk-wide{ width: min(1580px, 98vw) !important; }

.ctrl-modal.mk-tpl2 > h3{
  flex: 0 0 100%;
  margin: 0 !important;
  padding: 15px 18px 13px !important;
  border-bottom: 1px solid var(--border, #e6e8ee);
  display: flex; align-items: center; gap: 10px;
  font-size: 16px !important;
  background: linear-gradient(180deg, rgba(79,110,247,.06), transparent);
}
.ctrl-modal.mk-tpl2 > h3 .mk-tp-h3tag{
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
  background: rgba(79,110,247,.12); color: var(--accent, #4f6ef7); letter-spacing: .3px;
}
.ctrl-modal.mk-tpl2 > h3 .mk-tp-wide{
  margin-left: auto; flex: 0 0 auto;
  font-size: 12px; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #e6e8ee); background: var(--bg2, #f7f8fb);
  color: var(--text, #1f2430);
}
.ctrl-modal.mk-tpl2 > h3 .mk-tp-wide:hover{ border-color: var(--accent, #4f6ef7); color: var(--accent, #4f6ef7); }

/* ---------- 左栏：表单（保持原 React 结构，只调排版/滚动） ---------- */
.ctrl-modal.mk-tpl2 > .ctrl-modal-body{
  flex: 1 1 560px; min-width: 460px;
  max-height: calc(92vh - 58px);
  overflow-y: auto;
  padding: 14px 18px 18px !important;
  box-sizing: border-box;
}
.ctrl-modal.mk-tpl2 > .ctrl-modal-body > label{
  display: block; margin: 12px 0 6px; font-size: 12px; color: var(--text2, #6b7280);
}
.ctrl-modal.mk-tpl2 > .ctrl-modal-body > label:first-child{ margin-top: 2px; }
.ctrl-modal.mk-tpl2 .mk-tp-sticky{
  position: sticky; top: -14px; z-index: 6;
  padding: 10px 0 8px !important; margin-bottom: 6px !important;
  background: var(--bg, #fff);
  box-shadow: 0 6px 10px -8px rgba(15,23,42,.35);
}
/* 模板按钮：加大一点，hover 有反馈 */
.ctrl-modal.mk-tpl2 .mk-tp-grid > button{
  padding: 7px 6px !important; font-size: 11.5px !important;
  transition: all .15s;
}
.ctrl-modal.mk-tpl2 .mk-tp-grid > button:hover{
  border-color: var(--accent, #4f6ef7) !important; color: var(--accent, #4f6ef7) !important;
  transform: translateY(-1px);
}
/* 「已选择」横条：做成高亮卡 */
.ctrl-modal.mk-tpl2 .mk-tp-sel{
  border-radius: 10px !important;
  box-shadow: 0 6px 16px -8px rgba(139,92,246,.75);
}

/* ---------- 右栏：预览面板 ---------- */
.ctrl-modal.mk-tpl2 > .mk-tp-pane{
  flex: 0 0 468px; max-width: 468px;
  max-height: calc(92vh - 58px);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border, #e6e8ee);
  background: var(--bg2, #f7f8fb);
  box-sizing: border-box;
}
.mk-tp-head{ padding: 12px 14px 10px; border-bottom: 1px solid var(--border, #e6e8ee); }
.mk-tp-row1{ display: flex; align-items: center; gap: 8px; }
.mk-tp-title{ font-size: 13px; font-weight: 700; color: var(--text, #1f2430); }
.mk-tp-seg{ margin-left: auto; display: inline-flex; border: 1px solid var(--border, #e6e8ee); border-radius: 9px; overflow: hidden; background: var(--bg, #fff); }
.mk-tp-seg button{
  border: 0; background: transparent; cursor: pointer; padding: 5px 10px;
  font-size: 11px; color: var(--text2, #6b7280);
}
.mk-tp-seg button.on{ background: var(--accent, #4f6ef7); color: #fff; }
.mk-tp-ico{
  border: 1px solid var(--border, #e6e8ee); background: var(--bg, #fff); color: var(--text2, #6b7280);
  width: 27px; height: 27px; border-radius: 8px; cursor: pointer; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.mk-tp-ico:hover{ border-color: var(--accent, #4f6ef7); color: var(--accent, #4f6ef7); }
.mk-tp-name{
  margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--purple, #8b5cf6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-tp-path{
  margin-top: 4px; font: 11px/1.45 ui-monospace, Consolas, monospace; color: var(--text2, #6b7280);
  word-break: break-all; max-height: 34px; overflow: hidden;
}
.mk-tp-stage{
  flex: 1; min-height: 300px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 0%, rgba(79,110,247,.10), transparent 62%),
    repeating-linear-gradient(45deg, rgba(15,23,42,.022) 0 10px, transparent 10px 20px);
}
.mk-tp-empty{ text-align: center; color: var(--text2, #6b7280); font-size: 12px; line-height: 1.9; padding: 0 22px; }
.mk-tp-empty .big{ font-size: 30px; display: block; margin-bottom: 8px; opacity: .55; }

/* 手机边框：高度撑满 + 390/844 比例自动算宽 */
.mk-tp-phone{
  position: relative; height: 100%; aspect-ratio: 390 / 844; max-width: 100%;
  border: 9px solid #171b22; border-radius: 32px; background: #171b22;
  box-shadow: 0 18px 44px rgba(15,23,42,.30), 0 0 0 1px rgba(255,255,255,.5) inset;
  overflow: hidden;
}
.mk-tp-phone::after{
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 15px; border-radius: 0 0 10px 10px; background: #171b22; z-index: 3;
}
.mk-tp-phone iframe{ width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.mk-tp-web{
  width: 100%; height: 100%; border: 1px solid var(--border, #e6e8ee); border-radius: 12px;
  background: #fff; overflow: hidden; box-shadow: 0 10px 28px rgba(15,23,42,.14);
}
.mk-tp-web iframe{ width: 100%; height: 100%; border: 0; background: #fff; display: block; }

.mk-tp-foot{
  padding: 9px 14px; border-top: 1px solid var(--border, #e6e8ee);
  font-size: 11px; line-height: 1.5; color: var(--text2, #6b7280); background: var(--bg, #fff);
}
.mk-tp-foot .ok{ color: #059669; font-weight: 600; }
.mk-tp-foot .bad{ color: #dc2626; font-weight: 600; }
.mk-tp-foot .warn{ color: #d97706; font-weight: 600; }
.mk-tp-busy{ opacity: .6; }

@media (max-width: 1120px){
  .ctrl-modal.mk-tpl2 > .ctrl-modal-body{ min-width: 0; flex: 1 1 100%; max-height: none; }
  .ctrl-modal.mk-tpl2 > .mk-tp-pane{ flex: 1 1 100%; max-width: 100%; border-left: 0; border-top: 1px solid var(--border, #e6e8ee); }
  .ctrl-modal.mk-tpl2 > .mk-tp-pane .mk-tp-stage{ min-height: 420px; }
}

/* 模板列表容器（React 内联 max-height:360px）在放大后的窗口里放宽一点，避免左边只显示 3 行 */
.ctrl-modal.mk-tpl2 .mk-tp-list{
  max-height: min(56vh, 640px) !important;
  min-height: 220px;
}

/* ------------------------------------------------------------------
 * 浮窗让位：设备页右侧那几个常驻浮窗（锁屏密码 / 注入应用快捷 / 相册识别）挂在
 * 根层 z-index 9010~9011，而整页 .ctrl-layout 是 z-index:9008 的层叠上下文 ->
 * 连 z-index 10200 的弹窗也被困在 9008 里，浮窗永远压在弹窗上面（挡住右侧预览）。
 * 这里只在「我重构过的大弹窗打开时」把浮窗压到 100（弹窗关闭 :has 失配，自动还原）。
 * 注：这是全站弹窗都存在的老问题，本轮只处理注入弹窗这一处。
 */
body:has(.ctrl-modal.mk-tpl2) .c2-float-panel,
body:has(.ctrl-modal.mk-tpl2) .mk-float-album,
body:has(.ctrl-modal.mk-tpl2) .mk-docked{ z-index: 100 !important; }