/* ============================================================
 * 排版整改 切片 I4 —— 剧本中心强化（script.html）
 * 多格式导入 / 自动拆镜预览 / 版本列表 / 导出
 * 颜色全部复用既有浅蓝白体系（#38BDF8 / #1d2129 / #f5f7fa）
 * 异常行黄底=浅琥珀 #FFF7DB（非深色）；零深色引入
 * ============================================================ */

/* ---------- 区块标题行 ---------- */
.i4-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.i4-sec-t{font-size:16px;font-weight:700;color:#1d2129;display:flex;align-items:center;gap:8px}
.i4-sec-t .i4-dot{width:8px;height:8px;border-radius:50%;background:#38BDF8;flex:none}
.i4-sec-ops{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.i4-hint{font-size:12px;color:#606266;line-height:1.6}

/* ---------- 拖拽导入区 ---------- */
.i4-drop{
  border:2px dashed #B9D2EE;border-radius:12px;background:#ffffff;
  padding:26px 18px;text-align:center;cursor:pointer;transition:all .18s;
}
.i4-drop:hover{border-color:#38BDF8;background:#F2F8FF}
.i4-drop.i4-drag{border-color:#38BDF8;background:#e6f4ff;box-shadow:0 0 0 4px rgba(56,189,248,.15)}
.i4-drop-ic{font-size:24px;line-height:1;margin-bottom:8px;color:#38BDF8}
.i4-drop-b{font-size:16px;font-weight:600;color:#1d2129}
.i4-drop-s{font-size:13px;color:#606266;margin-top:6px}
.i4-fmt{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.i4-fmt span{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;background:#e6f4ff;color:#1d2129;border:1px solid #f5f7fa}
.i4-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.i4-row .v10-inp{flex:1;min-width:180px}
.i4-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:#606266;margin-top:10px}
.i4-meta b{color:#1d2129}

/* ---------- 拆镜预览表格 ---------- */
.i4-tbl-wrap{overflow-x:auto;border:1px solid #f5f7fa;border-radius:12px;margin-top:12px}
.i4-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:860px;background:#fff}
.i4-tbl th{
  background:#ffffff;color:#1d2129;font-weight:600;text-align:left;
  padding:9px 10px;border-bottom:1px solid #f5f7fa;white-space:nowrap;font-size:13px;
}
.i4-tbl td{padding:6px 8px;border-bottom:1px solid #e6f4ff;vertical-align:top}
.i4-tbl tr:last-child td{border-bottom:none}
.i4-tbl td.i4-c-inp input,.i4-tbl td.i4-c-inp textarea{
  width:100%;border:1px solid transparent;border-radius:8px;background:transparent;
  padding:5px 7px;font-size:13px;font-family:inherit;color:#1d2129;outline:none;resize:vertical;min-height:30px;
}
.i4-tbl td.i4-c-inp input:focus,.i4-tbl td.i4-c-inp textarea:focus{
  border-color:#38BDF8;background:#ffffff;box-shadow:0 0 0 3px rgba(56,189,248,.13);
}
.i4-tbl td.i4-c-audio input{min-width:150px}
.i4-idx{font-weight:700;color:#1d2129;white-space:nowrap}
.i4-scene-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#e6f4ff;color:#1d2129;white-space:nowrap}
.i4-num{width:64px}
.i4-del{
  border:0;background:transparent;color:#f53f3f;cursor:pointer;font-size:14px;
  padding:4px 6px;border-radius:8px;line-height:1;
}
.i4-del:hover{background:#ffece8}

/* 异常行：浅琥珀黄底 + ⚠（复用 58 规范：黄底+图标+小字） */
.i4-tbl tr.i4-warn td{background:#FFF7DB}
.i4-tbl tr.i4-warn td:first-child{border-left:3px solid #E0C26A}
.i4-warn-ico{color:#9A7B1E;margin-right:4px;font-size:12px}
.i4-warn-line{display:block;font-size:12px;color:#9A7B1E;margin-top:3px}
.i4-ok-ico{color:#4C9A6E;margin-right:4px;font-size:12px}

/* 统计条 */
.i4-stat{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;color:#606266;margin-top:10px}
.i4-stat b{color:#1d2129;font-size:16px}
.i4-stat .i4-badge-warn{background:#FFF7DB;color:#8F7416;border:1px solid #E7CE7E;border-radius:999px;padding:2px 10px;font-size:12px}
.i4-stat .i4-badge-ok{background:#E9F5EE;color:#2E7D46;border:1px solid #BFE0CD;border-radius:999px;padding:2px 10px;font-size:12px}

/* ---------- 空态引导 ---------- */
.i4-empty{
  border:1.5px dashed #C4DAF2;border-radius:12px;background:#ffffff;
  padding:44px 20px;text-align:center;
}
.i4-empty-ic{font-size:34px;margin-bottom:10px}
.i4-empty-t{font-size:16px;font-weight:700;color:#1d2129;margin-bottom:6px}
.i4-empty-s{font-size:13px;color:#606266;margin-bottom:16px;line-height:1.7}

/* 骨架屏（浅灰蓝呼吸块） */
.i4-skel{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.i4-skel .i4-sk{
  height:38px;border-radius:12px;background:linear-gradient(90deg,#e6f4ff 25%,#F7FAFE 50%,#e6f4ff 75%);
  background-size:200% 100%;animation:i4sk 1.3s infinite;
}
@keyframes i4sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- 版本列表 ---------- */
.i4-ver{border:1px solid #f5f7fa;border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.i4-ver-main{flex:1;min-width:200px}
.i4-ver-name{font-weight:600;color:#1d2129;font-size:14px}
.i4-ver-meta{font-size:12px;color:#606266;margin-top:3px}
.i4-ver-ops{display:flex;gap:6px;flex-wrap:wrap}
.i4-ver .v10-btn{padding:6px 12px;font-size:13px}

/* 对比弹窗 */
.i4-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.i4-cmp-col{border:1px solid #f5f7fa;border-radius:12px;overflow:hidden}
.i4-cmp-head{padding:8px 12px;font-size:13px;font-weight:600;background:#ffffff;color:#1d2129}
.i4-cmp-row{padding:7px 12px;font-size:13px;border-top:1px solid #e6f4ff;color:#1d2129;line-height:1.5}
.i4-cmp-row.i4-c-add{background:#E9F5EE}
.i4-cmp-row.i4-c-del{background:#ffece8}
.i4-cmp-row.i4c-mod{background:#FFF7DB}
.i4-cmp-empty{padding:14px;text-align:center;color:#606266;font-size:13px}
@media (max-width:760px){.i4-cmp{grid-template-columns:1fr}}

/* 追加行按钮 */
.i4-add-row{
  margin-top:10px;border:1.5px dashed #B9D2EE;background:#ffffff;color:#1d2129;
  border-radius:12px;padding:9px;width:100%;cursor:pointer;font-size:13px;font-weight:600;
}
.i4-add-row:hover{background:#f7f9fc}

/* toast（本页轻量提示，复用 v10 视觉） */
.i4-toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  background:#1d2129;color:#fff;border-radius:12px;padding:10px 18px;font-size:14px;
  box-shadow:0 10px 30px rgba(30,42,58,.28);z-index:200;opacity:0;transition:opacity .2s;pointer-events:none;
}
.i4-toast.i4-show{opacity:.96}
.i4-toast.i4-err{background:#B45050}
.i4-toast.i4-ok{background:#2E7D46}