/* ============================================================
 * 后台 · 页面装修编辑器样式
 *
 * 只服务 admin.html 的「页面装修」页签，前台不加载。
 * 三栏布局：左（页面 + 组件库）· 中（375px 手机预览）· 右（内容 / 样式属性）
 * 手机预览的组件皮肤在 xd-diy.css 里，这里只画「编辑器外壳」。
 * ============================================================ */

#tab-diypage{ display:flex; flex-direction:column; gap:12px; min-height:0; }

/* ---------- 顶栏 ---------- */
.dy-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dy-bar-l{ display:flex; align-items:center; gap:10px; min-width:0; }
.dy-bar-l b{ font-size:16px; color:var(--ink,#1F2429); }
.dy-crumb{ font-size:12.5px; color:var(--ink3,#94A3B8); }
.dy-dirty{
  font-size:11.5px; padding:2px 9px; border-radius:999px; line-height:1.7;
  background:#F1F5F9; color:#64748B; border:1px solid #E2E8F0;
}
.dy-dirty.on{ background:#FEF3C7; color:#B45309; border-color:#FDE68A; }
.dy-bar-r{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

.dy-btn{
  height:32px; padding:0 14px; font-size:13px; border-radius:8px; cursor:pointer;
  border:1px solid #E2E8F0; background:#fff; color:#334155; line-height:30px;
}
.dy-btn:hover{ border-color:#1B4B5A; color:#1B4B5A; }
.dy-btn.primary{ background:#1B4B5A; border-color:#1B4B5A; color:#fff; }
.dy-btn.primary:hover{ background:#164049; color:#fff; }
.dy-btn.sm{ height:26px; padding:0 10px; font-size:12px; line-height:24px; }
.dy-btn.block{ display:block; width:100%; margin-top:8px; }
.dy-btn.danger{ color:#B91C1C; border-color:#FECACA; }
.dy-btn.danger:hover{ background:#FEF2F2; border-color:#B91C1C; }

/* ---------- 三栏 ---------- */
.dy-wrap{
  display:grid; grid-template-columns:250px minmax(360px,1fr) 340px;
  gap:12px; align-items:start; min-height:0;
}
@media (max-width:1500px){ .dy-wrap{ grid-template-columns:220px minmax(320px,1fr) 310px; } }
@media (max-width:1200px){ .dy-wrap{ grid-template-columns:200px 1fr; } .dy-props{ grid-column:1/-1; } }

.dy-side, .dy-props{
  background:#fff; border:1px solid #E5E8EE; border-radius:12px;
  max-height:calc(100vh - 200px); overflow:auto;
}
.dy-side{ padding:10px; }
.dy-sec-title{
  font-size:12px; font-weight:600; color:#94A3B8; letter-spacing:.06em;
  padding:6px 4px; text-transform:uppercase;
}

/* ---------- 页面列表 ----------
 * 改两列并列：11 个系统页原来竖着排，把左侧栏撑得老长，组件库被挤到很下面；
 * 两列之后一屏能看全，卡片也更像「页面」而不是菜单项。
 */
.dy-pages{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.dy-page{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  min-height:46px; padding:6px 9px; border-radius:8px;
  border:1px solid #E9EEF3; background:#FBFCFD;
  font-size:12.5px; color:#475569; cursor:pointer; text-align:left; width:100%;
  transition:border-color .15s, background .15s, color .15s;
}
.dy-page span{
  display:block; width:100%; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dy-page:hover{ background:#F4F8FA; border-color:#D8E2E8; }
.dy-page.on{ background:#EAF2F4; border-color:#1B4B5A; color:#1B4B5A; font-weight:600; }
.dy-page em{
  font-style:normal; font-size:10.5px; color:#94A3B8; line-height:1.2;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dy-page em:empty{ display:none; }
.dy-sub{ font-size:11px; color:#B6BEC9; padding:8px 2px 0; grid-column:1/-1; }
/* 专题页那一排：卡片 + 右上角「打开」小按钮，与系统页并列同高 */
.dy-page-row{ display:block; position:relative; }
.dy-page-row .dy-page{ padding-right:26px; }
/* 底部按钮组：原来 flex:1 平分，「打开专题页」这种五字按钮会被压到换行、横向溢出容器 */
.dy-page-ops{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:2px 0; grid-column:1/-1; }
.dy-page-ops button{
  height:30px; font-size:12px; border-radius:7px; cursor:pointer;
  border:1px dashed #CBD5E1; background:#FBFCFD; color:#64748B;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dy-page-ops button:hover{ border-color:#1B4B5A; color:#1B4B5A; }
.dy-page-ops button.danger:hover{ border-color:#B91C1C; color:#B91C1C; }
/* 「新建专题页」是这一组里的主操作，独占一行，剩下四个两两成对 */
.dy-page-ops button[data-act="newPage"]{ grid-column:1/-1; border-style:solid; background:#F4F8FA; color:#1B4B5A; }

/* ---------- 组件库 ---------- */
.dy-lib-search{ padding:2px 2px 8px; }
.dy-lib-search input{
  width:100%; height:30px; padding:0 10px; font-size:12.5px;
  border:1px solid #E5E8EE; border-radius:8px; outline:none;
}
.dy-lib-search input:focus{ border-color:#1B4B5A; }
.dy-lib-group{ margin-bottom:12px; }
.dy-lib-gt{ font-size:11px; color:#94A3B8; padding:2px 4px 6px; }
.dy-lib-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dy-lib-i{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px 7px; border:1px solid #E5E8EE; border-radius:9px; background:#fff;
  cursor:grab; font-size:11px; color:#475569; line-height:1.2;
}
.dy-lib-i:hover{ border-color:#1B4B5A; color:#1B4B5A; background:#F6FAFB; }
.dy-lib-i:active{ cursor:grabbing; }
.dy-lib-i .ic{ display:inline-flex; color:#1B4B5A; }
.dy-lib-i em{ font-style:normal; text-align:center; }
.dy-lib-empty{ padding:16px 8px; font-size:12px; color:#94A3B8; text-align:center; }

/* ---------- 画布 ---------- */
.dy-canvas{
  background:#F1F4F7; border:1px solid #E5E8EE; border-radius:12px;
  padding:16px; min-height:640px; max-height:calc(100vh - 200px); overflow:auto;
}
.dy-stage{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.dy-phone{
  width:375px; background:#fff; border-radius:26px; overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.14); border:1px solid #E2E8F0;
}
.dy-phone-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 14px 4px; font-size:10.5px; color:#94A3B8; background:#fff;
}
.dy-phone-bar em{ font-style:normal; font-size:11.5px; color:#475569; }
.dy-phone-body{ max-height:600px; overflow:auto; background:#F4F6F8; }
.dy-stage-tip{ font-size:11.5px; color:#94A3B8; }

/* ---------- 滚动条 ----------
 * Windows 默认滚动条在 430px 的手机壳里要吃掉 17px 宽度，还带箭头和立体边，
 * 跟整站扁平风完全不搭。这里只收拾装修器自己的滚动容器，站点其余部分不动。
 * Firefox 走 scrollbar-width/color，Chrome/Safari 走 ::-webkit-scrollbar。
 */
.dy-canvas, .dy-phone-body, .dy-side, .dy-props, .dy-props-body, .dy-lib,
.dy-browser-body, .dy-img-grid, .dy-img-box, .dy-ico-grid, .dy-ico-box{
  scrollbar-width:thin;
  scrollbar-color:#CBD5E1 transparent;
}
.dy-canvas::-webkit-scrollbar,
.dy-phone-body::-webkit-scrollbar,
.dy-props-body::-webkit-scrollbar,
.dy-lib::-webkit-scrollbar,
.dy-side::-webkit-scrollbar,
.dy-props::-webkit-scrollbar,
.dy-browser-body::-webkit-scrollbar,
.dy-img-grid::-webkit-scrollbar,
.dy-img-box::-webkit-scrollbar,
.dy-ico-grid::-webkit-scrollbar,
.dy-ico-box::-webkit-scrollbar{ width:8px; height:8px; }
/* 手机壳里再窄一档：8px 会明显吃掉预览宽度 */
.dy-phone-body::-webkit-scrollbar{ width:5px; }
.dy-canvas::-webkit-scrollbar-track,
.dy-phone-body::-webkit-scrollbar-track,
.dy-props-body::-webkit-scrollbar-track,
.dy-lib::-webkit-scrollbar-track,
.dy-side::-webkit-scrollbar-track,
.dy-props::-webkit-scrollbar-track,
.dy-browser-body::-webkit-scrollbar-track,
.dy-img-grid::-webkit-scrollbar-track,
.dy-img-box::-webkit-scrollbar-track,
.dy-ico-grid::-webkit-scrollbar-track,
.dy-ico-box::-webkit-scrollbar-track{ background:transparent; }
.dy-canvas::-webkit-scrollbar-thumb,
.dy-phone-body::-webkit-scrollbar-thumb,
.dy-props-body::-webkit-scrollbar-thumb,
.dy-lib::-webkit-scrollbar-thumb,
.dy-side::-webkit-scrollbar-thumb,
.dy-props::-webkit-scrollbar-thumb,
.dy-browser-body::-webkit-scrollbar-thumb,
.dy-img-grid::-webkit-scrollbar-thumb,
.dy-img-box::-webkit-scrollbar-thumb,
.dy-ico-grid::-webkit-scrollbar-thumb,
.dy-ico-box::-webkit-scrollbar-thumb{
  background:#D3DBE4; border-radius:999px;
}
.dy-canvas::-webkit-scrollbar-thumb:hover,
.dy-phone-body::-webkit-scrollbar-thumb:hover,
.dy-props-body::-webkit-scrollbar-thumb:hover,
.dy-lib::-webkit-scrollbar-thumb:hover,
.dy-side::-webkit-scrollbar-thumb:hover,
.dy-props::-webkit-scrollbar-thumb:hover,
.dy-browser-body::-webkit-scrollbar-thumb:hover,
.dy-img-grid::-webkit-scrollbar-thumb:hover,
.dy-img-box::-webkit-scrollbar-thumb:hover,
.dy-ico-grid::-webkit-scrollbar-thumb:hover,
.dy-ico-box::-webkit-scrollbar-thumb:hover{ background:#B4C1CE; }
.dy-canvas::-webkit-scrollbar-corner,
.dy-phone-body::-webkit-scrollbar-corner,
.dy-props-body::-webkit-scrollbar-corner,
.dy-browser-body::-webkit-scrollbar-corner{ background:transparent; }

/* ---------- PC 端预览：浏览器窗口壳 ----------
 * 以前切到「PC 商城」预览区还是 430px 手机壳，塞的是 m.html ——
 * 看到一个手机版却以为是 PC 端效果。PC 端有自己的页面（index.html），
 * 这里换成桌面窗口外框，宽度按容器撑开，里面的 iframe 才是真 PC 商城。
 */
.dy-browser{
  width:100%; max-width:1200px; margin:0 auto; background:#fff; border-radius:12px;
  border:1px solid #DCE3EB; box-shadow:0 14px 36px rgba(15,23,42,.12);
  overflow:hidden; display:flex; flex-direction:column; height:100%; min-height:660px;
}
.dy-browser-bar{
  display:flex; align-items:center; gap:10px; padding:8px 12px; flex:none;
  background:#F3F5F8; border-bottom:1px solid #E4E9F0;
}
.dy-browser-dots{ display:flex; gap:5px; flex:none; }
.dy-browser-dots i{ width:9px; height:9px; border-radius:50%; background:#D9E0E8; display:block; }
.dy-browser-dots i:nth-child(1){ background:#EFA9A4; }
.dy-browser-dots i:nth-child(2){ background:#F2CF8B; }
.dy-browser-dots i:nth-child(3){ background:#A6D4B4; }
.dy-browser-url{
  flex:1; min-width:0; height:24px; display:flex; align-items:center; padding:0 10px;
  background:#fff; border:1px solid #E4E9F0; border-radius:999px;
  font-size:11.5px; color:#8A94A3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.dy-browser-size{ flex:none; font-size:11px; color:#94A3B8; }
.dy-browser-body{ flex:1; min-height:0; overflow:auto; background:#fff; }
.dy-browser-body iframe{ width:100%; height:100%; min-height:600px; border:0; display:block; }
/* 桌面预览要铺满画布宽度，不能再像手机壳那样居中缩在中间 */
.dy-canvas.pc-mode{ padding:12px; }
.dy-stage-pc{ align-items:stretch; height:100%; }
.dy-stage-pc .dy-browser{ flex:1; min-height:600px; height:auto; }
.dy-stage-pc .dy-stage-tip{ text-align:center; }

/* ---------- 属性面板 ---------- */
.dy-props{ display:flex; flex-direction:column; }
.dy-props-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  padding:12px 12px 8px; border-bottom:1px solid #EFF2F6;
}
.dy-props-head b{ font-size:14px; color:#1F2429; display:block; }
.dy-props-sub{ font-size:11px; color:#94A3B8; display:block; margin-top:2px; }
.dy-props-ops{ display:flex; gap:3px; }
.dy-props-ops button{
  width:26px; height:26px; border-radius:6px; border:1px solid #E5E8EE; background:#fff;
  color:#64748B; cursor:pointer; font-size:12px; line-height:1;
}
.dy-props-ops button:hover{ border-color:#1B4B5A; color:#1B4B5A; }
.dy-props-ops button.danger:hover{ border-color:#B91C1C; color:#B91C1C; }
.dy-props-empty{ padding:16px 14px; font-size:12.5px; color:#64748B; line-height:1.8; }
.dy-props-empty b{ display:block; font-size:13.5px; color:#1F2429; margin-bottom:6px; }
.dy-props-empty p{ margin:0 0 8px; }
.dy-props-empty .dy-tip{ color:#94A3B8; font-size:11.5px; }

.dy-tabs{ display:flex; gap:6px; padding:10px 12px 0; }
.dy-tabs button{
  flex:1; height:30px; border-radius:7px; border:1px solid #E5E8EE; background:#fff;
  font-size:12.5px; color:#64748B; cursor:pointer;
}
.dy-tabs button.on{ background:#1B4B5A; border-color:#1B4B5A; color:#fff; font-weight:600; }
.dy-props-body{ padding:12px; display:flex; flex-direction:column; gap:14px; }
.dy-fsec-t{ font-size:11px; color:#94A3B8; margin-bottom:6px; letter-spacing:.04em; }
.dy-fld{ display:flex; flex-direction:column; gap:4px; margin-bottom:9px; }
.dy-fl{ font-size:12px; color:#475569; }
.dy-fl em{ font-style:normal; color:#B6BEC9; font-size:10.5px; margin-left:3px; }
/* 字段下面的灰色说明（schema 里的 hint）——图标名这类「不知道填什么」的输入尤其需要 */
.dy-fhint{ margin:2px 0 0; font-size:11px; line-height:1.55; color:#94A3B8; }
.dy-fc input[type=text], .dy-fc input[type=number], .dy-fc select, .dy-fc textarea{
  width:100%; border:1px solid #E5E8EE; border-radius:7px; padding:6px 9px;
  font-size:12.5px; color:#1F2429; outline:none; background:#fff; font-family:inherit;
}
.dy-fc input:focus, .dy-fc select:focus, .dy-fc textarea:focus{ border-color:#1B4B5A; }
.dy-fc textarea{ resize:vertical; line-height:1.6; }

/* 开关 */
.dy-sw{ display:inline-flex; cursor:pointer; }
.dy-sw input{ display:none; }
.dy-sw i{
  width:40px; height:22px; border-radius:999px; background:#E2E8F0; position:relative; transition:.18s;
}
.dy-sw i::after{
  content:''; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.2); transition:.18s;
}
.dy-sw input:checked + i{ background:#1B4B5A; }
.dy-sw input:checked + i::after{ left:20px; }

/* 颜色 */
.dy-color{ display:flex; gap:6px; align-items:center; }
.dy-color input[type=color]{
  width:32px; height:30px; padding:2px; border:1px solid #E5E8EE; border-radius:7px; background:#fff;
}
.dy-color input[type=text]{ flex:1; }
.dy-color button{
  height:28px; padding:0 8px; font-size:11.5px; border-radius:6px; cursor:pointer;
  border:1px solid #E5E8EE; background:#fff; color:#64748B;
}

/* 图片 */
.dy-img{ display:flex; gap:8px; align-items:flex-start; }
.dy-img input{ flex:1; }
.dy-img-pv{
  width:38px; height:38px; border-radius:7px; overflow:hidden; border:1px solid #E5E8EE; flex:0 0 38px;
  background:#F8FAFC;
}
.dy-img-pv img{ width:100%; height:100%; object-fit:cover; }

/* 链接 */
.dy-link2{ display:flex; gap:6px; }
.dy-link2 input{ flex:1; }
.dy-link2 .dy-btn{ flex:0 0 auto; }

/* 列表 */
.dy-list{ display:flex; flex-direction:column; gap:8px; }
.dy-li{ border:1px solid #EFF2F6; border-radius:9px; padding:8px; background:#FCFDFE; }
.dy-li-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dy-li-h b{ font-size:11.5px; color:#94A3B8; font-weight:500; }
.dy-li-ops{ display:flex; gap:2px; }
.dy-li-ops button{
  width:22px; height:22px; border-radius:5px; border:1px solid #E5E8EE; background:#fff;
  color:#94A3B8; cursor:pointer; font-size:11px; line-height:1;
}
.dy-li-ops button:hover{ border-color:#1B4B5A; color:#1B4B5A; }
.dy-li-ops button.danger:hover{ border-color:#B91C1C; color:#B91C1C; }
.dy-li .dy-fld:last-child{ margin-bottom:0; }
.dy-list-max{ font-size:11px; color:#B45309; text-align:center; padding:4px; }
.dy-hint{ font-size:11px; color:#94A3B8; margin-bottom:6px; line-height:1.6; }
.dy-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:6px; }
.dy-grid4 label{ font-size:10.5px; color:#94A3B8; display:flex; flex-direction:column; gap:3px; }
.dy-grid4 input{ width:100%; border:1px solid #E5E8EE; border-radius:6px; padding:4px 6px; font-size:12px; }

/* 已选 chips */
.dy-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.dy-chips span{
  font-size:11px; color:#475569; background:#F1F5F9; border-radius:5px; padding:1px 7px;
}
.dy-pick{ display:flex; align-items:center; gap:8px; }
.dy-pick-n{ font-size:11.5px; color:#94A3B8; }

/* 多选分类 */
.dy-cats{ display:flex; flex-wrap:wrap; gap:6px; }
.dy-chk{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#475569;
  border:1px solid #E5E8EE; border-radius:7px; padding:4px 9px; cursor:pointer;
}
.dy-chk input{ margin:0; }

/* ---------- 配置型页面表单 ---------- */
.dy-canvas.form-mode{ background:#fff; padding:0; }
.dy-form{ max-width:720px; margin:0 auto; padding:18px 20px 28px; }
.dy-form-h{ border-bottom:1px solid #EFF2F6; padding-bottom:12px; margin-bottom:16px; }
.dy-form-h b{ font-size:16px; color:#1F2429; }
.dy-form-h span{ display:block; font-size:12px; color:#94A3B8; margin-top:4px; }
.dy-form-b{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px; }
.dy-form-b .dy-fld{ margin-bottom:12px; }
.dy-form-b .dy-fld:has(.dy-list), .dy-form-b .dy-fld:has(textarea){ grid-column:1/-1; }
.dy-form-f{
  display:flex; align-items:center; gap:10px; margin-top:18px;
  border-top:1px solid #EFF2F6; padding-top:16px;
}
.dy-form-tip{ font-size:11.5px; color:#94A3B8; }

/* ---------- 弹窗 ---------- */
#dyModal{
  position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.dy-modal{ width:100%; max-width:720px; }
.dy-modal-in{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,42,.28); max-height:82vh; display:flex; flex-direction:column;
}
.dy-modal-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #EFF2F6;
}
.dy-modal-h b{ font-size:14px; color:#1F2429; }
.dy-modal-h button{
  width:28px; height:28px; border-radius:7px; border:1px solid #E5E8EE; background:#fff;
  cursor:pointer; color:#64748B;
}
.dy-modal-b{ padding:14px 16px; overflow:auto; }
.dy-modal-f{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-top:1px solid #EFF2F6; background:#FBFCFD;
}
.dy-pick-cnt{ margin-right:auto; font-size:12px; color:#64748B; }
.dy-pick-cnt b{ color:#1B4B5A; }

.dy-pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dy-pick-i{
  display:flex; gap:8px; align-items:center; padding:7px; border:1px solid #E5E8EE;
  border-radius:9px; cursor:pointer; font-size:12px; color:#475569;
}
.dy-pick-i.on{ border-color:#1B4B5A; background:#F3F9FA; }
.dy-pick-i img{ width:36px; height:36px; border-radius:6px; object-fit:cover; }
.dy-pick-i span{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dy-pick-i input{ margin:0; }

.dy-link-g{ margin-bottom:14px; }
.dy-link-gt{ font-size:11px; color:#94A3B8; margin-bottom:6px; }
.dy-link-i{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:7px 10px; border:1px solid #EFF2F6; border-radius:8px; background:#fff;
  font-size:12.5px; color:#334155; cursor:pointer; margin-bottom:4px;
}
.dy-link-i:hover{ border-color:#1B4B5A; color:#1B4B5A; background:#F6FAFB; }
.dy-link-i em{ font-style:normal; font-size:11px; color:#B6BEC9; margin-left:auto; }

/* 发布历史表：六列必须按固定宽度分，不能让它自由分配。
 *
 * 之前是 auto layout，「覆盖发布」四个字被挤成两行（覆盖发 / 布）、
 * 备注输入框被压到 60px 宽，placeholder「点此写备注」竖着排成一列 ——
 * 而 .dy-hist-note-in 上明明写了 min-width:120px，auto layout 下照样被压。
 * 改成 fixed + 逐列给宽：备注吃剩余，其余列按内容给够。 */
.dy-hist{ width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
.dy-hist th:nth-child(1){ width:76px; }   /* 版本 */
.dy-hist th:nth-child(3){ width:84px; }   /* 动作 */
.dy-hist th:nth-child(4){ width:88px; }   /* 操作人 */
.dy-hist th:nth-child(5){ width:142px; }  /* 时间 */
.dy-hist th:nth-child(6){ width:190px; }  /* 操作 */
.dy-hist th{
  text-align:left; font-weight:500; color:#94A3B8; padding:6px 8px;
  border-bottom:1px solid #EFF2F6; white-space:nowrap;
}
.dy-hist td{ padding:7px 8px; border-bottom:1px solid #F4F6F9; color:#334155; }
/* 动作 / 时间不让折行：一个是 4 个字的动作名，一个是定长日期串，折行只会更难读 */
.dy-hist td:nth-child(3), .dy-hist td:nth-child(5){ white-space:nowrap; }
.dy-cur{ font-size:11px; color:#0F766E; background:#E6F4F1; border-radius:5px; padding:1px 7px; }

/* ---------- 提示 ---------- */
.dy-toast{
  position:fixed; left:50%; top:76px; transform:translateX(-50%); z-index:10000;
  background:rgba(15,23,42,.9); color:#fff; font-size:13px; padding:9px 18px;
  border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.24);
}
.dy-toast.err{ background:#B91C1C; }
.dy-loading{ padding:60px; text-align:center; color:#94A3B8; font-size:13px; }
.dy-loading.dy-err{ color:#B91C1C; }
.dy-empty{ padding:26px; text-align:center; color:#94A3B8; font-size:12.5px; }

/* 拖动中的视觉反馈 */
.xd-diy .d-sec.dragging{ opacity:.4; }
.xd-diy .d-sec.drag-over::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; background:#1B4B5A; z-index:9;
}

/* ============================================================
 * 12.38 编辑器对齐 CRMEB：模块浮动工具条 / 多选勾选 / 顶栏按钮变体
 * ============================================================ */

/* 选中模块右侧竖排的五个按钮（隐藏·删除·复制·上移·下移） */
.dy-phone-body .d-sec-ops{
  /* 横排一行贴在组件右上角：竖排会占掉 40×100 的一整块，把轮播图/卡片右上角全挡住。
     横排只吃 24px 高，视觉上更像一条工具条而不是一块面板。 */
  position:absolute; top:2px; right:2px; z-index:12;
  display:flex; flex-direction:row; gap:1px;
  background:rgba(255,255,255,.96); border-radius:5px; padding:2px;
  box-shadow:0 3px 12px rgba(15,23,42,.2);
}
.dy-phone-body .d-sec-ops button{
  border:0; background:transparent; font-size:11px; color:var(--ink2,#5C5650);
  padding:3px 6px; border-radius:4px; cursor:pointer; white-space:nowrap; line-height:1.4;
  min-width:30px; text-align:center;
}
.dy-phone-body .d-sec-ops button:hover{ background:var(--main-soft,#F2EBDC); color:var(--main,#1B4B5A); }
.dy-phone-body .d-sec-ops button[data-act="delComp"]:hover{ background:#FDECEA; color:#C0392B; }
/* 选中态容器要允许工具条溢出，否则被圆角裁掉 */
.dy-phone-body .d-sec.sel{ overflow:visible; }

/* 多选勾选组 */
.dy-checks{ display:flex; flex-wrap:wrap; gap:6px; }
.dy-chk{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border:1px solid #E4DED4; border-radius:999px; font-size:12px; color:#5C5650;
  cursor:pointer; background:#fff; user-select:none;
}
.dy-chk input{ display:none; }
.dy-chk.on{ border-color:var(--main,#1B4B5A); background:#E8EFEF; color:var(--main,#1B4B5A); font-weight:600; }
/* 勾满上限后其余项置灰：让「勾不进去了」这件事发生在点击之前，而不是保存后没效果 */
.dy-chk.full{ opacity:.42; cursor:not-allowed; }

/* 顶栏按钮：返回 / 改名这种次要动作 */
.dy-btn.ghost{ background:transparent; border:1px solid #DED8D0; color:#5C5650; }
.dy-btn.xs{ padding:2px 7px; font-size:11px; border-radius:4px; }

/* 右栏「页面设置」的概况条 */
.dy-page-stat{ display:flex; gap:14px; font-size:12px; color:#6B655E; }
.dy-page-stat b{ color:#2A2724; font-size:14px; }

/* form 型页面的真机预览：直接嵌会员端页面，比画假预览可信 */
.dy-frame{ width:100%; height:600px; border:0; display:block; background:#fff; }

/* 右栏内容可滚动：form 型页面字段多（商品详情 25 项），不滚会溢出到画布外 */
.dy-props{ overflow:hidden; }
.dy-props-body{ overflow-y:auto; flex:1; min-height:0; }

/* ============================================================
 * 12.40 — 多端装修 + 独立窗口
 * ============================================================ */

/* ---------- 后台「页面装修」入口：四张端卡片 ---------- */
.diy-launch{ padding:6px 2px 20px; }
.diy-launch-h h3{ font-family:"Songti SC","SimSun",serif; font-size:20px; color:var(--main,#1B4B5A); margin-bottom:6px; }
.diy-launch-h p{ font-size:13px; color:#6B655E; max-width:760px; line-height:1.9; }
.diy-launch-h b{ color:#2A2724; }
.diy-launch-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 12px; }
@media (max-width:1180px){ .diy-launch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.diy-launch-card{
  text-align:left; background:#fff; border:1px solid #E5E8EE; border-radius:12px;
  padding:16px 16px 14px; cursor:pointer; display:flex; flex-direction:column; gap:5px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.diy-launch-card:hover{ border-color:var(--main,#1B4B5A); box-shadow:0 6px 20px rgba(27,75,90,.10); transform:translateY(-1px); }
.diy-launch-card .diy-lc-p{
  align-self:flex-start; font-size:11px; letter-spacing:.08em; padding:1px 8px; border-radius:999px;
  background:#E8EFEF; color:var(--main,#1B4B5A); margin-bottom:4px;
}
.diy-launch-card b{ font-size:15px; color:#2A2724; }
.diy-launch-card em{ font-style:normal; font-size:12px; color:#8C857C; line-height:1.7; }
.diy-launch-card i{ font-style:normal; font-size:12.5px; color:var(--main,#1B4B5A); font-weight:600; margin-top:6px; }
.diy-launch-tip{ font-size:12px; color:#9A938A; }

/* ---------- 编辑器：端切换器 ---------- */
.dy-plats{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:6px; }
.dy-plat{
  display:flex; align-items:center; gap:5px; padding:6px 8px; border-radius:8px;
  border:1px solid #E9ECF1; background:#fff; color:#5C5650; font-size:12.5px; cursor:pointer;
}
.dy-plat:hover{ border-color:var(--main,#1B4B5A); color:var(--main,#1B4B5A); }
.dy-plat.on{ background:var(--main,#1B4B5A); border-color:var(--main,#1B4B5A); color:#fff; font-weight:600; }
.dy-plat.on i, .dy-plat.on em{ color:rgba(255,255,255,.75); }
.dy-plat i{ display:inline-flex; font-size:14px; }
.dy-plat span{ flex:1; text-align:left; }
.dy-plat em{ font-style:normal; font-size:10px; color:#B08D3F; }
/* 切端等待的那几十毫秒：只在按钮上示弱，编辑区一动不动
   （以前是整块换成「正在切换到…」，看起来就是刷新了一次） */
.dy-plat.busy{ opacity:.55; pointer-events:none; }
.dy-plat.busy i{ animation:dyPlatPulse .9s ease-in-out infinite; }
@keyframes dyPlatPulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* ---------- 编辑器：跟随 / 已独立 提示条 ---------- */
.dy-note{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#FBF6EA; border:1px solid #EADFC4; border-radius:10px;
  padding:9px 14px; font-size:12.5px; color:#7A6431; line-height:1.7;
}
.dy-note.ok{ background:#F0F6F1; border-color:#CFE3D4; color:#3D6B4F; }
.dy-note.warn{ background:#FEF4E8; border-color:#F2D3A8; color:#9A5B12; }
.dy-note span{ flex:1; min-width:240px; }
.dy-note b{ color:inherit; }

/* ---------- 独立窗口：让三栏吃掉整个视口 ---------- */
#dyRoot .dy-canvas{ display:flex; }
#dyRoot .dy-stage{ width:100%; }
#dyRoot .dy-props-head{ position:sticky; top:0; z-index:3; background:#fff; }

/* ---------- 12.40 · 独立窗口看得更完整 ---------- */
/* 宽度可切（375 / 430 / 480），手机壳与内容高度跟着视口走，不再被 600px 截断 */
#dyRoot{ --dy-pw:430px; }
#dyRoot .dy-wrap{ align-items:stretch; }
#dyRoot .dy-phone{ width:var(--dy-pw,430px); transition:width .18s ease; }
#dyRoot .dy-phone-body{ max-height:calc(100vh - 250px); }
#dyRoot .dy-frame{ height:max(600px, calc(100vh - 290px)); }
#dyRoot .dy-canvas{ max-height:none; height:100%; }

/* 顶栏的预览宽度切换 */
.dy-zoom{ display:inline-flex; border:1px solid #E5E8EE; border-radius:8px; overflow:hidden; }
.dy-zoom button{
  border:0; border-right:1px solid #E5E8EE; background:#fff; color:#6B655E;
  font-size:11.5px; padding:0 9px; height:30px; cursor:pointer; line-height:1;
}
.dy-zoom button:last-child{ border-right:0; }
.dy-zoom button:hover{ background:#F6FAFB; color:var(--main,#1B4B5A); }
.dy-zoom button.on{ background:var(--main,#1B4B5A); color:#fff; font-weight:600; }

/* 沉浸预览：藏掉左右两栏，中间放大，只看装修效果 */
.dy-focus .dy-wrap{ grid-template-columns:1fr; }
.dy-focus .dy-side, .dy-focus .dy-props{ display:none; }
.dy-focus .dy-phone{ width:min(480px,92%); }
.dy-focus .dy-phone-body{ max-height:calc(100vh - 230px); }

/* ---------- 12.40 · 画布底部菜单预览（与 H5 / 小程序同一套样式语言） ---------- */
.dy-tb{
  --tb-color:#6B655E; --tb-on:#1B4B5A;
  display:flex; width:100%; background:#fff; border-top:1px solid #E7E2DA;
}
.dy-tb:empty{ display:none; }
.dy-tb-i{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 0 8px; font-size:10.5px; color:var(--tb-color); position:relative;
}
.dy-tb-i.on{ color:var(--tb-on); font-weight:600; }
.dy-tb-i .ic{ font-size:19px; line-height:1.1; display:flex; filter:grayscale(1); opacity:.55; }
.dy-tb-i.on .ic{ filter:none; opacity:1; }
.dy-tb-i .ic img{ width:24px; height:24px; object-fit:contain; }
.dy-tb-i .bdg{
  position:absolute; top:2px; right:calc(50% - 24px); background:#A6402C; color:#fff;
  font-size:9px; min-width:15px; height:15px; border-radius:8px; line-height:15px;
  text-align:center; padding:0 3px; font-weight:400;
}
/* 样式二：圆形图标底 */
.dy-tb.t2 .dy-tb-i .ic{
  width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center;
  background:#E8EFEF; font-size:17px; filter:none; opacity:.75;
}
.dy-tb.t2 .dy-tb-i.on .ic{ background:var(--tb-on); color:#fff; }
.dy-tb.t2 .dy-tb-i.on .ic svg{ stroke:#fff!important; }
/* 样式三：纯文字 */
.dy-tb.t3 .dy-tb-i{ padding:12px 0 13px; font-size:14px; }
/* 样式四：图片 + 文字（不做灰度，运营上传的图原样显示） */
.dy-tb.t4 .dy-tb-i .ic{ width:24px; height:24px; align-items:center; justify-content:center; filter:none; opacity:1; }
.dy-tb.t4 .dy-tb-i .ic svg{ filter:none; opacity:1; }

/* ============================================================
 * 12.41 — 头部设置 / 图片上传 / 画布真机化 / 专题页 / 按端历史
 * ============================================================ */

/* ---------- 手机壳：三段 flex，内容区自己滚，底部菜单永远完整 ----------
 * 旧版 .dy-phone-body 是 max-height:600px，组件一多就被截断（下面还露一截灰底），
 * 底部菜单挤在滚动区外只剩半条。现在整壳按视口定高，bar / 头部 / 菜单固定，
 * 中间 flex:1 可滚，和真机「顶栏 + 可滚内容 + 固定 tabbar」完全一致。
 *
 * 12.48：高度改成「跟着内容走」。以前是 height:min(780px, 视口-196px)，
 * 内容只有半屏时手机壳仍撑到 780px，body 被 flex 拉满 → 页面内容下面挂着一大片
 * 灰色空白，运营会以为「多渲染了一块」。现在 高度 auto + max-height 兜底：
 * 内容短 → 手机壳就短；内容长 → 到视口高度为止，中间照旧内部滚动。 */
.dy-phone{
  display:flex; flex-direction:column;
  height:auto; min-height:0; max-height:min(780px, calc(100vh - 196px));
}
.dy-phone-bar{ flex:none; }
.dy-phone-body{
  flex:1 1 auto; min-height:0; max-height:none; overflow:auto;
  background:var(--paper,#F7F5F1);
}
#dyRoot .dy-phone-body, .dy-focus .dy-phone-body{ max-height:none; }
#dyRoot .dy-phone{ height:auto; max-height:min(820px, calc(100vh - 176px)); }
/* 真机效果里是一整页 iframe（自带 100vh），壳必须给足高度，不能跟着内容缩 */
.dy-canvas.real-mode .dy-phone{ height:min(820px, calc(100vh - 176px)); max-height:none; }
#dyRoot .dy-canvas.real-mode .dy-phone{ height:min(820px, calc(100vh - 176px)); }
.dy-canvas.real-mode .dy-hd, .dy-canvas.real-mode .dy-tb{ display:none!important; }
.dy-tb{ flex:none; min-height:54px; align-items:stretch; }
.dy-tb-i{ min-width:0; cursor:pointer; justify-content:center; }
.dy-tb-i:hover{ background:rgba(27,75,90,.06); }
.dy-tb-i .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.dy-canvas.real-mode .dy-phone-body{ background:#fff; }

/* ---------- 真机效果：iframe 必须铺满手机壳，画布必须居中 ----------
 * 12.153。.dy-frame 的默认高度 600px 是给「form 型页面」的（那种页面手机壳
 * 高度跟着 iframe 走，600 正好）。真机效果反过来：手机壳定高 820，iframe 却
 * 只有 max(600px, 100vh-290px) —— 视口 900 时算出来 610，壳内可用 724，
 * 底部就挂着一条白色空块（就是运营截图问的「这个空的块是什么」）。
 *
 * 真机预览里 iframe 自己就是手机屏：高度 100%，滚动交给 iframe 内部，
 * 外层 body 不再滚（否则两层滚动条叠在一起）。 */
.dy-canvas.real-mode .dy-frame{ height:100%; }
#dyRoot .dy-canvas.real-mode .dy-frame{ height:100%; }
.dy-canvas.real-mode .dy-phone-body{ overflow:hidden; padding:0; }
/* 画布比手机壳高时，剩余空间平分到上下（居中预览），而不是全塌在底部一坨灰。
 * 用 safe center 而不是 center：内容比画布长时（首页十几个组件）必须退回顶部对齐，
 * 否则 flex 居中会把第一屏顶出去，滚到最上面也看不见页头。 */
.dy-canvas .dy-stage{ min-height:100%; justify-content:center; justify-content:safe center; }

/* ---------- 头部预览（与 m.html 的 .topbar.hd-diy 一一对应） ---------- */
.dy-hd{
  flex:none; padding:10px 14px; font-size:12px;
  background:var(--main,#1B4B5A); color:#fff;
}
.dy-hd.hide{ display:none; }
.dy-hd .hd-row{ display:flex; align-items:center; gap:8px; min-height:28px; }
.dy-hd .hd-brand{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; }
.dy-hd .hd-logo{ max-width:92px; max-height:28px; object-fit:contain; display:block; }
.dy-hd .hd-name{ font-family:"Songti SC","SimSun",serif; font-size:17px; white-space:nowrap; }
.dy-hd .hd-name small{ font-size:9.5px; opacity:.6; letter-spacing:1px; margin-left:5px; }
.dy-hd .hd-city{ display:flex; align-items:center; gap:2px; font-size:11px; opacity:.9; white-space:nowrap; }
.dy-hd .hd-act{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; opacity:.9; }
.dy-hd svg{ width:16px; height:16px; flex:none; }
.dy-hd-search{
  margin-top:9px; display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.16); padding:7px 12px; font-size:11.5px; opacity:.92;
}
.dy-hd-search svg{ width:14px; height:14px; }
.dy-hd-search span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- 图片字段：上传 / 素材库 ---------- */
.dy-img-row{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.dy-img-row input{ flex:1 1 130px; min-width:90px; }
.dy-img-row .dy-btn.xs{ flex:none; }
.dy-img-pv{ display:block; margin-top:6px; }
.dy-img-pv img{ max-width:100%; max-height:76px; border:1px solid #E9ECF1; border-radius:6px; object-fit:contain; background:#F7F8FA; }
.dy-img-mask{
  position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.dy-img-box{
  width:min(820px,94vw); max-height:86vh; display:flex; flex-direction:column;
  background:#fff; border-radius:14px; box-shadow:0 24px 64px rgba(15,23,42,.28); overflow:hidden;
}
.dy-img-hd{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #EFF2F6; }
.dy-img-hd b{ font-size:15px; color:#1F2429; }
.dy-img-hd span{ font-size:12px; color:#94A3B8; }
.dy-img-hd button{ border:0; background:none; font-size:18px; color:#94A3B8; cursor:pointer; }
.dy-img-bar{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-bottom:1px solid #EFF2F6; }
.dy-img-bar input{ max-width:230px; margin:0; }
.dy-img-grid{
  flex:1; overflow:auto; padding:16px 18px; min-height:240px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; align-content:start;
}
.dy-img-grid > .dy-loading, .dy-img-grid > .dy-img-pager{ grid-column:1/-1; }
.dy-img-card{
  border:1px solid #E9ECF1; border-radius:9px; overflow:hidden; cursor:pointer;
  background:#FAFBFC; transition:border-color .15s, transform .15s;
}
.dy-img-card:hover{ border-color:var(--main,#1B4B5A); transform:translateY(-1px); }
.dy-img-card img{ width:100%; height:82px; object-fit:contain; background:#fff; display:block; }
.dy-img-card span{ display:block; padding:5px 6px; font-size:11px; color:#5C5650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dy-img-pager{ display:flex; gap:8px; justify-content:center; padding:6px; }
.dy-img-ft{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid #EFF2F6; font-size:12px; color:#94A3B8; }

/* ---------- 图标字段：左侧实时预览 + 图标库弹窗 ---------- */
.dy-icof{ display:flex; gap:4px; align-items:center; }
.dy-icof input{ flex:1 1 auto; min-width:0; }
.dy-icof-pv{
  width:30px; height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:center;
  border:1px solid #E5E8EE; border-radius:7px; background:#F8FAFC;
  color:var(--main,#1B4B5A); font-size:17px; overflow:hidden;
}
.dy-icof-pv:empty::after{ content:'—'; color:#CBD5E1; font-size:12px; }
.dy-ico-box{ width:min(720px,94vw); }
.dy-ico-grid{
  flex:1; overflow:auto; padding:14px 18px; min-height:260px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; align-content:start;
}
.dy-ico-grid > .dy-loading{ grid-column:1/-1; }
.dy-ico-cell{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 4px 7px;
  border:1px solid #E9ECF1; border-radius:9px; background:#FAFBFC; cursor:pointer;
  font-size:21px; color:#3C4650; font-family:inherit;
  transition:border-color .15s, transform .15s, color .15s, background .15s;
}
.dy-ico-cell:hover{ border-color:var(--main,#1B4B5A); color:var(--main,#1B4B5A); background:#fff; transform:translateY(-1px); }
.dy-ico-cell em{
  font-style:normal; font-size:10px; color:#94A3B8; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- 发布历史：端标识 ---------- */
.dy-plat-tag{
  display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600;
  background:#E8EFEF; color:var(--main,#1B4B5A); white-space:nowrap;
}
.dy-hist-note{
  background:#F6FAFB; border:1px solid #DFEAEA; border-radius:8px;
  padding:9px 12px; font-size:12px; color:#55707A; line-height:1.75; margin-bottom:10px;
}
.dy-hist-note b{ color:var(--main,#1B4B5A); }

/* ---------- 专题页清单 ----------
 * 页面列表改成两列网格后，「打开」按钮不能再挤在旁边占走格子宽度，
 * 改成卡片右上角的角标：整卡可点切页，右上角单独可点开前台。 */
.dy-page-row{ display:block; position:relative; }
.dy-page-row .dy-page{ padding-right:28px; }
.dy-page-open{
  position:absolute; top:5px; right:5px; width:20px; height:20px; padding:0;
  border:1px solid #E5E8EE; border-radius:6px; background:#fff;
  color:var(--main,#1B4B5A); cursor:pointer; font-size:12px; line-height:1; opacity:.7;
}
.dy-page-open:hover{ opacity:1; background:#F0F6F7; border-color:var(--main,#1B4B5A); }

/* ---------- 点底部菜单项 → 右侧对应表单高亮 ---------- */
.dy-li.flash{ box-shadow:0 0 0 2px #B08D3F; border-color:#B08D3F; }
.dy-li{ transition:box-shadow .2s ease, border-color .2s ease; }

/* ---------- 内容来源（12.47）：左侧栏「显示哪个端的内容」---------- */
.dy-bind{ display:flex; flex-direction:column; gap:6px; padding:0 2px 4px; }
.dy-bind-sel{
  width:100%; height:30px; border:1px solid #E2E8F0; border-radius:7px; background:#fff;
  font-size:12px; color:#334155; padding:0 8px; outline:none;
}
.dy-bind-sel:focus{ border-color:var(--main,#1B4B5A); box-shadow:0 0 0 2px rgba(27,75,90,.08); }
.dy-bind-tip{ font-size:11px; color:#94A3B8; line-height:1.6; margin:0; }
.dy-bind-link{
  border:0; background:none; padding:0; margin-left:2px; cursor:pointer;
  color:var(--main,#1B4B5A); font-size:11px; text-decoration:underline;
}

/* 引用态：画布只读（选中的组件也点不动，避免改了存不进去） */
.dy-phone-body.locked{ position:relative; }
.dy-phone-body.locked #dyPv{ pointer-events:none; }
.dy-phone-body.locked::after{
  content:'内容来自其它端 · 只读'; position:absolute; left:10px; top:8px; z-index:5;
  font-size:10.5px; color:#7C6224; background:#FBF3DF; border:1px solid #EFDBB0;
  border-radius:6px; padding:2px 8px; letter-spacing:.02em;
}

/* ---------- 发布历史：备注可编辑 + 三连操作 ---------- */
.dy-hist tr.on{ background:#F7FBFA; }
.dy-hist-note-in{
  width:100%; min-width:120px; height:26px; border:1px solid transparent; border-radius:6px;
  background:transparent; font-size:12px; color:#334155; padding:0 6px; outline:none;
}
.dy-hist-note-in:hover{ border-color:#E2E8F0; background:#fff; }
.dy-hist-note-in:focus{ border-color:var(--main,#1B4B5A); background:#fff; box-shadow:0 0 0 2px rgba(27,75,90,.08); }
.dy-hist-ops{ white-space:nowrap; }
.dy-hist-ops .dy-btn.sm{ padding:3px 8px; font-size:11.5px; margin-right:4px; }
.dy-btn.sm.danger{ color:#B91C1C; border-color:#F1C9C9; }
.dy-btn.sm.danger:hover{ background:#FDF2F2; border-color:#B91C1C; }

/* 顶栏当前版本号 + 版本备注（v8 · 春节版） */
.dy-ver{
  font-size:11.5px; color:#7C6224; background:#FBF3DF; border:1px solid #EFDBB0;
  border-radius:999px; padding:2px 9px; max-width:240px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- 发布方式：新版本 / 覆盖原版本 ----------
 * 两张整卡可点，选中态左侧一条主色竖线 + 浅底，比单行 radio 更容易看清
 * 「我现在要发第几版」——这个选择会直接改线上版本号，误点代价不小。 */
.dy-pub-modes{ display:flex; flex-direction:column; gap:8px; }
.dy-pub-mode{
  display:block; position:relative; padding:10px 12px 10px 34px; cursor:pointer;
  border:1px solid #E5E8EE; border-radius:10px; background:#fff;
  font-size:12px; color:#64748B; line-height:1.55;
}
.dy-pub-mode input{ position:absolute; left:12px; top:13px; margin:0; accent-color:var(--main,#1B4B5A); }
.dy-pub-mode b{ display:block; font-size:13px; color:#334155; margin-bottom:2px; }
.dy-pub-mode em{ font-style:normal; color:#B45309; }
.dy-pub-mode:hover{ border-color:#CBD5E1; }
.dy-pub-mode.on{
  border-color:var(--main,#1B4B5A); background:#F6FAFB;
  box-shadow:inset 3px 0 0 var(--main,#1B4B5A);
}
.dy-pub-mode.on b{ color:var(--main,#1B4B5A); }

/* ============================================================
 * 12.49 — 开关网格 / 改名弹窗 / 开屏预览 / 站点入口
 * ============================================================ */

/* 连续的一串开关排成网格：面板 304px 时是两列，拉宽自动三列。
 * 以前一个开关占一整行（53px 高），商品详情 15 个开关要滚两屏，中间全是空白。 */
.dy-swgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:6px 8px; margin:0 0 12px;
}
.dy-swcell{
  display:flex; align-items:center; gap:7px; min-width:0;
  padding:7px 9px; border:1px solid #E7EAEF; border-radius:8px; background:#FBFCFD;
  transition:border-color .15s, background .15s;
}
.dy-swcell:hover{ border-color:#CFD8E3; background:#fff; }
.dy-swcell .dy-fl{
  flex:1 1 auto; min-width:0; margin:0; font-size:12px; line-height:1.3;
  color:#3F4A5A; white-space:normal; word-break:break-word;
}
.dy-swcell .dy-sw{ flex:0 0 auto; }
.dy-swcell .dy-sw i{ width:34px; height:19px; }
.dy-swcell .dy-sw i::after{ width:15px; height:15px; }
.dy-swcell .dy-sw input:checked + i::after{ left:17px; }

/* 顶栏「改名」：原来是 .dy-btn.xs（2px 内边距 / 11px 字），夹在面包屑和版本号中间
 * 看着像一段没对齐的小字。做成一颗铅笔胶囊，跟旁边的 vN 徽标同一高度。 */
.dy-rename{
  display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px;
  border:1px solid #E2DCD2; border-radius:999px; background:#fff;
  color:#7A7368; font-size:11.5px; line-height:1; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.dy-rename:hover{ border-color:#C9A227; color:#8A6A1F; background:#FDF9EF; }
.dy-rename-i{ font-size:11px; line-height:1; }

/* 改名弹窗的输入框（比通用输入框大一号，改名是要看清内容再改的动作） */
.dy-name-in{
  width:100%; border:1px solid #E5E8EE; border-radius:8px; padding:9px 11px;
  font-size:13px; color:#1F2429; outline:none; font-family:inherit; background:#fff;
}
.dy-name-in:focus{ border-color:#1B4B5A; box-shadow:0 0 0 3px rgba(27,75,90,.08); }
.dy-modal-b .dy-fl{ display:block; margin-bottom:6px; }

/* ---------- 开屏广告预览（编辑器自己画，不依赖 iframe） ---------- */
.dy-phone-splash .dy-phone-body{
  position:relative; background:#141110;
  /* 开屏是「一整屏」：没有内容撑高度时（还没传图）不能让手机壳塌成一条线 */
  height:min(640px, calc(100vh - 210px)); min-height:460px; flex:0 0 auto;
}
.dy-splash-pv{
  position:absolute; inset:0; background:#141110; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.dy-splash-pv img{ width:100%; height:100%; display:block; }
.dy-sp-skip{
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(0,0,0,.42); color:#fff; font-size:12px; line-height:1;
  padding:7px 12px; border-radius:999px;
}
.dy-sp-skip b{ font-weight:600; margin-left:1px; }
.dy-sp-empty{ color:#9AA3AE; font-size:13px; text-align:center; line-height:2; padding:0 24px; }
.dy-sp-empty small{ display:block; font-size:11.5px; color:#6B7280; }
.dy-splash-pv.off img{ opacity:.5; filter:grayscale(.35); }
.dy-sp-off{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:6px 14px; border-radius:999px;
}
.dy-sp-dots{
  position:absolute; right:12px; bottom:14px; color:rgba(255,255,255,.7); font-size:11px;
}

/* ---------- 站点入口：三张端卡片，当前选中的那张高亮 ---------- */
.dy-stage-entry{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 18px; }
.dy-entry-pv{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:640px; }
.dy-entry-card{
  position:relative; border:1.5px solid #E5E8EE; border-radius:12px;
  padding:18px 14px; background:#fff; transition:.15s;
}
.dy-entry-card b{ display:block; font-size:14px; color:#1F2429; }
.dy-entry-card em{ display:block; font-style:normal; font-size:11.5px; color:#7C8798; margin-top:4px; word-break:break-all; }
.dy-entry-card span{ display:block; font-size:11.5px; color:#94A3B8; margin-top:10px; line-height:1.55; }
.dy-entry-card.on{ border-color:#1B4B5A; background:#F4F9FA; box-shadow:0 6px 18px rgba(27,75,90,.12); }
.dy-entry-card i{
  position:absolute; top:-9px; right:10px; background:#1B4B5A; color:#fff;
  font-style:normal; font-size:10.5px; padding:2px 8px; border-radius:999px;
}
.dy-entry-tip{ font-size:12px; color:#7C8798; max-width:640px; text-align:center; line-height:1.75; margin:0; }
.dy-entry-tip code{ background:#F1F4F8; border-radius:4px; padding:0 4px; }

/* ---------- 通用确认弹窗：替掉原生 confirm()（原生框在独立窗口会被拦） ---------- */
.dy-cf-msg{ font-size:13px; line-height:1.75; color:#3D4753; white-space:pre-line; word-break:break-word; }
.dy-cf-msg.danger{ color:#B91C1C; }
/* 「删除 / 覆盖 / 丢弃」这类不可逆动作：红底白字，与普通「确定」一眼分开 */
.dy-btn.danger-solid{ background:#B91C1C; border-color:#B91C1C; color:#fff; }
.dy-btn.danger-solid:hover{ background:#991B1B; border-color:#991B1B; color:#fff; }
#dyModal .dy-cf-msg + .dy-tip{ margin-top:8px; font-size:11.5px; color:#7C8798; line-height:1.65; }