/* 魔剪 · 专用样式（不污染 admin.css 全站） */
.mj-layout { display: flex; flex-direction: column; gap: 12px; }
.mj-scope-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.mj-scope-tabs .mj-tab { flex: 0 0 auto; padding: 8px 16px; font-size: .875rem; }
.mj-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.mj-tab {
  text-align: center; padding: 12px 8px; border-radius: 10px; cursor: pointer;
  background: var(--bg-secondary); border: 2px solid var(--border-subtle, #E5E7EB);
  color: var(--text-secondary); box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mj-tab:hover {
  border-color: var(--color-purple, #7C3AED);
  background: var(--bg-tertiary);
  box-shadow: 0 4px 12px rgba(124,58,237,.12);
}
.mj-tab.active {
  background: linear-gradient(135deg, var(--color-purple, #7C3AED), #9333EA);
  border-color: var(--color-purple, #7C3AED);
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 16px rgba(124,58,237,.35);
}
.mj-tab .mj-tab-count { display: block; font-size: 1.25rem; color: inherit; margin-top: 4px; }
.mj-worker-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--bg-tertiary); border: 1px solid var(--border-subtle, #E5E7EB);
}
.mj-worker-bar .mj-search { margin-left: auto; min-width: 200px; }
.mj-settings-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 900px) { .mj-settings-grid { grid-template-columns: 1fr; } }
.mj-setting-card {
  padding: 14px; border-radius: 10px;
  background: var(--bg-tertiary); border: 1px solid var(--border-subtle, #E5E7EB);
}
.mj-setting-card label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: .875rem; }
.mj-setting-card input, .mj-setting-card select {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border-subtle, #E5E7EB); background: var(--bg-secondary);
  color: var(--text-primary);
}
.mj-setting-card input:focus, .mj-setting-card select:focus {
  outline: none; border-color: var(--color-purple, #7C3AED);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.mj-switch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mj-switch-card {
  flex: 1; min-width: 120px; padding: 10px; border-radius: 8px; text-align: center;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle, #E5E7EB);
}
#mojian-jobs { min-height: 880px; }
.mj-jobs-table { width: 100%; }
.mj-progress { height: 6px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.mj-progress-bar { height: 100%; background: var(--color-purple, #7C3AED); transition: width .3s; }
.mj-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; }
.mj-badge-pending { background: var(--bg-tertiary); color: var(--text-secondary); }
.mj-badge-running { background: rgba(124,58,237,.12); color: var(--color-purple, #7C3AED); }
.mj-badge-success { background: rgba(34,197,94,.12); color: var(--color-success, #16A34A); }
.mj-badge-danger { background: rgba(239,68,68,.1); color: var(--color-danger, #DC2626); }
.mj-phase-steps { display: flex; flex-wrap: wrap; gap: 4px; font-size: .75rem; color: var(--text-secondary); }
.mj-phase-step.active { color: var(--color-purple, #7C3AED); font-weight: 600; }
.mj-phase-step.done { color: var(--color-success, #16A34A); }
.mj-row-dim { opacity: .55; }
.mj-cloud-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mj-template-preview {
  background: var(--bg-tertiary); color: var(--text-primary);
  padding: 12px; border-radius: 8px; max-height: 240px; overflow: auto;
  font-family: ui-monospace, monospace; font-size: .8rem; white-space: pre-wrap;
}

/* ============================================================
   .mjx —— 云总台 + 剪辑机系统UI 的自带设计系统（严格对齐
   魔剪云总台-UI优化预览.html / 魔剪剪辑机-系统UI预览.html）。
   作用域隔离：所有样式只在 .mjx 内生效，不污染 admin 全站，
   且不依赖 admin 主题变量（自带 token，保证像素级还原）。
   ============================================================ */
.mjx {
  --bg-primary:#F5F7FA; --bg-secondary:#FFFFFF; --bg-tertiary:#EEF1F5;
  --text-primary:#1D2129; --text-secondary:#4B5563; --text-tertiary:#8C8C8C;
  --border-light:#E8E8E8; --border-lighter:#F0F0F0;
  --brand-primary:#0A84FF; --brand-secondary:#6C5CE7;
  --brand-gradient:linear-gradient(135deg,#0A84FF 0%,#6C5CE7 100%);
  --color-success:#00B67A; --color-success-bg:rgba(0,182,122,.08);
  --color-warning:#FFA940; --color-danger:#FF4D4F; --color-danger-bg:rgba(255,77,79,.08);
  --radius-md:10px; --radius-lg:14px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-card:0 2px 12px rgba(0,0,0,.06);
  display:flex; flex-direction:column; gap:18px; max-width:1180px;
  color:var(--text-primary); font-size:14px; line-height:1.5;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
.mjx *{ box-sizing:border-box; }

/* 页头 */
.mjx .head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mjx .head h1{ font-size:22px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px; }
.mjx .head .sub{ color:var(--text-secondary); font-size:13px; margin-top:6px; max-width:680px; }
.mjx .ro-badge{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border-light);
  padding:6px 12px; border-radius:var(--radius-full); font-size:12px; }
.mjx .ro-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-primary); }

/* 警告条 */
.mjx .alert{ display:flex; align-items:center; gap:12px; background:rgba(255,169,64,.1);
  border:1px solid rgba(255,169,64,.35); border-left:4px solid var(--color-warning);
  border-radius:var(--radius-md); padding:12px 16px; font-size:13px; }
.mjx .alert .ico{ font-size:18px; }
.mjx .alert b{ color:#B26A00; }

/* KPI 卡片栅格 */
.mjx .kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.mjx .kpi{ background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-lg);
  padding:16px; box-shadow:var(--shadow-card); }
.mjx .kpi .top{ display:flex; align-items:center; gap:8px; color:var(--text-tertiary); font-size:12px; }
.mjx .kpi .ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:14px; flex-shrink:0; }
.mjx .kpi .val{ font-size:28px; font-weight:700; margin-top:10px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.mjx .kpi .unit{ font-size:13px; color:var(--text-tertiary); font-weight:500; margin-left:2px; }
.mjx .kpi .foot{ font-size:11px; margin-top:8px; color:var(--text-tertiary); }
.mjx .kpi.warn{ border-color:rgba(255,77,79,.3); }
.mjx .kpi.warn .val{ color:var(--color-danger); }
.mjx .kpi .ic.g{ background:var(--color-success-bg); color:var(--color-success); }
.mjx .kpi .ic.b{ background:rgba(24,144,255,.08); color:var(--brand-primary); }
.mjx .kpi .ic.p{ background:rgba(108,92,231,.1); color:var(--brand-secondary); }
.mjx .kpi .ic.r{ background:var(--color-danger-bg); color:var(--color-danger); }
.mjx .pill{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--radius-full); }
.mjx .pill.red{ background:var(--color-danger-bg); color:var(--color-danger); }
.mjx .pill.green{ background:var(--color-success-bg); color:var(--color-success); }
.mjx .pill.amber{ background:rgba(255,169,64,.1); color:#B26A00; }
.mjx .trend{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; margin-top:8px; color:#BFBFBF; }
.mjx .trend .lab{ color:var(--text-tertiary); font-weight:400; }
.mjx .kpi-note{ font-size:12px; color:var(--text-tertiary); margin-top:-8px; }

/* 操作条 + 统一按钮 */
.mjx .actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mjx .actions .spacer{ margin-left:auto; }
.mjx .freshness{ font-size:12px; color:var(--text-tertiary); display:inline-flex; align-items:center; gap:6px; }
.mjx .btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--radius-md);
  font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:.15s; text-decoration:none; }
.mjx .btn.primary{ background:var(--brand-gradient); color:#fff; box-shadow:0 2px 8px rgba(10,132,255,.25); }
.mjx .btn.primary:hover{ filter:brightness(1.06); }
.mjx .btn.secondary{ background:#fff; color:var(--text-primary); border-color:var(--border-light); }
.mjx .btn.secondary:hover{ border-color:var(--brand-primary); color:var(--brand-primary); }
.mjx .btn.ghost{ background:transparent; color:var(--text-secondary); }
.mjx .btn.ghost:hover{ background:var(--bg-tertiary); }

/* 卡片容器 */
.mjx .card{ background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.mjx .card .hd{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border-lighter); flex-wrap:wrap; }
.mjx .card .hd .t{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.mjx .card .hd .cnt{ color:var(--text-tertiary); font-size:12px; }

/* 表格 */
.mjx table{ width:100%; border-collapse:collapse; font-size:13px; }
.mjx thead th{ text-align:left; color:var(--text-tertiary); font-weight:600; font-size:12px; padding:10px 18px; background:var(--bg-tertiary); white-space:nowrap; }
.mjx tbody td{ padding:13px 18px; border-bottom:1px solid var(--border-lighter); vertical-align:middle; }
.mjx tbody tr:last-child td{ border-bottom:none; }
.mjx tbody tr:hover{ background:#FAFBFC; }
.mjx .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.mjx .m-name{ font-weight:600; }
.mjx .m-id{ color:var(--text-tertiary); }
.mjx .st{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12px; }
.mjx .st .d{ width:8px; height:8px; border-radius:50%; }
.mjx .st.on{ color:var(--color-success); } .mjx .st.on .d{ background:var(--color-success); box-shadow:0 0 0 3px var(--color-success-bg); }
.mjx .st.off{ color:var(--text-tertiary); } .mjx .st.off .d{ background:#C9CDD4; }
.mjx .load{ display:flex; align-items:center; gap:8px; }
.mjx .bar{ width:60px; height:6px; background:var(--bg-tertiary); border-radius:99px; overflow:hidden; }
.mjx .bar i{ display:block; height:100%; background:var(--brand-gradient); border-radius:99px; }
.mjx .row-act{ display:flex; gap:8px; }
.mjx .mini{ padding:6px 13px; font-size:12px; border-radius:7px; border:1px solid var(--border-light);
  background:#fff; cursor:pointer; color:var(--text-secondary); text-decoration:none; display:inline-block; }
.mjx .mini.go{ border-color:transparent; background:var(--brand-gradient); color:#fff; }
.mjx .mini.warn{ color:var(--color-danger); border-color:rgba(255,77,79,.3); }
.mjx .legend{ padding:10px 18px; font-size:12px; color:var(--text-tertiary); background:#FCFCFD;
  border-top:1px solid var(--border-lighter); display:flex; gap:18px; flex-wrap:wrap; }

/* SSO 接入横幅（剪辑机系统UI） */
.mjx .sso{ display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,rgba(10,132,255,.07),rgba(108,92,231,.07));
  border:1px solid rgba(108,92,231,.25); border-radius:var(--radius-md); padding:12px 16px; font-size:13px; }
.mjx .sso .ic{ font-size:16px; }
.mjx .sso b{ color:var(--brand-secondary); }
.mjx .sso .back{ margin-left:auto; color:var(--brand-primary); text-decoration:none; font-weight:600; white-space:nowrap; cursor:pointer; }
.mjx .sso .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:#fff; padding:2px 7px; border-radius:6px; border:1px solid var(--border-light); }

/* Worker 状态条 */
.mjx .worker{ display:flex; align-items:center; gap:22px; background:#fff; border:1px solid var(--border-light);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:14px 20px; flex-wrap:wrap; }
.mjx .worker .it{ display:flex; flex-direction:column; gap:2px; }
.mjx .worker .it .k{ font-size:11px; color:var(--text-tertiary); }
.mjx .worker .it .v{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; }
.mjx .worker .sep{ width:1px; height:30px; background:var(--border-lighter); }
.mjx .dotg{ width:8px; height:8px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 3px var(--color-success-bg); }
.mjx .worker .right{ margin-left:auto; display:flex; gap:10px; }

/* Tab / 范围 / 搜索 */
.mjx .tabs{ display:flex; gap:8px; }
.mjx .tab{ display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; font-size:13px; cursor:pointer;
  background:var(--bg-secondary); border:1.5px solid var(--border-light); color:var(--text-secondary); }
.mjx .tab .c{ background:var(--bg-tertiary); color:var(--text-secondary); border-radius:99px; padding:0 7px; font-size:11px; font-weight:700; }
.mjx .tab.on{ background:var(--brand-gradient); border-color:transparent; color:#fff; font-weight:600; }
.mjx .tab.on .c{ background:rgba(255,255,255,.25); color:#fff; }
.mjx .search{ margin-left:auto; display:flex; align-items:center; gap:6px; background:var(--bg-tertiary);
  border-radius:8px; padding:7px 12px; color:var(--text-tertiary); font-size:13px; min-width:200px; }

/* 任务行 + 徽章 */
.mjx .fn{ font-weight:600; } .mjx .fn .meta{ font-weight:400; color:var(--text-tertiary); font-size:12px; margin-top:2px; }
.mjx .badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600; }
.mjx .badge.run{ background:rgba(108,92,231,.1); color:var(--brand-secondary); }
.mjx .badge.pend{ background:var(--bg-tertiary); color:var(--text-secondary); }
.mjx .badge.done{ background:var(--color-success-bg); color:var(--color-success); }
.mjx .badge.fail{ background:var(--color-danger-bg); color:var(--color-danger); }

/* 六阶段步骤条（魔剪招牌） */
.mjx .steps{ display:flex; align-items:center; }
.mjx .step{ display:flex; align-items:center; }
.mjx .step .n{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700;
  background:var(--bg-tertiary); color:var(--text-tertiary); border:1px solid var(--border-light); }
.mjx .step.done .n{ background:var(--color-success); color:#fff; border-color:transparent; }
.mjx .step.active .n{ background:var(--brand-gradient); color:#fff; border-color:transparent; box-shadow:0 0 0 3px rgba(108,92,231,.18); }
.mjx .step.fail .n{ background:var(--color-danger); color:#fff; border-color:transparent; }
.mjx .step .ln{ width:16px; height:2px; background:var(--border-light); }
.mjx .step.done .ln{ background:var(--color-success); }
.mjx .step .cap{ font-size:10px; color:var(--text-tertiary); margin-left:5px; white-space:nowrap; }
.mjx .step.active .cap{ color:var(--brand-secondary); font-weight:600; }
.mjx .prog{ height:6px; background:var(--bg-tertiary); border-radius:99px; overflow:hidden; margin-top:8px; width:180px; }
.mjx .prog i{ display:block; height:100%; background:var(--brand-gradient); }
.mjx .pct{ font-size:12px; color:var(--text-secondary); font-weight:600; margin-top:4px; }
.mjx .errtip{ font-size:11px; color:var(--color-danger); margin-top:4px; }

/* 设置卡 */
.mjx .setgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px; }
.mjx .field label{ display:block; font-size:12px; color:var(--text-tertiary); margin-bottom:6px; }
.mjx .field .inp{ width:100%; padding:9px 11px; border:1px solid var(--border-light); border-radius:8px;
  background:var(--bg-secondary); font-size:13px; color:var(--text-primary); }
.mjx .field .inp:focus{ outline:none; border-color:var(--brand-secondary); box-shadow:0 0 0 3px rgba(108,92,231,.15); }

@media (max-width:1080px){ .mjx .kpis{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1000px){ .mjx .setgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .mjx .kpis{ grid-template-columns:repeat(2,1fr); } }