/*
 * 十方任务中心独立样式
 * 只负责任务页，避免继续和全站历史样式互相覆盖。
 */

html::before {
  content: "SF_TASK_CENTER_v39_WHITE_STAGE_NUMBERS" !important;
}

#detailOverlay[data-page-layout="task"] {
  background: #050506 !important;
}

#detailOverlay[data-page-layout="task"] .generic-hero {
  display: none !important;
}

#detailOverlay[data-page-layout="task"] .detail-topbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 50 !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

#detailOverlay[data-page-layout="task"] .detail-topbar h1,
#detailOverlay[data-page-layout="task"] .detail-record-button {
  display: none !important;
}

#detailOverlay[data-page-layout="task"] .detail-back {
  position: absolute !important;
  top: 24px !important;
  left: 30px !important;
  z-index: 51 !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  padding: 0 0 3px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 50% !important;
  background: rgba(19, 18, 23, .58) !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  pointer-events: auto !important;
}

#detailOverlay[data-page-layout="task"] .detail-back:active {
  background: rgba(10, 10, 12, .82) !important;
  transform: scale(.96) !important;
}

#detailOverlay[data-page-layout="task"] .detail-page[data-detail="generic"] {
  inset: 0 !important;
  min-height: 100% !important;
  padding: env(safe-area-inset-top, 0) 0 calc(24px + env(safe-area-inset-bottom, 0)) !important;
  background:
    radial-gradient(circle at 74% 3%, rgba(94, 75, 112, .12), transparent 27%),
    #050506 !important;
  color: #fff !important;
}

#detailOverlay[data-page-layout="task"] #genericContent {
  min-height: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

#detailOverlay[data-page-layout="task"] #genericContent::before,
#detailOverlay[data-page-layout="task"] #genericContent::after {
  display: none !important;
  content: none !important;
}

#detailOverlay[data-page-layout="task"] .task-ticket-summary {
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: 76px !important;
  margin: 14px 20px 17px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 78% 40%, rgba(105, 73, 124, .23), transparent 43%),
    linear-gradient(145deg, #17151b 0%, #221a27 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
}

