/* 批量导入增强版 · 沿用后台白底卡片风格；不污染其它页面 */
#qi-root {
  position: fixed; inset: 0 0 0 232px; z-index: 9000;
  background: #f1f5f9; overflow: auto; font-family: inherit; color: #1e293b;
}
@media (max-width: 900px) { #qi-root { left: 0; } }
/* 四段式全局弹窗始终在最上层 */
.qc-mask { z-index: 10001 !important; }

.qi-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px 40px; }
.qi-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border-bottom: 1px solid #e2e8f0; padding: 18px 28px; margin: 0 -28px 20px;
}
.qi-head-l { display: flex; align-items: center; gap: 14px; color: #2563eb; }
.qi-head-l h1 { font-size: 19px; font-weight: 600; color: #1e293b; margin: 0 0 4px; line-height: 1.4; }
.qi-head-l p { font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.5; }
.qi-head-r { display: flex; gap: 8px; }
.qi-body { display: flex; flex-direction: column; gap: 16px; }

.qi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px 20px; }
.qi-tabs { display: flex; gap: 6px; border-bottom: 1px solid #e2e8f0; margin: -4px 0 16px; flex-wrap: wrap; }
.qi-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: #64748b; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.qi-tab:hover { color: #2563eb; }
.qi-tab.on { color: #2563eb; border-bottom-color: #2563eb; }
.qi-pane { min-height: 92px; }
.qi-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.qi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #475569;
  font-size: 13.5px; font-weight: 500; line-height: 1.4; cursor: pointer; text-decoration: none; font-family: inherit;
  transition: all .15s;
}
.qi-btn:hover { border-color: #2563eb; color: #2563eb; }
.qi-btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.qi-btn.primary:hover { background: #1d4ed8; color: #fff; }
.qi-btn.ghost { background: #f8fafc; }
.qi-btn:disabled { opacity: .5; cursor: not-allowed; }
.qi-file {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px;
  border: 1px dashed #94a3b8; color: #2563eb; background: #f8fafc; font-size: 13.5px; cursor: pointer;
  max-width: 380px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.qi-file:hover { border-color: #2563eb; background: #eff6ff; }
.qi-file span { overflow: hidden; text-overflow: ellipsis; }
.qi-hint { font-size: 12.5px; color: #94a3b8; }
.qi-tip {
  margin-top: 12px; padding: 10px 12px; background: #f8fafc; border: 1px solid #eef2f7;
  border-radius: 8px; font-size: 12.5px; line-height: 1.8; color: #64748b;
}
.qi-text {
  width: 100%; box-sizing: border-box; min-height: 168px; resize: vertical; padding: 12px 14px;
  border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13.5px; line-height: 1.7; color: #1e293b;
  font-family: inherit; margin-bottom: 12px;
}
.qi-text:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

.qi-preview { padding: 0; overflow: hidden; }
.qi-pv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid #e2e8f0;
}
.qi-sum { font-size: 13.5px; color: #475569; line-height: 1.9; }
.qi-sum b { color: #1e293b; font-weight: 600; }
.qi-warn { color: #dc2626; }
.qi-chip {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: #eff6ff; color: #2563eb; font-size: 12px;
}
.qi-pv-ops { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qi-inline, .qi-check { font-size: 12.5px; color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.qi-inline input {
  padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 7px; font-size: 12.5px;
  color: #1e293b; font-family: inherit; width: 170px;
}
.qi-check input { accent-color: #2563eb; }

.qi-table-wrap { overflow-x: auto; }
.qi-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 940px; }
.qi-table th {
  text-align: left; padding: 10px 10px; background: #f8fafc; color: #64748b;
  font-weight: 600; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.qi-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.qi-table tr:hover td { background: #fafbfe; }
.qi-table .qi-c { text-align: center; width: 46px; color: #94a3b8; }
.qi-i {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; font-size: 12.5px; color: #1e293b; font-family: inherit;
}
.qi-i:hover { border-color: #e2e8f0; background: #fff; }
.qi-i:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 2px rgba(37, 99, 235, .1); }
select.qi-i { border-color: #e2e8f0; background: #fff; }
.qi-sub { margin-top: 3px; font-size: 11.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.qi-icon-btn {
  border: 0; background: transparent; color: #94a3b8; cursor: pointer; padding: 5px; border-radius: 6px; display: inline-flex;
}
.qi-icon-btn:hover { color: #dc2626; background: #fef2f2; }
.qi-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; font-size: 12.5px; color: #64748b; }
.qi-pager .qi-btn { padding: 5px 12px; font-size: 12.5px; }
.qi-empty { text-align: center; padding: 46px 20px; color: #94a3b8; }
.qi-empty p { font-size: 13px; margin: 10px 0 0; }
.qi-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid #e2e8f0; background: #fafbfe;
}
.qi-right { display: flex; align-items: center; gap: 12px; }
.qi-note { font-size: 12.5px; color: #64748b; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }