/* V162: one presentation for the four pick-information dialogs. */
#root#root :is(.market-explanation-modal-v49, .odds-modal-v98,
  .quality-scale-modal-v83, .pick-reasoning-modal-v68) {
  box-sizing: border-box;
  padding: 24px !important;
}
#root#root .pick-reasoning-modal-v68 .pick-details-card.pick-details-card-v49 {
  padding: 0 !important;
  margin: 0 !important;
}

/* The actual header gets the separator; reasoning keeps its actions in that row. */
#root#root .market-explanation-modal-v49 .market-explanation-heading-v49,
#root#root .odds-modal-v98 .unified-modal-heading-v68,
#root#root .quality-scale-modal-v83 .quality-details-title-v14 {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-sizing: border-box;
  min-height: 0 !important;
  margin: 0 0 20px !important;
  padding: 0 54px 20px 0 !important;
  border-bottom: 1px solid #2b3e50 !important;
}
#root#root .pick-reasoning-modal-v68 .pick-details-top-v49 {
  align-items: center !important;
  margin: 0 !important;
  padding: 0 54px 20px 0 !important;
  border-bottom: 1px solid #2b3e50 !important;
}
#root#root .pick-reasoning-modal-v68 .pick-details-heading-v49 {
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#root#root :is(.market-explanation-modal-v49, .odds-modal-v98,
  .quality-scale-modal-v83, .pick-reasoning-modal-v68) .modal-heading-icon-v68 {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border: 1px solid #4c7c2d !important;
  border-radius: 13px !important;
  color: #91ff00 !important;
  background: #142414 !important;
  box-shadow: none !important;
}
#root#root :is(.market-explanation-modal-v49, .odds-modal-v98,
  .quality-scale-modal-v83, .pick-reasoning-modal-v68) .modal-heading-icon-v68 > svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}
#root#root :is(.market-explanation-modal-v49, .odds-modal-v98,
  .quality-scale-modal-v83, .pick-reasoning-modal-v68) > .quality-modal-close-v15 {
  box-sizing: border-box;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 11px !important;
}

/* Exactly one 20 px gap after the header, without stacked margin and padding. */
#root#root .market-explanation-modal-v49 .market-definition-v49 {
  margin-top: 0 !important;
  padding: 0 0 20px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #2b3e50 !important;
}
#root#root .quality-scale-modal-v83 .quality-scale-v14 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#root#root .pick-reasoning-modal-v68 .pick-details-grid-v49 {
  margin-top: 20px !important;
}
#root#root .market-explanation-modal-v49 .market-explanation-note-v49,
#root#root .quality-scale-modal-v83 .quality-scale-note-v83 {
  margin: 20px 0 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid #2b3e50 !important;
}

/* Both reasoning actions have identical text, icons, colors and dimensions. */
#root#root#root#root .pick-reasoning-modal-v68 .pick-details-actions-v135 > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  gap: 8px !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid #334b60 !important;
  border-radius: 11px !important;
  color: #dce6f2 !important;
  background: #0d1925 !important;
  font: 700 14px/1.2 Arial, Helvetica, sans-serif !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
#root#root#root#root .pick-reasoning-modal-v68 .pick-details-actions-v135 > button > span {
  color: inherit !important;
  font: inherit !important;
}
#root#root#root#root .pick-reasoning-modal-v68 .pick-details-actions-v135 > button > svg {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
}
@media (hover: hover) and (pointer: fine) {
  #root#root#root#root .pick-reasoning-modal-v68 .pick-details-actions-v135 > button:hover {
    color: #dce6f2 !important;
    background: #17212c !important;
    border-color: #3b4d60 !important;
  }
}
@media (hover: none), (pointer: coarse) {
  #root#root#root#root .pick-reasoning-modal-v68 .pick-details-actions-v135 > button:active {
    background: #17212c !important;
    border-color: #3b4d60 !important;
  }
}

/* The marker follows its score range instead of showing green for every score. */
#root#root .quality-scale-modal-v83 .quality-scale-v14 > .active.low > em {
  color: #2b1015 !important;
  background: #ff8b98 !important;
}
#root#root .quality-scale-modal-v83 .quality-scale-v14 > .active.medium > em {
  color: #261807 !important;
  background: #f3b85f !important;
}
#root#root .quality-scale-modal-v83 .quality-scale-v14 > .active.good {
  border-color: #6caf3573 !important;
  background: #91ff000d !important;
}
#root#root .quality-scale-modal-v83 .quality-scale-v14 > .active.good > em {
  color: #07100a !important;
  background: #91ff00 !important;
}

@media (max-width: 760px) {
  /* Only the title reserves room for X; both actions fill the row below. */
  #root#root .pick-reasoning-modal-v68 .pick-details-top-v49 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding-right: 0 !important;
  }
  #root#root .pick-reasoning-modal-v68 .pick-details-heading-v49 {
    padding-right: 54px !important;
  }
}