#detailOverlay[data-page-layout="task"] .task-host-pill {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 94px !important;
  height: 28px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .025) !important;
  color: rgba(255, 255, 255, .76) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .task-ticket-summary > strong {
  position: absolute !important;
  left: 18px !important;
  bottom: 16px !important;
  color: #ffbe00 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .task-ticket-summary > button {
  position: absolute !important;
  right: 17px !important;
  bottom: 11px !important;
  min-width: 82px !important;
  height: 36px !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(91, 71, 104, .66) !important;
  color: rgba(255, 255, 255, .54) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list.task-card-list {
  display: block !important;
  width: auto !important;
  margin: 0 20px !important;
  padding: 0 0 76px !important;
  background: transparent !important;
}

#detailOverlay[data-page-layout="task"] .sf-task-loading {
  min-height: 170px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, #171719, #28212c) !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 0 17px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, #171719 0, #19191b 42%, #29232d 42%, #251e29 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .03),
    0 1px 0 rgba(0, 0, 0, .28) !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card::before,
#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card::after {
  display: none !important;
  content: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .top_box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .left_box {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 46px 0 18px !important;
  gap: 12px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .pic {
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .pic img {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .pic b {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  color: #ffbd00 !important;
  font-size: 22px !important;
  font-style: normal !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .top {
  display: block !important;
  min-width: 0 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .title {
  display: block !important;
  max-width: 225px !important;
  height: 25px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 25px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .des {
  display: block !important;
  max-width: 230px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, .38) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_rule {
  position: absolute !important;
  top: 20px !important;
  right: 17px !important;
  width: 25px !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("./original/icon/规则.svg") center/25px 25px no-repeat !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_rule::before,
#detailOverlay[data-page-layout="task"] .jb-task-card .btn_rule::after {
  display: none !important;
  content: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .bottom_box {
  display: block !important;
  min-height: 36px !important;
  padding: 7px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, .025) !important;
  background: rgba(255, 255, 255, .018) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .task_list {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .45) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .task_list .item {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .checked_icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #777682 !important;
  color: #d7d7dc !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .checked_icon.active {
  background: #777682 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .txt {
  display: block !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, .42) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .u-line-progress {
  position: relative !important;
  display: block !important;
  flex: 0 0 48% !important;
  width: 48% !important;
  height: 20px !important;
  min-width: 0 !important;
  margin: 0 0 0 10px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(145, 139, 158, .25) !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .u-line-progress__background {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  border-radius: inherit !important;
  background: transparent !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .u-line-progress__line {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  min-width: 0 !important;
  border-radius: inherit !important;
  background: #e0aa12 !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .u-line-progress > span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: none !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card.is-progressless .task_list .item {
  flex: 0 1 auto !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 39px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .018) !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process.notShow {
  display: none !important;
  visibility: hidden !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .button_left,
#detailOverlay[data-page-layout="task"] .jb-task-card .button_right {
  position: relative !important;
  display: block !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(74, 68, 80, .70) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04) !important;
  transform: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .button_left::before,
#detailOverlay[data-page-layout="task"] .jb-task-card .button_right::before {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-top: 2px solid rgba(255, 255, 255, .82) !important;
  border-right: 2px solid rgba(255, 255, 255, .82) !important;
  content: "" !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .button_left::before {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .button_right::before {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .button_left::after,
#detailOverlay[data-page-layout="task"] .jb-task-card .button_right::after {
  display: none !important;
  content: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_list {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 39px !important;
  min-width: 0 !important;
  margin: 0 10px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  scrollbar-width: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_item:last-child {
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .circle {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f1b600 !important;
  color: #171719 !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .circle span,
#detailOverlay[data-page-layout="task"] .jb-task-card .circle text {
  display: block !important;
  line-height: 30px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_item.current .circle {
  background: #fff !important;
  color: #111 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_item.current .circle::after {
  position: absolute !important;
  left: 50% !important;
  bottom: -14px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 5px solid transparent !important;
  border-bottom: 6px solid #f1b600 !important;
  border-left: 5px solid transparent !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .line {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 2px !important;
  min-width: 8px !important;
  margin: 0 !important;
  border: 0 !important;
  background: #dca400 !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 41px !important;
  margin: 0 !important;
  padding: 4px 18px 0 !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .018) !important;
  box-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .circle1 {
  display: block !important;
  color: #ffbf00 !important;
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .btn {
  display: block !important;
  min-width: 82px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(91, 71, 104, .66) !important;
  color: rgba(255, 255, 255, .54) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 36px !important;
  text-align: center !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .btn.ready,
#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .btn.active {
  background: rgba(101, 79, 115, .82) !important;
  color: #fff !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card button:active {
  filter: brightness(.88) !important;
  transform: scale(.98) !important;
}

@media (max-width: 359px) {
  #detailOverlay[data-page-layout="task"] .royal-task-list.task-card-list {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }

  #detailOverlay[data-page-layout="task"] .task-ticket-summary {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }

  #detailOverlay[data-page-layout="task"] .jb-task-card .process {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  #detailOverlay[data-page-layout="task"] .jb-task-card .process_list {
    margin-right: 6px !important;
    margin-left: 6px !important;
  }
}

/*
 * v37：按参考页重新拆分材质层级。
 * 标题、说明、条件、奖励分别使用独立色阶，避免整张卡片“全部金色”。
 */
#detailOverlay[data-page-layout="task"],
#detailOverlay[data-page-layout="task"] button {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

#detailOverlay[data-page-layout="task"] .detail-page[data-detail="generic"] {
  background:
    radial-gradient(circle at 83% 2%, rgba(81, 54, 91, .11), transparent 25%),
    linear-gradient(180deg, #030304 0%, #050506 36%, #020203 100%) !important;
}

#detailOverlay[data-page-layout="task"] .task-ticket-summary {
  border: 1px solid rgba(255, 255, 255, .055) !important;
  background:
    radial-gradient(circle at 86% 35%, rgba(103, 72, 119, .25), transparent 42%),
    radial-gradient(circle at 15% 110%, rgba(56, 39, 66, .20), transparent 48%),
    linear-gradient(145deg, #17151b 0%, #211925 58%, #17121c 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    inset 0 -1px rgba(0,0,0,.30),
    0 9px 22px rgba(0,0,0,.18) !important;
}

#detailOverlay[data-page-layout="task"] .task-host-pill {
  border-color: rgba(255,255,255,.13) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  color: rgba(247,247,249,.76) !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

#detailOverlay[data-page-layout="task"] .task-ticket-summary > strong {
  color: #ffc314 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

#detailOverlay[data-page-layout="task"] .task-ticket-summary > button,
#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .btn {
  border: 1px solid rgba(255,255,255,.025) !important;
  color: rgba(241,239,244,.55) !important;
  background:
    linear-gradient(145deg, rgba(103,81,116,.76), rgba(74,57,86,.72)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 5px 12px rgba(0,0,0,.08) !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card {
  border: 1px solid rgba(255,255,255,.065) !important;
  background: #121215 !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    inset 0 -1px rgba(0,0,0,.24),
    0 11px 24px rgba(0,0,0,.18) !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card:nth-child(4n + 1) {
  background:
    radial-gradient(circle at 84% 100%, rgba(91,54,101,.17), transparent 48%),
    #121215 !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card:nth-child(4n + 2) {
  background:
    radial-gradient(circle at 80% 102%, rgba(72,58,96,.16), transparent 48%),
    #121215 !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card:nth-child(4n + 3) {
  background:
    radial-gradient(circle at 82% 104%, rgba(47,60,99,.14), transparent 47%),
    #121215 !important;
}

#detailOverlay[data-page-layout="task"] .royal-task-list .jb-task-card:nth-child(4n) {
  background:
    radial-gradient(circle at 84% 103%, rgba(91,48,72,.13), transparent 47%),
    #121215 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .top_box {
  min-height: 76px !important;
  border-bottom: 1px solid rgba(255,255,255,.026) !important;
  background:
    radial-gradient(circle at 10% -20%, rgba(255,255,255,.028), transparent 43%),
    linear-gradient(180deg, rgba(19,19,22,.98), rgba(17,17,20,.96)) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .left_box {
  gap: 13px !important;
  margin-left: 18px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .pic,
#detailOverlay[data-page-layout="task"] .jb-task-card .pic img {
  width: 44px !important;
  height: 44px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .pic {
  flex-basis: 44px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .pic img {
  image-rendering: auto !important;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.20)) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .title {
  height: 27px !important;
  color: #f2f2f4 !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 27px !important;
  letter-spacing: .01em !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .des {
  color: #89888f !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 19px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_rule {
  top: 23px !important;
  right: 17px !important;
  width: 24px !important;
  height: 24px !important;
  opacity: .78 !important;
  background-size: 24px 24px !important;
  filter: grayscale(.2) brightness(1.13) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .bottom_box,
#detailOverlay[data-page-layout="task"] .jb-task-card .process,
#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box {
  background:
    linear-gradient(180deg, rgba(48,39,52,.74), rgba(37,29,42,.84)) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .bottom_box {
  min-height: 38px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  border-top: 0 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .checked_icon,
#detailOverlay[data-page-layout="task"] .jb-task-card .checked_icon.active {
  background:
    linear-gradient(145deg, #8c8a94, #64636c) !important;
  color: #dedee2 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .txt {
  background: transparent !important;
  color: #aaa8af !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .u-line-progress {
  height: 21px !important;
  background:
    linear-gradient(180deg, rgba(139,135,151,.42), rgba(102,97,114,.36)) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.20),
    inset 0 1px rgba(255,255,255,.035) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .u-line-progress__line {
  background: linear-gradient(90deg, #d89f00, #ffc916) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .u-line-progress > span {
  color: #f7f7f8 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process {
  height: 44px !important;
  padding-top: 2px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_list {
  height: 42px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .button_left,
#detailOverlay[data-page-layout="task"] .jb-task-card .button_right {
  border: 1px solid rgba(255,255,255,.055) !important;
  background:
    linear-gradient(145deg, rgba(87,78,94,.86), rgba(57,50,64,.88)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 3px 8px rgba(0,0,0,.12) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .circle {
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 35% 28%, #ffd84a, #f7b90b 60%, #e79b00 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.30),
    0 2px 5px rgba(0,0,0,.16) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .circle > span {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(92,55,0,.58) !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_item.current .circle {
  border: 1px solid rgba(255,255,255,.48) !important;
  background:
    radial-gradient(circle at 35% 28%, #ffd84a, #f7b90b 60%, #e79b00 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.34),
    0 2px 6px rgba(0,0,0,.16) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .process_item.current .circle > span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .line {
  height: 1.5px !important;
  background: linear-gradient(90deg, #dda400, #f2b900) !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box {
  min-height: 45px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .circle1 {
  color: #ffc514 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .btn {
  color: rgba(241,239,244,.57) !important;
  font-size: 14px !important;
  font-weight: 450 !important;
}

#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .btn.ready,
#detailOverlay[data-page-layout="task"] .jb-task-card .btn_box .btn.active {
  border-color: rgba(255,202,38,.30) !important;
  color: #fff8df !important;
  background:
    linear-gradient(145deg, rgba(112,83,119,.92), rgba(75,55,86,.94)) !important;
}