#xwKeywordCreateFlow[hidden] { display: none !important; }
#xwKeywordCreateFlow {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: auto;
  color: #13233d;
  background: #f5f8fc;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.xwkl-flow.xwkl-in-panel { position: absolute; }
.xwkl-flow * { box-sizing: border-box; }
.xwkl-flow button, .xwkl-flow input, .xwkl-flow textarea { font: inherit; }
.xwkl-flow-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 28px;
  border-bottom: 1px solid #dfe7f2;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
}
.xwkl-flow-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xwkl-back, .xwkl-secondary, .xwkl-primary {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid #d5dfec;
  background: #fff;
  color: #24344f;
  font-weight: 700;
  cursor: pointer;
}
.xwkl-back:hover, .xwkl-secondary:hover { border-color: #9ab9f5; color: #1759d1; }
.xwkl-primary { border-color: #2463eb; background: #2463eb; color: #fff; box-shadow: 0 8px 20px rgba(36,99,235,.18); }
.xwkl-primary:hover { background: #1d55d4; }
.xwkl-primary:disabled { opacity: .58; cursor: wait; }
.xwkl-flow-title { min-width: 0; }
.xwkl-flow-title strong { display: block; font-size: 18px; }
.xwkl-flow-title span { display: block; margin-top: 3px; color: #6b7c96; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwkl-flow-body { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 44px; }
.xwkl-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 20px;
  padding: 15px 20px;
  border: 1px solid #dfe7f2;
  border-radius: 13px;
  background: #fff;
}
.xwkl-step { position: relative; display: flex; align-items: center; gap: 10px; color: #8290a5; font-size: 13px; font-weight: 700; }
.xwkl-step:not(:last-child)::after { content: ""; position: absolute; left: 44px; right: 18px; bottom: -1px; height: 2px; background: #e7edf5; }
.xwkl-step b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef2f7; color: #65758c; }
.xwkl-step.active { color: #1659d7; }
.xwkl-step.active b, .xwkl-step.done b { background: #2463eb; color: #fff; }
.xwkl-step.done { color: #38506f; }
.xwkl-grid { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 18px; }
.xwkl-card { border: 1px solid #dfe7f2; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(31,55,88,.04); }
.xwkl-product { padding: 20px; align-self: start; }
.xwkl-product-main { display: flex; gap: 13px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #edf1f6; }
.xwkl-product-img { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; background: #f1f5fb; overflow: hidden; color: #3970da; font-weight: 800; }
.xwkl-product-img img { width: 100%; height: 100%; object-fit: contain; }
.xwkl-product-main strong { display: block; line-height: 1.45; }
.xwkl-product-main small { display: block; margin-top: 5px; color: #6f819b; }
.xwkl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.xwkl-fact { padding: 11px 12px; border-radius: 9px; background: #f7f9fc; }
.xwkl-fact span { display: block; color: #7a8ba3; font-size: 11px; }
.xwkl-fact strong { display: block; margin-top: 4px; font-size: 13px; }
.xwkl-note { margin-top: 15px; color: #64748b; font-size: 12px; line-height: 1.65; }
.xwkl-main-card { padding: 22px; }
.xwkl-main-card h2 { margin: 0; font-size: 19px; }
.xwkl-main-card > p { margin: 7px 0 20px; color: #6f819b; font-size: 13px; }
.xwkl-source { padding: 16px; border: 1px solid #e0e7f0; border-radius: 11px; background: #fbfcfe; }
.xwkl-source + .xwkl-source { margin-top: 12px; }
.xwkl-source-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.xwkl-source-head strong { font-size: 14px; }
.xwkl-source-head span { color: #75869d; font-size: 12px; }
.xwkl-auto { display: flex; align-items: center; gap: 9px; color: #27558e; font-size: 13px; }
.xwkl-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e5f5ec; color: #16834b; font-size: 12px; font-weight: 900; }
.xwkl-label { display: block; margin: 14px 0 7px; color: #40516b; font-size: 12px; font-weight: 700; }
.xwkl-input, .xwkl-textarea {
  width: 100%;
  border: 1px solid #ced9e7;
  border-radius: 9px;
  outline: 0;
  background: #fff;
  color: #17263e;
}
.xwkl-input { height: 40px; padding: 0 12px; }
.xwkl-textarea { min-height: 100px; padding: 11px 12px; resize: vertical; line-height: 1.65; }
.xwkl-input:focus, .xwkl-textarea:focus { border-color: #6090ed; box-shadow: 0 0 0 3px rgba(36,99,235,.09); }
.xwkl-drop { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px dashed #aebfd4; border-radius: 10px; background: #fff; }
.xwkl-drop span { color: #64748b; font-size: 12px; }
.xwkl-file-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.xwkl-file { padding: 6px 9px; border-radius: 7px; background: #edf3fd; color: #315d9c; font-size: 11px; }
.xwkl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #e8edf4; }
.xwkl-status { margin-right: auto; color: #62738b; font-size: 12px; }
.xwkl-status.error { color: #c03434; }
.xwkl-status.success { color: #16834b; }
.xwkl-editor .xwkl-textarea { min-height: 360px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.xwkl-tip { margin-top: 10px; padding: 11px 13px; border-radius: 8px; background: #edf5ff; color: #416a9c; font-size: 12px; line-height: 1.55; }
@media (max-width: 860px) {
  .xwkl-flow-body { width: min(100% - 24px, 1180px); }
  .xwkl-grid { grid-template-columns: 1fr; }
  .xwkl-flow-head { padding-inline: 14px; }
}

/* Keep recovery checkpoints internal on the keyword-library overview. */
.library-grid {
  grid-template-columns: minmax(200px,20%) clamp(55px,4.3vw,74px) clamp(90px,6.3vw,108px) clamp(110px,7.5vw,130px) clamp(100px,7vw,120px) clamp(88px,6vw,104px) clamp(64px,4.4vw,76px) clamp(68px,4.8vw,84px) !important;
}
.library-grid > :nth-child(4) { display: none !important; }
