/* Unified pagination style for Layui and custom pagers. */
.cxz-pagination,
.uc-pagination,
.je-pagination,
.txl-pagination,
#articlePage {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 18px 12px !important;
  min-height: 64px;
  text-align: center;
}

.cxz-pagination:empty,
.uc-pagination:empty,
.je-pagination:empty,
.txl-pagination:empty,
#articlePage:empty {
  display: none !important;
}

.layui-laypage {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 0 !important;
}

.layui-laypage a,
.layui-laypage span,
.txl-pagination .page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  box-shadow: none;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.layui-laypage a:hover,
.txl-pagination .page-btn:hover {
  border-color: var(--primary, #102b6a) !important;
  color: var(--primary, #102b6a) !important;
  background: #f7f9ff !important;
  box-shadow: 0 4px 10px rgba(16, 43, 106, 0.1);
}

.layui-laypage .layui-laypage-prev,
.layui-laypage .layui-laypage-next {
  min-width: 74px !important;
  width: auto !important;
  padding: 0 14px !important;
}

.layui-laypage .layui-laypage-count,
.layui-laypage .layui-laypage-limits {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

.layui-laypage .layui-laypage-limits select {
  width: auto !important;
  min-width: 78px !important;
  padding: 0 26px 0 10px !important;
}

.layui-laypage .layui-laypage-curr {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 34px !important;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 7px !important;
  background: var(--primary, #102b6a) !important;
  box-shadow: 0 6px 14px rgba(16, 43, 106, 0.22);
}

.layui-laypage .layui-laypage-curr em:last-child {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  text-align: center !important;
}

.layui-laypage .layui-laypage-spr {
  min-width: 28px !important;
  padding: 0 2px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: #98a2b3 !important;
  box-shadow: none !important;
}

.layui-laypage .layui-disabled,
.layui-laypage .layui-disabled:hover,
.txl-pagination .page-btn.disabled,
.txl-pagination .page-btn.disabled:hover {
  border-color: #edf0f5 !important;
  background: #f7f8fb !important;
  color: #b8c0cc !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.layui-laypage input,
.layui-laypage button,
.layui-laypage select {
  height: 34px !important;
  border-radius: 7px !important;
  border-color: #dfe5ef !important;
  font-size: 13px !important;
}

.layui-laypage button {
  padding: 0 14px !important;
  background: var(--primary, #102b6a) !important;
  color: #fff !important;
  border-color: var(--primary, #102b6a) !important;
  font-weight: 700 !important;
}

.txl-pagination .page-btn.active {
  border-color: var(--primary, #102b6a) !important;
  background: var(--primary, #102b6a) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(16, 43, 106, 0.22);
}

.cxz-status-hit {
  color: #27ae60;
  font-weight: 700;
}

.cxz-status-miss {
  color: #e74c3c;
  font-weight: 700;
}

.cxz-status-opened {
  color: var(--primary, #102b6a);
  font-weight: 700;
}

.cxz-status-pending {
  color: var(--orange, #f15a22);
  font-weight: 700;
}

.cxz-recommend-locked {
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}

.cxz-data-table th:nth-child(1),
.cxz-data-table th:nth-child(2),
.cxz-data-table th:nth-child(4),
.cxz-data-table th:nth-child(7),
.cxz-data-table th:nth-child(9),
.cxz-data-table td:nth-child(1),
.cxz-data-table td:nth-child(2),
.cxz-data-table td:nth-child(4),
.cxz-data-table td:nth-child(7),
.cxz-data-table td:nth-child(9) {
  white-space: nowrap;
}

.cxz-data-table td:nth-child(1),
.cxz-data-table td:nth-child(2) {
  word-break: keep-all;
}

.cxz-data-table td:nth-child(9) {
  min-width: 72px;
}

.cxz-data-table th:nth-child(4),
.cxz-data-table td:nth-child(4) {
  min-width: 190px;
}

.cxz-number-wrap {
  display: inline-flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 360px;
  padding: 2px 0;
  overflow: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 43, 106, 0.22) transparent;
  vertical-align: top;
}

button.cxz-number-wrap {
  min-height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.cxz-number-wrap--overflow {
  cursor: pointer;
}

.cxz-number-wrap--fit {
  cursor: default;
}

.cxz-number-wrap--overflow:hover .cxz-number-ball {
  border-color: rgba(16, 43, 106, 0.32);
  background: #fff8f4;
}

.cxz-number-wrap--recommend {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 280px;
  max-height: none;
  overflow: visible;
  white-space: nowrap;
}

.cxz-number-preview {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;
  gap: 5px;
}

.cxz-number-preview--short {
  display: none;
}

.cxz-number-wrap--fit {
  max-width: 280px;
}

.cxz-number-wrap--fit .cxz-number-preview {
  overflow: visible;
}

.cxz-number-wrap--fit .cxz-number-more {
  display: none;
}

.cxz-number-wrap--overflow .cxz-number-preview {
  max-width: none;
}

.cxz-number-wrap--overflow .cxz-number-preview--full {
  display: none;
}

.cxz-number-wrap--overflow .cxz-number-preview--short {
  display: inline-flex;
}

.cxz-number-wrap--recommend .cxz-number-group {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.cxz-number-wrap--recommend .cxz-number-group + .cxz-number-group::before,
.cxz-number-wrap--popup .cxz-number-group + .cxz-number-group::before {
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 2px;
  border-radius: 1px;
  background: #ffd5c6;
}

.cxz-number-wrap--open {
  max-width: none;
  max-height: none;
  overflow: visible;
}

.cxz-number-wrap--open-1 {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.cxz-number-wrap--open-1 .cxz-number-group {
  flex-wrap: nowrap;
}

.cxz-number-wrap--open-2 {
  width: 256px;
  max-width: 256px;
}

.cxz-number-wrap::-webkit-scrollbar {
  width: 4px;
}

.cxz-number-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(16, 43, 106, 0.22);
}

.cxz-number-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.cxz-data-table td .cxz-number-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin: 0 !important;
  border-radius: 50%;
  border: 1px solid rgba(241, 90, 34, 0.22);
  background: #fff4ef;
  box-shadow: none;
  color: var(--orange, #f15a22);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.cxz-data-table td .cxz-number-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(241, 90, 34, 0.22);
  border-radius: 999px;
  background: #fff4ef;
  color: var(--orange, #f15a22);
  font-size: 13px;
  font-weight: 700;
  line-height: 23px;
  white-space: nowrap;
}

.cxz-data-table td .cxz-number-wrap--open .cxz-number-ball {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.cxz-number-wrap--open .cxz-number-group {
  gap: 4px;
}

.cxz-data-table td .bule-q.cxz-number-ball {
  border-color: rgba(16, 43, 106, 0.22);
  background: #eef4ff;
  color: var(--primary, #102b6a);
}

.cxz-data-table td .cxz-number-ball--wrong {
  position: relative;
  border-color: rgba(231, 76, 60, 0.52);
  background: #fff;
  color: #e74c3c;
}

.cxz-data-table td .cxz-number-ball--wrong::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-24deg);
}

.cxz-number-count {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f3f6fb;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  line-height: 25px;
  white-space: nowrap;
}

.cxz-number-empty {
  color: var(--text-muted, #6b7280);
}

.cxz-number-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 25px;
  margin-left: 0;
  padding: 0 10px;
  border: 1px solid #dfe5ef;
  border-radius: 999px;
  background: #fff;
  color: var(--primary, #102b6a);
  font-size: 12px;
  font-weight: 700;
  line-height: 23px;
  cursor: pointer;
  vertical-align: middle;
}

.cxz-number-more:hover {
  border-color: var(--primary, #102b6a);
  background: #f7f9ff;
}

.cxz-data-table td .cxz-number-wrap--recommend .cxz-number-more {
  height: auto;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #409eff;
  font-size: 12px;
  font-weight: 700;
  line-height: inherit;
}

.cxz-data-table td .cxz-number-wrap--recommend:hover .cxz-number-more {
  border-color: transparent;
  background: transparent;
  color: #de2103;
}

.cxz-data-table td .cxz-number-wrap--recommend {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cxz-data-table td .cxz-number-wrap--recommend:hover {
  background: transparent;
  box-shadow: none;
}

.cxz-number-popup .recommend-number-text,
.cxz-number-popup .recommend-separator {
  color: #de2103;
}

.cxz-number-popup .recommend-number-hit {
  color: #de2103;
}

.cxz-number-popup .recommend-number-blue {
  color: #1c89f8;
}

.cxz-number-popup .recommend-number-missed {
  color: #999;
}

.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-text,
.cxz-data-table td .cxz-number-wrap--recommend .recommend-separator,
.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-hit,
.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-blue,
.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-missed,
.cxz-number-popup .recommend-number-text,
.cxz-number-popup .recommend-separator,
.cxz-number-popup .recommend-number-hit,
.cxz-number-popup .recommend-number-blue,
.cxz-number-popup .recommend-number-missed {
  font-weight: 700 !important;
}

.cxz-number-popup {
  padding: 20px 22px 22px;
  background: #fff;
}

.cxz-number-popup-title {
  margin-bottom: 14px;
  color: var(--primary, #102b6a);
  font-size: 16px;
  font-weight: 800;
}

.cxz-number-wrap--popup {
  max-width: none;
}

@media (max-width: 768px) {
  .cxz-pagination,
  .uc-pagination,
  .je-pagination,
  .txl-pagination,
  #articlePage {
    gap: 5px !important;
    padding: 14px 8px !important;
    min-height: 58px;
  }

  .layui-laypage {
    gap: 6px !important;
  }

  .layui-laypage a,
  .layui-laypage span,
  .txl-pagination .page-btn {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 30px !important;
  }

  .layui-laypage .layui-laypage-prev,
  .layui-laypage .layui-laypage-next {
    min-width: 66px !important;
    width: auto !important;
    padding: 0 10px !important;
  }

  .layui-laypage .layui-laypage-curr,
  .layui-laypage .layui-laypage-curr em:last-child {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
  }

  .cxz-number-wrap {
    max-width: 300px;
    gap: 4px;
  }

  .cxz-number-wrap--recommend {
    max-width: 238px;
  }

  .cxz-number-wrap--overflow .cxz-number-preview {
    max-width: none;
  }

  .cxz-number-wrap--open {
    max-width: none;
  }

  .cxz-number-wrap--open-2 {
    width: 246px;
    max-width: 246px;
  }

  .cxz-number-group {
    gap: 4px;
  }

  .cxz-data-table td .cxz-number-ball {
    width: 23px;
    height: 23px;
    font-size: 11px;
  }

  .cxz-data-table td .cxz-number-text {
    height: 23px;
    min-width: 38px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 21px;
  }
}